우아한 테크코스26 레벨2 - 장바구니 피드백 1. aria-label 사용자의 주요 국적을 고려해서 aria-label를 작성하자. 2. msw와 localStorage 본 미션의 msw 코드를 보면 localStorage 코드도 함께 사용되고 있다. 이렇게 되면 mocking 환경이 동작할 때와 동작하지 않을 때의 동작이 달라질 수 있다. 기본적으로 mocking 환경은 운영환경 즉, 배포환경에 영향을 주지 않는 것이 좋다. 따라서 msw 코드 안에서 localStorage 로직을 분리해 보자. 3. 서버와 상호작용 테스트 상호작용 테스트를 할 때, 인덱스를 통해 요소를 선택했다. 그러나 이 경우, 서버가 바뀌게 되면 인덱스의 순서가 바뀌게 되고 오류가 생긴다. 따라서 비동기 테스트를 작성할 때 서버 api 통신하는 부분을 항상 성공한다고 가정하.. 2023. 6. 6. 프론트엔드의 에러핸들링 이번 미션을 진행하면서, 에러핸들링을 어떻게 해야 할지 고민이 많았다. 서버와 통신도 같이 하면서 여러 가지 에러가 생겨났고, 그중에는 내가 통제할 수 없는 부분도 있었다. 이번 글을 작성하면서 에러가 정확히 무엇인지 알아보고, 에러 핸들링을 프론트엔드 단에서는 어떻게 할 수 있는지, 사용자에게 어떻게 알려야 하는지 등에 대해 작성해 보려고 한다. 에러란? 하드웨어의 고장 또는 소프트웨어가 본래의 동작을 할 수 없는 상태를 말한다. 에러의 분류 예측할 수 있는 에러 예측 불가능한 에러 크게 두 가지로 나누어 볼 수 있다. 예측할 수 있는 에러 서버 API로 전달받는 에러 중 상태코드로 예측할 수 있는 에러 사용자 입력 에러 인증 에러 없는 페이지에 접근했을 때의 에러 예측 불가능한 에러 서버 API로 전.. 2023. 6. 6. recoil의 selector 왜 쓰고 어떻게 쓰는 걸까? 이번 미션에서는 recoil을 통해 상태관리를 했다. recoil은 React를 위한 상태 관리 라이브러리라는 이름답게 쉽게 적응할 수 있었다. 다만, selector라는 개념은 처음 보았을 때 어떤 상황에서 쓰는 것인지, 왜 쓰는 것인지 와닿지 않았다. 리뷰를 받아 수정하면서 selector에 대한 정리 내용을 써보려 한다. selector란? selector는 atom을 전/후 처리하여 새로운 값을 리턴하거나 기존 atom의 값을 수정할 때 사용한다. 또한, atom의 값이 최신화되면 selector의 값 또한 최신화되어 편하게 사용할 수 있다. selector의 사용법은? const filteredTodoListState = selector({ key: 'FilteredTodoList', get: .. 2023. 6. 6. dependencies와 devDependencies package.json 패키지의 버전을 명시, 관리해 주는 파일 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)를 통해 설치한 모듈의 의존성을 관리한다. 기본 설정 npm을 사용하는데 기본적으로 필요한 필드 nom init을 하면 초기의 package.json 파일을 생성할 수 있다. JSON 포맷으로 이루어져 있다. { "name": "payments", "version": "0.1.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } name(프로젝트의 .. 2023. 5. 1. 레벨2 - 다시, 점심 뭐 먹지 리뷰 피드백 1. regular function과 arrow function 어느 것을 사용해야 할까? 일반적으로 한쪽이 권장될 만큼의 차이는 크지 않으며 팀 내 컨벤션으로 가져갈 수 있는 부분이라고 생각한다. 아래 두 가지를 학습해 보자. react가 아닌 js 관점에서 왜 arrow function을 쓰면 bind를 안 해줘도 되는 건지? 각 선언 방법에 따라 취할 수 있는 장단점은 무엇인지? 2. 컴포넌트 props의 인터페이스 한 파일에 모아놓기보다는, 각각 사용하는 컴포넌트와 한 파일에 두는 것을 권장한다. 재사용이 필요한 인터페이스라면 따로 이격 하는 것이 좋지만, 그렇지 않은 경우는 연관된 컴포넌트와 가까이 있는 것이 코드를 확인하는데 더 수월하기 때문이다. 3. 컴포넌트 내부 네이밍 class Rest.. 2023. 4. 25. 레벨1 - 영화 리뷰 피드백 1. 복잡한 조건문은 변수로 분리 src="${ posterPath !== "null" ? `https://image.tmdb.org/t/p/original/${posterPath}` : `${AddSkeleton}` }" 해당 코드는 템플릿 안의 src 조건문이다. 포스터의 경로가 null이면 스켈레톤을, 아니면 해당 포스터를 보여준다. src 안에 조건문이 있어 가독성이 좋지 않다. 코드 밖에서 posterPath에 대한 조건문을 변수로 만들고, 그 변수를 템플릿 안으로 가져오자. 2. 라이프사이클 메서드 활용 라이프사이클 메서드를 적극 활용하자. 생성자의 역할이 너무 크다. connectedCallback은 컴포넌트의 초기화 작업이나 DOM 조작 등을 수행하기에 적합한 라이프사이클 콜백이다. 이를 .. 2023. 4. 3. 이전 1 2 3 4 5 다음
