summer.log

인턴십 당시에는 우리가 일부 페이지만 담당했기 때문 라우터와 연결할 페이지 수가 아주 적었다. 그래서 원래 하던 것처럼 해도 크게 불편한 점이 없었다. 그러다가 어느날 불현듯 찾아온 깨달음이 있었는데, 바로 메뉴와 하위 메뉴의 수를 합치면 어마어마하게 많다는 것이었다..개발이 진행될수록 페이지 컴포넌트도 늘어날텐데 그때마다 하나하나 추가하면 라우트 코드만 몇백줄이 되는건가? 다른 웹사이트도 그런지, 어떻게 관리해야하는 건지 궁금해져서 서치에 들어갔다. 그러다가 찾은 글이 바로 아래의 링크이다. 참고 https://tech.kakao.com/2022/07/13/active-routing-for-e-certificate/ 전자증명서 리액트 페이지 및 레이어 동적 라우팅 전자증명서 프로젝트란 카카오톡에서 주민..

src 내부 폴더 구조 프로젝트의 단위가 커지다 보면 관리해야 할 파일이 늘어나기 때문에 처음부터 구조를 잡고 가는 것이 중요하다는 것을 느꼈다. 인턴을 하기 전까지는 폴더 구조에 대해 생각을 크게 해 본적이 없었는데, 멘토님들의 도움으로 구조를 한번 잡고 나니깐 협업할때 훨씬 수월했다. Components 재사용한 가능한 공통 컴포넌트를 모아놓은 폴더 아토믹 디자인을 도입하는 경우 하위폴더로 Atoms, Molecules, Organisms을 추가한다. 아토믹 디자인이란? 👇 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그 정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다. fe-developers.kakaoe..

목적 웹 에디터에 이미지 첨부 별도의 파일 첨부 인턴십을 진행하며 노션에 정리했던 첨부파일 관리법을 블로그로 옮기면서 좀 더 다듬어 보았다. (1)편에서는 케이스에 따른 구현 방법의 차이가 없기 때문에 웹 에디터에 이미지를 첨부하는 경우를 집중적으로 작성했다. 1. 에디터 선정 - CKEditor 5 에디터는 CKEditor5를 선택했다. 다양한 버전이 있어 공식 문서(https://ckeditor.com/docs/ckeditor5/latest/index.html)를 살펴보고 필요한 기능에 따라 선택하면 된다. 아래는 Document editor이다. 2. 구현과정 웹 에디터에 첨부한 이미지는 게시물 저장 버튼을 클릭할 때 저장되는 것이 아니다. 왜 그런지 생각해보면, CKEditor5의 글은 html ..