위코드 파운데이션 과정을 들으며 정리한 내용입니다.

개발자 마인드

만드는 사람이 불편해야 쓰는 사람이 덜 불편합니다. 초기에 하는 작업들이 귀찮아도 잘 해두면, 훗날의 나에게, 다른 개발자에게, 서비스 사용자에게 좋은 경험을 줄 수 있습니다.

팀이라면 네이밍 방식 통일합니다.

지금 프로젝트는 팀원들과 머지하지 않지만, 이후 팀 프로젝트나 기업 협업을 나갈 경우라면 어떠 네이밍 방식을 쓰는지 확인하고 적용해야 합니다. js 변수명만 말하는 것은 아니고 scss 의 클래스 명도 규칙을 지켜야 합니다. 보편적으로 하나의 방법을 정하면 js 변수나 css 의 클래스명 등을 통일된 방식으로 작성합니다. 위코드는 카멜케이스를 컨벤션으로 정하고 있습니다.

header-box  // 케밥
headerBox // 카멜
header // 스네이크 

반복되는 구조가 보이면 중복을 제거합니다.

반복되는 코드가 있다면 직접 적는 것이 아니라 데이터를 받아서 컴포넌트에게 전달하고 해당 컴포넌트를 메소드로 연산해서 작성합니다. 반복과 중복을 없애서 유지보수를 쉽게 만드는 게 개발자의 일 입니다. 위스타그램의 경우 서버와 통신 전이라면 목데이터를 만들어서 활용합니다.

상수데이터와 목데이터, mock data

상수데이터는 변하지 않고 보여져야 하는 ui 값을 말합니다. 상수데이터는 js 파일로 클라이언트에 저장하고 가져다 사용합니다. 목데이터는 fetch 메서드로 불러오는 json 데이터 파일입니다. 원래 fetch 메서드는 서버에서 데이터를 받아올 때 사용하는데, 서버가 없을 경우 임시로 사용할 가짜 데이터인 목데이터를 만들어서 사용합니다.

이벤트 타겟, event.target / 구조분해할당

이벤트가 일어난 곳의 위치를 알려주는 것이 타겟입니다. 콘솔을 찍어보면 해당 타겟 안의 여러 프로퍼티들을 확인할 수 있습니다. (해당 이벤트로 받아오는 여러 정보들)

const [inputValues, setInputValues] = useState({
    id: '',
    pw: '',
  });
  const handleInput = event => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };

위 코드는 구조분해할당인 const { name, value } = event.target; 으로 객체안에 event.target.name 과 evenet.target.value 를 넣어줍니다. 그렇게 담아준 값을 name 과 value 값을 스프레드 연산자(전개 연산자) 를 활용해 state 에 넣어줍니다. 스프레드연산자는 InputValues를 복제하고 거기에 name 과 value 를 넣어줍니다.(기존 값에 새로운 값을 병합) name 은 해당 이벤트가 발생하는 input 태그의 속성값으로 지정하고, useState 의 초기값과 일치해야 합니다. name 이 동적으로 찾아가도록 대괄호를 쳐야 합니다.

스프레드 연산자는 기존 state 값이 아니라 prev 를 넣어서 함수형으로 업데이트 하면 이후 유지보수에 편합니다.

setInputValues(prev => {...prev, [name] : value});

함수명, 변수명은 행위가 아닌 동작으로

btnClick 처럼 무슨 행위인지 알 수 없는 행위만으로 이름을 짓는 것보단 goToMain 처럼 이름만 보고 어떤 동작을 하는지 알 수 있게 이름을 지으면 좋습니다. 로그인 페이지에서 사용자가 입력하는 아이디디 값이라면, inputValueId 보다는 (인풋으로 들어온 밸류 아이디값) userInputId( 유저가 입력한 아이디값) 으로 지을 수 있습니다. 상수 데이터 이름을 지을 때 결국 코드에 쓰이는 것은 다 데이터이므로 data 란 이름은 지양합니다.

Sass 사용할 때 주의할 것

결국 index.html 파일로 모든 scss 파일이 모이므로 클래스 이름이 중복되지 않게 네스팅 최상단의 클래스 명은 해당 컴포넌트 이름으로 합니다. (컴포넌트 이름은 중복될 수 없으므로) 태그에 직접 적용하는 스타일은 지양하고 되도록 클래스명을 정확히 적어주는 게 좋습니다. 스타일도 작성하는 컨벤션이 있으니 숙지해야 하고,믹스인으로 삽입한 인클루드는 제일 위에 써줍니다. body 태그는 Index.html 에 하나만 있는 태그라서 커먼 파일에서 스타일을 주돼 다른 팀원들과 작업할 경우 해당 수정사항을 논의해야 합니다.

fetch 함수

페치함수는 비동기 함수이지만, then 을 사용해서 데이터를 받은 후 동작을 동기적으로 수행할 수 있습니다. then 을 나눠서 콘솔을 찍어보며 데이터를 확인하면 좋습니다 .

컴포넌트 분리

컴포넌트를 나눈다면 컴포넌트 별로 scss 파일을 나누어서 관리해야 유지 보수가 편합니다. 컴포넌트를 분리한다면 별도 component 폴더를 만들어 파일을 담지 않고 해당 컴포넌트 이름으로 (feeds) 폴더를 만들어 js, scss 파일을 담아서 관리합니다.