TIL #1

시작하기 전에...

사전캠프는 저번주부터 참여했지만 강의도 수강신청이 완료되지 않은 상태였고 또 개인적인 일들로 바빠서 과제는 거의 하지 못했다

그래서 이번주차부터라도 조금씩 따라보자라는 마인드로 첫번째 TIL을 작성해본다

일단 오늘은 [React 트랙] 프론트엔드 기초 1주차 강의를 다 듣고 HTML, JS 문법 복습 시간을 가졌다.

전공자이긴 하지만 4년 세월이 무색할 정도로 처음에는 기억이 전혀 안났지만 금방 이해하는데 문제는 없었다. (1년만 코딩을 놔도 이렇게 됩니다ㅎㅎ)

프론트엔드 기초 1주차 강의 요약

HTML, CSS, JavsScript

웹페이지에서 프로그래머가 웹페이지를 꾸미거나 구현하는데 있어 가장 많이 사용하는 언어 3가지이지만, 각각의 역할은 조금씩 나누어져 있다.

• HTML (Hypertext Markup Language)

  웹페이지의 뼈대를 구분지어주는 언어로, 웹페이지의 구조를 알려주며 크게 head와 body로 나뉜다.

• CSS (Cascading Style Sheets)

  웹페이지의 꾸미기를 담당하는 언어로, 여러 style이 모여 웹페이지를 보기 좋게 꾸며준다. HTML은 붓을 들어 얼굴과 몸의 위치를 대강 그릴 수 있는 언어라면 CSS는 붓으로 눈코입을 다른 스타일들로 잘 그릴 수 있는 역할을 해준다.

• JavaScript

  마지막으로 웹페이지에서 전환효과나 그림이 움직이는 등의 움직임을 담당하는 것이 JavaScript이다. 이쪽은 HTML/CSS와는 달리 프로그램 언어이며 사람과 기계가 서로 소통하게끔 해주는 언어이다. 추가로 HTML/CSS는 프로그래밍 언어가 아닌 구조와 스타일을 나타내는 마크업 언어와 스타일 시트 언어이다.
  
  흔히 파워포인트의 애니메이션 효과와 같은 움직임을 구현하며 코드내에서는 웹페이지가 어떻게 구동해야하는지 정확히 적을 수 있는 코드이기도 하다.

JavaScript 문법

JS는 console에서 작성한 코드를 출력할 수 있으며 이는 웹브라우저 개발자 도구를 통해 간단히 확인이 가능하다.

VsCode와 콘솔을 통해 아래 4가지 문법을 복습해보았다
1. 변수(variable) & 연산
2. 리스트
3. 딕셔너리
4. 함수, 반복문, 조건문

1. 변수 & 연산

   변수를 세팅할 때 쓰는 명령어는 let이며 간단히 let a = 1이런식으로 숫자와 문자열 모두 저장이 가능하다.
   
   숫자끼리의 연산은 사칙연산의 결과로 이어지고 문자열을 더하거나 빼는 경우 새로운 문자열이 생기게 된다.

2. 리스트 []

   여러 데이터를 저장할 때 쓰이는 list 혹은 array라고 불리는 데이터, let a_list = [] 혹은 let b_list = [1, 3, 6, 8]를 통해 정의할 수 있다. 한개의 데이터만 필요한 경우 index number값으로 불러올 수 있다. 데이터를 더하거나(push) 리스트의 길이를 알 수 있는(.length) 명령어들이 있다

3. 딕셔너리(객체) {}

   항상 key와 value로 같이 보관되는 데이터들의 모음. 마찬가지로 let a_dict = {} 혹은 let b_dict = {'name': 'Bob', 'age': 27}로 정의할 수 있다. key를 통해 value를 불러올 수 있다

4. 함수, 반복문, 조건문

   함수는 프로그래밍에서 반복되는 작업을 줄여주는 편리한 기능이다. 모든 함수가 반복작업을 줄여주기 위한거라고 생각하면 편하다
   
   기본 함수인 function, 반복문인 for/forEach, 그리고 조건문인 if(else)가 있다.

마치며...

이처럼 1주차 강의에서는 위의 세 언어의 차이점을 알아보고 HTML로 만든 간단한 로그인 페이지와 JavaScript의 문법에 대해 정리하는 시간을 가졌다.

개인적으로 졸업과제로 React Native를 사용했던지라 복습하면서 반가움과 동시에 졸업과제가 떠올라버렸다... 하핳 이번에는 더 잘해봐야지