김철용 기록소

문제 게시글에 상품 이미지가 없거나 빈 배열일 때도 캐러셀이 보이는 버그입니다.  props로 받은 이미지 중 이미지 주소가 없는 경우를 걸러서 newImages 배열을 만드는 로직이 있지만 애초에 받아온 배열이 ["", ""] 같은 상황일 경우 빈 배열이 만들어지게 됩니다. ItemImages 컴포넌트를 조건부 렌더링으로 newImages 배열에 값이 있을 때만 생성하고 있는데, 이 코드는 이미지만 조건부 렌더링할 뿐, 캐러셀은 그대로 렌더링되기 때문에 버그가 발생합니다.  해결 lodash 라이브러리의 isEmpty 메소드를 활용해서 newImages 배열이 비어있을 경우 프래그먼트를 반환하도록 코드를 수정했습니다.  수정 후에 상품 이미지가 없는 게시글에는 캐러셀이 보이지 않고, 이미지가 있는 게시..

문제 자유게시판의 댓글을 수정하는 과정에서 취소 버튼을 눌러도 취소가 되지 않는 버그가 발생했습니다.  기존 코드는 취소 버튼을 클릭하면 새로고침을 하는 것과 같은 동작을 하도록 해서 state를 초기화 하는 방법으로 댓글 수정을 취소했습니다. 로그인 기능을 localstorage에 저장하다가 refreshToken을 사용하면서 새로고침해도 캐싱된 데이터때문에 state들이 변하지 않아 리렌더링이 발생하지 않아 버그가 발생했습니다.  해결 댓글 수정은 수정버튼을 눌렀을 때 isEdit라는 state를 true로 바꿔 댓글을 수정 모드로 바꾸는 방법으로 구현되어 있습니다.댓글 수정을 취소하려면 단순히 isEdit를 false로 바꾸면 되기 때문에 onClick 함수에 props로 받아온 setIsEdit를..

문제 비밀번호 변경 후 자동 로그아웃이 되지 않는 버그를 확인했습니다.  기존 비밀번호 변경 코드에서 로그아웃 로직이 없는 것이 문제였습니다.  해결 accessToken을 비워주고 logout 뮤테이션을 요청하는 로직을 추가했습니다.  코드 수정 후 비밀번호를 변경하면 자동으로 로그아웃되는 것을 확인할 수 있습니다.

문제  헤더 부분에서 새로고침하면 현재 페이지 강조가 사라지는 버그와자유게시판, 중고마켓, 공지사항 선택 후 로그인 페이지나 마이페이지로 가면 페이지 강조가 사라지지 않는 버그를 발견했습니다.  기존의 코드에서 현재 페이지 기록을 state로 관리해서 생기는 버그였습니다.새로고침하면 state가 초기화되기 때문에 페이지 강조가 사라졌고,로그인 페이지나 마이페이지로 가도 헤더는 레이아웃으로서 메인 컨텐츠 밖에 있기 때문에 페이지 강조가 사라지지 않았습니다.  해결 recoil을 사용해서 현재 페이지를 전역 변수로 저장해둠으로서 다른 컴포넌트에서도 사용할 수 있게끔 수정했습니다.useEffect를 사용, 의존성 배열에 router.pathname을 넣어 페이지가 변경될 때마다 전역 변수인 currentPag..

optional chaining(?.)은 객체의 속성이나 함수를 사용할 때, 그 값이 null이나 undefined라면 에러를 발생하는 것 대신에 undefined를 리턴하게 해 준다. const player = { name : "동혁", class : "전사", inventory: { potion : 100 gold : 500 }}예를 들어 위 코드의 player 객체에서 인벤토리에 있는 골드에 접근하려면 const potionNum = player.inventory && player.inventory.potion;player 객체에 inventory가 있는지부터 검사해야 한다.  하지만 optional chaning을 사용하면 코드를 간단하게 작성할 수 ..

nullish 병합 연산자(??)를 사용하면 값이 null이나 undefined가 아닌 변수를 쉽게 찾을 수 있다. (a ?? b)의 결과는 다음과 같다.a가 null이나 undefined가 아닐 경우 a그 외의 경우 b a ?? b와 같은 동작을 하는 코드는 아래와 같다.const result = (a !== null && a!== undefined) ? a : b;  null이거나 undefined일 때의 값을 지정해 줄 수 있기 때문에 변수에 기본값을 할당하는 용도로도 사용할 수 있다.// name이 null이거나 undefined일 경우 철수를 할당const people = name ?? "철수"  연산자 우선순위가 낮기 때문에 다른 연산과 함께 사용할 때는 괄호를 붙이는 것이 좋다.    참고h..

타입스크립트?타입스크립트는 자바스크립트의 타입을 강제시키는 언어이다.자바스크립트는 파이썬처럼 따로 타입이 없어서 변수에 아무 값을 넣어줘도 문제가 없다. 아래 코드처럼 타입에 상관없이 number에 재할당이 가능한 것이 자바스크립트이다.let x = 1;x = "1";   타입스크립트는 변수의 타입을 강제시켜서 위와 같이 재할당할 수 없게 한다.let x: number = 1;x = "1"; // 재할당 안됨  타입스크립트를 사용하는 이유다른 언어와 달리 파이썬, 자바스크립트는 직접 사용해 보면 타입을 작성하지 않아도 돼서 코드 작성이 아주 편하다.하지만 여러 사람과 함께 규모가 있는 서비스를 개발할 때는 타입이 강제되지 않아서 버그가 발생할 수 있다. 아래 코드를 버튼을 클릭하면 count가 1씩 증가..

데이터 통신 API데이터 통신 API는 대표적으로 REST-API와 GraphQL이 있다.  REST-API와 GraphQL의 차이점REST-API와 GraphQL은 몇가지 차이점이 있다.우선 API의 이름 형식이 조금 다르다.API 요청REST-APIGraphQL네이버에서 1번 게시글 조회https://naver.com/borad/1board(1)네이버에서 철수 프로필 조회https://naver.com/profile/철수profile("철수") REST-API의 경우는 흔히 보는 인터넷 주소처럼 생겼고,GraphQL의 경우는 프로그래밍 언어의 함수처럼 생겼다.  API 요청의 응답 결과물에도 조금의 차이가 있다.REST-API의 경우 백엔드 개발자가 만든 함수에서 반환해주는 모든 데이터를 받아야한다...

추가  내가 등록한 상품과 찜한 상품을 확인할 수 있습니다.검색 기능을 사용할 수 있습니다.상품명을 클릭하면 상품 페이지로 이동합니다.판매된 상품은 분홍색과 취소선으로 표시됩니다.삭제된 상품은 취소선으로 표시됩니다.  전체내역을 통해 포인트 충전, 사용 내역을 한번에 볼 수 있습니다.충전내역에서 포인트를 충전한 내역을 볼 수 있습니다.구매내역에서 상품을 구매한 내역을 볼 수 있습니다. 구매한 상품의 이름을 클릭하면 상품 페이지로 이동합니다.판매내역은 상품내역과 동일합니다.포인트가 증가하는 내역(충전, 판매)은 전체내역에서 분홍색으로 표시됩니다. 포인트 충전 시 충전할 금액을 사용자가 입력합니다.결제는 카카오페이로 진행됩니다(테스트 결제임).  마이프로필에서는 프로필이미지와 비밀번호를 변경할 수 있습니다...