너와 나의 프로그래밍

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은 브라우저 언어에 맞는 날짜와 시간 서식을 적용하기 위한 객체다. 기존에는 날짜와 시간 서식을 사용하려면 복잡한 로직이라든지 문자열을 이어 붙이거나 문자열 리터럴로..

프론트엔드 개발자 기술면접을 보는 중 "부모에서 자식 함수를 호출하는 방법"은 무엇일까요? 라는 질문을 받은 적이 있다. React.js는 Vue.js와 다르게 정말 대표적인 "단방향 통신"의 프론트엔드 라이브러리인데 굳이 왜 자식에서 함수를 호출해야 할까? 라는 의문점이 들었다. 하지만 개발을 하다보면 참 여러가지 케이스가 많이 발생하는데 어쩔 수 없이 자식에서 함수를 호출해야되는 상황도 있기 마련이다. 대표적인 단방향 통신의 React.js에서 과연 자식 함수를 어떻게 호출할 수 있는거지?라는 의문에 구글링을 해본 결과 정말 방법이 있어서 "아니 이런것이 있었어!?🙄", "이 점은 내가 아직 부족한게 많구나...😭" 라는 점도 느끼게 되었다. 그 방법은 React의 useRef, forardRef와 ..

2017년 개발자는 꼭 개발 블로그를 운영하면 좋다는 의견을 들어 시작을 했고 2022년이 되어서야 드디어 애드센스에서 수익을 창출할 수 있게 되었다.✌️ 처음에는 포트폴리오용 어플리케이션에 admob을 적용하는 것부터 시작해서 그렇게 보면 참 수익 창출하기가 보통 어려운게 아닌가 싶다.😂😂 (앉아서 돈을 번다는게 참 쉬운것 같지만서도 쉽지 않다는 생각도 든다.) 개인 일상 블로그를 운영하면서 네이버 애드포스트를 통해 수익을 창출하거나 쿠팡 파트너스를 통해 간간히 수익을 창출하는데, 개발 블로그라는게 참 인기가 없는 것 같기도 하고 개발 블로그로는 수익을 창출하기가 꽤 어려운 것 같다. 하지만 처음 블로그를 시작했던 "모두에게 내 공유를 나눠서 해결했으면 좋겠다."라는 마음으로 앞으로도 꾸준히 개발 관련..

알고리즘 문제를 풀 때나 현업 프로젝트에서도 정렬은 거의 필연적으로 만나게 된다. Javascript에서 이미 Array.prototype.sort 라는 메서드를 제공하긴 하지만 그리 간단한 정렬들만 만나기는 참 쉽지 않고 이 정렬 메서드는 굉장히 많은 활용성을 가지게 된다. 그 중 배열 안에 있는 객체의 대해서 정렬을 하는 다양한 방법을 소개해볼까 한다. const items = [ { name: 'Edward', score: 1 }, { name: 'Sharpe', score: 2 }, { name: 'And', score: 3 }, { name: 'The', score: 3 }, { name: 'Magnetic', score: 4 }, { name: 'Zeros', score: 5 } ]; ✌️ 객..