[POB] 세션정리 - 1주차 목

📌 Team mission

CRA 폴더 구조

 

• CRA 폴더 구조에 대한 정답은 없다. 여러번 사용해보고 본인에게 적합한 구조를 사용하자.
• 그럴려면 다른 사람의 코드를 많이 봐야한다 (오픈 소스, 유명한 기업 레포)
• 적합한 방식을 찾기 위해 의견을 나누면서 합의점을 도출하자. (고집 ❌)
• 한 파일에 한 기능만 한다 (유지보수, 확장성) 

 

CSS 작성 방식

 

• npm build시 파일이 번들링 되면서 관련 파일이 하나로 만들어진다.
• 이로 인해 CSS, SASS의 경우 각각 다른 파일에서 정의한 classname이 중첩되면 전역 스타일 오염이 발생한다.
• 때문에 styled-components가 나온 것 인데 이를 사용하면 유니크한 classname이 선언돼 이를 방지할 수 있다.
• SASS의 경우에도 SASS module을 사용해 classname을 고유하게 만들어 준다.

 

Commit message guide

 

• Commit message 작성은 사람이 하는 것이기 때문에 템플릿을 지키기 어렵다.
• 그럼에도 정해진 규칙을 지키기 위해 계속적으로 노력해야 할 것

---

📌기업과제 review

Pair programming

 

• Pair programming을 하다보면 잘하는 사람, 못하는 사람이 있을 수 밖에 없다! 때문에 잘하는 사람이 입 밖으로 말을 많이 꺼내자!
• 내가 잘 모르는게 있거나 말을 할 때 얼버무리게 된다면 물어보거나 적어놔서 이에 대해 공부하자!
• 그 순간 잘 모르는 것들이 있다면 너무 자책하지 말자 괜찮다! 공부하고 내 것으로 만들면 된다.

 

README 작성

 

• 캡쳐 이미지 또는 영상을 프로젝트 파일로 넣으면 안된다. 프로젝트는 오로지 관련된 소스코드만 있어야 한다.
• 폴더 구조를 Tree로 나타내지 마라 필요없다. 차라리 안쓰는게 낫다.

 

HTML 구조

 

• 필요없는 div 태그는 지워버리자!
• 한 파일에 하나의 컴포넌트 사용이 일반적

 

CSS

CSS 공부 꼭 해라

 

1. flex

 

• flex 적재적소에 사용하자 block 요소는 알아서 column형태로 나열이 된다!

2. 여백 오사용

 

• padding 오사용 조심하자 정렬 여백은 padding으로 하는게 아니며 고정된 px값으로 여백을 줘서 가운데 정렬을 한다? 이건 다른기기 뷰포트를 고려하지 않은거다!

3. height

 

• 부모의 height는 자식 요소들이 결정해주기 때문에 height 값을 주지 않고 여백으로 관리해야 한다.

 

4. Styled-components

 

↓코드예시

import React from "react";
import { CommentCardStyled } from "./CommentCard.styles";

const CommentCard = ({ item }) => {
  return (
    <CommentCardStyled>
      <div>
        <span className="comment-id-title">Comment Id</span>
        <span className="comment-id-content">{item.id}</span>
      </div>
      <div className="comment-email">
        <span className="comment-email-title">Email</span>
        <span className="comment-email-content">{item.email}</span>
      </div>
      <div className="comment-body">
        <span className="comment-body-title">Comment</span>
        <div className="comment-body-content">{item.body}</div>
      </div>
    </CommentCardStyled>
  );
};

export default CommentCard;

 

 

• Styled-components 자식 요소에 classname을 줘서 스타일 지정을 하고 있으면 styled-components를 사용하고 있는 것이 아니다. styled-components + css를 사용했을 경우 전역 스타일 오염이 발생할 수 있다.
• 대신 선택자를 사용해 요소를 직접적으로 지정해줬을 경우엔 괜찮다.

5. 유지보수하기 쉬운 코드

 

• 여러 파일에서 사용중인 API 주소가 바뀌었을 경우 상수로 관리하지 않는다면 일일이 찾아서 주소를 수정해야한다.
• API 주소는 BASE_URL이라는 상수로 관리하는게 보통
• END_POINT 부분은 comment 뿐만 아니라 user정보등을 가져올 경우가 있기 때문에 그때그때 필요한 부분을 붙여서 쓴다.
• 컴포넌트와 관련없는 변수는 import 와 컴포넌트 구문 사이에 넣는다. (되도록이면 constant 파일에서 관리하자)

6. import 절대경로

 

• 폴더 구조가 복잡해질 경우 import 시 상대경로 참조가 길어질 수 있기 때문에 jsconfig.json에서 baseUrl을 사용해 절대경로로 불러오자 (생산성 증가, 개발시간 단축)
• 보기 좋은 코드를 위해 import 구문도 연관된 것 끼리 나열하자

꼭 알고갈 keywords

 

• Intersection observer (정리 링크) 
  • 유의할 점!
  • 브라우저 별 기술 지원 범위를 확인하자
  • 특정 API를 지원하지 않는 브라우저를 고려해 polyfill을 사용하자 (대부분 IE..)
  • 브라우저 별 지원 기술·속성 확인 사이트 (링크)
• throttle - 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• debounce - 연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것

---

📌utils

• 의존성 없이 공통적으로 자주 사용되는 로직을 모아놓은 폴더
• 주니어와 미들레벨의 차이는 편의성과 재사용성을 고려하는 것
• 주니어는 남이 만든코드를 잘 이해하고 사용
• 미들레벨은 남이 이해할 수 있는 코드를 작성

 

+ unit test
어떠한 타입의 입력값이 들어올 지 알 수 없기 때문에 unit test를 한다.

UI부분은 수정도 많이 발생하고 파기되는 경우도 있어서 utils 함수에서 많이 사용

 

---

📌Client 리소스로 데이터 사용 (mock data)

UI 구성에 필요하지만 백엔드 API가 준비되지 않았을 때, 프론트엔드 개발자가 필요에 의해 샘플로 데이터로 만들어 UI를 미리 개발할 수 있다.

 

JSON (JavaScript Object Notation)

 

JSON은 데이터를 주고 받을 수 있는 데이터 형식이다. JSON은 자바스크립트 문법과 유사하지만 자바스크립트가 아니고 자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미한다. 원시값, 객체, 배열 등을 문자열 형태로 저장. 많은 프로그래밍 언어에서 JSON *파싱과 *직렬화를 지원한다. 

 

*파싱(JSON.parse()) - JSON 표현식을 JS문법으로 변환

*직렬화(JSON.strigify()) - JS문법을 JSON 표현식으로 변환

 

JSON에서 사용가능한 타입

- String
- Number
- boolean
- null
- object
- array

 

사용 불가능

- function
- undefined
- data

 

자바스크립트와 차이점

 

• property name과 string type value에 쌍따옴표만 유효하다.

 

통신

 

• JSON 파일로 만들어서 통신

[
  {
    "title": "중고 나이키 테아 흰검 245 30000원",
    "brand": "나이키",
    "price": 30000
  }
]

 

• *public > data > data.json으로 fetch 함수를 통해 localhost:3000으로 통신을 주고 받을 수 있다.
• 또 다른 방법으로는 .json 파일을 import해도 된다. (사용하는 컴포넌트 파일과 같은 레벨 경로에 위치)

*public - public 폴더는 실제로 서버에 접속해서 들어가면 직접 접근할 수 있는 리소스가 들어있다.

 

💬세션 질의응답

왜 리액트를 사용할까?

JQuery는 DOM에 접근하기 편할 뿐 바닐라 자바스크립트와 다를 것이 없다. 하나의 파일에 다수의 인원이 작업을 하기 때문에 생산성 감소. 리액트는 컴포넌트 단위로 view를 구성하기 때문에 협업 시 분리작업이 용이해 생산성이 증가한다. 또한 생태계, 커뮤니티가 활성화 되어있다. 때문에 리액트 전용 라이브러리, 패키지가 다양하다.
프론트엔드는 DOM 조작에 따른 효율성이 증감하는데 리액트는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다. 이로 인해 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것