[사전캠프 Day3] HTML, CSS, JS

프론트엔드(frontend): 사용자가 보는 부분을 만드는 영역 (클라이언트)

UI 구현

동적 웹 기능 구현

API 요청 및 데이터 처리

사용자 경험 개선

 

 

백엔드(backend): 사용자가 봐야할 부분을 제공해주는 영역. (서버/데이터)

웹 서버 로직 구현

API 구현 및 데이터 반환

DB 구축

 

[API(Application Programming Interface)를 활용해서 클라이언트와 서버는 서로 데이터를 주고 받음. ]

 

HTML, CSS, JS로 화면을 만드는데, 이 서비스가 커질수록 느려지고 복잡해진다. 그래서 더 빠르고 효율적인 기술을 활용하기 위해 사용하는 자바스크립트 라이브러리 중에 하나가 React 이다.

 

웹개발을 위해 발전된 프론트엔드 기술들

1세대: HTML/CSS, JS, DOM, Event  |   2세대: jQuery  |  3세대: Angular(Framework), Vue(Framework), React(Library)

[프레임워크는 다른 사람들이 만들어놓은 틀 속으로 내가 들어가는 것, 라이브러리는 내 작업환경에 다른 사람들이 만든 코드(기능)을 가져와 사용하는 것]

 

VScode 사용시:

1. 자동저장 기능 활성화.(파일 section)

2. 추천 확장 프로그램: open in browser, HTML End Tag Labels, indent-rainbow, Bracket Pair Color DLW, Python, autopep8, SQLite, Flask-snippets

 

[참고: 화면 분활 키는 '윈도우 +']

HTML: 웹페이지의 뼈대를 만들 때 사용

head: 페이지 속성(화면에 보이지 않는 것들)

body: 실제로 화면에 보이는 내용들 구현

 

CSS: Cascading Style Sheet, 디자인적 요소를 위해 사용

 

JS: 웹페이지에 동적인 역할/기능을 수행하기 위해 사용하는 프로그래밍 언어

*쉽게 정리하는 JS 의 역할*: HTML로 작성한 태그 내용을 쉽게 바꿈. 어떠한 이벤트(클릭 등) 발생 시 동작/기능 하게 함.

 

• let으로 변수 선언
• 리스트 [] : 순서있는 값 넣을때 (배열같은... index 0부터 시작)
• 객체(딕셔너리) {}: key-value 값. key는 당연히 중복안됨.(문자열) 

 

list 안에 객체를 하나의 요소로 넣어서 만든 코드 예시

      names = [

        { name: "bob", age: 13 },

        { name: "song", age: 23 },

        { name: "lab", age: 14 },

        { name: "jeb", age: 13 },

      ];

      console.log(names[0]["name"]); //bob

      console.log(names[1]["age"]); //23

      new_name = { name: "jn", age: 24 };

      names.push(new_name);

      console.log(typeof names.length); //number

      console.log(names[names.length - 1]["name"]); //jn

 

• 함수 function

split함수 이용 예시

 let test = "hello, my name is jw";

      let part1 = test.split(", my ");

      console.log(part1[0]);

      console.log(part1[1]);

 

// 함수 만들기

      function minus(num1, num2) {

        return num1 - num2;

      }

      console.log(minus(4, 5));

• 반복문 for

for, forEach 이용 예시

      //for loop

      for (let index = 0; index < 10; index++) {

        console.log(index);

      }

      let numbers = ["1", "2", "3", "4"];

      //forEach

      numbers.forEach((el) => {

        console.log(el);

      });

 

 

오늘 1주차 프론트엔드 기초 강의를 다 수강했다. 내일은 1주차 웹개발 기초 강의를 수강할 것이다.