회사에서 shadcn/ui를 적극적으로 활용해서 앱을 개발하고 있다. https://ui.shadcn.com/ shadcn/ui Beautifully designed components built with Radix UI and Tailwind CSS. ui.shadcn.com 이미 만들어진 컴포넌트를 앱으로 가져와 직접 커스터마이징 할 수 있고, use-react-form과 같은 편의성 좋은 기능도 함께 딸려오니 작업할 때 굉장히 편리하다. 각설하고 shadcn/ui를 이용해 간단한 signin 컴포넌트를 만든 것을 기록해보려 한다. 사실 form을 다루는 것은 정말 까다롭다. 각 종 유효성 검사, 에러메시지, submit 등 신경쓸 것이 많은 로직이 한번에 모이므로 생각없이 짜다가는 정말 작업의 늪에..
개발 목적 만들고 있는 프로젝트에 회원가입 로직을 추가하기 위함. 인증이나 유효성 검증 등에 다소 민감한 회원가입 이라는 로직을 백과 프론트에서 직접 구현해보면서 구현 역량을 늘리고, 에러를 경험해보기 위함. 회원가입 로직 개발 (백엔드) 회원가입한 유저의 데이터를 보관하기 위해 User 모델을 다시 설계했습니다. User 모델 구성 User 모델(users 테이블) id : 테이블 내 유일성 보장. 기본키, 암호화 loginId : 유저가 로그인할 때 사용하는 id. 문자열. not null, unique password : 로그인 시 사용하는 password. 암호화, not null (개인정보 보호법에 의해 반드시 암호화해야함) email : 가입할때 사용하는 이메일. 문자열, email 유효성 검..
면접관님께 컨텍스트와 리덕스의 차이에 대한 질문을 받았는데요. 프론트엔드 개발자라면 당연히 자신있게 말씀드려야 하는 부분임에도 불구하고, 어중간하게 알고 있는 점 + 긴장한 탓으로 횡설수설하게 되었습니다. 같은 실수를 반복하지 않도록 컨텍스트와 리덕스의 차이에 대해 추가적인 공부를 했고, 그것에 대한 고찰을 게시글로 남깁니다. (좋은 질문을 주신 면접관님께 너무 감사드립니다!) 리렌더링 리액트는 기본적으로 state가 변경되면 리렌더링이 일어납니다. 리렌더링이 일어나면 내부에 있는 중첩된 컴포넌트들도 재호출 될 것입니다. 따라서 상위 컴포넌트의 state가 변경되면 하위 컴포넌트들의 연쇄적인 리렌더링이 야기됩니다. 컨텍스트(Context) 컨텍스트의 사용 용도는 별도의 문맥(Context)을 만들어 그 ..
클린코드 개인 프로젝트의 헤더 컴포넌트 코드를 정리해보겠습니다. 내 코드를 타인이 봤을 때 이해할 수 있을까? 라는 목표로 코드 정리를 진행해보았습니다. Before 선언형과 명령형이 뒤섞여있습니다. 동료들이 이 코드를 보고 한번에 이해하기는 어려울 것 같습니다. After 최대한 선언적으로 고쳐보고자 노력했습니다. Header 컴포넌트이므로 header 태그와 header_content는 유지한 상태에서 내부 코드를 최대한 추상화 해보았습니다. 커스텀 링크나 커스텀 버튼의 경우, props나 핸들러를 통해 어떤 역할을 할 지 명시해주었습니다. 결론 생각보다 재밌는 작업이지만, 시간이 많이 걸리는 것 같습니다. 하지만 좋은 동료가 되려면 의도적인 연습은 필수일 것 같습니다. 아직 모자란 직관과 실력이지만..
클린코드를 시청한 이유 지금까지는 언어의 이해와 구현에 많은 리소스를 투자해왔습니다. 구현에 급급하다보니 질 좋은 코드가 나오기 힘들었습니다. 앞으로는 협업을 위한 스킬에 많은 리소스를 투자하려 합니다. 그 첫걸음은 클린코드라고 생각해서 클린코드 영상을 시청하게 되었습니다. https://www.youtube.com/watch?v=edWbHp_k_9Y 클린코드의 목적 단일 목적을 하는 코드가 흩뿌려져 있거나, 하나의 함수가 여러 역할을 하고 있다면 동료 개발자들이 제 코드를 읽기 어려워 할 수 있습니다. 또는 나만 알고 있어서 나만 수정할 수 있는 코드가 생길 수도 있습니다. 이는 조직적 관점에서 좋은 현상이 아닙니다. 코드의 질에 따라 생산성에 차이가 생기며, 생산성은 시간이고 시간은 곧 돈이기 때문입..
Intersection Observer API을 도입하려 했던 이유 프로젝트중 특정 요소가 보인 뒤에 다음 요소가 화면에 렌더링 되게끔 구성을 하고 싶었습니다. 이를 구현하기 위해서 여러 방법이 있겠지만 Intersection Observer API가 가장 좋은 방법이지 않을까 해서 위의 API를 사용해 보았습니다. 코드하기에 앞서, 공식문서에서 Intersection Observer API의 스펙을 살펴보았습니다. 간추린 공식문서 설명 intersection observer API는 부모 엘리먼트나 탑 레벨 문서(document)의 뷰포트를 이용하여 타겟팅한 엘리먼트의 변화를 감지하는 API 입니다. 즉, 타겟팅 엘리먼트의 감지 여부에 조건을 걸어 어떤 역할을 부여할 수 있다는 의미입니다. Inters..
흔들거리는 sticky 헤더 상단에 고정되어야 할 헤더가 스크롤을 움직일때마다 덜덜덜 떨리는 현상이 발생했습니다. 이 현상은 flickering이라는 현상이고, sticky나 fixed를 사용할 때 간헐적으로 발생하는 버그인 것 같습니다. 이 현상을 해결하기 위해 sticky나 fixed에 z-index를 같이 주라는 답변도 있고, 하드웨어 가속을 사용하라는 답변도 있었는데 모두 통하지 않았습니다. https://github.com/ampproject/amphtml/issues/18469 jridgewell의 답변은 일부 발췌하면 position sticky의 flickering 현상은 쉽게 고쳐질 수 없는 것이 아니라고 합니다. 그런데 의외의 방법을 통해 이 버그가 해결되었습니다. width를 수정하니..
앱 라우터에 scss 세팅 공식문서를 참고하면서 scss를 앱 라우터에 세팅해보았습니다. Next.js 공식문서가 하나부터 열까지 세세하게 잘 알려줘서 어렵지 않게 했습니다. 그래도 헤메실 누군가를 위해 그리고 또 잊어버릴 저를 위해,,, 기록을 다시 한번 남겨봅니다. 이 게시글에서는 앱 라우터에 scss를 설치하고 초기 셋팅 하는 방법까지를 기록합니다. https://nextjs.org/docs/app/building-your-application/styling/sass Styling: Sass | Next.js Using App Router Features available in /app nextjs.org 설치할 것 npm install --save-dev sass 먼저 sass를 설치해야 합니다...
문제 인지 토이 프로젝트의 유지보수를 하다가 아래와 같은 에러를 만나게 되었습니다. You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used. emotion/react가 로드 되어있는 상태에서 emotion/react를 또 로드하고 있다는 에러 메세지였습니다. next.js 내부에서 emotion을 사용할 것으로는 짐작을 하고 있었지만, 추가적으로 emotion을 설치한 적은 없어서 약간은 당혹스러웠습니..
유효성 검증 구현 프론트엔드 개발자는 서버에 올바른 데이터를 전달하기 위해서 유효성 검사를 고려해보아야 합니다. 저의 경우에는 댓글을 다는 기능을 구현했었고, 서버에는 닉네임, 비밀번호, 댓글 내용을 전송해야 했습니다. 저는 유효성 검증을 통해 너무 짧거나 긴 닉네임, 비밀번호, 댓글 내용이 서버로 전달되는 것을 사전에 방지하고자 했습니다. 구상 유효성 검증 기능 구현 자체는 어렵지 않았습니다. 그래서, 어떻게 코드를 도입해야 기존 로직이 깔끔하게 보일 수 있을지 고려 해보았습니다. 코드의 로직을 깔끔하게 하려면 응집도가 있는 코드들끼리 모으는 것을 베스트라고 생각했고, 유효성 검증 기능을 커스텀 훅으로 빼면 좋겠다는 생각을 했습니다. useValidation 원시적인 형태의 훅을 개발했습니다. useV..
