너와 나의 프로그래밍

Dropdown 기능이나 SelectBox를 div와 input Element tag로 Custom하게 구현할 때 div의 목록을 클릭해서 클릭한 목록의 대한 값을 input value에 나타내주는 기능을 구현하는 도중 onClick을 했을 때 onChangeHandler로 변경하는 input value의 값을 어떻게 변경해야하는지 막막함이 다가왔다. input의 value의 값을 useState Hook을 통해 변경할 때 대표적으로 2가지 방법을 사용하고 있다. // 1. 단일적으로 선언 const [data, setData] = useState(""); // 2. Object에 리스트형식으로 초기값 선언 const [data, setData] = useState({ testData: "" }) 변경할..

MSW(Mock Service Worker)?🤔 프론트엔드 개발을 하다 보면 백엔드 API 개발 속도와 맞지 않아 화면 단을 먼저 개발하거나 자신이 직접 Dummy Data를 만들어서 억지로 개발하는 경우가 많이 있었다. 그때마다 억지로 JSON을 데이터를 만들거나 백엔드 API 개발을 하는 데까지 기다렸다가 겨우 일정에 맞춰 빡빡하게 개발하는 경우가 많았는데, 최근에 토이프로젝트를 하면서 찾게 된 게 MSW(Mock Service Worker)다. MSW는 말 그대로 Mock 데이터를 API 통신처럼 사용하게 해줄 수 있는 라이브러리이다. 백엔드에서 앞으로 나올 API의 명세서가 있거나 Request에 필요한 어떤 키값을 쓸 건지 전달만 받으면 따로 별도의 서버를 사용하지 않고도 프론트엔드 프로젝트에서..

2022년 5월 퇴사. 첫 스타트업에 발을 딛고 시작한 뒤로 1년 동안 React.js와 Next.js를 활용한 개발자로 정신없는 하루를 보냈다. 이 회사에 들어와서 AWS의 Amplify를 경험해봤고 Swagger로 Backend 개발자와 API 소통도 해보고, 기술적으로 뭔가 한 단계 업그레이드하는 귀중한 경험을 했다. 하루하루 뭔가 개발하면서 답답함을 느꼈고, 프론트엔드 개발자가 혼자다 보니 개발적인 부분에서의 공유나 스킬 향상 등 뭔가 역시 “혼자”보다는 “둘”이 낫다. 라는 말이 정말 많이 와닿는 시간이 많았다. 또, 회사의 분위기와 앞으로의 진행 방향성이 나의 성향이 너무 정반대다 보니까 그에 따른 고충도 없지 않아 있었다. 심신이 전부 지치다 보니 이제는 쉬어야 될 시간이 올 것 같아 결국엔..

Intro🙂 Next.js 프레임워크 환경에서 로그인 기능을 개발하기 위해 여러 가지 방법을 찾아보던 중에 Next.js 공식 Document에 Authentication 부분에서 NextAuth와 With Iron Session의 Providers가 있다고 소개하는 것을 보고 이번에는 NextAuth라는 라이브러리로 로그인 기능을 구현해 봤다. NextAuth.js?🤔 NextAuth는 Next.js를 위한 쉽게 로그인 기능을 구현하는 것을 도와준다. 일반적인 ID, Password를 통한 로그인부터 JWT, OAuth 등 각종 로그인을 지원한다. 가장 매력적인 것은 지원하고 있는 OAuth들의 종류가 많았다는 점인데, 간단히 구글이나 페이스북, 트위터, 애플 같은 정말 대표적인 소셜 로그인 지원부터 ..

Intro🙂 React의 많은 상태 관리 라이브러리들 중에 대표적인 라이브러리는 아마 Redux가 아닐까 싶다. Redux를 대표적으로 많이 사용하는 만큼 장점도 있지만 단점도 분명 존재한다. 처음 Redux가 나왔을 때는 Prop driling이 해결되는구나! 누가 만들었는지 이제 유지보수도 편하겠네! 라고 무작정 좋아했지만 그 만큼 복잡하고 Flux 패턴의 대한 정확한 이해와 사용하는데 따른 코드의 양도 방대해지고 Action과 Reduce, Store의 관리도 복잡해지기 시작했다. 그런데 최근 Recoil이라는 상태 관리 라이브러리라는 것이 나왔고 관심있게 보다가 사용을 해보니 Redux 보다 코드의 양이 적고 유지관리도 굉장히 쉬워서 러닝커브도 높지 않다고 생각이 들었다. Recoil?🤔 Reco..

Intl?🤔 최근 Youtube 알고리즘으로 Javascript Intl 관련 강좌들이 많이 나오기 시작했다. 꽤 오래전에 나왔던 것인데 이제와서 Youtube를 통해 알게됬다는게 뭔가 뒤쳐지고 있다는 생각도 들었다;; 무심코 본 영상에서 정말 신기하다고 생각해서 나도 직접 MDN을 참고하면서 공부했고 그 중에서 Intl의 장점과 사용법을 간단하게 공유해볼까 한다. moment.js 라이브러리 라든지 new Date()를 사용하면서 개발하는 시대가 점점 끝나가는게 아닐까 싶다. ✏️Intl.DateTimeFormat DateTimeFormat은 브라우저 언어에 맞는 날짜와 시간 서식을 적용하기 위한 객체다. 기존에는 날짜와 시간 서식을 사용하려면 복잡한 로직이라든지 문자열을 이어 붙이거나 문자열 리터럴로..