목록분류 전체보기 (160)
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..
🎯목적 : Javascript Algorithm 문제풀이 과정을 기록합니다. 나만의 해결방법을 공유합니다. 문제 "*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다. 정수 n 이 주어지면 높이와 너비가 n 인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요. 풀이 결과 해결 방법 n은 입력받은 값 3이 출력되었다. 이것을 활용하여 1,2,3 ...n 만큼 반복해서 출력해줘야 한다. 1 --- 2 --- 3 그래서 for문을 사용했고, i는 증가연산자로 n까지 증가하기 때문에 해당하는 라인의 숫자를 기억할 수 있다. 하지만 i 만큼 "*"를 출력하기 위해 다른 대부분의 풀이에서는 또 for문이 등장하여 이중포문의 형태로 문제풀이가 되었다. 나는 이중포문을 좋..
🎯목적 : Javascript로 Algorithm 문제풀이 한 과정을 기록합니다. 나만의 해결방법을 공유합니다. 문제 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. 풀이 결과 맙소사... 음수의 경우를 생각해서 내림차순으로 정렬을 했는데 음수의 곱이 더 큰 경우를 생각하지 못했다. 1번 문제에서는 [4, 2, 1, -3, -5] 순서로 정렬됨. 해결 방법 내림차순으로 양수의 최댓값을 구하고 오름차순으로 음수의 최댓값을 구했다 이로써 둘의 값을 삼항연산자로 비교하여 큰 값을 리턴한다. 다른 풀이를 참고하려고 했지만 대부분 이중for문을 사용했다.. 나는 최대한 시간복잡도가 증가하지 않..
📝 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 빌딩이 되지 않는 문제..