🌟 Section 2: Frontend & Backend Basic

Section2에서 배운 것

Section2에서는 1주차 부터 객체지향 프로그래밍과 자료구조와 알고리즘, JS/Node 비동기, HTTP 네트워크 기초와 실습, React 데이터 흐름의 이해와 비동기 요청처리, 웹 서버 기초, React 컴포넌트 디자인(styled component, storybook 소개), React 상태관리(Redux), 클라이언트 빌드와 배포(Vercel) 등을 배웠다.

4주간 제출한 과제들

• beesbeesbees
  ES6 문법인 클래스를 활용해 객체지향 프로그래밍을 구현하고 4가지 특징(캡슐화, 추상화, 상속, 다형성)을 배웠다

• stringifyJSON
  데이터를 주고받는 데 사용되는 JSON객체를 만드는 JSON.stringify()와 자바스크립트 객체로 변환하는 JSON.parse()를 직접 구현했다

• Tree-UI
  자바스크립트를 이용해서 깊이가 있는 메뉴판을 구현했다. 반복문과 createElement, append등의 메소드를 사용했고, 재귀함수를 활용해 메뉴와 서브메뉴, 그 안의 서브메뉴를 만들었다.

• Callback, Async, Promise (1)
  비동기를 구현하기 위한 세가지 방법과 장단점 이해했다.

• Callback, Async, Promise (2)
  node js의 fs 모듈을 이용해 파일을 열고 저장하고 수정할 수 있고, promise를 리턴시켜 원하는 정보로 만들 수 있다.

• Callback, Async, Promise (3)
  fetch를 사용해 서버에 저장된 원하는 데이터를 불러올 수 있고, promise chaining, promise.all, asyn await 사용법을 익혔다.

• statesairline client(1), statesairline client(2)
  부모 컴포넌트에 만들어진 상태를 하위 컴포넌트의 이벤트에 의해 변경시키기 위한 상태 끌어올리기와 상태가 변경될때 fetch를 통해 서버에서 데이터를 가져오는 것은 리액트 컴포넌트와 별개로 작동하므로 이러한 side effect를 해결하기 위한 useEffect를 사용했다.

• mini node server
  upper 버튼을 눌렀을때 post 요청을 보내고 응답으로 받아온 대문자로 바뀐 문자열을 화면에 보여주고, lower 버튼을 눌렀을도 마찬가지 과정을 통해 소문자 문자열을 화면에 보여준다.

• statesairline server
  express 프레임워크를 이용해 서버를 만들고, 로컬호스트와 연결한다. states airline 클라이언트의 요청에 따라 항공편과 예약 데이터를 조회, 생성, 수정, 삭제하는 기능을 구현한다.

• custom-component
  CDD(Component Driven Development)와 storybook 개념을 살펴보고, css-in-js 관련 리액트 라이브러리 중 하나인 styled-component를 사용하여 modal, toggle, tab, tag, autocomplete, clickToEdit 컴포넌트 등을 구현했다

  • CDD를 활용해 UI를 구축한 사이트들
    https://bbc.github.io/psammead/?path=/story/components-brand--without-brand-link
    https://uikit.wfp.org/docs/index.html?path=/docs/templates-browser-warning-outdated--error-dialog
    https://polaris.shopify.com/components/component-status#navigation
    https://socarframe.socar.kr/8bb3aba4a/p/8246da-button
    https://design.socar.kr/logo.html
    

• cmarket (1)
  SPA로 구현된 온라인 쇼핑몰(상품목록 페이지, 장바구니 페이지)에서 버튼을 눌러 기존에 장바구니에 담겨있지 않은 상품이라면 장바구니 담기 버튼을 클릭했을때 최상위 컴포넌트의 상품 종류 상태를 +1로 업데이트한다. 장바구니 페이지에서는 input 창을 통해 상품의 수량을 조절하고, 삭제 버튼을 눌러 장바구니에서 제거한다.수량에 따라 장바구니 페이지 우측의 주문 계산 컴포넌트 또한 변경된다.
  

• cmarket (1)
  기존에는 props로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달했다면, 리덕스를 사용해 상태를 효율적으로 관리하는 것으로 수정했다.

section 2를 마치고 느낀 점

토이..자료구조..🤢

section2부터는 매주 아침 9시부터 한시간 동안 토이 문제를 풀었고, 자료구조, 알고리즘, 백엔드 지식 등 정말 새롭고 어려운 내용들을 많이 배웠다.

토이문제는 푼 것은 거의 없고 레퍼런스 코드를 보고도 이해하지 못하는 경우가 많았다. '내가 이걸 혼자 푸는 날이 올까?'라는 생각이 들곤 했다. 결국 이번 섹션 내내 내 힘으로 토이를 푼 것은 거의 없었다.

어떻게 해야하나 싶을 때는 그냥 코드를 멍하니 쳐다보고 있기 보다는 손으로 쓰거나 디버거를 돌려보려고 했고, 주석을 달면서 한 줄씩 분석했다. 그래도 잘 모르겠는 문제는 넘어가고 주말에 다시 봤다.

백엔드...?🤔

프론트만 배웠을 때는 프론트 개발자가 되어야겠다고 생각했는데, 백엔드를 배우다보니, 생소하고 어렵지만 의외로 재밌었다.

데이터를 요청하면 응답하면서 데이터를 전달하고, 그 내부 구현을 내가 직접한다는 것이 신기했다. HTTP를 배울때는 강의 자료만으로는 부족해서 생활코딩, 책, 공식문서 등을 많이 참고했다. 나는 책으로 보는 게 편해서 책을 구매했는데, 앞으로는 공식문서를 읽는 연습을 해야겠다.

HA2...💬

HA2를 어제, 오늘 치렀다. 코플릿형 3문제와 과제형 1문제가 나왔다. 코플릿형은 3문제 중에 2문제를 풀었고, 난이도가 예상만큼 어렵지는 않았다. 그런데 한 문제가 끝까지 안 풀려서 마지막 테스트 케이스 하나를 통과 못한채로 제출했다.

과제형은 기존 스프린트와 외부 강의, 그리고 함께 페어했던 동료들과 함께 준비했다. 그래서 오늘 잘 풀 수 있을거라고 생각했는데 생각보다 많이 헤맸다. 여전히 props와 state 사용이 익숙하지 않은 것 같다. 이 부분은 section 3를 시작하기 전에 외부 강의를 보면서 클론코딩을 해보면서 보충해야겠다.

과제형을 풀면서 에러가 정말 많이 났는데, 그때 너무 자신감을 잃었던 것 같다. 에러를 피할 게 아니라 에러가 났을때 어떤 문제인지 파악하고 해결하려고 했어야 했는데 그러지 못한 것 같다. 그래서 앞으로는 에러가 발생했을때 어떤 에러였고 어떻게 해결했는지도 간단히 블로깅 해봐야겠다.

section 3를 시작하는 마음가짐

지난 section 1 회고 글을 보니,,,
✅ 매일은 아니더라도 새로 배운 개념에 대해서는 꾸준히 기록할 것
❎ 1일 1 알고리즘 풀기
✅ 주말에 복습하는 시간 갖기
❎ 독서하기

를 하겠다고 글을 썼었다. 그런데 실제로 한 건 블로깅과 주말복습 뿐인 것 같다. 프로그래머스 알고리즘도 꾸준히 풀고 싶었는데 토이 하느라고 미뤄버렸다. 알고리즘은 영원한 숙제인만큼 힘들더라도 해봐야겠다!

🔅 토이는 당일날 레퍼런스 코드 분석하기 (그래도 모르겠으면 다음날 또보기)
🔅 1일 1 프로그래머스
🔅 TIL 시작!
🔅 절대 긍정적으로 생각하기! 남들과 비교 절대 ❌
🔅 오전 7시 기상!

프로젝트까지 정말 딱 한달남았다.. 처음에는 6개월이 길다 싶었는데 지금은 '벌써 section2가 끝났다고?'싶다. 한달 빡세게 한다고 안죽으니까 진짜 이번 section3는 최고로 열심히 해보자! 부디 section 3 마치고 웃으면서 회고록을 쓸 수 있길!!