드리프트의 코-자-경

안녕하세요? 최근에 제 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 헬퍼 유틸이라 줄임말이 많습니다. 그래서 처음에는 헷..

안녕하세요? 오늘은 자바스크립트 프레임워크에 대해 알아 보겠습니다. 20년전 초장기에는 jQuery가 웹 개발에서 차지하는 비중이 대단했었는데요. React가 나오면서 자바스크립트 프레임워크 세계에서 일대 혁명을 일으켰습니다. 사실 Angular 가 먼저 붐을 일으켰지만 Angular는 너무 어려워서 React가 대세가 되었죠. React의 Virtual DOM 이 대 유행하면서 Vue가 나왔고, 중국을 위주로 Vue가 React를 추격하는 모양새가 되었지만, 미국을 중심으로한 React의 아성에는 못 미치고 있습니다. 최근에는 Svelte 등 여러가지 자바스크립트 프레임워크가 나오고 있으며, 각각 React의 아성에 도전하려고 노력하고 있습니다. 그래서 오늘은 자바스크립트 Todo 앱을 통해 각각의 프..

안녕하세요? 지난시간에는 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..