time to wander

Today I Learned 오늘은 전체적으로 폰트를 수정하고 퀴즈 문제에 이미지를 주입한 후 오후 5시쯤 에 배포해서 새벽 6시까지 버그를 수정했다. 폰트 설정 index.css에서 웹폰트로 사용할 폰트를 @font-face로 설정한다. GlobalStyle에는 가장 많이 쓰이는 Pretendard의 weight 300을 적용시켰다. 이번에 시멘틱 태그를 거의 사용하지 않았는데, 시멘틱 태그를 잘 사용하면 폰트를 적용하는 데 걸리는 시간도 단축할 수 있을 것 같다. 배포 후 버그 수정 역시나 이번에도 여러 버그들이 발견됐다. 다행히 내가 담당했던 페이지에서는 그렇게 많은 버그들이 있지는 않았다. 1. 퀴즈 문제를 풀 때 10번 문제의 답이 리덕스에 저장되지 않고 있었다. 퀴즈 문제 리스트의 인덱스를 이..

Today I Learned 오늘도 수정할 게 많았다. 소셜 공유하기 레이어 팝업 원래는 아래에서 위로 올라오는 바텀 시트를 만들고 싶었는데, 참고하려는 코드를 보니 우리의 프로젝트 규모에 적용하기에는 오버스팩이라 레이어팝업으로 만드는 것으로 변경했다. 모달 래퍼는 컴포넌트로 만들어둔 게 있어서 그걸 사용하려다가 이미 다른 곳에서 사용하려고 mui 패키지가 설치되어 있었기 때문에 mui의 백드롭을 사용하기로 했다. 팝업은 esc 키를 누르거나 닫기를 눌렀을 때만 닫히도록 만들었고, 소셜 공유하기는 세 개의 페이지에서 사용되기 때문에 컴포넌트화 하였다. 퀴즈 결과 화면 출력 로직 추가 퀴즈 10개 문제 중 맞힌 개수에 따라 특정 텍스트가 출력되도록 수정했다. 0-3개 : 아주 작은 기적..."밈기적". 4..

Today I Learned 어제까지 큼직한 기능 구현들을 끝내고 오늘은 본격적으로 자잘한 것들을 수정하기 시작했다. 퀴즈 결과 로직 유저가 퀴즈 10문제를 풀면서 선택한 답은 컴포넌트 안에서 state로 관리하는 게 아닌 리덕스에 저장되도록 설정했다. 그래서 퀴즈 결과 페이지에서는 아래 세 가지 재료를 가지고 화면에 결과를 띄울 수 있도록 간단하게 로직을 만들었다. 1. 유저가 선택한 답 2. 퀴즈 문제 및 정답 3. 결과 출력 /* QuizResult.js */ /* 생략 */ /* 유저가 선택한 답은 리덕스에서 꺼내오기 */ const user_answer_list = useSelector((state) => state.quiz.user_answer_list) /* 부모 컴포넌트에서 props로 넘..

Today I Learned 오늘은 짜잘짜잘한 작업과 큼직큼직한 작업들을 같이 처리했다. 무한스크롤 짤방 페이지에서 이미지를 여러 개 로드해야해서 무한 스크롤 기능을 넣기로 했는데, 이번에 처음으로 Intersection Observer API를 이용해서 무한 스크롤을 구현해 보았다. 정재남님의 유튜브 영상과 다른 분들의 코드를 많이 참고했는데, 이벤트 등록과 해제하는 작업에 대한 얘기와, 함수형 컴포넌트에서의 콜백함수를 통한 이벤트 해제 방법에 대한 내용이 기억에 남는다. 이전에는 lodash의 throttle과 스크롤 이벤트로 구현했었는데, Intersection Observer API를 이용하면 불필요한 스크롤 이벤트를 발생시키지 않을 수 있어 성능 측면에서 훨씬 좋다. 헤더 분기 작업 와이어프레임..

Today I Learned 사이드바 프로필 정보 상태관리 원래 사이드바에서 보이는 프로필 이미지와 닉네임 정보는 마이페이지 api가 아닌 딱 프로필 정보만 리스폰스로 받아오는 또다른 api를 사용하고 있었다. 마이페이지 api로 받아오는 데이터는 프로필 정보 외에도 유저가 작성한 글 등 양이 꽤 많았기 때문이다. 마이페이지에는 프로필 이미지와 닉네임 변경 기능이 포함되어 있는데, 프로필 정보 변경 기능도 마이페이지 모듈 안의 리덕스와 연동하여 관리하고 있어 프로필 이미지와 닉네임을 변경하면 마이페이지에서 보여지는 프로필 이미지와 닉네임은 바로 변경사항이 적용되었지만, 사이드바에서의 프로필 정보는 의도적으로 리로드를 해줘야 변경되는 문제가 있었다. 1) 사이드바는 그대로 프로필 정보만 받는 별도의 api..

Today I Learned 실전 프로젝트를 하는 시간이 지날수록 하루하루 내가 하는 일들이 줄어드는 느낌이다. 분명 새롭게 배우는 건 있는데 보여지는 건 지금까지 해왔던 것과 그렇게 큰 차이가 없어서 그런 건지.. 오늘은 주로 서버와 연결하는 일들을 했다. 마이페이지 DB 연결 마이페이지에서 유저와 관련된 어떤 데이터를 화면에 뿌려줄지 논의가 제대로 되지 않아서 백과 프론트 모두 작업 후순위로 두고 있다가 수요일 정기회의에서 픽스가 돼서 작업을 하기 시작했다. 화면에 출력할 데이터는 크게 세 가지 섹션으로 나눠져 있다. 1. 유저 프로필 영역 : 프로필 이미지, 닉네임 2. 유저가 등록한 단어 수, 게시글 수 (커뮤니티 + 짤방 게시글 합) 3. 유저가 등록한 단어, 게시글, 짤방 (커뮤니티, 짤방 따..