[TIL] 2022/01/05 Wed -
Today I Learned 어제까지 큼직한 기능 구현들을 끝내고 오늘은 본격적으로 자잘한 것들을 수정하기 시작했다. 퀴즈 결과 로직 유저가 퀴즈 10문제를 풀면서 선택한 답은 컴포넌트 안에서 state로 관리하는 게 아닌 리덕스에 저장되도록 설정했다. 그래서 퀴즈 결과 페이지에서는 아래 세 가지 재료를 가지고 화면에 결과를 띄울 수 있도록 간단하게 로직을 만들었다. 1. 유저가 선택한 답 2. 퀴즈 문제 및 정답 3. 결과 출력 /* QuizResult.js */ /* 생략 */ /* 유저가 선택한 답은 리덕스에서 꺼내오기 */ const user_answer_list = useSelector((state) => state.quiz.user_answer_list) /* 부모 컴포넌트에서 props로 넘..
[TIL] 2021/01/04 Tue - Intersection Observer API를 이용한 무한스크롤 구현, 헤더 분기 작업
Today I Learned 오늘은 짜잘짜잘한 작업과 큼직큼직한 작업들을 같이 처리했다. 무한스크롤 짤방 페이지에서 이미지를 여러 개 로드해야해서 무한 스크롤 기능을 넣기로 했는데, 이번에 처음으로 Intersection Observer API를 이용해서 무한 스크롤을 구현해 보았다. 정재남님의 유튜브 영상과 다른 분들의 코드를 많이 참고했는데, 이벤트 등록과 해제하는 작업에 대한 얘기와, 함수형 컴포넌트에서의 콜백함수를 통한 이벤트 해제 방법에 대한 내용이 기억에 남는다. 이전에는 lodash의 throttle과 스크롤 이벤트로 구현했었는데, Intersection Observer API를 이용하면 불필요한 스크롤 이벤트를 발생시키지 않을 수 있어 성능 측면에서 훨씬 좋다. 헤더 분기 작업 와이어프레임..
[TIL] 2022/01/01 Sat
Today I Learned 사이드바 프로필 정보 상태관리 원래 사이드바에서 보이는 프로필 이미지와 닉네임 정보는 마이페이지 api가 아닌 딱 프로필 정보만 리스폰스로 받아오는 또다른 api를 사용하고 있었다. 마이페이지 api로 받아오는 데이터는 프로필 정보 외에도 유저가 작성한 글 등 양이 꽤 많았기 때문이다. 마이페이지에는 프로필 이미지와 닉네임 변경 기능이 포함되어 있는데, 프로필 정보 변경 기능도 마이페이지 모듈 안의 리덕스와 연동하여 관리하고 있어 프로필 이미지와 닉네임을 변경하면 마이페이지에서 보여지는 프로필 이미지와 닉네임은 바로 변경사항이 적용되었지만, 사이드바에서의 프로필 정보는 의도적으로 리로드를 해줘야 변경되는 문제가 있었다. 1) 사이드바는 그대로 프로필 정보만 받는 별도의 api..
2021/12/31 Fri -
Today I Learned 실전 프로젝트를 하는 시간이 지날수록 하루하루 내가 하는 일들이 줄어드는 느낌이다. 분명 새롭게 배우는 건 있는데 보여지는 건 지금까지 해왔던 것과 그렇게 큰 차이가 없어서 그런 건지.. 오늘은 주로 서버와 연결하는 일들을 했다. 마이페이지 DB 연결 마이페이지에서 유저와 관련된 어떤 데이터를 화면에 뿌려줄지 논의가 제대로 되지 않아서 백과 프론트 모두 작업 후순위로 두고 있다가 수요일 정기회의에서 픽스가 돼서 작업을 하기 시작했다. 화면에 출력할 데이터는 크게 세 가지 섹션으로 나눠져 있다. 1. 유저 프로필 영역 : 프로필 이미지, 닉네임 2. 유저가 등록한 단어 수, 게시글 수 (커뮤니티 + 짤방 게시글 합) 3. 유저가 등록한 단어, 게시글, 짤방 (커뮤니티, 짤방 따..
