주노 님의 블로그

20240702 사전캠프 2일차 TIL 본문

TIL

20240702 사전캠프 2일차 TIL

juno0432 2024. 7. 2. 18:22

사전캠프 2일차 내용 간단요약

  • 14:00 ~ 15:00 : 알고리즘 공부 (1 ~ 12)
  • 15:00 ~ 16:00 : 데일리 과제
    1주차 수요일 ~ 목요일 : 개발 용어 정리
  • 16:00 ~ 18:00 : 강의
    웹 개발 종합반 2주차 : 자바스크립트, 제이쿼리

알고리즘공부

더보기

day 1 ~ 12까지 풀어봤다.

데일리 1주차 수요일 ~ 목요일 과제 - 개발 용어 정리 (오늘부터 개발자)

 

더보기

오늘부터 개발자 책을 읽으며 정리했다

책을 주신 이유가 있었고먼..

 

  • HTML (HyperText Markup Language)
    웹 페이지를 만들기 위한 기본적인 언어, 웹 페이지의 뼈대이다, 제목 내용 등을 어떻게 배치할지 구조를 잡는다.
  • CSS (Cascading Style Sheets)
    웹 페이지의 디자인을 담당하는 언어이다 HTML로 만든 구조에 색 글꼴 크기 효과등을 입혀준다.
  • Backend
    사용자가 보지 못하는 웹 사이트 뒷부분이다. 데이터를 저장 처리 가공하는일을 한다.
    EX) 서버, 데이터베이스 등.
  • Frontend
    사용자가 상호작용하는 웹의 앞부분이다.
    EX) HTML, CSS, JavaScript 등.
  • DataBase (데이터베이스)
    정보를 체계적으로 저장하고 관리하는 시스템이다.
    EX) MySQL, SQLite, MongoDB, Firebas 등.
  • SQL (Structured Query Language)
    데이터베이스에서 데이터를 저장하고 불러오는데 사용하는 언어로, 데이터베이스에 질의 를 던져서 원하는 정보를 얻거나, 수정, 삭제할수 있다.
    EX) Select * from members
  • 버그 (Bug)
    프로그램이나 소스코드가 잘못 동작하는 현상을 말한다.
  • 에러 (Error)
    프로그램이 실행 될 때 발생하는 문제를 뜻한다. 에러가 발생하면 프로그램이 멈추거나 잘못된 결과를 낸다.
  • 클라이언트 (Client)
    웹 사이트나 서버에 요청을 보내는 쪽이며, 사용자라고 생각하면 된다.
  • API (Application Programming Interface)
    웹 기준에서는 프론트엔드와 백엔드가 서로 통신을 하기 위한 인터페이스를 정의한 것이라고 생각하면 된다.
    EX) Rest Api
  • 예외처리 (Exception Handling)
    프로그램에서 에러가 발생했을 때 이를 처리하는 방법이다, 에러가 나더라도 처리하는 방법의 절차에 따라 프로그램이 멈추지 않고 계속 실행되게 해준다.
    EX) try ~ catch
  • 라이브러리 (Library)
    프레임 워크 안에서 미리 만들어진 유용한 코드 모음이다. 필요한 기능을 쉽게 가져다 쓸 수 있게 한다.
  • 프레임워크 (Framework)
    프로그램을 할때 기본 뼈대를 제공해주는 도구이다, 라이브러리보다는 큰 개념으로 개발을 편리하게 도와준다.
    EX) 자바 - 스프링, 파이썬 - 장고, 자바스크립트 - 리액트 등...
  • 컴파일 (Compile)
    프로그래밍 언어로 작성된 코드를 컴퓨터가 이해할 수 있는 언어로 바꾸는 과정이에요. 컴파일을 거쳐야 프로그램이 실행될 수 있습니다.
    EX) 컴파일 언어 : C, C++, JAVA등
  • 인터프리트 (Interpret)
    코드를 한 줄씩 읽어가며 바로바로 실행하는 방식이에요. 컴파일과 달리, 중간에 바로바로 실행 결과를 확인할 수 있어요.
    EX) PYTHON 등.
  • JSON (JavaScript Object Notation)
    데이터를 주고 받는 형태이다, 프론트엔드에서 요청을 보낼때 백엔드는 받아서 처리값을 프론트엔드에 보내줘야한다. 이럴때 JSON에서 키와 값 쌍을 사용하여데이터를 전송하면, 데이터가 넘어오는 도중에 정보에 문제가 생기더라도 식별 할 수 있다.

강의 (웹 개발 종합반 2주차) - 자바 스크립트, 제이쿼리

더보기

1. Javascript에 대해, 기초문법 (2주차 5강 ~ 9강)

  • 자바스크립트란? : 웹 개발에 사용되는 언어, 웹 페이지의 동적 콘텐츠를 작성하는데 사용된다.
  • 자바스크립트 사용법
    <script>
	function hey() {
		console.log('안녕하세요')
	}
</script>

<body>
	<button onclick="hey()">영화 기록하기</button>
</body>

    버튼을 클릭하면 console에 안녕하세요가 찍히게 된다.
    console은 f12(개발자도구)를 누르면 볼 수 있다.
     
  • 자바스크립트의 필수는 5가지가 있는데, 변수 자료형 조건문 반복문 함수 가 있다
    • 변수 - 데이터를 저장하기 위해 사용되며, var, let, const등을 사용하여 변수를 선언 할 수 있다
      let a = '안'
let b = '녕'
console.log (a)
console.log (b)
아래도 가능
console.log (a+b)
       
      var - 함수 스코프를 가지며, 재선언이 가능하다
      let - 블록 스코프를 가지며, 재선언이 불가능하지만, 재할당은 가능하다.
      const - 블록 스코프를 가지며, 재선언, 재할당이 불가능하다, 상수값을 저장할때 사용된다.
      함수 스코프 : 변수가 선언된 함수(function ~(){}) 내에서만 접근 가능하다
      function myFunction() {
    var x = 10; // 함수 스코프
    if (true) {
        var y = 20; // 함수 스코프
    }
    console.log(x); // 10
    console.log(y); // 20
}

myFunction();
console.log(x); // 안됨


      블록 스코프? : 변수가 선언된 블록 내에서만 접근이 가능하다.
      function myFunction() {
    if (true) {
        let x = 10; // 블록 스코프
        const y = 20; // 블록 스코프
        console.log(x); // 10
        console.log(y); // 20
    }
    console.log(x); //안됨
    console.log(y); //안됨
}

myFunction();




    • 자료형 - 변수에 저장되는 데이터 종류
      리스트(배열) - 여러개의 데이터를 하나의 변수에 순차적으로 저장한다.
      let['사과', '배', '수박']
console.log(a[0]) //사과


      딕셔너리(객체) - 키와 값 쌍으로 데이터를 저장할 수 있는 자료형이다. 키를 통해 값에 접근 가능하다.
      let person = {'name' : 'bob', 'age' : 30, 'height' : 180}
let name = person['name']
let age = person['age']
console.log(person) //{'name' : 'bob', 'age' : 30, 'height' : 180}
console.log(person['name']) //bob
console.log(name, age)//bob 30


    • 조건문 - 조건에 따라 다른 동작을 수행하도록 만들어진 구조
      if else구문
            let age = 15;
      if (age < 20) {
        console.log("청소년입니다.");
      } else {
        console.log("성인입니다.");
      }
      age는 15로 선언하였다.
      조건문에 age가 20보다 작다면 청소년입니다를
      그 외이면 성인입니다를 콘솔로 찍게된다
    • 반복문 - 특정 코드를 여러번 실행할 때 쓰이게 된다
      let ages = [15, 30, 28, 7, 40, 13];

      ages.forEach((element) => {
        console.log(element);
      });
      ages에 속해있는 요소(element)를 순회하며 콘솔로 찍는 코드이다.

    • 반복문 + 조건문
            let ages = [15, 30, 28, 7, 40, 13];

      ages.forEach((element) => {
        if (element < 20) {
          console.log("청소년입니다");
        } else {
          console.log("성인입니다");
        }
      });
      ages를 순회하며 요소의 값을 조건문으로 분기하여 나타내는 코드이다.


    • 함수 - 특정 작업을 싱행하는 코드로 function 키워드를 사용하여 정의한다.
      function hey() {
    alert('안녕!');
}
// 함수 실행 조건
<button onclick="hey()" type="button" class="btn btn-outline-light">
    영화 기록하기
</button>
      alert은 화면에 경고창을 뜨게 한다
      function으로 함수정의를 하며 html에서 영화 기록하기 버튼을 클릭 시(onclick) hey()함수가 실행되게 된다.

 

 

 

2. JQuery(2주차 10강 ~ 11강)

  • 제이쿼리란 ? 자바스크립트를 더 쉽게 사용하게 해주는 라이브러리이다
  • 메서드
    .empty() : 선택한 요소 내부의 모든 요소의 내용을 제거한다.
    .append() :  선택한 요소 내부 끝에 새로운 내용을 추가한다.
    function checkResult() {
    let fruits = ["사과", "배", "감", "귤", "수박"];
    $("#q1").empty(); //id가 q1인 내부의 요소를 비운다

    let temp_html = `<p>감자</p>`;
    $("#q1").append(temp_html); //id가 q1인 요소에 temp_html을 삽입한다
    //결과 감자

    let a = fruits[0]; // 사과
    let temp_html2 = `<p>${a}</p>`; //a 변수를 가져온다
    $("#q1").append(temp_html2);//id가 q1인 요소에 temp_html2를 삽입한다

    fruits.forEach((element) => {
        let temp_html3 = `<p>${element}</p>`;
        $("#q1").append(temp_html3);
    }); //fruits 배열을 순회하여 <p>요소로 감싸서 q1에 추가

    let people = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
    ];//리스트 딕셔너리.
    $("#q2").empty();

    people.forEach((element) => {
        let temp_html4 = `<p>${element.name}는 ${element.age}입니다.</p>`;
        $("#q2").append(temp_html4);
    });//리스트요소.딕셔너리요소로 호출하여야 한다.
}


 

 

 

 

 

 

 

 

 

 

 

 

 

'TIL' 카테고리의 다른 글

20240708 사전캠프 6일차 TIL  (0) 2024.07.08
20240705 사전캠프 5일차 TIL  (0) 2024.07.05
20240704 사전캠프 4일차 TIL  (1) 2024.07.04
20240703 사전캠프 3일차 TIL  (0) 2024.07.03
20240701 사전캠프 1일차 TIL (데일리 1일차, 강의)  (0) 2024.07.01
'TIL' Related Articles more