어느정도 구조 파악이 됐으니 구글 소셜 로그인을 구현해보자. next-auth https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next-auth는 next 전용 라이브러리로 인증 로직을 보다 쉽게 구현할 수 있도록 해준다. 마치 django의 drf 같은 녀석인가?? 설치부터 해주자. > yarn add next-auth 공식문서를 확인해보면 API route를 만들어주기 위해 pages/api/auth/[...nextauth].js 에 위와 같이 설정할 수 있다고 나와있다. 하지만 지금 나는 Next 13 버전을 쓰고 있으므로 nextjs의 공식문서를 확인해보면 app/api 디렉토리 아래의 route 파..

https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com 앞서 보았던 app Routing Conventions 에 있던 Routing File을 자세히 알아보자. 확실히 프레임워크라 그런지 React에서는 일일이 해야했던 작업들을 미리 정의해둔 기능들이 많았다. 이전에 Nest 튜토리얼을 맛봤을 때는 이게 왜 이렇게 작동하는지 왜 필요한지 감이 잘 안왔었는데, React를 쓰다가 Next를 써보니 확실히 느낌이 왔다..

예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다. 이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다. 아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~ 우선 NextJS의 공식 블로그를 확인해보자. https://nextjs.org/blog/n..

원티드 프리온보딩 인턴십 수행과제를 하던 중 checkbox 이벤트에서 자꾸 이상한 결과가 나왔다. 상황 수정버튼을 누른다 제출 또는 닫기 버튼을 누른다. 체크박스의 상태가 바뀌어있다. 버튼에는 토글 기능만 넣어둔 상황이다 ... 뭐가 문제지 ..? 우선 mdn에서 input checkbox를 찾아봤다. A boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does ..

자바스크립트에서 가장 많이 쓰는 네이티브 String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 네이티브는 생성자처럼 사용할 수 있지만 원시 값을 감싼 객체 래퍼이다. let s = new String("Hello"); console.log(typeof s); // object -> string이 아니다 console.log(s); // [String: 'Hello'] 내부 [[Class]] typeof가 ‘object’인 값에는 [[Class]]라는 내부 프로퍼티가 추가로 붙는다. 이 프로퍼티는 직접 접근할 수 없고 Object.prototype.toString() 메서드에 값을 넣어 호출하여 볼 수..

자바스크립트의 역사 1995년 넷스케이프의 브렌던 아이크는 웹사이트에 쉽게 접근하고 사용할 수 있는 자바스크립트를 10일 만에 설계했다. 그 당시 자바스크립트는 별난 특성과 드러난 결점때문에 개발자들에게 조롱 당했다. 그러나 자바스크립트의 기반이 되는 언어 사양인 ECMAScript의 새로운버전을 2015년부터 매년 출시하며, 브라우저, 임베디드, 애플리케이션, 서버 런타임을 포함한 다양한 환경에서 새로운 버전과 이전버전과의 호환성을 유지하며 발전해왔다. 별난 특성이 있지만 놀랍도록 유연한 자바스크립트는 웹 애플리케이션과 인터넷의 놀라운 성장을 가능하게 만들었다. 바닐라 자바스크립트의 함정 값 비싼 자유 코드를 구성함에 있어서 제한이 없는만큼 자바스크립트는 파일이 많아질수록 이러한 자유는 훼손되게 된다...

CHAPTER 2 값 배열 자바스크립트 배열은 타입이 엄격한 다른 언어와 달리 문자열, 숫자, 객체 심지어 다른 배열이나 어떤 타입의 값이라도 담을 수 있는 그릇이다. 배열의 크기는 미리 정하지 않고도 선언할 수 있으며, 원하는 값을 추가하면 된다. var a = []; a.length; // 0 a[0] = 1; a[1] = "2"; a[2] = [3]; // a = [ 1, "2", [3]] a.length; // 3JAVASCRIPT 구멍 난 배열을 다룰 때는 조심해야 한다. var a = []; a[0] = 1; a[2] = 3; a[1]; // undefined a.length; // 3JAVASCRIPT 실행은 되지만 중간에 건너뛴 빈 슬롯은 혼란을 부추길 수 있다. a[1] 슬롯 값이 und..

CHAPTER 1 타입 자바스크립트 같은 동적 언어는 타입 개념이 없다고 생각할 수 있다. ECMA표준 명세서 5.1 (ES5)를 보면 아래와 같다. 이 명세에 수록된 알고리즘에서 사용되는 모든 값은 이 절에서 정의한 타입 목록 중 하나에 해당한다. 타입은 ECMAScript 언어 타입과 명세 타입으로 하위 분류된다. ECMAScript 개발자가 ECMAScript 언어를 이용하여 직접 조작하는 값들의 타입이 바로 ECMAScript 언어 타입이다. ECMAScript 언어 타입에는 Undefined, Null, Boolean, String, Number, Object가 있다. 명세의 대략적인 정의를 따르자면 타입이란 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부..