드리프트의 코-자-경

안녕하세요? 최근 들어 저의 최애 툴인 NextJS와 TailwindCSS에 요즘 공부 중인 Typescript을 추가로 설치하는 방법에 대해 알아볼까 합니다. NextJS 공식 홈페이지에서는 다음과 같은 옵션으로 NextJS와 Typescript을 설치할 수 있는데요. npx create-next-app@latest --ts # or yarn create next-app --typescript 이렇게 NextJS와 Typescript을 설치한 후 TailwindCSS를 수동으로 설치할 수 있는데요. 이것보다는 NextJS + TailwindCSS를 먼저 설치한 후 Typescript을 추가하는 것이 좀 더 편하기 때문에 이 방법을 알아보겠습니다. 먼저, 다음과 같이 NextJS + TailwindCSS..

안녕하세요? 최근에 제 One-Pick이 된 TailwindCSS 강좌를 또하게 되었네요. 오늘은 Bootstrap 이나, Material-UI에는 다 있는 Card에 대해 직접 만들어 보겠습니다. 일단 완성형을 볼까요? 아래 동영상을 보시면 반응형 동작을 볼 수 있습니다. 반응형 동작 일단 지난 시간부터 이어져 오던 NextJS Template를 그대로 쓰겠습니다. 그리고 상단 Navbar 는 1편에 나온 걸 사용하도록 하겠습니다. /pages/index.tsx import Head from "next/head"; export default function Home() { return ( Navbar in Tailwind! Responsive Cards in Tailwind! {/* 카드 전체를 반응형..

안녕하세요? 얼마전부터 Tailwind CSS 강좌를 이어 가고 있는데요. 처음에는 어려웠지만 계속 도전해 보니까 예전에 배웠는 HTML + CSS 지식이 다시금 살아나서 좋았습니다. Tailwind CSS 의 장점은 본인의 상상이 그대로 UI로 이어진다는데 있는거 같습니다. 앞으로 Tailwind CSS를 이용한 나만의 UI 라이브러리를 구축해 볼까 합니다. 그래서 지난번에 만들었던 Top Navbar 글의 후속편인데요. https://cpro95.tistory.com/531 Tailwind css 반응형 메뉴 navbar 만들기 안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React..

안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React 로 UI 디자인은 보통 Material-UI, Bootstrap, Ant Design 등으로 많이 만드는데요. 최근에는 좀더 가벼운걸 찾는 추세라 Tailwind CSS 가 뜨고 있습니다. Tailwind CSS 는 일반적으로 CSS 헬퍼 유틸(Helper Utilities)이라고 하는데요. 예를 들어 일반적으로 CSS로 마진을 부여할 때는 margin-right : "20px" 이렇게 쓰는데요, Tailwind CSS에서는 좀 더 간편하게 줄여서 다음과 같이 씁니다. mr-10 헬퍼 유틸이라 줄임말이 많습니다. 그래서 처음에는 헷..

안녕하세요? 지난시간에는 NextJS, NextAuth, Prisma 를 사용하여 카카오 로그인, 네이버 로그인, 구글 로그인에 대해 알아 보았는데요. 1편: 카카오 로그인 https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 2편: 네이버 로그인 https://cpro95.tistory.com/517 네이버 로그인 구현 React(리액트) Nextjs NextAuth naver ..

안녕하세요? 지난시간에는 NextJS, NextAuth, Prisma 를 사용하여 카카오 로그인, 네이버 로그인, 구글 로그인에 대해 알아 보았는데요. 1편: 카카오 로그인 https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 2편: 네이버 로그인 https://cpro95.tistory.com/517 네이버 로그인 구현 React(리액트) Nextjs NextAuth naver ..

안녕하세요? 오늘은 지난 시간부터 알아본 NextAuth 강좌의 연장인데요. 우리는 지금까지 카카오 로그인, 네이버 로그인, 구글 로그인에 대해 알아보았습니다. 1편: 카카오 로그인 https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 2편: 네이버 로그인 https://cpro95.tistory.com/517 네이버 로그인 구현 React(리액트) Nextjs NextAuth n..

안녕하세요? 지난 시간에는 네이버 로그인, 카카오 로그인에 대해 구현해 봤는데요. 1편. 카카오 로그인 https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 2편. 네이버 로그인 https://cpro95.tistory.com/517 네이버 로그인 구현 React(리액트) Nextjs NextAuth naver login 안녕하세요? 지난 시간에는 카카오 로그인에 대해 구현해 봤는..

안녕하세요? 지난 시간에는 카카오 로그인에 대해 구현해 봤는데요. 1편. 카카오 로그인 https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 오늘은 국내 탑 포털인 네이버 로그인에 대해 알아 보겠습니다. 먼저, 아래 링크로 들어가서 네이버 디벨로퍼 애플리케이션 신청을 해야 합니다. 상단 메뉴 Application 밑에 내 애플리케이션과 애플리케이션 등록 메뉴가 있네요. 먼저 내 애..

안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 포털에서는 각자의 로그인 방식을 공유하고 있는데요. 우리 나라 사람이라면 다 있다고 해도 무방한 카카오 아이디, 네이버 아이디와 구글 아이디로 로그인하는 방법에 대해 알아 보겠습니다. 물론, 싱글 페이지 앱이 아닌 NextJS와 NextAuth를 이용해서 나중에 확장 가능하도록 만들 예정입니다. 1. NextJS template 설치 일단 콘솔에서 다음과 같이 입력하여 create-next-app을 이용하여 nextjs template을 만들도록 하겠습니다. npx create-next-app kakao..