Developer_hong

Next.js FrameWork Tailwind CSS Install https://tailwindcss.com/docs/guides/nextjs Install Tailwind CSS with Next.js - Tailwind CSS Setting up Tailwind CSS in a Next.js v10+ project. tailwindcss.com npm을 사용하여 Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer next.js에서 tailwindcss 사용을 위해 필요한 postcss, autoprefixer 패키지를 같이 설치한다 * 만약 postcss, autoprefixer를 삭제하고 싶다면 아래 명령어를 사용하면 된다 $ npm..

React 프로젝트를 만들 때 FrameWork를 이용하지 않으면 설정할 사항들과 import 해야할 일들이 많음 예를 들어서 페이지 이동 Router 설정, CSR, SSR 등등 대부분 프레임워크를 사용하여 React를 사용한다 - ( Gatsby.JS, Next.js ) next js + typescript 프로잭트 생성 npx create-next-app@latest --typescript --eslint {PROJECT_NAME} Github repository 생성 VScode에서 프로잭트 디렉토리에서 터미널 실행하여 Github에서 안내되는 명령어 입력 $ git init -> /Users/{PROJECT_NAME}/.git/ 안의 기존 깃 저장소를 다시 초기화했습니다 $ git commit ..

React에서는 useEffect를 사용하면 hook을 사용할 수 있다 -> 이전 리액트의 클래스형 컴포넌트에서 생명주기 메소드를 사용할 수 있었는데, 함수 컴포넌트에서도 useEffect를 사용하면 비슷하게 사용이 가능하다 -> 라이프 사이클 훅 componentDidMount, componentDidUpdate, componentWillUnmount와 비슷하게 대체 가능하다 useEffect의 기본 문법은 useEffect(effect, [, deps]); 첫번째 인자로는 함수, 두번째 인자로는 배열을 넣어줄 수 있다 첫번째 인자로 전달된 함수는 컴포넌트가 랜더링된 이후에 실행이 되며 두번째 인자로 전달된 배열에 포함된 state 값이 있는 경우에만 첫번째 인자로 전달된 함수를 실행되도록 할 수 있다..

[ npx create-react-app test ] -> npx : 라이브러리 설치 도와주는 명령어 (node.js 설치 돼 있어야 사용가능) -> create-react-app : 라이브러리 이름 (리액트 셋팅 다 된 bilerplate) https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev -> test : 프로젝트 이름 [ 프로젝트 실행 ] npm start -> nodejs 설치하면 npm이라는 툴 사용 가능 [ react 프로젝트의 index 파일은 public 폴더에 있다 ] App.tsx : 메인 페이지에 들어갈 HTML 코드 구성하는 곳..

1. visual studio code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. node js 설치 https://nodejs.org/ko/ Node.js Node.js® is ..