천오백명의 사람이 프리온보딩 프론트엔드 과정을 신청했다고 한다.
하지만 정작 수업에 들어온 인원은 600명이 안됐다.
하루에 세시간밖에 안되는데 커리큘럼이 굉장히 알차다.
주제도 다양하고 개발자로서 취업해보지 않은 내 입장에서 생각해본 적 없는 이야기들을 많이 해주셨다.
다만 보면서 아... 취업할 수 있을까?
하는 고민이 생겼다ㅠㅠ
얘기해주시는게 이해는 가는데 내가 그걸 할 수 있을까? 싶은 게 대부분이었다.
국비학원도 부트캠프도 다르지만 프리온보딩도 참 다르다.
리액트 쿼리가 궁금해서 프리온보딩 신청을 했었는데 생각과는 다르게 리액트쿼리는 찍먹이고 CRUD가 핵심이라고 하셨다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
읭 글쿠나... 난 CRUD 리액트쿼리로 하는법 알려주는줄,..
나도 웹서비스를 말하자면 CRUD라고 생각하기때문에 모 오히려 좋았다.
탄탄한 기초가 목표니까!!
시작은 쉽지만 입문의 수준은 지난 상태에서 더 나아가기가 힘든 것 같다.
그런 상태에서 프리온보딩 신청은 신의한수인 것 같다.
몇개월 단위로 전에 했던 주제가 돌아온다니까 취업이 되든 안되든 한바쿠 돌아봐야겠다.
어렵지만 그래도 방향성을 제시해주는 느낌이고 워낙 웹이 방대하다보니 처음 듣는 용어들도 많이 나오고...
어제도 headless 라는 개념을 처음 들었는데 너무 좋아보였다ㅋㅋㅋㅋ
오늘 당장 style파일을 분리했다.
스타일링이랑 기능이 분리가 되니까 일단 눈이 편하고 마우스 휠을 내리던 손도 편하다. 굿.
개발자 취업 과정에서 기술과제가 갖는 의미
채용이란?
프로듀스 101이 아니라
회사가 당면한 과제를 해결하는데적합한 능력을 가진 인재를 찾는 과정이다.
내가 당사에 필요한 인재라는 것을 어필하기 위해서는
논리적으로 자신의 견해를 밝힐 수 있어야 한다.
내가 짠 코드에 근거가 있어야 하고 이를 설명할 수 있어야 한다는 뜻.
근거는 벨로그가 아니라 공신력 있는 문서(mdn, github..)를 통해 확보하자.
공신력 있는 문서는 기본기를 다질 수 있게 할 것이다.
Todo 앱을 만들며 고려할 것들
-
localhost를 벗어나자
-
웹 프론트엔드는 입출력 인터페이스이다.
2-1. 상태관리
MVC, Observer Pattern, Flux, Container-Presenter등 상태 관리를 위한 패턴들이 있다.
상태는 화면에 변화를 일으키기때문에 성능 측면에서도 많은 고려가 필요하다.
그렇기에 state(제어컴포넌트)와 ref(비제어컴포넌트)를 구분해 다루어야 한다.
https://ko.reactjs.org/docs/uncontrolled-components.html2-2. 비동기, 캐싱
비동기는 정말 필요한 곳에만 써야한다. chaining되어 값이 pending되기 때문에...
2-3. 인증/인가
인증: 신원확인
인가: 권한확인
인증/인가는 웹 전반적인 곳에 걸쳐 쓰인다. 단일한 기능이 여러 지점에 걸쳐 나타날 때횡단 관심사(Cross Cutting Concern)이라고 부른다.2-4. 사용자 액션에 따른 피드백(UI/UX)
'삭제하시겠습니까?', '수정하시겠습니까?' 와 같은 것들.
로딩, 스켈레톤...
웹 접근성은 매출에 직결되는 요소이기 때문에 정말 중요하다. 탭키로 버튼으로 이동할 수 있는지, 스크린리더기로 읽히는지...select: https://so-so.dev/react/make-select/
dropdown: https://www.youtube.com/watch?v=pcMYcjtWwVI
2-5. 관심사의 분리
한번에 한가지 일만 하도록 한다.
낮은 결합도와 높은 응집도를 가질 수 있도록!
프론트엔드에서는 로직의 변경이 빈번하기 때문에 관심사를 분리하는 것이 중요하다.View Domain 로직 분리
View: 화면상에 표시하는 영역. image, form, button 등
Domain: 현실세계의 비즈니스 규칙. api 호출headless UI
https://headlessui.com/react/menu
클린 아키텍처
자주 변할 곳(UI, 라이브러리 등 세부사항), 자주변화할 일이 없는 개념을 계층으로 나누어 관리.
https://www.youtube.com/watch?v=g6Tg6_qpIVc&t=1867s의존성 역전 원칙
'유연성이 극대화된 시스템', 추상에 의존하고 구체에 의존하지 않는 시스템.
사전과제 피드백
과제 제출한 사람들 코드를 보고 피드백을 해주셨다.
내껀 없었지만 다른분들 코드 고치는 걸 보고 많은 것을 깨달았다.
어떤분은 와 진짜 대단하다 싶었고 어떤분은 와 내껀줄ㅋㅋㅋ싶기도 했다...
전반적으로 변수명의 중요성에 대해 강조하셨다.
코드를 가리고 변수명만 봐도 맥락을 알 수 있어야한다고 했음.
그때그때 생각나는대로 변수명을 지었던 나 머쓱...
- data, info 이런 변수명 쓰지 말자.
어떻게가 아니라무엇을하는지 드러나야한다.타입별 변수명에 대한 팁도 주셨다.
boolean: is-, has-, can-
function: get-, handle-, submit-
array: -s - 상태를 동기화하지 말것
https://kentcdodds.com/blog/dont-sync-state-derive-it
비동기 함수를 사용하는 모든 함수는 비동기가 되어야 한다.
명령형 프로그래밍
선언적인 코드: 무엇을 할 것인가
명령형 코드: 특정 동작을 어떻게 달성할 것인가
어떻게 할 것인지 서술하지 않고 목적에만 집중하는 코드(추상적)가 선언적 코드인 것 같다.
선언형 프로그래밍 관련 유튜브 링크
https://www.youtube.com/watch?v=r7M9B_dEbCI
https://www.youtube.com/watch?v=FvRtoViujGg
https://www.youtube.com/watch?v=edWbHp_k_9Y
https://jbee.io/react/error-declarative-handling-1/#table-of-contents
Suspense 컴포넌트: 비동기 버전 try-catch
https://jbee.io/react/error-declarative-handling-1/#usage
우발적 중복(의도하지 않은 중복)
하나의 모듈은 하나의 액터에 대해서만 책임져야한다.
코드가 당장은 동일해보일지라도 액터가 다른 경우에 억지로 합칠 필요 없다.
두 코드가 다른 방향으로 발전해나갈 것이기 때문.
- 데이터를 관리하는 형태
form의 경우 각자 관리하지 않고 every로 전부 체크할 수 있다.
const form = new FormData();
const isFormValid = [...form.entries()].every(([key, value]) =>
validator(value))