본문 바로가기

분류 전체보기

 (90)
[ 항해99 실전프로젝트 ] 아바타샵 포인트 차감 로직 유저의 기존 아바타 정보와 다른 개수만큼 포인트를 곱하면 되는 것인데... 가장 깔끔한 방법은, 최종 포인트를 합산해서 서버로 넘겨줄 때 계산을 해서 포인트가 음수일 경우 알럿을 띄워주면서 초기포인트값으로 다시 돌리는 방법인 것 같은데 if문이 순서대로 작동하지않아 문제가 된다. 초기에 생각한 포인트 차감 로직은 다음과 같다. const discountPoint = () => { if (userSelect?.Eye !== initialuserSelect?.Eye) { console.log(userSelect?.Eye !== initialuserSelect?.Eye); setPoint((prev) => prev - 300); } if (userSelect?.Mouth !== initialuserSelect..
[ 항해99 실전프로젝트 ] 프로젝트 튜토리얼 만들기 실제 웹을 다른 사람이 사용해보니, 어떠한 기능들이 있는 지 몰라 그냥 넘어가는 경우가 대다수 였다. 실제로 힘들게 구현을 해놓고는 기능을 사용하지 않는 모습을 보니, 너무 마음이 아팠다. 그래서, 첫 회원가입 후 로그인 시 사용방법을 알려주는 모달을 만들기로 하였다. 위와 같은 튜토리얼을 만들어보고 싶었다. 순서대로 각 기능들을 설명해주는 말풍선이 생기고, 배경을 클릭하면 다음 말풍선이 뜨는 방식이다. 어떻게 구현할 지 생각해보았다. 생각생각 z-index를 활용하여, 하나씩 벗겨내는 형식으로 구현해보자. 조건문은 어떻게 짜야되지? 생각보다 그냥 간단한 로직이라서, 바로 결과물로 보여주자. 튜토리얼 완료 시, 보상과 좀 더 다양하게 설명 말풍선을 꾸며볼 필요가 있는 것 같다. 기존 회원가입 시, 디폴트..
[ 항해99 실전프로젝트 ] 리액트 쿼리 입문하기 리액트 쿼리는 서버상태관리라이브러리이다. 리덕스는 클라이언트의 데이터상태를 전역으로 관리하게 해주는 라이브러리이고, 리액트 쿼리는 클라이어트가 아닌 서버의 상태를 관리하는 라이브러리이다. 리액트 쿼리를 왜 쓰는데? => 위의 개념과 비슷하다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있다. 이 점을 해결하기 위해 React-Query가 만들어졌다. 리액트 쿼리 다양한 기능들 React Query는 별도의 설정 없이 즉시 사용 가능하다 캐싱을 효율적으로 관리해준다 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다. 백그라운..
[ 항해99 실전프로젝트 ] 외면하지 말기 이제 런칭까지 1주일이 채 남지 않았다. 이때까지 구현된 기능들을 배포 후, 팀원들끼리 직접 이용해보았는 데 사소한 오류들이 많이 발생했다. 이 오류들을 들쳐보니, 사실 이미 알고있었으나 귀찮아서 잠깐 미뤄둔 문제들이였다. 그래서 오늘부터 사소한 오류들을 외면하지 않기로 하였다. 오류가 생기면, 지금 당장 고치기로 하였다. 현재 런칭을 이번주 토요일인 , 12월 3일로 목표를 삼았다. 런칭까지 최대한 오류들을 잡고, 최적화까지 진행해볼 생각이다. 아래는 런칭까지 해결해야할 투두리스트이다. 기능 수정 마이페이지 및 편집페이지 수정 (디자인만 나오면 ㄱㄱ) 아바타샵 아바타이미지 넣기 랭킹페이지 api만 준비되면됨 모임작성할때, 오늘날짜가 디폴트값으로 예약현황의 최대숫자는 빼기 마감을 하면, 참가하기버튼 막힘..
[ 항해99 실전프로젝트 ] 초기 렌더링 개선 리액트는 SPA로 사용자가 느끼기에 페이지를 넘길 때 마다, 이미 준비된 페이지를 보여주기 때문에 매우 매끄러운 인상을 줄 수 있다. 허나 이것의 단점이라면, 초기에 모든 파일을 하나의 번들로 만들어 로드한다는 것이다. 그래서 초기 로드시간을 줄이려면, 한꺼번에 모든 파일을 로드하는 것을 여러 개의 번들로 나누어 주고 쓸모없는 번들 사이즈를 최대한 줄여야 한다. 가장 먼저, 구글의 Lighthouse를 통해 최적화를 하기 전 상태를 분석해보자. 그리고 아래는 최적화 하기 전, 번들 파일들을 사이즈별로 정리해놓은 이미지다. 아이콘들이 생각보다 엄청난 사이즈를 차지하고 있었다. moment-timezone도 대체해야겠다. 시간만 가져오는 거 치고, 너무 사이즈가 큰데? react-icons를 그래봤자 5-6..
Q1. 호이스팅 문제 Q1. 무엇이 출력 될까요? function sayHi() { console.log(name) console.log(age) var name = 'Lydia' let age = 21 } sayHi() 아래를 열면, 정답이 보입니다. 더보기 정답은 name은 undefined이고, age는 refference error이다. 여기서 착각할 수 있는 포인트는 var만 호이스팅이 되나? 라고 생각하게 된다. 하지만 자세히 뜯어보면, var와 let, 그리고 const 모두 호이스팅은 된다. 하지만 var만이 선언과 초기화가 동시에 일어난다는 것이다. 그래서 var는 undefined를 출력하게 된다. 하지만, let 키워드는 초기화가 실행되기 전에 변수에 접근하려 했으므로 참조오류가 뜨는 것이다. 그리고 그 ..
[ 프로그래머스 lv1 ] 명예의 전당 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다. 이 프로그램에서는 매일 "명예의 전당"의 최하위 점수를 발표합니다. 예를 들어, k = 3이고, 7일 동안 진행된 가수..
[ 항해99 실전프로젝트 ] 중간발표 회고록 실전프로젝트를 시작한 지, 벌써 3주가 지나갔다. 아무래도 처음으로 진행하는 실전프로젝트이다보니 아쉬움이 많이 남는 것 같다. 무엇이 아쉬운 지는 그냥 잘 모르겠다. 근데 실전프로젝트인데 오히려 미니프로젝트 때보다 열정이 식은 느낌을 나 혼자 받았다. 중간 2주차일때는 정말 코드짜기가 귀찮을 때도 있었다. 아마도 1주짜리 프로젝트만 해오다가, 6주라는 소리에 살짝이나마 안주했던 것 같다. 중간발표때는 서비스 소개 및 아키텍처등을 5분간 발표하여, 멘토님을 통하여 피드백을 받았다. 일단 끝까지 사이트기능에 온 신경을 쓰다가 늦잠을 잤고, 기술질문에 대한 답변을 준비하지도 못했다. 그래서 대답이 매끄럽게 나오지 못했다. 사실 한편으로는 아무것도 찾아보지않고, 내 머릿속에 있는 지식으로 대답하면 어디까지 할 ..

티스토리툴바