프로젝트 시작점react에서는 주로 react-router-dom을 이용해서 라우팅을 처리하고, next.js에서는 내장된 파일/폴더 기반 라우팅을 이용합니다저는 주로 next.js를 사용해서 파일/폴더 기반 라우팅이 더 익숙하였고, 이를 react-router-dom에서도 사용하고싶은 마음에 시작하였습니다. 프로젝트 아이디어기본적인 아이디어는 next.js의 폴더 기반 라우팅을 그대로 구현하는거였습니다.즉 [폴더명]/page.tsx 구조로 제한을 걸고 폴더명이 path가 되는 방식입니다 이를 위해서는 내부적으로 폴더/파일 구조를 탐색하고 이 특정 패턴의 폴더/파일 경로를 가져와서 react-router object로 바꾸는 방법이 있다고 생각하였습니다 실제 구현`import.meta.glob()`를 활..
[radix-ui 버그 이슈] Setting display:flex on accordion content creates double animation · Issue #2832 · radix-ui/primitivesBug report Current Behavior The default display for Accordion.Content is block. Setting it to flex causes a double animation when closing a section. Expected behavior The animation should not be af...github.com[해당 이슈에 대한 답변] Setting display:flex on accordion content creates doub..
버그 이슈: https://github.com/shadcn-ui/ui/issues/4654#issue-2491018149 [bug]: Duplicate classNames(border) in checkbox, radio group · Issue #4654 · shadcn-ui/uiDescribe the bug If I install checkbox in CLI, I encountered duplicate border-color issue. PR#1089 said that this problem has fixed... I found accurate comment on related first bug issue, and I che...github.com버그 이슈에 대한 제 코멘트: https://github..
문제: 네이버 카페를 PC에서 이용할 때, 동일한 탭에서 페이지 이동을 할 때 URL이 반영안되는 현상문제 이유: 네이버 카페가 iframe으로 구현되어있어서참고: 네이버 고객센터 공식 답변 개별 카페에서 게시글 내용 확인 시, 주소창에는 게시글 URL이 아닌 개별 카페의 URL이 노출되는 것을 확인할 수 있습니다. 이는 카페 PC버전의 게시글 페이지가 iframe구조로 되어 있어서 입니다. 문의주신 현상도 이런 구조로 인해 발생하는 문제인데요,현재 카페 구조이미지에서 보이듯, 특정 게시글에서도 카페 메인 url로 설정되어있습니다따라서 이 페이지에서 새로고침을 하면 메인화면으로 이동됩니다 해결방법: 크롬 확장프로그램으로 페이지 이동시 Iframe 내부의 DOM 변화를 캐치하고 해당 DOM에서 url 정보..
저는 팀프로젝트시 디자이너, 기획자 또는 다른 프론트 팀원으로 부터 무언가 구현 요구를 받으면 디자인 시스템을 설계하여 청사진을 만든 후에 작업을 시작합니다. 디자인 시스템이란? 디자인 시스템은 디자인 원칙, 색상 팔레트, 타이포그래피, 컴포넌트, 패턴 등과 같은 디자인 요소들을 표준화하고 일관성 있게 관리하는 시스템을 말합니다. 제가 생각했을 때 디자인 시스템을 설계할 때 중요하게 생각하는 요소는 아래와 같습니다. 재사용성 / 일관성 / 유지 및 보수 / 협업 이번 글에서는 제가 실제로 요구를 받은 것을 어떤식으로 구현(react)하는지를 예로 들어 디자인 시스템을 구축해보려합니다 1. 요구사항 분석 우선 어떤 요구를 받게되면 가장 먼저하는 것은 이것을 구현해야될 위치(역할)를 정합니다. 저는 Reac..
요즘 모든 프로젝트에 test 파일을 작성하고 있습니다. 하지만 처음 적용하다 보니 이런저런 문제를 만나게 되는데, 그중 가장 인상깊었던 문제-해결 과정을 글로 작성해보려 합니다 문제: Navbar 컴포넌트가 Redux의 Provider로 감싸여 있지 않아서 오류가 발생 에러로그 더보기 에러 로그 renders Navbar and children could not find react-redux context value; please ensure the component is wrapped in a 8 | 9 | const Navbar = () => { > 10 | const dispatchFn = useDispatch(); 에러 메시지를 확인하여 Navbar 컴포넌트에서 react-redux의 Provi..
요즘 팀 프로젝트를 진행하면서 정말 많은 깃허브 기능을 사용해 봤습니다. 이를 통해 원활한 소통과 문제 해결을 진행할 수 있었습니다. 반면 이런 생각도 들었습니다 -> " 개인 프로젝트에서는 필요 없는 거 아닌가? " 일단 결론부터 말하면, 제 개인적인 생각으로는 필수라고 생각합니다. 정말 갑자기 떠오른 예시를 들어본다면 [롤을 하는데, 어차피 내가 잘해서 캐리 하면 되니까 우리 팀 조합이나 상대팀 조합은 고려하지 않고 내가 항상 가던 템트리 올리고, 내가 하던 대로 하면 되는 거 아닌가? 조합 따지는 건 팀랭이나 프로들이나 하는 거지~] 이 느낌입니다 써놓고 보니 정말 별로인 예시인 거 같지만... 왜 이 예시를 떠올려나면 롤을 하는데 = 개발을 하는데 내가 잘해서 캐리 하면 = 내가 개발 능력이 좋아..
이번에 next.js를 이용하여 개인 프로젝트를 시작하였습니다. 처음 사용기술들을 선택할 때 많은 고민을 하여 대부분 결정되었지만 orm과 css가 고민이였습니다. orm에 대한 고민은 다른 글에서 작성해보고, 이번 글에서는 css 선택시에 제가 고려한 점에 대해서 작성해보겠습니다. 1. 내 프로젝트의 CSS 방식을 결정하기 위한 고민 CSS방식을 결정하기 위해 제가 고민한 것들입니다. 프로젝트 규모 프로젝트가 작고 간단하다면 CSS Modules 같은 내장된 CSS 방식을 사용하는 것이 편리하다고 생각하였습니다. 반면 프로젝트가 크고 복잡하다면 Styled-Components 같은 라이브러리 방식을 사용하는 것 더 효율적이라고 생각하였습니다 프로젝트 팀 구성 이는 개인 프로젝트이기 떄문에 고려하지 않았..
