[Next.js] Sidebar 만들기 + code review

라이브러리 설치 # 여러 추가 hook을 사용할 수 있다. npm install usehooks-ts 작성 코드 "use client"; import Link from "next/link"; import { Plus } from "lucide-react"; import { useLocalStorage }...

[Next.js] Auth 관리 라이브러리 Clerk

회원가입을 쉽게 만들어주는 라이브러리 Clerk 이 라이브러리를 사용하면 쉽게 회원가입 페이지를 생성할 수 있다. 설치 npm install @clerk/nextjs env key발급 및 설정 clerk.com을 회원가입하고 프로젝트용 key를 발급받자 root경로에 `.env’파일 생성...

[Next.js] 폰트 설정 방법 정리

Local Font 설정방법 localfont설정 및 tailwind css와 결합 하는 방법 import localFont from "next/font/local" import { cn } from "@/lib/utils" // shadcn 설치시 사용가능 shadcn설치를 하지않았으면 twMerge를 쓰거나 링크 참조...

[Next.js] Metadata 설정 방법 정리

Metadata 설정 방법 (title, description, logo 등) //root 경로의 layout.tsx export const metadata: Metadata = { title: { default: siteConfig.name, // %s는 현재 페이지 제목을 노출 만약 사이트 내 About...

[Next.js] Shadcn을 사용해보자

Shadcn 사용 방법 디자인 편의성을 위해 shadcn 컴포넌트를 사용해보자 npx shadcn-ui@latest init 생성옵션 설명 Typescript 사용 유무 style 설정 Default/Newyork (디자인에 약간의 차이가 있다.) global CSS 파일 위치 프로젝트 생성시에는...

[Next.js] Nextjs의 라우팅방식

폴더명이 url Path로 자동으로 설정된다. 폴더 구조로 자동으로 route를 해준다. app/ 안에 폴더를 생성하고 그 안에 page.tsx를 만들어 페이지를 구성하는 기본 함수를 설정하면 url({domain}/{path}) 의 path가 폴더 명으로 자동으로 설정된다....

[Next.js] 프로젝트 초기설정

Next.js를 왜 쓰는가? SSR (Server Side Rendering) 구현 가능 CSR대비 첫 페이지 로딩속도 개선 검색 노출 최적화 가능 (SEO) 풀스텍 프레임워크 (Front+ Back) 리엑트 문법을 그대로 사용할 수 있다. 이외에도...

[React]ESLint Prettier 세팅방법

목적 Typescript기반 react admin page생성하면서 배운 TIL을 기록하기 위한 페이지 Typescript 기반 프로젝트 생성하기 npx create-react-app my-app --template typescript ## ESLint, Prettier 세팅 우선 vscode에 익스텐션을 설치해준다. 다음으로는 생성한 프로젝트에서...

[React]Node+Express서버와의 연동 해보기

Node.js란? 크롬의 자바스크립트 실행 엔진인 V8을 기반으로 작성된 런타임 환경이다. 웹사이트를 구성하는 기본적인 요소인 JS는 오랜 세월 동안 발전해오면서 브라우저의 자바스크립트 실행 엔진이 발전되어왔다. 그리고 이러한 엔진의 성능으로 Js로 작성된...

[React]PWA를 만들어보자

PWA란? PWA(Progressive Web App)은 모바일 기기에서 웹엡을 네이티브 앱처럼 사용할 수 있도록 제공하는 웹앱이다. 네이티브 앱과 유사한 사용자 경험을 제공하기 때문에 여러 장점을 가지고있다. PWA의 장점 설치 마케팅 비용이 적다...

[React]JS의 Sync/Async

JS는 기본적으로 synchronous하게 실행된다. ‘동기방식’이라는 뜻으로 쉽게 설명하면 위에서부터 순차적으로 실행된다는 뜻이다. 하지만 비동기적으로 작동되는 함수들도 존재한다. 주로 시간이 걸리는 함수들이 비동기적(Async)으로 작동하며 대표적인 함수는 다음과 같다. ajax, Event LIstener,...

[React]성능을 개선해보자3 (automatic batch, useTransition, useDeferredValue)

세번째 로딩성능 개선 Automatic Batch 리엑트는 기본적으로 automatic batch를 지원한다. state변경이 근처에서 발생하면 마지막에 발생한 state 변경함수에서만 재랜더링이 발생한다. 그러나 예외가 있다. 18버전 부터 특정 조건아래 automatic batching기능이 작동안하도록 바뀌었다....

[React]성능을 개선해보자2 (재랜더링 방지)

두번째 성능 개선 방법(재랜더링 방지) React의 특성으로 부모 컴포넌트에서 상태가 변경되어 재랜더링에 들어가면 자식 컴포넌트도 전부 재랜더링을 한다. 예를들면 다음과 같은 components가 있다고 가정하자 function Child() { return <div>Child</div> }...

[React]성능을 개선해보자 (Lazy import)

리엑트의 대표적인 성능 개선 태크닉 (Lazy import) SPA의 특징은 다음과 같다. npm build를 발행하면 js파일 하나에 모든 코드를 다 쑤셔 넣는다 = 사이즈가 매우 크다. 이러면 로딩속도가 느려질 수 밖에...

[React] 실시간 쿼리를 위한 react-query

React Query를 써보자 React-Query를 왜 쓸까? 데이터를 요청할때마다 다양한 상황에 맞춰서 코드를 짜야하는 경우가 많다. 예를들면 ajax 성공/실패시 무엇을 보여줄 것인가 몇초마다 ajax를 요청해야하는 경우 요청 실패시 요청 재시도는 어떻게?...

[React] 개발자도구를 사용해서 Debug하자

개발자 도구를 사용해보자 브라우저에서 F12를 누르면 브라우저 개발자 도구가 뜬다. 다만 컴포넌트 구조같은 상세한 내용을 확인하기가 어렵다. 이럴때 Chrome 웹스토어 > react DevTools를 사용하면 디버깅할때 좀더 편하다 기능1. Components탭 이를쓰면...

[React] LocalStorage를 사용해보자

localStorage를 사용해보자 기본적으로 모든 상태는 새로고침하면 초기값으로 돌아간다 하지만 값을 저장해야할 경우도 반드시 존재한다. 본래 DB를 생성해 DB에 저장하는것이 맞지만, 임시적으로 사용할 수 있는것이 local Storage이다. 반영구적으로 저장 가능하다. LocalStorage...

[React] Redux3 - Object와 Array를 관리해보자

리덕스(Redux) 심화과정 - Object, Array를 관리해보자 Object의 값을 관리하려면 다음과 같이 작성하면 된다. //store.js let user = createSlice({ name: 'user', initialState : { name : 'kim', age : 20 },...

[React] 리엑트에서 자주쓰는 조건문 정리

리엑트에서 조건문을 통해 JSX 구성하기 리엑트를 사용하다보면 조건문을 사용해 특정조건에 요소를 보여줄지 말아야할지 정해야하는 경우가많다. 이럴때 응용 및 사용 할 수 있는 다양한 조건문을 알아보자 1. 컴포넌트 안에서 쓰는 if/else...

[React] Context API의 단점을 해결하는 Redux

리덕스(Redux)란? 앱레벨의 상태를 관리하는 라이브러리 (app-level-state management) 여러 컴포넌트의 상태를 공유하기 위한 라이브러리이다. Redux를 써보자 이를 사용하기 위해 우선 예시 컴포넌트를 하나 만들자 import { Table } from 'react-bootstrap' function...

[React] Redux2 - state를 변경해보자

리덕스(Redux) 심화과정 - state를 변경해보자 값을 변경하려면 Slice안에 값을 어떻게 변경할것인지 미리 정의해야한다. let user = createSlice({ // name: 'user', initialState : 'kim', // 값 변경하기 위해 추가해야하는 reducers reducers...

탭UI 만들어보기

탭UI 만들기 모든 컴포넌트는 다음과 같은 단계로 제작 html/css만들기 상태 저장할 state만들기 연결하기 // State만들기 let [tab, setTab] = useState(0); {/* 탭만들기 */} <Nav variant="underline" defaultActiveKey="tab1"> <Nav.Item> <Nav.Link onClick={()=>setTab(0)} eventkey="tab1">탭...

React Animation 다뤄보기

애니메이션 만드는 간단한 방법 애니메이션 동작 전 className을 만든다 애니메이션 동작 후 className을 만든다 classname에 transition 속성 추가 한다 원하는 컴포넌트에 2번 className 부착 하면 끝! 간단한 전환 애니메이션을 구현해보자...

Ajax의 이해와 사용

Ajax란? 서버에 데이터를 비동기로 요청할 수 있는 방식 총 3가지 방식이있다. XMLHttpRequest: 옛날 문법 fetch(): 요즘 JS 문법 axios: 라이브러리 사용 라이브러리를 사용해서 부르는것을 많이 사용한다. Axios 사용해보기 Axios 설치...

React 라이프사이클 (useEffect)

# Lifecycle과 useEffect 컴포넌트의 lifecycle이란? 컴포넌트가 페이지에 보이는 순간 장착된다. (mount) 업데이트가 되는 과정도 있다. (update) 필요없으면 제거되기도한다 (unmount) 이렇게 컴포넌트의 상태에 따라 변경되는 상태를 lifecycle이라고한다. 이렇게 컴포넌트의 상태가 변경할때...

styled-components 사용해보기

# styled-components 사용해보기 컴포넌트가 많은 경우 스타일링하기가 매우 불편하다 때문에 해당 페이지에서 간단하게 스타일을 적용한 컴포넌트를 만들 수 있는 기능으로 styled-components를 사용할 수 있다. 예시) // 버튼 만들기 let YellowBtn...

React Url-parameter 사용하기

React Url-parameter 사용하기 Router을 사용하면서 상품 상세와같은 수백 수천 수만개의 상품 상세의 url을 일일히 직접 작성하는것은 무의미한 시간낭비를 발생시킨다. 반복문으로 url을 직접 설정할 수도 있겠지만 조금더 쉬운방법으로 React Router는 URL-parameter...

title

SSR과 CSR의 이해

SSR 과 CSR SSR(Server-Side-Rendering) 서버에서 모든 데이터를 미리 출력해 브라우저에 전달하는 기법이다. 장점 초기 구동 속도: 서버에서 모든 구성 요소가 렌더링되어 오기 때문에 첫 화면을 빠르게 보여줄 수 있다. 검색...

React 프로젝트에 Tailwind CSS 적용하기

React 프로젝트에 Tailwind CSS 적용하기 React 프로젝트에서 Tailwind CSS를 활용하려면 몇 가지 단계를 거쳐야 한다. 이를 정리해보자 프로젝트 만들기 tailwind를 설치하기 전에 프로젝트 디렉토리를 먼저 구성해야한다. 만약 이미 존재하는 프로젝트에...

title

라우팅을 들어가기진 리엑트의 특성을 알아보자 React를 사용하지 않은 일반적인 html은 url에 해당하는 html페이지를 그대로 불러온다. 그러나 리엑트는 index.html만 사용한다. detail 페이지를 component로 만들어놓고 페이지를 부르면 index.html페이지를 비우고 컴포넌트를 보여준다. 이를...

React에서 이미지 경로를 설정하는 방법 1. src 폴더에서 이미지를 import 1-1. src 폴더 밑에 이미지 넣기 src 폴더 안에 넣는다고 자동적으로 image가 import 되지 않음 js 안에 import 경로 설정해야...

까먹지말자

[React] 까먹지 말아야할 것을 글로 정리해보자 Public폴더는 App.js에서 바로 접근가능하다. <img src="/logo192.png"> 위와같이 바로 접근이 가능하다 참고) build시에 public안에 있는 파일은 압축하지 않는다. 추후 서버에 올라갈때 이미지경로는 process.env.PUBLIC_URL을 붙여야한다. 이제까지...

title

Ubuntu Typora 설치 방법

Typora란 Markdown 편집기중 가장 인기가 있는 편집 툴 중에 하나로 편집 중에 마크다운 문법을 바로 적용한 모습을 확인할 수 있어 마크다운 글을 작성할때 바로바로 모습을 확인하면서 편집이 가능한 툴이다. 특히...

13강 빌드해서 배포 하기

하위경로에 배포하고 싶다면 package.json을 오픈 hompage에 추가경로를 기입 "homepage": "http://localhost/blog", 리엑트 라우터가 설치되어있으면 basename=”“속성을 추가하는게 라우팅이 잘됨 자세한 내용은 https://create-react-app.dev/docs/deployment/#building-for-relative-paths 별 문제가없다면 html cs js파일로 바꿔주는 build를 해야한다. npm run...

12강 이전 react 문법 (class 기반)

특징 예전에는 class로 컴포넌트를 만들었다. 기존 state는 기존 state를 갈아치우는게아니라 변경점만 딱 변경해준다 component에서 무보가 보낸값(props) 사용가능 constructor(생성자)에 들어온다.

11강 input 다루기

input 사용하기 종류가 여러개 text, textarea 등등 비슷한 내용으로 selectbox도 있다. 입력한 값 가져오기 <input onChange={(e) => {함수}> e.target: 이벤트가 발생한 html 태그 e.target.value: 입력한 비고 이벤트가 상위 요소로 퍼지는...

10강 props를 활용한 상세페이지

동적 UI 3스탭 복습 html css디자인 state저장 state에 따라 어떻게 보일지 작성

9강 Props 사용 방법

Props 란 <App> - 부모 componenet <Modal> - 자식 component status 가 전달이 가능하다 -> props how? 자식 컴포넌트 노출 코드목 <자식컴포넌트 작명={state이름}> 보통 작명 이름은 state이름과 동일하게 한다 참고할점...

8강 map을 활용한 반복문 사용 방법

반복 배우기전에 알아야 할 것 : map [1,2,3].map(function(a){ // console.log(a); return (a+1) }) array 수만큼 실행 파라미터로 쓸수도 있다. (2개: 실제값,Index) return을 쓰면 array에 결과값을 담아준다 보통은 반복을 할때 for문을...

7강 동적 UI 만들어보기

동적인 UI만드는 Step html css로 미리 디자인 완성 ```html 제목 날짜 상세내용 2. 출력할 위치에 컴포넌트 조건문 삽입 ```react {modal == true? <Modal/> : null} UI의 현재 상태를 state로 저장...

6강 컴포넌트 사용 방법

# html 덩어리를 한 단어로 축약할 수 있는 기능을 제공한다. -> component문법 컴포넌트 만드는법 function 만들고 return()안에 html담기 쓰기 영어 대문자로 시작해야함 (Calmelcase) App과 똑같이 하나의 div로 시작해서 끝내야함 Fragment...

5강 state변경이 안되는 이유

arrray/object를 다룰때 원본은 보존하는게 좋다. (원본데이터가 다시 필요해지는 경우가 있기때문) ex) let copy = 글제목; // 동일한 구조의 새로운 배열 생성 -> 이후 copy 변수를 수정하는 식 변수 복수할때 […글수정]...

4강 state 심화 사용방법

onlick 도 데이터 바인딩으로 해야한다. 함수를 위에서도 정의 할 수 있지만 안에서도 바로 정의가가능하다. ex) function(){ console.log(1)} 더축약할 수 있다. ex) () => { console.log(1)} state변경은 =(등호)로 변경 금지 배운거...

3강 State 사용방법

블로그 목록 만들기 할거임 return 안에는 하나의 div로 시작해서 하나의 div로 끝내야한다. 리엑트 state는? 자료 잠깐 저장할땐 변수 let var const 리엑트에는 state도 있다. state 문법은? import {useState} userState(보관할 자료)...

2강 React 레이아웃 생성 방법

2강 핵심 classname 데이터 바인딩 (중괄호) 오브젝트형 자료 (중괄호 두번) class 는 반드시 classname으로 class는 class를 선언해주세요 하는 뜻 변수 선언방식 var (variable) 재선언되고 업데이트 될 수 있다. 호이스팅 변수와...

1강 React를 사용하는 이유

React를 왜쓰는가? 싱글페이지 어플리케이션을 만들기 위해서 짧고 효율적으로 만들수 있는 ㅡㅍ레임워크 html 재사용이 편리 앱개발 가능 (React native)ㄹ 비고 csr vs ssr 제코드 그대로 치세요 x ydfsfd 폴더 구조 node_modules...

SQL Database 구문 정리

SQL Database구문 정리 SQL 튜토리얼 구문에 이어 데이터 베이스 구문을 정리해보자 CREATE DATABASE 구문 CREATE DATABASE databasename; DB를 생성한다 DROP DATABASE 구문 DROP DATABASE databasename; DB를 삭제한다. CREATE TABLE 구문...

SQL Tutorial 구문 정리

SQL 구문 정리 SQL은 데이터베이스를 관리하기 위한 프로그램이다. 데이터베이스는 대게 테이블을 가지고 관리하며 각 테이블은 이름으로 식별되어 레코드(행)이 쌓여 관리된다. 테이블 의 예시 CustomerID CustomerName ContactName Address City PostalCode Country...

Python 배워보기 - 클래스를 이용한 장비관리 프로그램

Python 배워보기 - 클래스 ####클래스를 이용하여 간단한 장비관리를 구현해보자 앞서 잔 코드는 매니져님의 도움을 많이 받아 작성되어, 내가 한번 짜보자는 느낌으로 새로 만들어보았다. 근대 코드가 비슷하게 만들어지는건 어쩔수 없나보다. class...

클래스를 이용하여 도서관리 프로그램을 짜보자

클래스를 이용하여 도서관리 프로그램을 짜보자 도서 관리 프로그램 Library, Book, User클래스 구현 프로그램 시작시 도서 5권 정도를 가진 상태로 시작 Library attrs name: 도서관명 (str) book_list: 도서 목록 (Book인스턴스의 목록)...