1주 차 첫 번째 수업 TIL

원티드 프리온 보딩 프론트 앤드 1주 차 첫 번째 수업  TIL (22.01.24~22.03.03)

프리온 보딩 프론트 앤드의 강사님은 위코드의 공동 창업자&이사의 직책을 가지고 계신 김예리 님이 강의를 해주셨습니다.

Git

깃에 대한 기본 매너와 어떻게 이용하면 좋을지에 대해서 많이 알려주셨습니다. 개인적으로는 나를 소개하기 참 좋은 방법인 깃을 잘 활용하지 못했던 것 같아서 다른 분들이 하신 좋은 예제를 보고 많이 배웠던 것 같습니다

git - 기본사항

• gitignore 관리 ex) .vscode, node_modules
• depth 한 번 더 들어간 폴더 구조
• Read.me 가 CRA 내용으로 그대로 들어간 경우

 

git - README에 내용 정리

• 배포 주소
• 과제 구현 목록
  • 캐러셀 동작 예제
• 설치 및 시작하는 법
• option | 프로젝트 구조 설명
  • 구조 예제
• option | 기능별 영상
  • 좋은 예제
• option | 코드 설명, 과제 후기 등 (장황해지면 안 읽는다!)

 

git - commit 관리

• Commit 한 번에 끝내지 말 것.
• 진행 과정 보이게 4~10개 사이 (전략적으로)
• Commit Message 일관성 지키기
• X | ~습니다/반말/~작업중
• 시간 남으면 추가 구현, 리팩토링 과정 보이기

git: Commit Message Guidelines

저는 깃에서 커밋을 할 때 대부분 혼자 작업을 해서 중요성을 느끼지 못하였었는데 협업을 할 때에는 모두가 일관된 커밋 메시지를 이용하는 것이 좋다는 것을 알게 되었습니다. 팀 내 일관성과  명확한 메시지를 쓰지 않을 시 깃에서 충돌이 났을 때 어느 부분에서 충돌이 났는지 찾는데 애를 먹을 상황도 머리에서 그려졌습니다. 

저는 이 레퍼런스 커밋 메세지를 따르기로 했고 저희 팀의 커밋 메시지이기도 합니다

✅ 분류

---

• Add - 레이아웃 / 기능 추가
• Remove - 내용 삭제 (폴더 / 파일 삭제)
• Modify - 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경)
• Fix - 버그/오류 해결
• Refactor - 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선)
• Docs - 문서에 관련된 수정 작업(README.md 등)

---

깔끔한 코드

깔끔한 코드에 대해서 이렇게 좋은 자료가 있는지 찾아볼 생각을 하지 않았고 깊은 생각을 하지 않았었는데 앞으로는 어떤 코드가 좋을지 어떤 변수명이 좋을지 좀 더 생각해보며 코드를 짜려고 합니다

 

• Airbnb JavaScript Style Guide
• Clean Code - JavaScript

GitHub - airbnb/javascript: JavaScript Style Guide

GitHub - ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript

TIL

개발자로 성장할 수 있고  나에 대해 모르는 사람들에게 표현하기 좋은 표현 방법이라고 소개를 들었다. 나는 원래 블로그를 하고 있었지만 앞으로는 공부하고 적어서 정리하는 일을 더 해보려고 한다. 사람들이 들어와서 보면 좋고 잘 안 들어와도 내가 정리한 글을 보고 다시 기억을 되살릴 수 있으니 말이다.

 

utils

자주 사용하는 로직을 모아두는 폴더인데 앞으로 고민을 해보아서 폴더를 만들고 관리해보아야겠다

 

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

 

mockData

프런트 앤드 개발자가 백 서버가 없을 때 공부하거나 토이 프로젝트를 진행할 때  사용하는 가짜 데이터를 의미합니다 두 가지 방법을 소개해주셨습니다. JSON과 상수 데이터입니다

JSON

 

JSON(JavaScript Object Notation)은 데이터를 주고받을 수 있는 데이터 형식이다.

JSON이 자바스크립트와 문법과 유사하긴 하지만 자바스크립트도 아니고, 자바스크립트에서만 사용할 수 있는 것도 아니다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.

 

1. JSON에서 사용 가능한 타입

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

2. 자바스크립트와 다른 점

string을 감쌀 때 큰따옴표만 유효합니다.

객체의 Property Name도 큰따옴표로 감싸야합니다.

{
	"name": "wecode"
}

 

3. 파싱과 직렬화(Parse & Stringify)

• stringify(): 자바스크립트 객체를 JSON 문자열로 직렬화 한다.
• parse(): JSON을 파싱 하여 자바스크립트 값으로 바꾼다.

상수 형태

data 형태이고 쉽고 간편하며 직관적입니다. json에서 사용할 수 없는 문법이 사용 가능하다는 장점이 있습니다

import 'react';

const COMMENT_LIST = [
  {
    id: 1,
    userName: 'wecode',
    content: <h1>wecode에 오신걸!! </h1>,
    isLiked: true
  },
  {
    id: 2,
    userName: 'joonsikyang',
    content: 'Hi there.',
    isLiked: false
  }
];

export default COMMENT_LIST;

3가지 주제에 대해 팀원들과 회의해보라고 숙제로 주셨는데 그 회의 결과와 제 생각에 대해  적어보려고 합니다

• 주제: CRA Project Structure
  • CRA로 만든 프로젝트의 폴더구조는 참 다양합니다. 어떤 폴더구조로 프로젝트를 진행하셨나요? 왜 그렇게 나누었는지, 그리고 해당 구조의 장점과 단점은 무엇인가요?
  • 답 : 혼자 작업할 때는 편하게 Create React App으로 프로젝트를 만든 후 그대로 src에서 파일을 만들어서 작업을 했던 경우 가 많았었는데 다른 팀원분들과 처음 협업을 하려고 하니 5명 모두 다르게 폴더구조를 사용하고 있어서 앞으로 서로 소통하며 작업을 하려면 폴더구조를 통일하는 것이 좋다고 생각하였습니다. 그리하여 인터넷 검색을 통해서 많은 분들이 사용하는 혹은 리액트 팀에서 권장하는 방식으로 폴더구조를 진행하기로 하였습니다. 해당 구조는 많은 파일들이 있을 때 원하는 파일을 찾는 데 별로 걸리지 않을 것 같고 단점으로는 관리에 시간이 많이 든다는 점이 있는 것 같습니다
• 주제: CSS 작성 방법
  • React에서 많이 사용하는 CSS 작성 방법은 Styled Component, SASS, CSS Modules 등이 있습니다. 어떤 방식을 선택하셨나요? 선택한 방법의 편리한 점은 무엇이었나요?
  • 답 : 저는 Styled Component를 사용했었고 styled의 장점은 해당하는 컴포넌트의 이름을 지어서 명확하게 하는 일을 볼 수 있다는 장점이 있었습니다. 그리고 다른 팀원분들은 SASS를 사용하시는 분들이 대부분이었으나 회의 결과 우리의 개인 발전을 위해서 서로 자주 사용해보지 않은 방법을 사용하기로 했었습니다. 따라서 2주간은 styled 또 다른 2주간은 SASS로 정하였습니다.
• 주제: Commit Message
  • 팀별로 Commit Message 템플릿 정하셨나요? 어떻게 정하셨는지, 왜 그렇게 하셨는지 알려주세요.
  • 답 : 강사님이 보여주신 레퍼런스 코드로 진행하기로 하였습니다. 그 이유는 모두가 커밋 메시지가 달라서 모두 합의해서 사용할 수 있는 레퍼런스 코드로 정하였습니다.

 

CRA 프로젝트 폴더 구조

 

1. 📁 assets

• 말 그대로 자산을 의미한다.
• 프로젝트에서 사용할 이미지, 비디오, json파일 등 미디어 파일들을 모아두어 저장하는 곳.

2. 📁 components

• 공통 컴포넌트 관리 (Header, Footer, Nav 등)

3. 📁 pages

• 페이지 단위의 컴포넌트 폴더로 구성
• pages 폴더 안 index 파일을 두어 모든 pages 의 import,export 를 관리
• ex) Login - Login.js, Login.scss / Main - Main.js, Main.scss ( 우선적으로 styled-component를 사용할 예정 )

💡 components vs pages

• 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리
• 페이지 컴포넌트의 경우 pages 폴더에서 관리
• 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음!

4. 📁 hooks(hoc)

• 함수형 컴포넌트를 사용하면서 커스텀 훅을 모듈화하여 담아놓는 폴더.

5. 📁 utils

• 상수나 공통 함수, 유틸리티를 담는 폴더.

6. 📁 services

• 자바스크립트 모듈을 담는 폴더
• components 폴더보다는 덜 중요하지만 애플리케이션에서 여분으로 사용되는 일반적인 자바스크립트 모듈을 만들때 편리한 모듈들을 담는 폴더. 일반적으로 로컬스토리지 모듈 등이 있다.

7. 📁 styles

1. sass 사용시

• reset.scss => css 초기화
• common.scss => 공통으로 사용하는 css 속성 정의

2. styled component사용 시

• GlobalStyle.js => css 초기화
• theme.js => 공통으로 사용하는 css 속성 정의이외에 media.js 등등 다양한 css 파일을 속성에 맞게 분류하여 모듈화.

8. 📁 이외의 구조 ( routing, layout, Aliases 등등)

 

CSS 작성 방법

 

14팀은 회의결과 2주간 styled-component 먼저 사용하기로 하였습니다.

styled-component

• 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부릅니다.css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.

styled-components 개념 및 예시, react, redux

styled-components 개념 및 예시, react, redux

Sass

• CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다.
• SCSS 사용하는 이유, SCSS 장점과 실 사용 예제

SCSS 사용하는 이유, SCSS 장점과 실 사용 예제

Commit Message

 

✅ 분류

---

• Add - 레이아웃 / 기능 추가
• Remove - 내용 삭제 (폴더 / 파일 삭제)
• Modify - 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경)
• Fix - 버그/오류 해결
• Refactor - 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선)
• Docs - 문서에 관련된 수정작업(README.md 등)