본문 바로가기

Project History/- Seoul Dev Competition18

서울 열린데이터광장 공공데이터 활용 웹 개발 - 4주차 정리 한 일 추천 시스템 초기 버전 캡슐화 진행 시작 검색 기능 및 UI 추가 유저 정보 받기 위한 폼 UI 제작 랜딩 페이지 초안 제작 휴대폰으로 UI 테스트 앞으로 할 일 쿠키에 JWT를 활용하여 비식별화된 유저 정보 담기 추천시스템 구현, fastapi로 데이터 응답하기 성공하기 필터링 기능 추가 구현 느낀점 필터링 기능을 UI로 구현하던 중에, RTK로 만든 search State가 filter State와 애매하게 분리된 부분이 있었습니다. search State에선 localstorage로 검색 기록을 저장 및 불러오는 과정이 있어서 분리를 해주는 것이 맞았으나, 단순하게 search 라고 파일명과 state명을 정한 것이 후에 유지보수에 좋지 않은 부분을 깨닫게 되었습니다. react-hook-f.. 2023. 5. 14.
Nextjs 폰트 최적화 시도하기 현재 무한스크롤을 보여주는 educations와 posts의 JS 파일이 용량이 큰 것으로 표시가 됩니다. 이를 해결하기 위해서 여러 가지 최적화를 알아보고 이 게시글에 정리합니다. Noto Sans Kr, Noto Serif KR 폰트 최적화 하기 빠른 3G로 설정하고 받아왔을 때 유일하게 폰트가 혼자서 22.22초가 걸리는 것을 보고 너무 심하다는 것을 느꼈습니다. 그래서 이를 해결하는 방법을 고민했습니다. (현재 파비콘은 아직 코드만 넣고, png 파일을 넣지 않았습니다.) 이 시점에서 font를 가져오는 방법은 public 폴더에 otf 파일을 직접 넣고, css 파일에 @font-face로 정의를 해뒀습니다. next/font 적용하기 올해 1월에 nextjs v13이 등장하고 @next/fon.. 2023. 5. 8.
nextjs typescript, tailwindcss의 eslint, prettier 설정 정리 글을 적는 계기 프론트엔드를 혼자할 때는 신경쓸 필요 없던 eslint, prettier 규칙이 협업을 하면서 환경설정이 서로 다르다보니 불필요한 변경사항이 생기는 문제가 있었습니다. 그래서 파일 기반으로 규칙을 정의하여 문제가 없도록 했습니다. .prettierrc.js module.exports = { printWidth: 80, semi: true, singleQuote: false, tabWidth: 2, useTabs: false, bracketSpacing: true, plugins: [require("prettier-plugin-tailwindcss")], }; .eslintrc.json { "env": { "browser": true, "es2021": true }, "extends": [.. 2023. 5. 8.
웹 개발 중에 페어 프로그래밍의 이해와 경험 정리 페어 프로그래밍이란? 페어 프로그래밍은 두 명의 개발자가 함께 작업하여 하나의 작업을 수행하는 방법입니다. 경험하게 된 계기 저는 FE와 팀 리더를 맡고 있었으며, 팀원 한 명이 문서정리와 FE 보조 역할을 수행했습니다. 이 과정에서 제가 멘토, 팀원이 멘티로서 페어 프로그래밍을 하게 되었습니다. 사실 페어프로그래밍은 실력이 비슷한 사람과 해야하는 것이 맞습니다. 왜냐하면 네비게이터와 드라이버로 역할분담이 나뉘며 각자 맡은 역할에 치중하기 때문에 네비게이터가 수준이 높다면 코드를 만지지 않아서 답답함을 느낄 수 있기 때문입니다. 네비게이터와 드라이버 네비게이터는 문제 해결 방법에 대해서 고민하며, 코드의 디자인, 알고리즘, 아키텍처 등에 대한 결정을 내립니다. 그래서 드라이버가 올바른 방향으로 코드를 작.. 2023. 5. 6.
nextjs 백엔드 JWT 쿠키 저장 구현 전에 express js 에서 jwt 로 로그인 인증을 해봤다보니 간단하게 유저의 비식별화된 정보를 jwt로 만든 후 쿠키에 저장하는 것을 해봤습니다. 하지만 nextjs 백엔드를 사용하지는 않아서 spring 백엔드를 담당하는 팀원에게 보여주고 구현을 부탁했습니다! 2023. 5. 5.
풀리퀘스트 리뷰하는 방법 정리 앞에서 팀원의 머지 실수를 방지하기 위해서 Branch protection rule을 지정하여 리뷰하는 방법을 기록하고자 합니다. Require approvals를 체크 해야 PR을 했을 때 승인을 해주는 상대방이 1~여러명이 가능합니다! 이렇게 하면 무분별한 merge로 사고를 방지할 수 있습니다. 리뷰를 통해 Approve를 하는 경우 Review를 통해 Request changes를 하는 경우 승인 기능을 사용하면서 처음 알게된 부분이 PR을 하고나서 merge를 안했다면 커밋을 추가하더라도 추가된 기록이 기존 open 된 PR에 기록이 되어진 다는 것입니다. 이것을 몰랐을 때는 항상 PR이미 해버렸다고 하면서 추가로 커밋을 하지 않고 머지 후에 추가작업을 했던 저를 반성했습니다 ^^; 코드리뷰할 .. 2023. 4. 28.

티스토리툴바