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 :컴포넌트 렌더링 ..

React DevTools props나 state가 어떻게 반영이 되고있는지 Profiler 성능 저하되는 범인 찾기 녹화 하고 나서 어떤 컴포넌트가 렌더링 될 때 시간이 얼마나 걸리는지 녹화버튼으로 성능이 저하되는 범인을 찾을 수 있음 Redux DevTools lazy import (App.js) import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Detail.js') ) 단점 : detail 컴포넌트 로딩시간 발생 로 감싸면 로딩중 UI 넣기 가능

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..

Redux Tookit 장바구니 state가 App, Detail, Cart에 필요하면 어디에다가 만들어야하나 ? Redux를 사용하면 Component들이 props없이 state공유 가능 1. 등록 방법 [Redux 세팅 1] //store.js import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) [Redux 세팅 2] //index.js import { Provider } from "react-redux"; import store from './store.js' //->요기 const root = ReactDOM.createRoot(document.getElementById('..

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) ..

HTML상에서 image를 넣는 일은 번거롭기 때문에 이미지 갯수가 많아지면, import를 이미지 갯수만큼 해야하는 상황이 생기기 떄문에 매번 import 를 하기 번거롭다면 public 폴더에 이미지를 보관하는 방법 return ; public에 보관하게 되면 /이미지경로 로 import할 수 있음 ! 주의점 발행하려는 사이트 주소가 diptyque.com 이면 별 문제가 없지만, 서브 경로에 발행하고 싶으면 diptypque.com/어쩌구 로 하고 싶으면 아래와 같이 process.env.PUBLIC_URL을 추가해주면 됨 export import data.js let a = 10 let b = 100 //1개만 내보내기 export defulat a //여러개 내보내기 export default ..

모달 창 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..