일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Jest Matchers
- 인프런 멘토링
- ESLint
- Frontend
- 패스트캠퍼스
- 패캠
- F-Lab
- CICD
- 가상돔
- 에프랩
- 주간 회고
- F-Lab 오티
- 전역 상태 관리
- 모노레포
- context api
- jest
- Reconsiliation
- 데이터 타입
- javascript
- Husky
- TDD
- aws s3
- github actions
- 마이크로프론트엔드
- 비동기 테스트
- 프론트엔드
- virtual DOM
- React
- Prettier
- F-Lab 회고
- Today
- Total
목록분류 전체보기 (16)
bytrustu tech blog
지원 동기 교육 플랫폼에서 내가 가장 좋아하는 인프런의 멘토링 서비스를 이용해 보았다. 목적은 내가 지원하고 싶은 기업 그리고 현직자 인터뷰를 통해 나의 강점/약점을 파악하고 싶었다. 자신만의 경험을 공유받는 것이 정말 큰 가치라고 생각하는데 나 자신이 많은 시간을 쏟았음에도 알지 못했던 식견들이 잠깐의 대화를 통해서도 깨달음을 가진 적이 많기 때문이다. 나는 중고거래 플랫폼을 많이 이용하는 편이다. 오랜 시간 동안 중고거래를 해보면서 사기도 당해봤고, 경찰서에 신고도 해본 경험이 있다. 그래서 항상 작은 거래라도 상대방에 대한 불신이 마음 한 곳에 자리 잡고 있는데, 당근마켓을 이용하면서 중고거래 플랫폼에 대한 신뢰를 크게 느끼게 되었다. 내가 자주 이용하여야 하는 플랫폼이고, 그 안에서도 나의 평판을..
개발 > 빌드 > 테스트 > 릴리즈 > 배포 어느 정도 규모가 있는 개발팀의 경우에는 CI/CD를 구축하는 것이 보편적이다. Github Actions은 빌드, 테스트, 배포를 자동화시키는 파이프라인을 만들 수 있다. Github Actions를 통해서 개발에서 배포(AWS S3) 까지의 작업을 자동화하여 구축해 보자. Github Actions Github Actions란, 개발 라이프사이클 안에서 Pull Request, Push 등의 이벤트 발생에 따라 자동화된 작업을 진행할 수 있게 해주는 기능이다. CI (Continous Integration) CI는 코드를 지속적으로 통합해나가는 것을 의미한다. 일반적으로 코드의 통합은 Github의 PR을 통해서 진행할 수 있기에 CI 과정에서 도대체 무엇..
ESLint, Prettier, Husky 프로젝트를 초기 구성하게 되면 코딩 컨벤션을 정하게 된다. 나만의 코드 취향이라던지, 팀원과 협업 과정에서 자체적인 규칙으로 일관된 코드 스타일을 유지하기가 힘들 수 있다. 이러한 비효율을 유발하는 부분을 극복하기 위해 Lintter와 Code Fomatter를 사용하게 된다. 그런 도구에 ESlint, Prettier, Husky가 있다. ESLint Docs 일관된 버그를 피할수 있는 코드를 짜기 위해서 만들어진 코드 분석 도구이다. 작성된 코드의 구문을 분석하여 규칙, 버그가 발생할 여지가 있거나 불필요한 코드 등에 대한 경고를 띄워준다. 설정 커스터마이징을 허용하기에 필요한 규칙들을 커스텀해서 적용이 가능하다. ESLint 설치 eslint-config-..
Jest Mock에 대해 알아보자 https://jestjs.io/docs/mock-functions Mock Functions · Jest Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new, jestjs.io Mock Functions 실제 구현 된 함수를 Mock 함수로 대체하면 코드 간의 상호 작용..
비동기 함수를 테스트해보자. https://jestjs.io/docs/asynchronous Testing Asynchronous Code · Jest It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this. jestjs.io async.js fetchProduct 함수의 매개변수가 error의 경우 Error를 발생합니다. const..
Jest Matchers 사용법에 대해 알아보자. https://jestjs.io/docs/using-matchers Using Matchers · Jest Jest uses "matchers" to let you test values in different ways. This document will introduce some commonly used matchers. For the full list, see the expect API doc. jestjs.io Common Matchers toBe: 사용하는 코드가 정확하게 값을 체크한다. loop 중 내용도 모두 체크 가능하다. test('2+2 의 결과는 4이다.', () => { expect(2 + 2).toBe(4); }); test('Arra..
https://f-lab.kr/ F-Lab - 상위 1% 개발자들의 멘토링 아마존, 페이스북, MS, 네카라쿠배 등 상위 1% IT기업 출신 개발자들이 초급 개발자를 중급 개발자로 레벨업 시켜주는 멘토링 서비스 f-lab.kr 2023.02부터 F-Lab Frontend 코스를 참가하게 되었다. 최근에 학습을 하더라도 정체되어있다는 느낌을 많이 받았고, 객관적으로 내가 부족한 것이 무엇인지 명확하게 인지하고 있으나 실천으로 잘 이어지질 않았다. 그래서 옆에서 나의 부족한 부분을 잡아줄 멘토가 필요하다는 생각이 들었고, 평소에 광고로 많이 접했던 F-Lab이 떠올라 관심을 가지게 되었다. 교육비가 꽤 부담이 가긴 했지만 지금이 아니면 경험할 기회가 없을 것 같아 도전하게 되었다. 멘토링 참여 전에 읽어 와..
Jest 초기 설정과 간단한 사용법에 대해 알아보자. 공식문서: https://jestjs.io/ 01. 환경설정 npm Jest를 설치하기 이전에 외부 라이브러리를 설치하고 관리하기 위해 npm이 필요하다. 프로젝트를 다른 개발자들도 동일한 개발환경 제공을 위해 dev추가도 하였다. npm init --y npm install jest --global npm install jest --save-dev npm install @types/jest Jest 초기 설정 jest --init Jest 초기 설정을 진행하면 Jest를 사용할 수 있도록 jest.config.js 파일이 생성된 것을 확인할 수 있다. 여기까지 진행 되었다면 이 프로젝트는 Jest를 사용할 준비가 되었다. 🎉 02. 테스트 테스트 작..