주제 : git, TIL, utils 함수, mock data
과제, 서류 제출 매너 (+ git)
- 과제에 회사명이나 자세한 설계서를 올리면 안 됩니다.
- 설계서와 똑같이 구현하는 것은 프론트엔드의 기본입니다.
- README 내용 정리
- 배포 주소
- 구현 목록
- 설치 및 시장하는 방법
- (프로젝트 구조 설명)
- (기능별 영상)
- (코드 설명)위 내용이 들어가야 합니다.
- .gitignore관리
.vscode, node_nodules 파일이 깃허브에 보이면 안 됩니다. 내부 환경 설정 파일 같은 것은 보이지 않게 관리해야 합니다. - 폴더 구조 관리
프로젝트 첫 페이지에 들어왔을 때는 바로 프로젝트 파일들이 보이도록 관리해야 합니다. 첫 페이지에 다시 프로젝트 폴더에 들어가서 확인해야 하는 식으로 관리하면 안 됩니다. - create-react-app의 기본 설정은 삭제합시다.
프로젝트 생성시 기본으로 남아 있는 README 안내 부분이나 src/index.html 폴더 안에 남아 있는 기본 코드는 지우고 필요한 부분만 남겨두어야 합니다. - git commit 관리
- 여러 번에 걸쳐서 기능 구현마다 커밋해야지 바로 한 번 커밋하고 완료하면 안 됩니다.
- 깔끔한 코드
- TIL(Today I Learned) 쓰기
오늘 코딩을 하면서 배웠던 내용에 대해 정리하고 회고 글을 남기는 것입니다. 정리하는 것으로 내가 느꼈던 것들을 정리할 수 있습니다. 그리고 나중에 비슷한 상황이 발생했을 때 쉽게 찾아볼 수 있습니다. 또한 다른 사람들에게 내가 어떤 것들을 공부했는지 알릴 수 있는 좋은 수단이기 때문에 작성하면 좋습니다.
utils 함수
폴더 구조에서 ‘utils’라는 폴더에 들어가는 것들은 공통적으로 자주 사용되는 로직들입니다. 설계할 때 공통적으로 들어가야 하는 것들을 파악해서 util로 만들어 이곳에 넣습니다. 대부분의 util은 input과 output이 확실하기 때문에 ‘unit test’까지 만들면 더욱 좋습니다.
mock data
실제 프로젝트에서 프로그래밍을 할 때 백엔드 API가 아직 준비되지 않았더라도 프론트엔드는 미리 API의 내용을 가정하고 프로그램을 만들기 시작해야 합니다. 그때 사용하는 것이 mock데이터입니다. mock데이터는 임시로 백엔드의 API에서 출력되는 값을 정해놓고 작업하는 데이터입니다. 그렇기 때문에 백엔드와 미리 협의해서 어떤 형식으로 데이터를 보낼지 정한 다음에 만드는 것이 좋습니다. mock데이터를 만드는 방식은 2가지가 있습니다.
- JSON & 통신
- 상수 데이터 이용
1. JSON & 통신
‘.json’파일을 만들어서 통신합니다. 주로 public폴더 ‘.json’파일을 넣고 localhost:3000/file.json 의 형태로 주소를 불러와서 실제 통신하는 것처럼 사용할 수 있습니다. axios를 사용한다면 ‘axios.get(’http://localhost:3000/file.json’)’ 의 형식으로 불러오면 비동기 통신이 가능합니다. 그 외에도 json server를 설치해서 사용하는 방법도 있습니다.
2. 상수 데이터 이용
data의 형태로 만드는 것입니다. json이 아니기 때문에 JavaScript의 문법도 사용할 수 있습니다.
import React from 'react';
const COMMENT_LIST = [
{
id: 1,
userName: 'bin',
content: <h1>저는 b41입니다. </h1>,
isLiked: true
},
{
id: 2,
userName: 'Yeah',
content: 'Oh Yeah!',
isLiked: false
}
];
export default COMMENT_LIST;
다음과 같이 mock 데이터의 배열 오브젝트를 변수에 삽입하고 나중에 필요한 곳에서 불러와서 사용하는 방식입니다. 장점은 직관적이며 쉽고 간편하다는 것입니다.
마치며
지금까지는 혼자만 코딩을 했었는데, 앞으로는 혼자 코딩할 일이 없을 것 같습니다. 그래서 많은 사람들이 지키고 있는 에어비엔비의 코딩 컨벤션과 클린 코드에 대해서 더 연습하면서 코딩을 해야겠다고 다짐했습니다. 또한 utils 폴더를 만들어 자주 사용하는 util을 저장하는 것을 처음 보게 되었는데, 앞으로는 util을 만들어보는 노력과 unit test까지 만들어 보면서 코딩을 해 봐야겠다고 다짐하는 기회가 되었습니다.
더 읽어볼 것
토스트 UI 코딩 컨벤션 : https://ui.toast.com/fe-guide/ko_CODING-CONVENTION
Comments