Frontend 개발자 - hyo.loui

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

📝 WIL: Weekly I Learned Work done this week 이번 한 일! Project : Codefolio = 프로젝트 진행중 ( 폴더링, 중간 발표, KTP 회고 ) 배운 내용 컴포넌트 별 작업 후 페이지에 적용 supabase 연동하여 서버통신 Next에서의 dev dependency array Project review 테스크 관리, 프로젝트 프로세스가 잘 진행되는 깊은 팀 프로젝트 경험을 하고 있습니다. 더욱 발전 되도록 기여하고 싶습니다! 3주차 중간 발표 튜터님 피드백 최종 발표시 + 부가설명이 필요. readme 데이터 모델링 추가. 트러블 슈팅 아주 칭찬합니다. 버그 개선하여 최종 발표까지 준비 잘 하길. 중간 발표에서는 캠프 측에서 7분의 발표시간을 꼭 준수해달라고 ..

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..

📝 WIL: Weekly I Learned Work done this week 이번 주 한 일! Project : Codefolio = 프로젝트 진행중 ( 1.0.0 > 1.1.0 version 배포 ) Project review 기획 & 디자인 회의를 하며.. 사실 우리의 mvp가 잦은 변동이 생기고 타겟(고객)층이 명확하지 못한 문제점이 제기되어 긴 기획 회의 끝에 의견을 좁히는 과정이 순탄하지는 않았다. 하지만 이것 또한 충분한 경험이라고 생각한다. 디자이너 관점, 기획자 관점, 개발자 관점을 두루 생각하게 되는 계기가 되었고, 또 의견 조율하는 과정에서의 커뮤니케이션과 기획 의도를 명확하게 전달하는 부분에서의 시행착오를 겪게 되었다. 이후 페이지 작업에 돌입해서 각자 컴포넌트별로 작업하여 나누었던..

🎯목적 : 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..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : 최종 프로젝트 시작 = 최종 프로젝트 시작 ( init ) 챌린지 팀 헤커톤 진행 = 2.10 ~ 11일 ( 24시간 ) Hackathon review 이번 주 가장 인상 깊었던 '헤커톤'에 대해 리뷰 하겠다. 우선 우리는 2월 10일 부터 11일 까지 안양 오피스텔을 대관하여 진행했고, 12시에 모여 간단히 식사 후, 해커톤 장소로 가서 각자 장비 셋업을 끝내니 2시가 다 되었다. 팀장님 주도 하에 디자이너님과 회의를 진행했고, 우선적으로 와이어프레임이 나와서 무난하게 진행 할 수 있을 것 같았다. 또한 우리는 디자이너..