[FE 스터디] Week #1

프로그래머스에서 주관하는 FE 취업 생존 키트 스터디를 신청했다
매주 토요일마다 줌을 통해서 대면 수업을 하고 총 4주동안 진행하는 스터디이다 내가 신청한 기수는 [ 4기 ] 이며
이전 기수분이 작성하신 후기를 보고 더 맘에 들었고  더 얻어가는게 많아야겠다고 생각했다

https://programmers.co.kr/learn/courses/12442

[취업스터디/4기] FE 취업 생존 키트 : 채용 과제를 풀어보며 JS 역량 기르기

---

첫 주에 관한 내용은 크게 선언형 프로그래밍 , 반응형 웹 , 다크 모드 대응에 관한 내용이였다

선언형 프로그래밍

규칙에 기반하여 input과 output에 집중하여 프로그래밍하는 방법으로,
프로그램이 어떤 방법으로 (How) 해야 하는지 나타내기 보다 무엇과(What) 같은지 설명하는 경우에 선언형이라고 한다.

특징

• how to do things(x), What to do(O)
• Statements(X), Expressions(O)
• 변수를 정의하고 변경 (X),인풋에 따른 결과값(O) [함수형 프로그래밍]

 

요약

• 사용자 입장에서는 함수를 사용함에 있어서 Input과 Output에만 집중하면 된다.
• 내부 함수에서 어떤 일이 일어나는지에 대해서는 신경을 덜 써도 된다.

선언형 프로그래밍 방식을 사용하면 UI개발을 할때 훨씬 더 수월하게 작성할 수 있도록 해주며 React등의 프레임워크가 무슨 일을 하는지 대략적으로 파악하기 위해 선언형 프로그래밍 방식이 무엇인지 아는 것이 중요하다.

 

반응형 웹

디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말한다, 요즘은 필수적으로 요구된다.

반응형 웹을 구현하는 방법에는 다음과 같은 방법들이 있으며,

1. 미디어 쿼리 (media Query)
2. 유동형 그리드 (Fluid Grid)
3. 유동형 레이아웃 (Liquid Layouts)

스터디 과정에서 반응형 웹 작성시 중요하게 생각하는 것은 다음과 같다

1. 모바일 퍼스트
   - 모바일 디바이스의 리소스가 더 적기 때문에 모바일에서 최소한의 source를 해석하도록 하는것이 퍼포먼스에 도움이 된다.
   
   
2. media query 사용하기
   -window width에 따라서 responsive한 css 추가 (max-width , min-width 등)
   
   
3. container query 맛보기
   -container width에 따라서 responsive한 css 추가 (아직 chrome 최신 버전에서만 지원하기 때문에 미리 살펴보는 정도)

 

다크 모드 대응

사용자의 선호도에 따라 웹 페이지의 색상등 디자인을 두가지로 선택할 수 있도록 하는것, 보통 "라이트모드","다크모드"라 한다, 요즘은 대부분의 웹사이트에서 다음 기능을 지원하는 추세

일일 코로나 확진자 수를 보여주는 "코로나 라이브" 출처 :https://corona-live.com/

 

다크 모드 대응하는 여러 방법들

1. How to toggle Theme
   
   - DOM property 활용하기 (body dataset 태그)  (튜터님은 이 방식을 더 선호한다고 하셨다)
   - light theme, dark theme 두가지 stylesheet 활용하기
   
   
2. CSS Varialbes 활용
   -css variables를 활용하는 것이 따로 theme 별 stylesheet를 유지하는 것보다 load해야할 코드가 적게 만들 수 있음.
3. 더 좋은 UX를 이루기 위한 방법
   - 시스템 preference 기반으로 초기값 설정
   - localStorage를 활용한 선호 초기값 저장

---

첫 주의 수업 내용에 대한 요약은 여기까지이며,

첫 주 과제는 선언형 프로그래밍 방식을 통한 VanilaJS를 이용한 TodoList 만들기이다.