- 전체보기(283)
- TIL(4)
- 자바스크립트(2)
- Firebase(2)
- nextjs(2)
- 웹소켓(2)
- 파이어베이스(2)
- js(2)
- Reflection(2)
- routine(2)
- scope(1)
- canvas(1)
- 로그인(1)
- 오브젝트(1)
- 배열(1)
- 실시간(1)
- 값(1)
- datepicker(1)
- HAVING(1)
- promise(1)
- ES2020(1)
- sql(1)
- 동적타이핑(1)
- WEBRTC(1)
- template_literal(1)
- ES2021(1)
- Portal(1)
- 프레임워크(1)
- 스코프(1)
- 컨텍스트(1)
- forwadRef(1)
- 호이스팅(1)
- REST(1)
- WHERE(1)
- fb(1)
- reduxtoolkit(1)
- useInput(1)
- React(1)
- debounce(1)
- es2022(1)
- useState(1)
- eventPreventDefault(1)
- 함수표현식(1)
- 모던자바스크립트(1)
- fabricjs(1)
- 디버깅(1)
- frontend(1)
- hoisting(1)
- 번들러(1)
- REST API(1)
- JWT(1)
- 비동기처리(1)
- useImperativeHandle(1)
- 회원가입(1)
- fragment(1)
- todo(1)
- context(1)
- eventhandler(1)
- rdb(1)
- 런타임에러(1)
- useContext(1)
- useReducer(1)
- axios(1)
- CSS(1)
- CSS Module(1)
- styled components(1)
- html(1)
- tailwindCSS(1)
- dependency(1)
- 컴파일에러(1)
- 데이터타입(1)
- restapi(1)
- 트리구조(1)
- spa(1)
- nosql(1)
- db(1)
- 함수선언식(1)
- 변수(1)
- localstorage(1)
- file(1)
- Truthy(1)
- Falsy(1)
- ES6(1)
- redux(1)
- websocket(1)
- 자료모음(1)
- contextAPI(1)
Next.js 13 변경사항 정리(2)
Next.13d은 웹팩의 후속이자 러스트 기반의 터보팩을 탑재하였습니다. (웹팩은 30억회 이상 다운로드 되었습니다. 웹 구축에 필수적인 요수지만, JavaScript 기반 툴링으로 가능한 최대 성능의 한계에 도달하였습니다.) Next.12에서는 Native Rust-
Next.js 13 변경사항 정리 (1) app 디렉토리
업데이트 변경사항app 디렉토리는 현재 베타 버젼으로 아직 프로덕션에서는 사용하지 않는 것이 좋습니다. Next.js13 은 pages 디렉토리도 제공하기 때문에 필요에 맞게 사용하시면 됩니다. app 디렉토리는 다음과 같은 지원이 포함됩니다.Layouts: 불필요한
[FE] 1장 성능 최적화 준비
첫번째 STEP : 성능 최적화 배경 페이지 표시 시간 증가에 따른 이탈률 (1초 느려지면 사용자 이탈률 10% 증가)페이지 표시 시간 증가에 따른 이탈률두번째 STEP : 성능 최적화를 위한 테스트 환경 세팅1) 브라우저 캐시 비활성화 => 리소스 캐시 비활성화 (새
redux2 TLK
redux1
Redux : 예측 가능한 상태 컨테이너예측 가능한중앙화된디버깅이 쉬운유연한Context api 의 한계규모가 커질수록 셋업과 관리가 복잡해짐잦은 상태 변화 시 퍼포먼스 이유가 있음리덕스의 기본 원리리듀서 함수(스토어 데이터 변경 mutate)중앙데이터 스토어 (구독
유효성검사/ re-evaluation/ re-rendering
Form 유효성 검사 : 데이터베이스에 오염되지 않은 데이터를 보관하기 위해서 리액트의 동작 원리Virtual DOM DiffingState,propsRe-evaluation vs Re-renderingRe-evaluation : 컴포넌트에서 state,props 등에
useInput custom hook
import { useState } from 'react';function useInput(validateValue) { const enteredValue, setEnteredValue = useState(''); const isTouched, setIsTouche
localStorage, debounce, useReducer, useContext , forwardRef, useImperativeHandle
키워드 값이 바뀔 때서버에서 키워드로 자동완성 된 데이터를 받아왔을 때useEffectSynchronizing with Effects로컬스토리지 localStorage.setItem(“isLoggedIn”,”1”)localStorage.removeItem(“isLogg
Fragment, Portal
Fragment 이유: div 남발을 방지하기 위해서(불필요한 wrapper 제거)Portal오버레이 형태의 모달 https://ko.legacy.reactjs.org/docs/portals.htmlRef 직접 DOM을 참조할 수 있게 한다상태 사용하지 않고
tailwindCSS, 디버깅
tailwindCssHtml 과 css를 별도로 관리할 필요 없음클래스 명을 고민할 필요 없음디자인이 일관되어 있음자유롭게 커스텀 가능디버깅컴파일 => 컴퓨터가 이해할 수 있는 용어로 변환하는 작업컴파일 에러런타임 에러(사용자에 의해 실행시 에러)0 나누기 오류Null
리스트 ,CSS 스타일링
해당 리스트에 값이 추가되고 삭제될 때마다 화면이 업데이트리스트의 key리스트 있고 없고CSS 스타일링Const formSubmitHandler=(event)=>{ event.preventDefault();}1) 인라인 방식2) 클래스네임 방식3) CSS- in-JS4
event.preventDefault(), 이미지 용량에 따른 이미지 처리
event.preventDefault()a 태그 클릭 시 href 링크로 이동form의 submit 누를 시 새로 실행해당 event 에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶을 때자식 컴포넌트의 상태를 부모 컴포넌트로 올리고 싶다면, 부모 컴포넌트에서 함
event-handler/useState
리스트 렌더링 CSS인라인 CSSCSS ModuleStyled-componentstailwind디버깅Event이벤트 핸들러 :이벤트가 발생되면 실행되는 코드 블럭이벤트 리스닝:이벤트를 듣는 매서드const buttonClickHandler=()=>{ console.lo
호이스팅, 스코프
//호이스팅// 선언 전에 미리 할당하는것// var, 함수 선언문// let,const, 함수 표현식 -> 호이스팅이 일어나지 않음//"strict mode"// 함수 선언식, 함수 표현식, 화살표 함수선언이 되기 전에 호출되는 것을 막아야함스코프: 변수가 영향을 줄
Truthy/Falsy, 함수선언식/함수표현식,배열/오브젝트
Truthy VS FalsyTruthytrue“0”“false”\[]/{}Falsyfalse0,0n“”, ‘’Null/Undefined/NaNfunction logger(){ console.log(“logging…”}logger();logger();logger();fu
JS
값과 변수값 : 데이터 조각의 단위변수 : 값을 저장하는 공간데이터 타입 (원시 타입과 객체 타입)NumberStringBooleanUndefinedNullSymbol(ES6=ES2015)BigInt (ES2020)templateLiterallet myName="jin
파이어베이스, SPA
파이어베이스: 구글에서 제공하는 클라우드 기반의 baas 플랫폼: 서버나 API 관리 없이 애플리케이션 백엔드 부분 구현 가능파이어베이스 제공 서비스Cloud Firestore : NoSQL 데이터베이스Authentication: 사용자 인증 서비스Cloud Stora