time to wander

Today I Learned 📌 짤방 페이지 Masonry 레이아웃 적용 완료 결국 무한스크롤 했을 때의 이미지 순서가 뒤바뀌는 문제를 해결하지 못한 채 문명의 이기를 이기지 못하고 react-masonry-css 라이브러리를 사용했다. 신기하게도 이전에 CSS로 했던 방법과 원리는 비슷한데 각 페이지마다의 이미지 순서가 유지되었다. 📌 명예의 밈짤 반응형 원래 height를 고정으로 해놨는데 모바일 기종이 se일 때 영역을 너무 많이 차지해서 넓이에 따라 높이도 유연하게 바뀌도록 해야 했다. 명예의 밈짤 레이아웃은 grid를 이용했기 때문에 grid 아이템의 높이는 minmax로 수정했다. 📌 Github Action 으로 클라이언트 자동 배포하기 자동배포를 생각해두고는 있었는데 지난 주 중간발표에서 ..

Today I Learned 오늘은 정기 회의가 있는 날이었는데, 디자인을 크게 수정해야 하는 상황이 됐다. 디자이너분들이 열심히 만들어주셨지만, 모두 적용하고 보니 처음에 기대했던 라인 아트워크와는 거리가 멀어 보였다. 그래서 디자인 수정본이 나오기 전까지 할 수 있는 것들을 하고 있다. 📌 서버에 퀴즈 결과 및 메인/퀴즈 인트로 페이지 랜딩 방문자 전송하기 백엔드 분들로부터 통계를 위한 추가 정보 요청이 있어서 간단하게 구현했다. axios api 인덱스 파일에 파라미터와 메소드, 경로를 작성한 후 전송할 컴포넌트 안에 임포트하여 연결하였다. 방문자 정보는 백에서 받을 때 ip 중복 처리가 되게끔 해주셔서 파라미터나 리퀘스트 바디로 보내는 데이터가 없었고, 퀴즈 결과도 url에 퀴즈 주제와 스코어를 ..

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를 이용하면 불필요한 스크롤 이벤트를 발생시키지 않을 수 있어 성능 측면에서 훨씬 좋다. 헤더 분기 작업 와이어프레임..