Circle Progressbar란?이거 참 검색하기 난해한데요 PPT에 익숙한 분들이라면 원형차트로 인식할 수도 있고 저런 동그라미가 빙글빙글 돌아가는 로딩 스피너에 익숙한 분들은 circle progress bar라고도 인식할 수 있습니다. https://www.npmjs.com/package/react-circular-progressbar react-circular-progressbarA circular progress indicator component. Latest version: 2.1.0, last published: a year ago. Start using react-circular-progressbar in your project by running `npm i react-circula..
🐶 기존 시스템의 문제 기존 시스템의 경우 next.js의 pages router 내부에 컴포넌트 폴더가 존재하는 형태였습니다. next.js는 폴더/파일 기반 라우팅을 수행하기 때문에 pages, app과 같은 약속된 폴더명 내부에는 라우팅을 위한 파일들만 두는 것이 좋다고 생각합니다. 다만 이러한 라우팅을 회피하는 기법도 존재하는데요 예컨대 underbar를 폴더명에 붙여주는 것을 통하여 해당 파일, 폴더들이 라우팅되지 않아도 된다는 것을 알려줄 수 있습니다. 하지만 연픽의 기존 시스템은 컴포넌트들 역시 모두 페이지로 취급되어 빌드타임에 SSG 되고 있는 상태였으며 이는 건강한 구조가 아니라고 생각했습니다. 1. 파라미터 조작을 통해 외부인도 너무 쉽게 컴포넌트의 구현에 접근할 수 있습니다. 2. 개..
TypeScript의 interface 보강 Typescript에서 인터페이스는 "보강" 기법을 적용할 수 있습니다. interface Namnamman { eat: () => void } interface Namnamman { coding: () => void } const person:Namnamman = { eat: () => {}, coding: () => {} } 주로 보강기법은 이런식으로 표현되곤 합니다. 동일한 이름의 인터페이스를 같은 네임스페이스에서 여러번 선언하게되면 프로퍼티들이 말그대로 "보강" 되는 형식인것입니다. 이러한 보강기법은 Global 하게 적용해줄 수도 있습니다. 바로 declare 키워드를 이용하는 것인데요 index.d.ts export declare global { i..
🐵 왜 리팩토링을... 쿼카크루에 입사하고 코드베이스를 흝어보면서 수많은 문제점들을 발견했다. 특정 문제들은 간단한 수정만으로 고칠 수 있었지만 아키텍처적인 문제, 레거시에 의존하고 있는 부분들이 너무 많아 함부로 고칠 수 없는 문제들도 많았다. "린하게 하자"라는 명목하에 코드들은 체계없이 누더기처럼 붙어있었고 수많은 안티패턴들을 발견할 수 있었다. 개발자가 "지금 우리 코드는 쓰레기같아요. 고칠 시간이 필요해요" 라고 말하는 것에 대해서 개발자 이외에는 누구도 공감해주지 않는다. 하지만 개발자 입장에서 정돈되지 않은 코드들은 장기적으로 보았을 때 생산성을 크게 떨어뜨리고 임계점에 도달하게 되면 개인의 초과근무 정도로는 해결할 수 없는 지경까지 가고 만다. 결국 결론은 이거다. 역설적이게 느껴질 수 있..
😉 이메일 인증은 한번만.. 사용자일때 이런 경우가 발생하면 굉장히 사소하지만 스트레스를 받았던 기억이 있습니다. 어떤 인증코드를 입력해야할지 감이 안잡히고 맨 마지막에 있는 메일의 인증코드가 대체로 잘 동작하지만 그렇지 않은 경우에는 귀찮은 인증코드 확인을 두번이나 해야하는 게 마음에 들지 않았어요 또한 사용자는 버튼을 친절하게 한번만 클릭해주지 않습니다. 상호작용 결과가 반환될 때 까지 버튼을 열심히 누르는 사용자가 많다고 생각해요 그래서 자연스럽게 이 문제를 해결하기 위해서 여러가지 방법을 고려해보게 되었습니다. 1. 요청을 디바운스한다. 나쁘지 않은 발상이라고 생각했습니다. 확실히 디바운싱을 걸어두면 사용자가 아무리 요청을 많이 보내려고 해도 계속 요청을 지연시키면서 한번의 요청만 보낼것으로 예상..
😎 restful.. 이번 프로젝트에서는 보안과 restful 에 대해 고민이 있었습니다. 완벽하진 않더라도 최대한 restful한 구조를 가질 수 있도록 노력했고 그 과정에서 이러한 상황이 발생했습니다. A : 로그인 요청에 대한 응답은 토큰만 발급해주어야하지 않을까? B : 맞는것 같읍니다. A : 그럼 로그인 요청은 토큰을 발급하고 토큰이 있으면 유저정보를 가져올 수 있게 B : 맞는 것 같읍니다. 그런데 이렇게 플로우가 흐르게되면 문제점이 조금 생깁니다. 토큰을 발급받는것은 로그인 이후의 상황이라는 것이 문제가 되는데 그말인즉슨 1. 로그인 요청을 한다 2. 로그인 요청에 대한 응답을 액세스토큰과 함께 받는다. 3. 유저정보를 get하기 위해 2에서 받은 토큰을 요청헤더에 담아서 보낸다. 4. 유..
https://xionwcfm.tistory.com/356 너무 복잡도가 높은 컴포넌트는 어떡하면 좋을까? 😙 놀랍게도 이 질문에 대한 답은 구글에도 나와있지 않다. 그래서 질문을 올렸습니다. 이메일 인증이 포함 되어야하고 인증을 받을 때와 요청할 때에는 서버와의 통신이 필요했습니다. 또한 xionwcfm.tistory.com 이전 게시물에 대한 답변 쿼리셀렉터로 직접 돔제어를 하는 부분은 조금 사연이 있었는데 이 이야기를 하자면 useForm 이야기를 하지 않을수가 없다. useForm이 반환하는 register 함수의 반환값은 총 네가지로 onChange, onBlur, ref, name이 있는데 이 register가 반환한 ref를 기반으로 원하는 인풋엘리먼트에 접근할 방법을 도저히 모르겠는것이다...
😙 놀랍게도 이 질문에 대한 답은 구글에도 나와있지 않다. 그래서 질문을 올렸습니다. 이메일 인증이 포함 되어야하고 인증을 받을 때와 요청할 때에는 서버와의 통신이 필요했습니다. 또한 닉네임도 signup 했을 때 서버로부터 닉네임이 중복되었다는 응답을 받으면 중복되었다는 에러메시지도 띄워주어야했어요 이런식으로 로직이 복잡해지고 Input뿐만아니라 버튼도 필요한 경우가 생기다보니 분명 공통적으로 쓰이는 마크업들이 있기는 한데 이것을 추상화하기가 난감했습니다. 하려면 할수는 있겠지만 시간도 많이 소모하고 복잡한 객체를 담은 배열을 만들게 될 것 같았어요 그래서 결국 인풋들을 하나 하나 작성 하는 방식을 택했습니다. 이런 경우에는 어떻게 하면 좋을까요? 참고를 위해 제가 작성한 코드를 첨부합니다. 주석을 포..
