분류 전체보기125 생각해보기🤔 - 자동차 경주 🚗 함수를 선언하는 다양한 방식은 각각 어떤 차이가 있나요? 함수 선언식 function functionName() { // 함수 내용 } 함수가 호이스팅(Hoisting)이 되어 선언 위치에 상관없이 사용할 수 있다. 즉, 함수를 선언하기 전에 호출할 수 있다. 함수 표현식 const functionName = function() { // 함수 내용 } 화살표 함수 const functionName = () => { // 함수 내용 } 자신만의 this 값을 가지지 않기 때문에, 상위 스코프의 this를 참조한다. 생성자 함수 function ConstructorFunction() { // 프로퍼티 및 메소드 정의 } 즉시 실행 함수 (function() { // 함수 내용 })(); 🚗 어떤 경우에 .. 2023. 6. 16. 레벨2 - 장바구니 협업 리뷰 피드백 1. msw와 리액트 렌더링의 순서 리액트 렌더링보다 msw가 먼저 실행되어야 한다. 그래야 렌더링 과정에서 API 호출과 관련된 오류가 나면 잡아낼 수 있기 때문이다. 2. breakpoint 상수화 화면 breakpoint도 상수화를 하면 일관되게 반응형 디자인을 구현할 수 있다. @media (max-width: 640px) { @media (max-width: ${breakpoint.MD}) { 3. props는 필요한 것만? 통째로? orderProducts, showDetailsLink, }: OrderProductListProps) => { const { orderId, orderDateTime } = orderProducts; orderId와 orderDateTime 두 개만을 사용하고 있.. 2023. 6. 8. 레벨2 - 페이먼츠 리뷰 피드백 1. 함수형 업데이트 기존 상태를 기반으로 업데이트하는 방식은 좋지 않다. 리액트에서 상태 업데이트는 비동기적으로 일어날 수 있기 때문에 상태를 직접 참조하거나 이전 상태를 바로 사용하면 예상치 못한 결과를 초래할 수 있다. const addCardItem = (cardItem: CardItemInfo) => { const updatedCardList = [...cardList, cardItem]; setCardList(updatedCardList); }; 따라서 위의 방식보다는 아래의 함수형 업데이트 방식을 사용해 보자. const updateCardList = (cardItem: CardItemInfo) => { setCardList((prevCardList) => [cardItem, ...prevC.. 2023. 6. 7. 레벨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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 21 다음
