반응형 coding/front-end10 [Next.js]다크모드 구현하기 (sass) 안녕하세요. 오늘은 next에서 scss를 이용해서 다크 모드를 구현해볼 건데요. 왜 css 가 아닌 scss(sass)를 사용하는지 차이점을 비교하고 다크 모드를 구현해보겠습니다. Sass vs Css css 코드 .container { background-color: yellow; } .container div { background-color: green; } .container div a { color: red; } Scss 코드 .container { background-color: yellow; div { background-color: green; a { color: red; } } } 첫 번째로 nesting이 가능하다는 것인데요. 또한, scss에서는 변수, 함수 선언이 가능하고 Mixi.. 2022. 4. 24. [Next]네이버 API - 로그인 구현 TypeScript 저번에는 kakao api를 이용해서 로그인은 시도해 보았는데요. 이번에는 네이버 api를 이용해서 로그인을 구현해보겠습니다. 2022.04.17 - [coding/front-end] - [Next] 카카오톡 API 로그인 구현하기 [Next]카카오톡 API 로그인 구현하기 안녕하세요 오늘은 next.js에서 카카오톡 api를 이용해서 저에 웹사이트에 적용하는 시간을 가져보겠습니다. 요즘은 카카오톡, 구글, 네이버 그리고 깃 헙 등등으로 로그인을 가능하게 해 주는데 hun-dev.tistory.com 네이버 Developer https://developers.naver.com/apps/#/register 애플리케이션 - NAVER Developers developers.naver.com 1. 접속하기 2.. 2022. 4. 20. [Next]카카오톡 API 로그인 구현하기 안녕하세요 오늘은 next.js에서 카카오톡 api를 이용해서 저에 웹사이트에 적용하는 시간을 가져보겠습니다. 요즘은 카카오톡, 구글, 네이버 그리고 깃 헙 등등으로 로그인을 가능하게 해 주는데요. 이번에는 카카오톡에 대해 다뤄보겠습니다. 카카오 developer Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 접속하기 2. 카카오톡 시작하기 -> 어플리케이션 추가하기 클릭 -> 앱 이름, 사업자명 입력하기 3. Javascript키 복사하기 Next js에서는 Javascript키를 가지고 로그인 기능을 구현할 거라서 Javascript키.. 2022. 4. 17. [Next]Slide-Images 커스텀 컴포넌트- (React, typescript) 오늘은 리액트 기반 next 프레임워크를 이용해서 slide-images 컴포넌트를 만들어 보겠습니다. 매번 라이브러리 찾고 사용법 찾느라 지쳐서 만들게 되었습니다. ㅎㅎ Main code import { useState } from 'react'; import Image from 'next/image'; import style from '../styles/slideImage.module.scss'; import { fakeSlideImage } from '../fakeData'; import right from '../public/images/right.png'; import left from '../public/images/left.png'; export default function SlideIma.. 2022. 4. 7. 이전 1 2 3 다음 반응형
