함수와 렉시컬환경의 조합함수가 생성 될 당시의 외부변수를 기억, 생성 이후에도 계속 접근 가능외부변수의 은닉화 (외부함수의 변수를 변경할 수 없다.) 함수 내부 렉시컬환경에서 변수가 없는경우 하나씩 외부로 나가서 변수를 찾게된다. 내부함수 -> 외부함수 -> ... -> 전역환경  let one;one = 1;function addOne(num) { console.log(num + one); //인수 5 + 전역변수 one값을 가져온다}addOne(5); 함수가 생성 될 당시의 변수를 기억해서 이후에 계속 사용할 수 있다. function makeAdder(x) { return function (y) { return x + y; };}const add3 = makeAdder(3);console..

프로젝트에서 특정 버튼을 클릭 시 사용자정보를 fetch해서 response에 따라 비동기로 input에 focus하는 로직을 구현했습니다. 안드, 웹에서는 정상작동했지만 ios에서 input에 focus가 안되는 이슈가 있었습니다. 찾아보니 Ios는 사용자 인터렉션에 의해서만 input focus를 시킬 수 있다고 합니다. 해결방법이라기보다 제가 사용한 꼼수는 ios경우 버튼클릭 시 인풋에 포커스가 가게하고 비동기로 response받아서 이후 프로세스 처리하는 것으로 진행했습니다.사실 ios의 경우 활성화가 되면안되는경우도 활성화가 되었다가 비활성화 된다는 현상이 있었지만 사용성을 생각했을 때 키보드에 포커스가 가는게 더 낫다 생각을 했기때문에 진행했습니다. 참고 https://gist.github..

모바일, PC에서 draggable layer UI를 구현했습니다.  animation plugin을 사용해서 자체적으로 구현을 할까 고민했지만 npm 패키지를 커스텀을 했습니다.react-spring-bottom-sheethttps://www.npmjs.com/package/react-spring-bottom-sheet optionsopen: 열기/ 닫기 Boolean 값onDismiss: layer닫는경우 실행될 콜백함수 snapPoints: 드래그 했을 때 멈추는 포인트 blocking: aria-hidden 기능 설정, default는 truescrollLocking: 페이지 스크롤 막기 정리한거 말고도 많은 옵션들이 있다.  스타일 커스텀 root에 선언 된 css 변수 오버라이드 하기:root..

순수 css 별다른 처리가 필요하지 않아 서버컴포넌트에서 호환문제가 발생하지 않는다. css 전처리기 sass, less, postcss등 css 전처리기는 빌드타임에 순수css로 컴파일된다. css modules 빌드타임에 css가 생성된다. Tailwind css 빌드 타임에 css가 생성된다. CSS-in-JS 자바스크립트를 사용하여 스타일 정의를 한다. 런타임에 동적으로 스타일이 적용된다. 빌드타임에 css가 완성되냐, 런타임에서 js통해 동적으로 css가 렌더링 되냐 Next.js 서버컴포넌트 호환성을 결정해준다.

ngrok을 사용하면 로컬환경을 인터넷으로 공유할 수 있다. https://ngrok.com./1. Mac 설치 방법❯ brew install ngrok/ngrok/ngrok 2. ngrok 회원가입한다. 3. Tunnel Agent Authtokens 를 만들어준다. 4. 터미널에 토큰을 저장해준다.     ngrok config add-authtoken '발급받은토큰'4. 프론트 로컬 서버를 띄어준다. 5. ngrok http (프론트서버 포트번호)를 터미널에 입력하여 사용한다.     ngrok http 8080

Jest자바스크립트 제일 유명한 테스트 프레임 워크프레임워크란? 테스트에 필요한 모든것을 갖춰두었다.babel, typescript, Node, React, Angular, Vue 테스트 할 수 있다.Jest (Javascript + Test) 대체제Vitest(Vite), Jasmine, Mocha + Sinon + Chai 등.. 테스트 커버리지테스트 코드가 내코드를 얼마나 커버하고 있나 테스트를 왜 해야하는지 ?예전에 났던 코드가 또 오류가 나는경우를 위해 회귀 테스트를 해야한다.회귀테스트 - 오류난 부분에서 오류 안나게 테스트하는 것코드가 복잡한데 많이 바뀌어야하는경우하나의 코드를 수정했더니 import 한 다른곳에서 에러가 나는 경우장시간에 걸쳐 내가 유지보수 해야하는 경우TDD - Test D..

섹션5request memoization과 data cacheNext 13 앱라우트 부터는 프론트서버에 부담이 늘었다. 서버컴포넌트 도입next 캐시는 4종류가 있다. request memoization, Data Cache, Full Route Cache, Router CacheBUILD TIME은 개발하고 배포할 때, Request Time은 페이지에 접근하는 경우를 말한다.Request memoization같은 서버컴포넌트에서 동일한 api를 두번찌르는경우 부담이 가는것 아닐까 하는데Next에서 알아서 최적화해서 한번으로 요청을 줄여준다.Duration (지속기간)한페이지에 중복된 api 요청을 최적화 해주는 기능이기때문에지속기간은 한페이지에 한한다. 다른페이지로 이동하는경우 다시 불러와진다. Re..

섹션4백엔드 서버 세팅하기백앤드 환경설정 - node 설치- postgresql 설치 설치방법postgres라는 db 관리자가 생긴다.  비밀번호 설정해준다.  포트는 5432로 설정한다. - redis 설치 (로그인 할 때 사용)https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-mac-os/ - Nest-prisma 세팅https://github.com/zerocho/nest-prisma 폴더다운로드 해서 사용한다. npm install 로 패키지 설치하기 .env 파일 수정DATABASE_URL="postgresql://postgres:비밀번호입력@localhost:5432/zcom?sche..

react queryreact-query를 사용하는 이유 - React Application에서 서버상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리- 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있다. - React Query에서 제공하는 캐싱, Window focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업없이 핵심로직에 집중할 수있다.  react-query의 기본옵션refetchOnWindowFocus, //default: true - 브라우저에 포커스가 들어온 경우refetchOnMount, //default: true -..

mswmsw 없을때에는 process.env.NODE_ENV로 구분해서 개발, 운영 api주소를 따로 만들어 사용해야했다. msw를 사용하면 개발환경, 운영환경 구분없이 실제주소로만 요청 보내면 된다.개발환경에서만 서비스워커를 실행해서 실제주소로 가는 요청을 가로채면 된다.msw는 오류를 내거나, 로그인을 하지 않아도 되는 환경을 만들어 테스트하기 용이하다. 설치하기npx msw init public/ --savepublic 폴더에 설치하면 mockServiceWorker 파일이 생긴다. 요청을 보내면 serviceWorker가 요청을 가로채서 원하는 response로 내려주는 기능을 한다.  package.json에도 추가해준다. npm install msw@latest --save-dev app 폴더..