원티드 프리온보딩 수업정리 #1 0729

---

 

공유해주신 개발자 커뮤니티

질문에 대해 답변도 남기거나 토론도 할 수 있음 !

• React Korea
• 프론트엔드개발그룹
• 자바스크립트 개발자 포럼
• Node.js Korea
• React Native Seoul
• 리액트 네이티브[React Native] 한국 사용자 그룹
• React Native Community
• TypeScript Korea
• AWSKRUG- AWS한국사용자모임
• GDG Seoul
• Facebook Developer Circle: Seoul
• OSS 개발자 포럼

 

Chapter : 1 팀 과제 정리

 

1. Structure : 폴더구조를 정형화하지말자

다른 분들의 구조를 많이 보고 8주간 최대한 여러개를 사용해보며 맞는 것을 적용하자

팀플할 때 내 것만을 고집하지말자. 이렇게 했을 때 어떤 것이 좋고 어떤 점이 아쉬웠다라는 토의를 하며 합의점을 도출하자

1파일에 1기능만하도록 한다.

• 유지보수와 확장성을 고려해보면 파일 이름만 보고 어느 기능을 하는지 보이는게 가장 중요하다.

 

1.1 해당 기업에서 사용하는 구조 설명

Pages

• 큰 단위로 main, 목록, 상세 페이지 등으로 나누고 그 안에 상품 컴포넌트, 필터링 컴포넌트 등등이 존재

Components

• 공통으로 사용하는 컴포넌트들

Modals

• 모달이 버튼처럼 재사용하는 것이 아니라 모달은 한 가운데에 띄워짐
• 페이지에 넣어놨더니 재사용할 수 없었음. 그렇다고 컴포넌트에 넣자니 공통적으로 사용되는게 아니었음. 토의를 통해 따로 분리함
• portal 관련 얘기인듯함

 

2. CSS작성 방식

styled-components를 사용하는 이유는, CSS, SCSS는 전역 스타일오염이 발생할 수 있기 때문. 이유는, 빌드시 한 파일에 모이게 되는데, 다른쪽에서 정의한 같은 이름의 클래스명이 중첩될 수 있음.

Styled-components를 사용하면 클래스네임이 hash값으로 지정되어 unique해지므로 오염될일이 없음.

SCSS를 쓰면서 전역오염을 피하고 싶다 -> SCSS Module을 사용하셨다고 하심

 

3. Commit message

3년전, 1년당 commit 갯수로 성과측정하는 기업이 있었음 ㅋㅋ

Best Practice를 따라해보며 공통점을 염두에 두자

 

Chapter : 2 기업과제 정리

Pair Programming시 궁금한걸 많이 물어보자!

모르는 것은 당연하니 팀을 믿고 나를 믿자 ! ㅎㅎ

폴더구조를 Tree 구조로 단순히 나타낼 거면 하지마라, closer해서 설명할 것 아니면 하지마라 (우리가 잘 한듯 !)

블로그 잘 쓴 것 10개정도 추려서 기업전달예정

 

1. HTML 무시 NONO

• div를 남발하지 마라 한번 더 감쌀려면 굳이 필요 없다.

 

2. CSS도 공부합시다

 

2.1 flex-direction

• 주지 않아도 할 수 있는 방법이 있으니 남용하지 말 것, 정렬 여백은 padding으로 하면 오류가 날 수 있음.

 

2.2 height 아무데나 주지 맙시다

• height 아무데나 주지 맙시다 - 내용이 달라질 수 있는 경우 div의 높이는 자식만큼 잡히기 때문에 아무데나 height주면 깨진다.
• 줄지 안줄지에 대해 생각하고 넣기

 

2.3 styled-components

다른팀의 example

• 전역오염을 막는 styled-components인데 className을 추가했으므로 styled-component를 쓴 것이 아님. 오염가능성이 존재함 -> CSS + styled-component를 혼용해서 사용하는 기업도 존재
• className보단 직접적인 선택자를 사용할 경우는 조금 괜찮음

 

2.4 유지보수 쉬운 코드

• 컴포넌트에서 변할 것들만 넣고, 변하지 않는 것은 상수로써 관리하자.
• ㅎㅎ 우리 코드가 best case로 소개되었다.
  • 불러올 comment 데이터의 갯수를 뜻하는 명칭을 정하는데 상당히 애먹었는데 기분이 좋았다
• 
• API주소 저장할 때 보통 BASE URL을 사용한다. 해당 api에선 https://~~~.com 까지이다. 이후 endpoint는 그때 그때 사용할 때 붙여서 쓴다.

 

2.5 import

• import구문이 길어질 수 있는데 절대경로로 불러오는 방법을 말씀하신 것 같다.
• 사소하지만 보기좋은 코드를 위해 import나열시 길이 순서도 생각해보자

 

Chapter : 3 꼭 알고 갈 Keywords

Throttle : 마지막 이벤트 이후 일정시간동안 이벤트발생 막기

debounce : 계속 호출되는 이벤트중 가장 마지막 이벤트만 호출

API 의 지원범위

• 문서를 확인하고 polyfill을 염두에 두자
• polyfill을 위해 라이브러리를 설치하면 ++

브라우저 지원 범위를 확인하는 사이트

페이지당 글 범위가 10개인데, 불러온 데이터가 10개 이하면, 로딩을 종료해야한다.

• 실패한 요청에 대해선 ? 뭐,, 에러 처리 부분은 API마다 달라지겠지

 

Chapter : 4 utils

의존성 없이 공통적으로 사용되는 로직을 모아놓은 폴더

최소 2번 반복되면 함수를 무조건 분리하는게 좋다.

junior는 남의 코드를 읽고 분석을 잘하는 것. 회사 들어가면 할 일이 짜여진 코드를 보고 이해하는 것 === 문서를 잘읽어

내가 만든 것을 남이 쓰도록 작성하는 걸 고려하며 코드를 작성하자

이번 과제의 핵심은 utils함수를 잘 만드는 것

unit test

• 어떤 input이 들어올지 남이 봤을 때 모른다. type, input등을 작성해서 확인해볼 수 있음
• TDD가 엄청 중요, 로직보다 UI를 만드는데 기획이 많이 변함 => unit보다 cypress를 좀 더 가중치를 두기 ?
• 과제에서 해도됨

 

Chapter : 5 이번 과제 설명

15:35 가이드 설명 시작

 

5.1 JSON

JS의 객체 문법으로 이루어진 데이터 형식이고 6개의 타입만 사용가능하다

• string
• number
• boolean
• null
• object
• array

사용 불가

• function
• undefined
• data

 

JS와 다른점

PropertyName, value에 쌍따옴표 추가

 

파싱, 직렬화

• 파싱 parse( ) == JSON을 JS값으로 변환
• 직렬화 stringify( ) == 객체를 JSON으로 변환
• Local, sessionStorage에 저장시 string으로 변환해야하므로 해당 메소드를 사용해야함~ 또 가져올 때도 파싱해야하고.

 

5.2 통신

1. 보기좋은 코드를 위해 해당 과제에서 data폴더 하위에 파일을 넣자

fetch는 url을 localhost로 지정해서 하면 실제로 통신을 주고 받을 수 있음

2. 또한 json을 import해서 사용해도 됨

fetch 방식이 더 좋은듯 mock data를 비동기요청 해볼 수 있는 거니깐

3. 상수데이터로 js방식으로 export, import해봐도 됨

 

5.3 기능은 쉽다. 그러나 협업이 난항을 겪을 것

props를 받아 노출할 수 있는걸 ? => 이해못함 15:51

내가 맡은 부분에 대해 최선을 다하기~

confilct 주의~

CRA초기세팅, 구조, CSS 논의 후 개발 시작하자고~

README에 각자 어느기능 구현했는지 간단히 작성

• 캡처까진 X, 간단히 기능만,,

 

두번째 난항 ㅋ

• 디자인이 없음. 그러나 고민하지말자
• 사이트 보면서 최대한 비슷하게 구현하자
• 오로지 react 하러만 왔으니 못생겨도 상관없지만 그래도 예쁘게 해 ㅋㅋ 답정너 ?

 

기본요구사항이 명확하니 정확히 지키자..

데이터는 노션에 있음 복사해서 쓰자~

배포 필수 ~

 

여담..

여담 : React 왜 쓰냐 ? -> FE의 춘추전국시대에 고생한 개발경험으로 보아,, JQuery는 DOM접근만 편하지만 바닐라JS랑 all page구현이랑 다를게 없음

이전에 반년주기정도로 개발 생태계가 너무 빨리 변했음

이전 환경을 써봤기에 react를 왜 썼는지 체감되지만 우리는 안써봐서 잘 모름 그럼에도 불구하고 왜 쓰냐에 대한 질문 == react 생태계가 엄청 넓음

생태계가 넓다는건 사용자도 많고 관련 패키지 개발이 많아짐

면접에선 이론적인 대답을 좋아함, vdom이나 컴포넌트 재사용이나,, 뭐 이런 것들

앞으로 어느 것이 유행할지를 알긴 어렵지만 생태계가 넓어지는지를 보는 것이 중요하다.

react의 가장 큰 장점은 레고처럼 부분부분 작성해서 조립할 수 있는 점, Js는 분리하기 힘듬 -> 협업이 어렵고 생산성이 떨어짐

분리정도에 따라 생산성이 늘어남

프론트에서 브라우저에 한정되어 효율이 갈리는데, 그 중 가장 cost가 큰 것은 DOM의 조작이다.

효율면에서 DOM조작을 줄이는 것이 가장 중요하다.

react가 vdom를 사용해서 DOM변경에 있어서 사전에 in-memory로 관리하며 변화를 한번에 모아서 브라우저에 적용하므로 수행되는 cost를 줄일 수 있는 것임

QNA에 언급된 블로그 읽어보기