본문 바로가기
728x90
반응형

분류 전체보기235

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.
2023.02.19, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 다시 하얗게 불태운 이번 주... 오랜만에 무한스크롤을 구현했다. 무한 캐러셀도 구현해봤는데 생각보다 어렵지 않아서 재미있게 작업했던 거 같다. 무한스크롤은 observer 사용해서 구현했고 캐러셀은 setTimeout 사용해서 3초마다 아이디 id값 +1 해서 돌리는 방법으로 구현했다. 둘 다 멍때리고 보기 좋은 기능들이라 구현 후에 재밌게 멍을 때리기도 했다.(?) 2. next.js 는 어디가서 썼다고 말 못할 정도로 넘 구리게 썼다. 다행히 금요일에 동기와 함께 채팅 어플 리팩토링하며 나름 pages/api 폴더를 사용해서 auth 페이지에서 받은 user 정보를 서버로 post했고 이를 home 페이지에서 받아 getstaticprops.. 2023. 2. 19.
2023.02.12, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 하얗게 불태운 이번 주.... 밤낮 없이 채팅앱에 매달렸다. 솔직히 코드 손 봐야하는 부분이 정말 많은데.... 이렇게 하다간 끝도 없겠다 싶어서 회원가입 / 로그인 에러만 알람 띄워놓고 끝냈다... 비즈니스 로직 따로 훅으로 뺐었어야했는데... 방법이 있었을텐데 이것도 아쉬움이 남고 타입도 깔끔히 못 넣은 거 같아서 아쉬움은 크다... ssr 로직 사용도 못하고 useEffect로 몽땅 불러왔는데 이것도... 🫠 context API 리듀서로 관리 못한 것도... 그래도 코드가 의도대로 굴러갔고 next.js, firebase 를 썼다는 데에 의의를 두면 나름 뿌듯하다. 특히 next js 같은 경우는 해야지 해야지 하면서 겁 먹고 못하고 있었.. 2023. 2. 12.
nextron 채팅앱 프로젝트 👇 해당 깃허브 주소 https://github.com/Joeunji0119/chat GitHub - Joeunji0119/chat: Nextron.js / TypeScript Nextron.js / TypeScript. Contribute to Joeunji0119/chat development by creating an account on GitHub. github.com 임시 저장 2023. 2. 10.
'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다. 문제 'string' 형식은 '--downlevelIteration' 플래그 또는 'es2015' 이상의 '--target'을 사용하는 경우에만 반복할 수 있습니다.ts(2802) setCheckList(prev => [...id]); 스프레드 문법인 es6를 지원하지 않는 환경에서 작성하면 생기는 오류 해결 //tsconfig.json "downlevelIteration": true tsconfig.json 에 추가해주었다. 2023. 2. 9.
728x90
반응형

티스토리툴바