본문 바로가기
728x90
반응형

TIL147

next.js 왜 사용하나요 요즘 프론트엔드 개발자 필수템 next.js 어떻게 저떻게 사용은 했지만 프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지 딱히 뭘 알고 쓴다는 느낌은 없었다 그래도 next 왜 쓰는지 뭐가 좋은지 는 정확히 알아야하지 않을까... 🤔 싶어 시작한 글 React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링 Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함. SSR vs CSR SSR 서버사이드 렌더링 CSR 클라이언트 사이드 렌더링 👆 SSR 클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순.. 2023. 2. 26.
js 느낌표 두개 연산자 !! 부정의 부정은 긍정..? 이라는 생각이 드는 연산자 다른 타입의 데이터를 boolean 타입으로 형변환하기 위해 사용한다 null 이나 undefined 도 boolean 처리해준다 2023. 2. 26.
js 물음표 두개 연산자 js 연산자 표를 볼 때마다 아 이런 게 있구나~ 하면서 넘겨왔던 ?? 연산자 처음 봤을 땐 저런게 있구나~ 하는 생각으로 넘겼지만 react 에서 저 연산자를 볼 줄은 몰랐다 undefined 나 null를 내지 않고 확실한 결과값을 내기 위해 사용하는데 ?? 사용 전 function test(food,price,num){ let foodPrice = num*price console.log(price) console.log(food +"과 "+foodPrice+"원") } // 결과 test("빵",5000,2) 5000 '빵과 10000원' // null 지정 시 test("밥",null,2) null '밥과 0원' // undefined 지정 시 test("면",undefined,2) undefin.. 2023. 2. 26.
타입스크립트 any, unknown typescript : 타입 시스템이 없는 자바스크립트(약한 타입 언어)는 런타임에서 타입이 결정된다. 때문에 런타임 오류에 있어서 (try catch 로 잡아주더라도) 예상치 못한 에러가 발생한다면 프로그램은 멈출 수 있기 때문에 이를 보안하기 위해 타입을 직접 지정해주는 타입스크립트를 사용한다 브라우저는 자바스크립트를 읽기 때문에 타입스크립트를 자바스크립트로 바꾸어주는 컴파일 단계가 있는데 타입스크립트는 이 컴파일 과정에서 에러를 잡아내기 때문에 런타임에서 발생하던 에러를 그 전, 개발 단계에서 잡아낼 수 있다. any : 어떤 타입도 허용하는 타입 타입스크립트에서 가장 치명적인 any 타입 어떤 타입인진 모르지만 기능을 먼저 확인하고 싶을 때 빨간 줄을 없애려 가끔 any를 넣어놓고 작업하는데 까먹.. 2023. 2. 26.
useEffect counter로 작동 순서 정리 import { useEffect, useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const handleOnClick = () => { setCount(prev => prev + 1); }; console.log('useEffect 전'); useEffect(() => { console.log('실행'); return () => console.log('-------cleanUP--------'); }, [count]); console.log('useEffect 다음'); return ( {count} button ); }; export default Counter; useEffect 는 컴포넌트.. 2023. 2. 21.
'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다. 문제 'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다.ts(2802) setCheckList(prev => [...id]); 스프레드 문법인 es6를 지원하지 않는 환경에서 작성하면 생기는 오류 해결 //tsconfig.json "downlevelIteration": true tsconfig.json 에 추가해주었다. 2023. 2. 9.
react 오류 : Element type is invalid, expected a string (for built-in components) or a class/function but got : react 가 컴포넌트 못 찾는 오류 path 지정이 잘못되어서 난다 이걸로 두 시간 버렸다 해결책 멀쩡했다가 갑자기 저 오류 뜨면 방금 전에 import 했던 게 잘못된 것! 1. export, default export 살펴보고 import { usehooks } from "./hook" 이런 애들 {} 필요한지 필요 없는지 잘 보기 2. export 안 한 컴포넌트 있나 살펴보기 3. 컴포넌트는 무족권 function이거나 class 여야 함! 4. 저장 누르기 2023. 2. 6.
react) codebox에서 받은 파일 npm i 안 될 때 //package.json "dependencies": { "react": "18.0.0", "react-dom": "18.0.0", "react-router-dom": "6.3.0", "react-scripts": "^5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, react-script 버전 문제! react-script : 4.0.3 이었고 npm uninstall react-scripts 로 기존 스크립트 지우고 npm install -save react-s.. 2023. 1. 21.
[Context] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> [Context] is not a component. All component children of must be a or Router 컴포넌트에서 났던 오류! 상황 contextAPI를 사용하기 위해 컴포넌트를 만들어 코드를 작성하고 전역으로 쓰기 위해 라우터에서 감쌌다 👇 안으로 감싸버렸더니 Routes 자식으론 나 밖에 못 받는다는 오류가 나왔다 react-router-dom v6 부터 대신 를 쓰는데 오류가 뱉은 그대로 안에는 형태만 자식으로 올 수 있다 해결 를 안에 써주었다 2023. 1. 21.
728x90
반응형

티스토리툴바