Frontend 개발자 - hyo.loui

🎯목적 : 이미지 파일 압축 업로드 기능 구현, 최종 성능 개선에 대한 기록 목차 문제점 발견 두번째 솔루션 (이미지 압축 라이브러리 적용) 파일 사이즈 비교 얻어진 결과 (Chrome LightHouse 점수) 1. 문제점 발견 게시글이 post가 되어 detail 페이지에서 사용자가 작성한 글이 보여지게 된다 codefolio 프로젝트 특성상 다량의 이미지가 들어가게 됨에 따라 editor의 번들 사이즈도 적지 않은데, 거기에 더 사이즈가 큰 이미지가 여러개 보여지게 되면서 detail 페이지의 로딩속도가 이미지의 사이즈와 수량에 따라 비례하게 증가했다. 기존의 static한 이미지는 프론트에서 next image를 사용하여 이미지 최적화를 하면서 빠르게 로딩 되었지만 뷰어에서 보여주는 이미지는 개별..

🎯목적 : Post, Edit post, Detail - 페이지 별 텍스트 에디터 변경 기존 : Toast UI Editor 변경 : UIW Markdown Editor 🥸 장-단점에 따른 결정 : Toast UI Editor : 이미지 업로드 기능이 있으나 번들 사이즈가 무겁고 SSR 지원이 안됨. UIW Markdown Editor : 마크다운 기본 내장, 번들사이즈 가볍고 , 이미지 업로드 기능 없음 UIW Markdown Editor 툴바 커스텀하여 사진 업로드 및 삽입 드래그 앤 드랍, 붙여넣기 기능 구현 기록 목차 에디터 적용 에디터 커스텀 이미지 업로드 이미지 삽입 드래그 앤 드랍, 붙여넣기 구현 결과 화면 1. 에디터 적용 우선 공식문서를 참고해서 MDEditor를 가져온다. 하지만 us..

3주차까지의 후기 및 소감 3주차까지의 후기 및 소감 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 1. MVP 중간발표 자료(기입) https://drive.google.com/file/d/1KOrHStRDEbr5ntKfacaeIZujRm3_U3Iy/view?usp=share_link codefolio-중간발표 drive.google.com 2. 기술적 의사결정 & 트러블슈팅 기록 라이브러리 선정 https://github.com/react-challengers/Codefolio/issues/44 https://github.com/react-challengers/Codefoli..

🎯목적 : Next 개발 환경 devDependencies 이해하고 기록 남기기 🤢 오류 해결 : 모듈 설치 후 생기는 타입 에러, import not found 1. Vercel Deployment Status Building Error 우리 프로젝트는 vercel을 사용하여 deploy를 한다. 첫 init을 한 후, vercel 에 깃허브가 연동이 되면 친절하게도 vercel은 자동으로 commit에 대한 변동을 인식하고 해당 내용으로 build를 해서 done 이 되는지의 여부를 알려준다. 하지만 오늘 커밋에서 building 에러가 났는데, import를 하는 컴포넌트는 2개 였으나 1개의 컴포넌트에만 에러가 나서 왜 그런지 이해가 안되었다.. 서칭 후 typescript 빌딩이 되지 않는 문제..

🎯목적 : Supabase Auth - 로그아웃, 로그인 상태(recoil) 1. recoil + supabase getSesstion() import { atom } from "recoil"; const userLoginCheck = atom({ key: "userLoginCheck", default: false, }); export default userLoginCheck; 전역 상태관리를 위해 프로젝트에서 recoil을 도입했다. 사용법은 다른 전역 상태관리 라이브러리에 비해 너무 간단하다. atom을 import해준 후 useState처럼 사용하면 된다. 타입스크립트로 인해 defaul의 타입을 지정해주고, atom에 전달되는 object는 key와 value로 구성되며 key에 선언할 text와..

🎯목적 : 에디터 기존의 문제점 개선 (사진 업로드 시 뷰어에서 이미지가 string 형식으로 출력되어짐) 개선 : image url과 file name으로 보여질 수 있도록 ** 최종 프로젝트 기간 매우 바쁜 관계로 우선 중요 코드만 적어놓았음** 1. UI tag handleOnEditorChange()} /> hooks 사용하여 addImage 라는 함수를 커스텀하여 만들어 주었다. 2. addImage (이미지 생성 전체 과정) const addImage = async (blob: File, dropImage: HookCallback) => { const img = await compressImg(blob); // 이미지 압축 if (!img) return; const url = await upl..

🎯목적 : DropDown componenet 생성 > 개선 PostTitle componenet 생성 1. DropDown Layout 만들기 const DropDown = ({ defaultValue, options, }: DropDownProps) => { const handleChange = (e: React.ChangeEvent) => { e.preventDefault(); }; return ( {options.map((option) => ( {option} ))} ); }; export default DropDown; prop 으로 전달받은 defaultValue / options 를 활용해 select-box로 보여주는 컴포넌트를 작성했다. 처음엔 라이브러리를 가져와서 활용하려고 했으나, t..

🎯목적 : 코드 컨벤션 유지를 위해 ESLint와 prettier를 사용하여 초기세팅, 과정 기록 🤢 오류 해결 (as-is to-be): ESLint function declaration ESLint 적용시 단언문 (!) 경고 메세지 1. ESLint 대부분의 개발자들은 eslint를 사용하지 않고, prettier에 의존하여 코드를 작성한다. eslint 는 코드 퀄리티를 보장하도록 도와준다. 예시로는 react에서 컴포넌트 선언을 arrow function 으로 지정하고, 어떤 파일에서 일반함수로 되어있다면, 에러를 발생시켜 코드 컨벤션이 통일이 되도록 유도한다. 이 과정은 prettier 처럼 '파일 저장' 했을 때와는 다르게 lint 를 run 해야 동작한다. npm install -D esli..