너와 나의 프로그래밍

JWT 방식과 NextAuth 라이브러리를 활용한 로그인 기능을 개발하면서 Cookie를 통해 Refresh Token을 재발급해 로그인을 하는 기능을 구현하는 과정에서 Cookie가 브라우저에 제대로 박히기 않는 문제가 발생했다. 문제😳 1. Server-Side로 로그인 API 호출 -> Repsonse 값으로 Access Token 값과 Cookie에 Refresh Token을 브라우저에 삽입. 2. Response Header에 Refresh Token의 Cookie 값이 정상적으로 들어온 것을 확인. 3. 하지만 실제 브라우저에는 Cookie가 Setting되지 않는 문제가 발생. 4. 혹시 몰라 Client-Side에서 로그인 API를 호출 -> Cookie에 Refresh Token이 정상적..

요즘 프론트엔드 개발을 하면서 “display: flex” 속성을 활용해서 퍼블리싱을 하는 경우가 굉장히 많다. flex가 나오면서 정말 어려웠던 가로/세로 가운데 정렬도 쉽고 Element의 배치도 굉장히 쉬워지고 정말 많이 좋아졌지만 이놈의 “height: 100%”의 고질적인 문제를 참 해결하기 힘들었다. 개발을 하면서 부모 flex-container에서 height값을 주지 않고 자식의 height 값으로 부모의 height값을 자동으로 조절해주는 기능을 만들게 되었는데 이번에 찾아본 결과 “flex-grow: 1”이라는 속성을 찾아냈고 그 속성으로 height: 100% 문제를 해결했다. 문제 😳 child에 height: 100% 속성을 부여해줘도 전혀 움직이지 않고 높이가 제각각인 문제가 발..

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: "" }) 변경할..

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

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

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