서문

본인은 비전공자, 노베이스, 학력도 실력도 뭣도 없는 풋풋한 코린이 되시겠다.
운 좋게 42서울에 합격해서 과제 뚫기에만 집중한 코린이는 프로젝트 경험이 고팠다.
슬랙을 뒤져보다가 프론트 개발자를 구한다는 글을 보고 멋도 모르고 프로젝트에 뛰어들게 된다.
인프런에서 강의 하나를 완강했다는 근자감을 가지고 깃 레포를 클론한 코린이는 멘붕에 빠지게 되는데...

본론

카뎃끼리 밥을 매칭하는 서비스를 제공하는 웹, 모바일 사이트에서 마이 페이지 제작을 맡게 되었다. 능력자 분께서 기본 구조를 만들어 주신 덕분에 클론해서 진행하려고 했으나, 처음부터 벽에 부딪혔다.

작업 환경 세팅

git clone을 한 직후의 상태. node_modules 폴더가 존재하지 않는 것을 확인할 수 있다.
무거운 node_modules 폴더를 빼는 대신 package.json에 필요한 파일들에 대한 정보를 넣어준 것.

npm install로 필요한 모듈을 다운로드하는데...

install 이슈

생각지도 못한 에러가 발생했다. npm, old 따위의 단어로 유추해봤을 때 버전이 낮아서 생긴 문제가 아닐까 생각했다.
다행히도 npm, node 버전을 업데이트 하니 문제가 해결됐다.

정보

폴더 구조

CRA로 진행된 프로젝트기에 폴더 구조도 CRA의 그것과 크게 다르지 않았다.
ㄴ/config -
ㄴ/node_modules - CRA 를 구성하는 모든 패키지 소스 코드가 존재한다.
ㄴ/public -
ㄴ/src - 모든 컴포넌트(js, jsx 파일)이 들어있는 곳
ㄴ/src/components - 재사용성이 높은 컴포넌트를 배치한다.
ㄴ/src/pages - 페이지 단위의 컴포넌트 폴더
ㄴ.eslintrc.js - 자바스크립트 문법을 검사하는 ESLint의 설정에 대한 파일.
ㄴ.gitignore - 이 파일에 작성해놓은 파일이나 폴더들은 git add를 해도 저장소에 올라가지 않는다.
ㄴ.prettierrc.js - 깃에 올릴 때 자동으로 포맷팅해주는 prettier의 설정에 대한 파일
ㄴjest.config.js - JS 테스트 프레임워크인 Jest에 관한 파일이다.
ㄴjsconfig.json - VS code로 하여금 javascript에 대한 설정을 조작할 수 있다. 이 프로젝트에서는 기본 path를 설정하기 위해 사용되었다.
ㄴpackage-lock.json - package.json을 수정하면 자동으로 생성. 의존성 트리에 대한 정확한 정보를 가짐.
ㄴpackage.json - 이 프로젝트에서 사용하게 될 모듈, 패키지에 대한 정보가 들어 있다. npm install로 설치할 수 있다.
ㄴyarn.lock - 패키지 잠금 파일. package-lock.json과 비슷한 역할.

yarn.lock이 필요한 이유
https://www.daleseo.com/js-package-locks/

package-lock.json이 필요한 이유
https://hyunjun19.github.io/2018/03/23/package-lock-why-need/

js와 json파일의 차이? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON#javascript%EC%99%80_json%EC%9D%98_%EC%B0%A8%EC%9D%B4

CRA란?
https://velog.io/@devmoonsh/React-CRA-Create-React-App

기술 스택

javascript
react

환경

CRA - create-react-app, 말 그대로 리액트를 개발하기 위한 기본적인 틀을 제공한다.
material api - 이미 완성되어 있는 디자인 템플릿이나 아이콘을 가져다 쓸 수 있다.
prettier - 코드 스타일을 자동적으로 맞춰준다. 통일성 및 가시성에 좋다.
eslint - 자바스크립트 문법을 지키지 않았을 경우 에러를 띄워준다. 잘못된 문법이 아닌 비효율적인 문법이어도 가차없이 에러를 띄어버린다.
scss - css에 변수, 조건문, 함수 등 편리한 기능을 제공한다. css와 문법이 약간 다르다. sass라는 문법도 있는데({} 대신 파이썬 처럼 탭으로 영역을 표시한다.) scss로 대체 가능하다.

중요 개념

폴더를 import 하는 법

컴포넌트를 export한다고 했을 때, js나 jsx 파일 내부의 컴포넌트 객체를 export default로 내보내는 것이 일반적이었다. 그러나 폴더 그 자체를 하나의 컴포넌트로 export하고 import 할 수 있다는 것을 알았다.

//index.js
import Apple from './Apple';
export default Apple;

//Apple.js
import React from 'react'

const Apple = () => {
 return <div>apple!!!</div> 
}
export default Apple;

다음과 같은 두 개의 파일이 AppleFolder라는 폴더 내부에 있다고 가정할 때, AppleFolder라는 이름으로 해당 컴포넌트(여기서는 index에서 export한 Apple이 될 것이다)를 import할 수 있다.
단 필수 조건이 있는데, 반드시 이름이 index.js에서 최종적으로 export를 해주어야 한다!!!

jsconfig.json로 절대 경로 설정하기

react는 디렉토리가 많다. 프로젝트를 하게 되면 더욱 많아진다. 컴포넌트 등을 import 할 때 기존의 방식처럼 상대 경로로 import하게 되면 ./../src/... 같이 번거로워질 가능성이 있다.

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "includes": ["src"],
    "exclude": ["node_modules"]
  }

절대 경로로 src가 설정된 것을 확인할 수 있다.