Age of Discovery

NextJs14버전 공부할 겸 블로그를 만들려고 하는데 create next app 명령어로 한번에 다 세팅하는 방법도 있겠지만 (공홈에서도 권장) 이왕 공부할거 일일이 필요한 패키지를 설치하고 파일을 직접 생성하는 게 더 도움이 될 것 같다는 생각으로 무작정 시도해봤다. 기술스택 목록 - Next.js14 - typescript - tailwind css - eslint - prettier 블로그를 만들기 위해 추가적으로 설치한 패키지는 생략하겠다. 바로 시작! 1. NextJs14 설치 원하는 레파지토리 명을 생성 한다. mkdir nextjs14-practice 패키지 매니징을 시작한다. npm init -y 여기서 뒤에 -y를 붙인 이유는 모든 질문에 대해 yes라는 뜻으로 추가 구성에 대한 질문..

그동안 정신이 없어서 꽤 오랜만에 글을 남겨본다...ㅎㅎ 링크게더 사이드프로젝트를 진행하면서 단순히 굴러가게 만드는 게 아니라 코드 컨벤션과 개발 문화를 정립하며 어떻게하면 반복을 줄이고 재사용할 수 있을 지를 많이 생각할 수 있게 됐다. emotionJS로 styled component를 생성하여 재사용하고 props에 따라 조건적으로 다른 스타일을 보여주는 방법을 공유하고자 한다. 사실 styled component랑 크게 다를건 없지만 https://next--emotion.netlify.app/docs/typescript Emotion - TypeScript Emotion includes TypeScript definitions for @emotion/react and @emotion/style..

사용자가 쉽게 커스텀하고 이용이 가능한 input 라이브러리를 만들어보려고 한다. input하나만드는데 보일러 플레이트가 많은 CRA는 설치하기 싫었고 CRA없이 초기세팅을 웹팩으로 빌드했다. css는 emotionJS를 사용하기로 결정했다 css in js를 구현할 때 jsx문법 내에서 style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다. (현재 진행중인 링크게더 프로젝트에서 쓰고 있다.) 딱히 성능상의 유의미한 차이는 없다ㅋㅋ... 웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..) npm i -D @emotion/react @emotion/styled emotion 패키지를 설치해주고 typescript를 사용하는 경우 tsconfig.json의 컴파..

모든 준비는 끝났다! 투두리스트 지금 바로 시작~~~합니다. pages폴더 안에 있는 index.tsx파일에 h1, input, textarea, button 태그들을 이용해 위 모양처럼 만들어주자. ( html과 css는 자유롭게 ^^ ) import { GetServerSideProps } from 'next'; import { ChangeEvent, useEffect, useState } from 'react'; import { prisma } from '../lib/prisma'; import axios from 'axios'; import { useRouter } from 'next/router'; export default function Home() { return ( To-Do-List {..

https://jurgen-94.tistory.com/91 [React] - 라이브러리 없이 무한 슬라이드 구현 (1) 프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 하단 동그라미 클릭시 해당 이미지로 움직이기 2. 좌우 Arrow버튼으로 이미지 슬라이드 3. 약 3초마 jurgen-94.tistory.com 이전에 했던 포스팅에 이어 이제는 실제로 함수를 만들고 동작시켜보자. useEffect훅에 handleOriginSlide가 있기 때문에 handleOriginSlide 함수먼저 살펴보자 function handleOriginSlide(index: number): void { setTimeout(() => { setNum(index); setCarous..