[POBTIL] 14일차

1번

• 라우트안에 레이아웃이 있는데, 큰 프로젝트의 경우 30,40페이지 되는데, 겉에 감싸고, 안에서 바꾸는 레이아웃에 변칙을 주식으로 해야함.
• 기본 react의 lazy 기능 말고 react-loadable도 좋음 코드스플리팅이랑 다된다니 참고!
• useMemo쓰고 이렇게 하는게 가독성이 좋음.
  
• 프로미스라서 then 붙여주는거 추천
  
• 리액트쿼리 자체에 페이지네이션있음
• 리턴안에 맵같은거 넣지마셈 가독성 안좋음 렌더단은 최소한 간단하게_ useMemo, useCallback 사실 쓰나안쓰나 비슷한데, 나중에 직접 코딩할때나 뎁쓰나 덤으로 들어감
  

• 삼항연산자 쓰지말기 => 가독성! => 수정하기힘듬

  
• 삼천줄 넘어가면 십분걸릴거, 세시간걸림 si에 그런거 엄청많음.
• 데이터 자체가 있는지 체크하는거 자체가 리소스낭비임
  멘토님같은 경우에는 위에 hasData를 만들고.
  민열님 같은경우는 채썰음
  
• 프롭스가 많을경우에는 메모를 빼는게 최적화 잘될떄도(유즈메모말고 그냥메모) 순수컴포넌트에!

이것도 리스트로 분리 => 즉 해즈데이터로 하고, 컴포넌트로 빼는데, 근데 이떄 라우트폴더에 그대로 두고 컴포넌트로 안뺌.
뷰를 프롭스에 넣어줌

• 프롭스 뎁쓰를 두개이상 넘어가지마셈! 3,4넘어가면 레거시프로젝트가 되서 감당못함
  이런식으로 뷰를 넘겨줌.
  

• 프론트엔드는 수정싸움이라 결과적으로 프롭스를 가장 적게넘겨야하고(2개넘기 X) 로직단이랑 리턴단이랑 분리해서 한눈에 알아볼 수 있도록 짜야함

• seo설정할때 리액트헬멧쓰면 이름바뀜 검증된 라이브러리임 쓰셈 스타수가 16.2k인데 오류가 났다? 그럼 99.9프로 내잘못(많은 기준 2k이상, 리액튼네이티브는 500) 주로 메타태그 넣을 때 많이 사용
• 중급에서 고급넘어갈때는 깃헙 이슈 많이보고 라이브러리 뜯어보는 방식의 공부가 도움이 많이됨!
• 모멘트.js 망한라이브러리 대표적...스타수 46.5k인데, 이미지 안나오고 있고...

• 날짜관련은 이제 day.js쓰셈

2번

• 앱의 아키텍쳐 이런거 무시하셈 리액트에서 mvc,mvp이런거 있는데 이런건 안드로이드앱할때 있는건데 그냥 커스텀훅에서 리턴,로직분리하고 이런거보지말고 보실거면 컴포넌트라든가, 포크하라고 만들어둔 폴더구조들이나 컴포넌트 아토믹 구조 정도 공부하고, 그 이외는 코드를 어떻게하면 클린코드, 클린스트럭쳐할지 고민,공부하셈
• dnd구조_ 뎁스 11개인데 => 시간이 없어서 이렇게 짰다? 핑계임 파일을 분리하든, 따로 빼든 하셈.
  
• 삼항연산자나 === 하지마셈
  
• 현업에서는 아이콘 그런거 svg나 이미지 넣기씀(폰트어썸 안씀, 아이콘 다 만들어서 주실거)
• 셋타임아웃이 보이면 왠지 야매코드같음
  
• 대문자 그런거 데이터를 처리하는 상위 리덕스라든가에서 처리해서, 대문자를 소문자로 바꿔줘야 아래서 좋음.
• 리코일은 아톰만 쓰고, 셀렉터이런거 애지간하면 하지마셈
• 프론트엔드는 비즈니스 문제를 해결해주는 사람기업에서 돈을 벌어다주기위해 솔루션이나 기술적인 문제로 풀어나가는 사람이기 때문에, 기업들이 어떤 것을 만들고 싶어하는지 기능적으로 생각해보면, 앞으로 어떤걸 공부할지 알게됨 쇼핑몰을 예로들면 장바구니, 좋아요. 핀터레스트, 드리블, 비핸스 다운받아서 공부함_ 어떻게하면 프론트엔드 더잘짤지, 마크업어떻게 짤지 매일 출퇴근할때봄. 디자인보는 감각도 늘어나고, 컴포넌트 구조도 생각하고, 칼러,라인세이트, 프라이머컬러는 주로 한개네지 두개, 보조컬로도 한두개, UI,UX는 테마컬러 4,5개 밖에 안쓰는 구나 하고 생각하고 검색하기!!!!
• 프론트엔드의 꽃은 b2b가 아닌 b2c이기때문에 그걸 목표로. 디자인 친해져서 많이배우셈
• shopping ui ux design 쳐서 가볍게 보셈 이런 디자인이 있고, 컴포넌트가 있고, 이런걸 쓰면 좋을것같다
• 선호하는 css 라이브러리나 프레임워크 => 스타일드컴포넌트는 뒤쳐짐, 이모션이나 sass씀! 이모션이 서버사이드렌더링을 풀지원해줌. 갈아탔음. 컴포넌트단에선 이모션, 그외는 sass 등. 이라는 회사 없으면 자기만의 기준을 명확하게 하고 사용하셈!

3번

• 라이브러리같은거 쓸 때 왜쓰는지, 찾아보고 까셈 나중에 많아지면 골치아픔 ex) useDeviceDetect
• 구조 정해주셨는데 하라는대로 안하고 이미지폴더 넣었는데, 변경해서 하지마셈 assets에 넣으셈. 수많은 케이스를 겪고 만든걸 준건데 그걸 안하면 안됨!
• 함수명은 소문자로하셈. 리액트에서 컴포넌트 이름빼고는 앞에 대문자쓸일없음. 컴포넌트만 대문자!
• 이런게 창의적인 코드 => 코드는 창의적이면 안댐
  
• 삼항연산자 + 맵 ㄴㄴ
  
• 모달 폴더에 index.tsx로 햇는데, 모달이 여러개면 안됨 폴더 만들고, 파일 깔끔하게 하셈. 리액트는 눈깜짝하면 파일 50개됨
• 나중보면 state가 뭔지모름 리액트가 state덩어린데 절대몰므
  
• 개인적인 추천으로 리액트 포탈써서 라이브러리는 리액트-모달쓰고 이거 포탈에다 자동으로 해주고, 자기도 많이씀. 포탈 직접만들어서라도 쓰셈! 따로 빼서 마크업의 분리를 신경쓰셈.

4번

• 줄임말쓰지말기 favs말고 favorites 쓰셈 이런거에서 티가남!!! => 별다줄
• helmet-async
• 깃헙 옛날똥코드 수정하고, 새로운 스타일의 코드를 쓰는게 중요함.
• 라이브러리 자체는 이정도면 합격_ 패키지.json, 스크립트얼마나 정리 잘돼있는지, 디펜던시까지봄. dev디펜던시에 올라가야할게 그냥 디펜던시에 있으면 감점. 타입스나 테스팅은 개발환경에서만 쓰기때문에, 데브디펜던시에 넣어야함.
  
• 이런건 함수를 따로빼셈 useEffect에 함수길어지는건안좋음
  
• 변수명도 콜백 이런거 하지마셈.
• 프롭스랑 변수명 웬만하면 일치시키고 아니면 따로빼셈!
  

• 리턴안에 뎁쓰로 길게하는거 안좋음 속는셈치고 하셈 웬만하면 그렇게하는게좋음 저건 한줄로 들어가야함

  
• 로직이 들어간 컴포넌트는 퓨어컴포넌트가 아니라, 지금 둘다 들어가서 코드를 아무기준없이 분리하고 있는데, 기준을 가지고 분리하셈!
• 함수로직같은거 좀더 간략화하고!!!!
• 로직좀 간략화하고, 뎁스쪼금만 줄이고, 하면 좋음! 케이트정님 시간을 많이 때려박으면 성장하실분!! 루트파일에 tsx쓰셈 tsx아님 jsx 하나만 쓰기, 즉 언어를 통일하란말 => tsx는 버츄얼 돔이 들어가는거고, ts는 로직만 들어가도됨.
• 고민을 한 흔적이 보임!

5번

• 반응형인데 다른 디자인이나옴안됨 비율이 부자연.

• 모바일,리스폰시브에서는 호버기능안됨.

• 임포트 정리좋음!

• 이런경우 덴하면 가독성떨어지니 어싱크쓰셈
  
  멘토님은 겟무비가 이미 프로미시기 떄문에 then쓰라한부분에서 코드스타일갈림

• 맨위에는 리액트일반노드모듈스타입들, 훅스컴포넌트 , 스타일 임포트함

• 헤더,메인,푸터 깔끔 시맨틱태그 중요함 좋음
  

• 이것도 멘토님이랑 갈리는 부분인데 프롭스 키와 값이 같게함
  
  겹치면 온떙떙클릭하셈!_ 훔친대

• 프롭스 신기하게 _ 이것도 다름 함수란걸나타냄.
  

• 그나마 쓰려면 삼항연산자 안쓰고 이렇게쓰는데,썰기좋으니 썰으셈
  

• 유즈콜백,유즈이펙트,유즈메모 순으로 씀.

• 커스텀훅이나 그런거 최상단, 유즈스테이트 하단 이런 자신의 기준을 둠

• 거래소에서 웹소켓으로 1초에 7번이상이 들어오는데, 캐싱할 필요가없음 유즈메모 그래서 안씀.

• 뎁쓰, 변수가 별로없으면 그냥 넣으면되고, 스테이트 뎁쓰가 네다섯개 들어간다. 유즈메모 쓸필요없음.

• lodash에 배열인지 아닌지체크하는 isArray를 체크. Array.array나
  
  배열이 이니셜스테이트가 아니다 하면 array.array하든가 아니면 배열의 길이가 0보다 크거나 0이다로 기준으로하셈. 지금 여기서도 가정이 2개나 나오는데, 그러면 나쁜 코드임. 이것만 봐도 배열인지 아닌지 판단이 돼야 좋은 코드임.

• 써치,뼤이볼릿 두개로 나뉘는데 페이지를 따로만들든가 아니면 컴포넌트로 쪼개서 프롭스를 전달하든가하셈

6번

• 모달 백그라운드 검정처리 잘함.
• api키 반드시 env넣기
• 폴더깔끔
• 스테이트가 너무 많다.스테이트는 많아봐야 5개 넘지않는게 좋음_ 컴포넌트 따로 빼야함. 관심사 분리시켜줘야함.
• 자기 옛날코드를 보는기분
• 현업에선 기본 api가 백개임. 진짜로.
• 한페이지안에서 스테이트 쪼개고 기능단위로 쪼개셈. 인풋밸류랑 서치밸류랑 왜따로있나요? 먼가 비효율이 보임.
• 페이지 돌아왔을때 검색 남아있는거 구현!
• add,fix,remove 세개

7번

• 주석지우기 _ 클린코드에서 읽었는데 주석은 코드 못짜는 핑계임. 그시간에 그냥봐도 알 수있게 코드를 짜게끔.
• 삼항 ㄴㄴ
• 스테이트랑 상관없는 함수는 바깥에빼든가 util에 빼셈_ 아니면 계속 렌더링됨.
  
• 슬래시빼기, gnb에 푸터넣어도될듯
  
• netlify 쓰면 바로 배포되니 애용하셈
• 저거 무비스해서 하나 뺄거!
  
• 삼항연산자는 죄악, 차라리 if를쓰셈 위에 Open이면 null 따로빼셈
  
• 진짜 간단한거라도 타입스크립트 무조건 작성하셈!

8번

• 리코일은 계속 바뀌니 그냥 아톰만 사용
• dotenv, props-types 안써도됨

• 인터섹션 옵저버 라이브러리 썻는데 웹문서 인터섹션옵저버보고 직접구현해서 어떻게 작동하는지 보고, 쓰셈! 세번네번 구현해보고 적응됐다싶으면 그때라이브러리 쓰는거임

• 모달 프롭스인젝팅해서 밖으로 뺴야함! 하나씩 아이템마다 생기고 있음.
• 최근 일반년동안 삼항연산자를 안씀. => 컴포넌트단에서 리턴안에 안쓴단말_ &&도 안쓰고 아예 컴포넌트로 빼서 return null 하는 방향으로 바꿈!

기타

• 파일분리해도 어차피 빌드하는 과정에서 합쳐짐. 프롭스랑 상위컴포넌트 잘분리해서 스테이트 잘 관리하고, 프롭스를 세번넘기면 코드를 잘못짠거임. 스토어같은거 있으니.(수정할때 본인이 힘들어짐)
• 한번더 생각하기위해 유즈이펙트, 유즈콜백, 유즈메모 같은거 뎁쓰 신경쓰면서 함. 그러면서 무한루프도 겪어보고 하면서 배움
• 리액트는 결국 라이프싸이클이 중요한데, 그거에 대해 잘 이해할것
• 뎁스란건 유즈이펙트, 유즈메모, 유즈콜백에 넣는 디펜던시를 말하고, 그걸 해보란거.
• 리덕스를하면서 스토어구조를 익히셈!
• 메인만 잘파고 이해하면 나머지 배우는건 시간문제임! 오히려 가장어렵거나 대중성으로 인정되는 많이 쓰는거 마스터하고, 자기스타일에 맞는거나 회사꺼 공부하고 면접보고 준비하면 좋을듯

CORS

• 보안적인 부분에서 최소한의 보안을 신경쓰기 위한건데, 앱은 그냥 뚫리는데, 웹사이트에서 어느 한서버를 요청할 때 도메인 어디서 요청했는지 서버에서 받을 수 있는데, 자기회사에서만 우리서버를 쓸수 있게 해야하는데 cors에 도메인을 등록해놓으면 요청에 대해 응답을 해주는거고, 아니면 돌려보내는데, 실제로 cors오류인 경우가 있고, 실제로 아닌데 cors오류가 아닌데 뜨면 디버깅을 싹다해야할거고 cors오류면, 서버에 등록하셨나고 체크해주고, 지긍은 패키지json에 프록시서버 넣는게 아마 유일한 방법
• 린터는 무시하면 안됨 뎁스 다넣으셈. 린터설정 거의 맞을것 액기스임.