[회고] 원티드 프리온보딩 프론트엔드 인턴십 1주차 회고

Jenny·2023년 5월 1일
원티드프리온보딩인턴십회고
0

wanted

목록 보기
1/1
post-thumbnail

💻 daily, concept

학습한 내용을 정리합니다

4/24 (월) : OT

  • 협업툴, 수업 일정, 프로그램 취지 등 OT 진행

4/25 (화) : 첫 세션 ( 프로젝트를 하기 전 알아야 할 팀으로 일하는 법, 개발자의 기본기)

0) 개발자로서 갖춰야 할 역량

ㄴ 하드스킬 : 기술적인 역량, 프로그래밍 실력
ㄴ 소프트스킬 : 커뮤니케이션, 소통능력, 팀워크 등 협업시 필요한 능력

  • 개발자에게 협업과 커뮤니케이션이 강조되는 이유는 개발자 혼자서는 하나의 프로덕트를 만들 수 없기 때문임
  • 구두로 소통할 때 말하는 목적은 '상대방을 이해시키기 위함'임, 내가 아는 것을 쏟아내듯이 말하는 것이 아니라 나의 생각을 잘 정리해서 말하는 것이 중요함
  • 문서로 소통 : 개발자는 구두보다는 문서로 하는 비동기적 소통을 선호함

1) Git & GitHub 사용시 지켜야할 것

History 관리 및 브랜치 관리 전략

2) ESLint, Prettier, Git hook

  • Linter & Code Formatter
  • 사용이유: 하나의 프로젝트에서 작업자마다 다른 코딩 스타일을 가지고 있다면 팀원들도 이해하기 힘들고, 제 3자가 읽기에도 어려움 > 이것은 결국 비효율을 유발함. 그러므로 코딩 스타일을 일치시키기 위해 Linter & Code Formatter을 이용하는 것이 좋음
  • 자바스크립트 진영에서는 Linter로 ESLint를, Code Formatter 로는 Prettier를 사용하는것이 일반적

설치방법
1) eslint

  • npm install eslint --save-dev
  • CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 됨

2) prettier
- npm install prettier --save-dev

3) eslint-config-prettier

  • npm install eslint-config-prettier --save-dev

설정
1) eslint

  • 처음부터 모든 rule 하나하나 설정하는 것이 불필요하거나 불편하다고 판단되는 경우와 다른 사람들이 이미 정의해둔 config를 설치한 후 확장해서 사용할 수 있음

  • 예시

```json
// .eslintrc

{
  "extends": ["react-app", "eslint:recommended", "prettier"],
  "rules": {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
    "eqeqeq": "error", // 일치 연산자 사용 필수
    "dot-notation": "error", // 가능하다면 dot notation 사용
    "no-unused-vars": "error" // 사용하지 않는 변수 금지
  }
}

https://eslint.org/docs/latest/rules/

2) prettier

  • .prettierrc.확장자 파일을 통해서 설정 (확장자는 다양하게 지원)
    예시
// .prettierrc.js

module.exports = {
  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: true, // "" => ''
  arrowParens: "avoid", // arrow function parameter가 하나일 경우 괄호 생략
};

https://prettier.io/docs/en/options.html

3) Husky

(1) 도입배경

  • 아무리 패키지를 설치하고, 룰을 설정해도 작업자가 사용을 안하면 효과가 없음
  • 하지만 개인이 매번 확인해서 실행하는 것은 실수가 발생할 여지가 있으며 강제성이 없음

(2) 문제해결방안

  • 자동화를 통해서 신경쓰지 않아도 자동으로 적용이 되게하고 특정 상황에서 강제로 적용이 되게 하자!

(3) 실행방안

  • git hook 도입
  • githook : git에서 특정 이벤트 발생 전/후로 특정 hook 동작을 실행할 수 있게 하는 것
  • 근데 설정이 까다롭고 모든 팀원이 완벽하게 사전과정을 수행해야만 hook실행을 보장함 > 해결책 : husky

(4) Husky를 통한 Git Hook 적용

https://typicode.github.io/husky/#/?id=articles
1) npm install husky --save-dev
2-1) (처음 husky 세팅하는 사람만 실행 필요) npx husky install
: husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트
2-2) add postinstall script in package.json
: 이후에 clone 받아서 사용하는 사람들은 npm install후에 자동으로 husky install 이 될 수 있도록 하는 설정

// package.json

{
  "scripts": {
    "postinstall": "husky install"
  },
}

3) scripts

// package.json

{
  "scripts": {
    "postinstall": "husky install"
  },
}

4) add pre-commit, pre-push hook

  • npx husky add .husky/pre-commit "npm run format"
  • npx husky add .husky/pre-push "npm run lint"

(5) 참고

  • git hook에서 eslint 에러가 발견하면 실행중인 script가 종료되기에 이 rule에 대해서 error로 설정할 지 warn으로 설정할 지 잘 고려해야함

    • 예시)
      • 아래와 같이 되어있으면 console.log 코드가 있어도 푸쉬가 되지만
        • "no-console": ["warn", { "allow": ["warn", "error", "info"] }]
      • error로 설정할 경우 console.log가 하나라도 있으면 푸쉬가 안됨
        • "no-console": ["error", { "allow": ["warn", "error", "info"] }]

  • 참고사항)

    • 린트에서 warning도 엄격하게 하나도 허용하지 않으려면
    • eslint --max-warings=0 으로 옵션을 붙여서 스크립트를 실행하면 됨
// package.json

{
  "scripts": {
		"lint": "eslint --cache --max-warnings=0",
  },
}

4/26 (수) ~ 4/27 (목) : 과제수행

배운 개념

debounce

https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/

useeffect

props

context api

4/28 (금): 두번째 세션 : AWS 실습

🤍 weekely, feeling

학습을 제외해서 느낀점을 기록합니다

  • readme, commitmessage, 배포, github 관리, 주석등은 내가 아닌 협업하는 동료들과 코드를 읽을 제 3자를 위해 필요한 과정입니다. 돌아가면 끝이 아닙니다. 사실 내가 짠 코드와 파일구조도 헷갈릴 때가 많은데, 남들은 얼마나 보기 불편할까요? 항상 이점을 유념합시다.
  • github 위키 : 함께한 팀원분들중에서 위키에 왜 이렇게 코드를 작성했는지 자세하게 적어주신 분이 있는데, 너무 보기도 편하고, 이해도 되고 큰 도움이 되었습니다. "그냥 (코드) 짰어요.."라고 말하면 안된다고들 하는데, 이 위키를 읽으면서 반성했습니다. 저도 제가 작성한 코드의 이유를 명확히 할 수 있는 사람이 되어야겠습니다.
  • 협업하는 태도 : 같이 하는 팀원분들은 git을 잘 다루는 분도, 팀을 잘 이끌어주는 분도, 마지막에 배포를 책임져주는 분도, 역할 분담을 잘 하는 분도 있었습니다. 둥글둥글, 하지만 명확하게 커뮤니케이션 하며 본인의 역량을 팀을 위해 활용하는 모습을 보면서, 저도 협업하기 좋은 동료가 되야겠다는 생각을 했습니다.
  • 부족한 실력 : 참으로 실력이 부족합니다. 화요일에 과제가 나오고 금요일까지 시간이 어떻게 갔는지 모르겠습니다. 자신없던 hooks 리팩토링을 맡은 덕분에 많은 자료를 찾아보고, 공부할 수 있어 좋은 시간이었습니다. 성장해야겠습니다.
  • 기록의 중요성 : 두말하면 입아픈 기록의 중요성, 4주간 10개 이상 포스팅을 목표로 잡겠습니다.
profile
Jenny
Developer로의 여정

0개의 댓글