SILVER

1. venv 라이브러리를 이용해 가상 환경을 만들어주고 activate 시킨 다음 장고를 설치해준다 python -m venv 가상환경이름 source ~/가상환경이름/.../.../activate pip install django==원하는 장고 버전 2. 프로젝트 생성 이 명령어를 입력하면 config 폴더가 자동으로 생성된다 # 프로젝트 디렉토리로 이동 후 cd~ # activate 가 된 걸 확인 한 후 django-admin startproject config . 이 때, 에러가 뜨면 필자의 에러는 두개 였는데 해결 방법은, 우분투에서의 python -V 버전과 1번에서 python -m venv 가상환경이름 이 명령어로 가상환경을 만들어 줄때의 파이썬 버전이 상이했기 때문에 나타나는 문제였다...

아무리 dark모드 버튼을 바꿔도 Comment.js 컴포넌트 내에서는 값이 잘 변경이 되지만, layout.js에 오면 값이 undefined 되어서 쓰는 에러 .. 로그아웃을 하고 세션 정보가 없을 떄에는 제대로 잘 동작하는 걸로 보아서 session 에서가 문제다 import { Inter } from "next/font/google"; import "./globals.css"; import Link from 'next/link' import LoginBtn from "./LoginBtn"; import LogoutBtn from "./LogoutBtn"; import { cookies } from 'next/headers' import { getServerSession } from "next-au..

부모 컴포넌트가 재렌더링 되면 자식 컴포넌트들도 전부 재렌더링 되는데 자식 컴포넌트들 중에 렌더링 시간이 오래걸리는 게 있으면 지연시간이 발생된다 이때, 꼭 필요할 때만 자식 컴포넌트를 렌더링 할 수 있는 방법 ! import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링체크') return 자식 컴포넌트 }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } memo로 감싸져있기 때문에 재렌더링이 되지 않는다 memo의 원리 : props가 변할때마다 재렌더링 해줌 useMemo :컴포넌트 렌더링 ..

1. 실시간 데이터 React Query index.js 세팅 해줘야함 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //3번 ); { return 값 } = 값 같은 말 function App(){ let result = useQuery('작명', ()=> axios.get('https://codingapple1.github.io/userdata.json') .then((a)=>{ re..

React - 쇼핑 LifeCycle과 UseEffect 1 컴포넌트의 lifecycle : 페이지에 장착된다 (mount) : 가끔 업데이트가 되기도 함 (update) : 필요 없으면 제거가 되기도함(unmount) useEffect(()=>{ },[변화되는 변수]) mount가 되거나 update가 될때 useEffect가 실행됨 / 변수가 바뀔때도 실행됨 function Detail(props){ useEffect(()=>{ console.log('안녕')) } useEffect 쓰는 이유 1. html렌더링 이후에 동작함 html을 먼저 보여주기 때문에 화면의 변화가 빠르다고 느껴질 수 있음 function Detail(){ let [alert, setAlert] = useState(true) ..

모달 창 UI 만드는 방법 1. html css로 미리 디자인을 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 작성 ! 삼항 연산자 html코드쪽에서는 javascript코드를 작성할 수 없음 { }안에는 if문을 사용하는게 아니라 삼항연산자를 사용해서 조건식을 표현함 Map : 많은 div 들을 반복문으로 줄이고 싶을 때 1. array의 자료 갯수 만큼 함수안의 코드를 실행해줌 2. 함수의 파라미터는 array안에 있는 자료이다 3. return에 뭐 적으면 array로 담아줌 ! 중괄호 안에서는 for반복문을 사용할 수 없고 map()함수를 써야함 array이름.map(function(a, i){ return ( ) } 자식이 부모의 state를 가져..

잠깐 저장하고 싶은 변수는 그냥 변수에 저장 또한 state에 작성할 수 있음 let post = '강남 우동 맛집' let [글제목,b] = useState('남자 코트 추천', 함수) state와 변수의 차이 ? 글제목이라는 '남자 코트 추천' 이 변경이 되는 순간 state가 되는 html 은 재렌더링이 자동으로 된다 변동시 자동으로 html에 반영되게 만들고 싶을 때 state를 써야함 !! 더 쉽게 ? 자주 변경 될 것 같은 html은 state로 만들어 놓으면 됨 const [title1, setTitle1] = useState('남자 코트 추천') const [title2, setTitle2] = useState('강남 우동 맛집') const [title3, setTitle3] = useS..

더보기 UseSelector ? : Redux 의 store state에 데이터를 등록할 수 있음 : 즉 등록한 데이터를 가져와서 사용할 수 있음 더보기 UseDispatch ? : Action 은 Dispatcher를 통해 실행할 수 있으며 Action에서 변경할 새로운 state를 넣어서 reducer가 이전 state와 비교해서 변경사항을 적용하여 저장

store에 각각 ~.slice.js 파일을 생성해줌 (product는 products , product 두개를 생성) main store를 만들기 위해서 store/index.js 파일 생성해줌 import {configureStore} from "@reduxjs/toolkit" import userSlice from "./user/user.slice" import categoriesSlice from "./categories/categories.slice" import productsSlice from "./products/products.slice" import cartSlice from "./cart/cart.slice" import productSlice from './products/produ..

지금 진행하고 있는 프로젝트에서는 로그인 페이지와 / 회원가입 페이지의 UI가 동일하기 때문에 title을 props로 내려줘서 화면의 최상단 title만 바꾸어주는 방식으로 사용 -> Form 컴포넌트가 1개로 존재 React Hook Form 을 이용한 유효성 체크 https://react-hook-form.com React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React Hook Form에서 제공하는 useForm을 사용해서 register, handleSubmit, ..