- 전체보기(114)
- js(15)
- next.js(4)
- react-query(4)
- 웹팩(4)
- yml(3)
- render(3)
- 배포(3)
- 로컬 스토리지(2)
- testing library(2)
- JSON Server(2)
- github action(2)
- 캐시(2)
- JSON.parse(2)
- JSON.stringify(2)
- deploy(2)
- lighthouse(2)
- getServerSideProps(2)
- jest(2)
- 리액트 쿼리(2)
- aws(2)
- cloudfront(2)
- 객체 지향 프로그래밍(2)
- 인스턴스(2)
- SSR(2)
- yaml(2)
- 배열(2)
- S3(2)
- local storage(2)
- 오픈 그래프(2)
- git(2)
- 동적 라우팅(2)
- graphql(2)
- hydration(2)
- 코드 분할(2)
- TDD(2)
- open graph(2)
- const(2)
- let(2)
- 클래스(2)
- CRUD(2)
- var(2)
- 코드 스플리팅(2)
- 메모이제이션(2)
- meta(2)
- 최적화(2)
- 레이아웃(2)
- 깊은 복사(1)
- dehydratedState(1)
- promise(1)
- import(1)
- 추상화(1)
- useFetch(1)
- 불변성(1)
- Milestone(1)
- 시맨틱 HTML(1)
- in 연산자(1)
- 인증서(1)
- npm(1)
- header(1)
- Spread Syntax (...)(1)
- 아토믹 디자인 패턴(1)
- projects(1)
- OOP(1)
- 403(1)
- 유효성 검사(1)
- 프로세서(1)
- 서버 라이브러리(1)
- 브라우저 렌더링(1)
- http(1)
- REST API 서버 만들기(1)
- 해시 함수(1)
- patch(1)
- 복호화(1)
- 뮤테이션(1)
- If-None-Match(1)
- Render 트리(1)
- 리액트(1)
- 호이스팅(1)
- cacheTitme(1)
- 이미지 크롤링(1)
- mode(1)
- 무중단 배포(1)
- AWS S3(1)
- Proxy(1)
- 쿼리(1)
- 콜스택(1)
- 내장 고차함수(1)
- 최적화 기법(1)
- dot notation(1)
- babelrc(1)
- 캔버스(1)
- 요청/응답에 사용하는 헤더(1)
- 자동 배칭(1)
- mutable(1)
- 렌더 트리(1)
- React.lazy(1)
- 대칭키(1)
- 콘텐츠 협상 헤더(1)
- 객체(1)
- memoization(1)
- validation(1)
- 브라우저(1)
- 구독(1)
- useInput(1)
- logRoles(1)
- 컴포넌트 재사용(1)
- 힙 메모리(1)
- react rendering(1)
- React(1)
- If-Modified-Since(1)
- 캡슐화(1)
- DOM 트리(1)
- expect(1)
- https 서버 구현(1)
- 일치연산자(1)
- 반응형 웹(1)
- serializing(1)
- bracket notation(1)
- react hook form(1)
- 트리쉐이킹(1)
- 404(1)
- AVIF(1)
- dynamic-import(1)
- webp(1)
- convention(1)
- chai(1)
- initialData(1)
- 캐시 유효시간(1)
- 참조 자료형(1)
- 다형성(1)
- atoms(1)
- 전달인자(1)
- server state(1)
- Chart.js(1)
- Object.assign(1)
- await(1)
- Cache-Control(1)
- CSSOM 트리(1)
- moment(1)
- 스택 추적(1)
- 솔트(1)
- assertion(1)
- 웹(1)
- check box(1)
- mocha(1)
- statically optimize(1)
- async(1)
- 비동기(1)
- node.js(1)
- getByText()(1)
- 웹 스토리지(1)
- aos(1)
- useParams(1)
- 디렉토리 구조(1)
- 엑세스 토큰(1)
- React-query devtools(1)
- 콜백함수(1)
- main(1)
- salt(1)
- typeof(1)
- 자동 배포(1)
- 공개키(1)
- query(1)
- 유니코드(1)
- CSS 애니메이션(1)
- keyframes(1)
- Hashing(1)
- 문자열(1)
- error(1)
- ec2(1)
- https(1)
- Route(1)
- 불일치연산자(1)
- Molecules(1)
- client state(1)
- JWT(1)
- Spread 문법(1)
- 새로고침(1)
- 토큰(1)
- 원시형(1)
- http-proxy-middleware(1)
- event.preventDefault()(1)
- 세션스토리지(1)
- 클로저(1)
- UTF-16(1)
- Screen(1)
- Last-Modified(1)
- SideEffect(1)
- filter(1)
- Rest parameters(1)
- 필드(1)
- github actions(1)
- placeholder(1)
- 빌드(1)
- delete(1)
- commit(1)
- font awesome(1)
- 이슈(1)
- 타입(1)
- cheerio(1)
- 별명(1)
- 커밋(1)
- 오퍼레이션 네임(1)
- router.query(1)
- HTTPS 인증서 발급(1)
- 미디어 쿼리(1)
- useMemo(1)
- 가비지 컬렉션(1)
- 마크업(1)
- VirtualDOM(1)
- 함수 재사용(1)
- axios(1)
- 원시 자료형(1)
- nvm(1)
- 체크박스(1)
- signature(1)
- SSL/TLS(1)
- 크로스 브라우징(1)
- 오퍼레이션 타입(1)
- redux-persist(1)
- 파싱(1)
- 최적화 도구(1)
- 함수 표현식(1)
- 디자인 시스템(1)
- Reconciliation을(1)
- useCallback(1)
- TRIGGER(1)
- React.Suspense(1)
- static import(1)
- reduce(1)
- 정규식(1)
- CSR(1)
- Promise All(1)
- 스택 오버플로(1)
- 로컬스토리지(1)
- 함수 선언문(1)
- 에러(1)
- automatic batching(1)
- template(1)
- cpu(1)
- memory(1)
- 레인보우 테이블(1)
- issue(1)
- packge.json(1)
- CDN(1)
- 페이지별 레이아웃(1)
- 주솟값(1)
- 번들링(1)
- argument 객체(1)
- 암호화(1)
- params(1)
- 표현 헤더(1)
- master(1)
- 얕은 복사(1)
- 메모리 누수(1)
- 프로젝트(1)
- Fetch(1)
- React Proxy(1)
- Entry(1)
- 함수의 호이스팅(1)
- ASCII 문자(1)
- pm2(1)
- default branch(1)
- Defer(1)
- 크롤링(1)
- 시맨틱(1)
- github(1)
- 컨벤션(1)
- 상속(1)
- output(1)
- redirect(1)
- seo(1)
- bundle(1)
- Per-Page Layouts(1)
- http 헤더(1)
- createRoot(1)
- slice(1)
- 아토믹 디자인(1)
- atomic design(1)
- babel(1)
- 인코딩 방식(1)
- Map(1)
- 그래프(1)
- Token(1)
- 리프레시 토큰(1)
- styled component(1)
- toBeInTheDocument()(1)
- mutation(1)
- useForm(1)
- title(1)
- dehydrate(1)
- isLoading(1)
- CA(1)
- ES6(1)
- 로딩(1)
- 차트(1)
- 힙(1)
- 운영체제(1)
- react-calendar(1)
- 웹 표준(1)
- batching(1)
- 배칭(1)
- 상태관리(1)
- utf 8(1)
- isError(1)
- 마일스톤(1)
- Payload(1)
- 해싱(1)
- 참조형(1)
- 비연결성(1)
- Organisms(1)
- mkcert(1)
- 시각화(1)
- canvas(1)
- 무상태성(1)
- staletime(1)
- webpack dev server Proxy(1)
- 비밀키(1)
- 메모리(1)
- 정규표현식(1)
- 자바스크립트 엔진(1)
- 커스텀(1)
- 프로세스(1)
- 페인팅(1)
- Immutable(1)
- undefined(1)
- Fiber(1)
- usequery(1)
- page(1)
- etag(1)
[AWS] CloudFront 캐시 삭제로 변경 사항 바로 적용하기
CloudFront를 통해 서비스를 하는 경우, 캐시된 파일 때문에 프로젝트 수정 사항이 바로 적용되지 않는다. CloudFront는 각 엣지에서 파일을 캐싱하고, TTL이 만료되기 전까지는 Origin(S3 버킷에 있는 원본 파일)을 요청하지 않고 캐시된 파일을 사용
React 프로젝트를 CloudFront 로 배포 시 403/404 에러 발생
(React 등) CSR 방식의 프로젝트를 CloudFront로 배포를 하게되면 403/404 에러가 발생한다. React는 react-router-dom을 사용해 새로고침 대신 서비스 내에서 redirect를 발생시키는데(CSR), CloudFront는 redirec
[지뢰 찾기] 몇 가지 버그...
게임 실행 후 완료하지 않고 중간에 다른 난이도로 보드를 생성하게 되면 isRunning 상태가 여전히 true이기 때문에 타이머가 자동으로 실행되는 문제였다. create_board에서 state.isRunning = false를 추가해 보드 생성 시마다 isRunn
EC2 인스턴스에 HTTPS 적용하기 (feat. Route 53, Load Balancer)
HTTP와 HTTPS의 가장 큰 차이점은 SSL 인증서라고 할 수 있는데, HTTPS는 SSL 인증서를 통해 사용자가 사이트에 제공하는 정보를 암호화한다. 그 외에도 HTTPS는 TLS(전송 계층 보안) 프로토콜을 통해 보안을 유지한다. 보안의 중요성은 사실 말 할 것
Next.js EC2 배포 + PM2 활용한 무중단 배포
Ubuntu Server 20.04 LTS 선택프리 티어가 가능한 t2.micro를 선택했다. 새 키 페어 생성키 페어 생성 클릭하면 파일이 다운로드된다. 이후 필요하므로 쉽게 찾을 수 있는 경로에 두는 것이 좋음.SSH (Secure Shell) Protocol은 P
axios interceptors를 활용한 토큰 첨부 & 토큰 재발급
axios interceptors를 사용하면 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다.request에서는 요청을 보내기 전에 하는 작업이 가능하고response에서는 서버에서 받은 응답이 return 되기 전(= then과 catch로 넘어
[Next.js] 로컬(localhost)에 https 적용하기
mkcert라는 프로그램을 이용해서 로컬 환경(내 컴퓨터)에서 신뢰할 수 있는 인증서 만들 수 있다.로컬(내 컴퓨터)을 인증된 발급 기관으로 추가(localhost로 대표되는) 로컬 환경에 대한 인증서를 만들기👉🏽 옵션으로 추가한 localhost, 127.0.0.
[Next.js] 페이지별 레이아웃 적용하기 (Per-Page Layouts) (feat. TypeScript)
페이지 별로 적용되는 레이아웃이 다를 경우 Per-Page Layouts(https://nextjs.org/docs/basic-features/layouts모든 페이지에 FooterMain, Addnew 페이지에 Header를 적용하려고 한다.모든 페이지에 포
react-calendar 커스텀하기 (날짜 변환, 현재 달 구하기, 콘텐츠 추가하기)
날짜 클릭할 때마다 value가 해당 날짜로 변경된다.(onChange가 setValue의 역할) React-Calendar의 styles를 import 하고각 선택자를 사용해 기존의 스타일을 오버라이드한다.(선택자는 node_modules > react-calenda
react-hook-form 유효성 검사하기
required : 필수 여부pattern : 유효성 검사 정규식minmaxminLengthmaxLengthvalidate : 직접 작성한 유효성 검사 함수{errors?.input명.type === 유효성 검사 항목 && 에러 메시지 요소} 형태로 사용Enter 적용
이미지 크롤링하기 (feat. axios & cheerio)
axios로 받아온 해당 주소의 data.이 중 필요한 부분은 property="og:image"인 meta 태그의 content의 값이다. 해당 Input의 onBlur 시 실행되는 함수 getLinkMetaData 전체 코드 (크롤링해온 이미지 주소를 image
[Next.js] SSR + react-query Hydration에서의 serializing 에러
상세 페이지에서 getServerSideProps를 사용해 서버에서 클라이언트로 데이터를 props로 넘겨주려고 하는데 serializing 에러가 발생했다. Server ErrorError: Error serializing .dehydratedState.queries
SSR 환경에서 react-query 사용하기 (initialData & Hydration)
공식 문서에 따르면, React Query는 서버에서 데이터를 미리 받아와서 queryClient에 전달하는 2가지 방법을 지원한다. 서버에서 데이터를 prefetch하고, 컴포넌트에 initialData로 전달하는 방법.Next.js의 getStaticProps 또는
[Next.js] 동적 라우팅 새로고침 에러 (router.query가 undefined일 때)
상세 페이지를 동적 라우팅(\[id].tsx)으로 만들고 각 페이지에 해당하는 데이터를 받아오는 API 요청에 페이지 경로( router.query 객체)를 이용하려고 했다. 그러나 페이지에 접속하거나 새로고침 할 때 데이터를 불러오는 데 실패했다. router.que
렌더링 최적화를 위한 Automatic Batching (React 18)
하나의 이벤트 핸들러 안의 state 업데이트들을 \*일괄적으로 처리\[](https://yceffort.kr/2022/04/deep-dive-in-react-renderingevent queue에 저장되고, 16ms마다 실행하게 되는, 비동기적 처리??upd
리액트 렌더링 (trigger, render, commit)
Triggering a render (주문을 주방에 배달)Rendering the component (주방에서 주문대로 요리)Committing to the DOM (손님에게 서빙)render가 일어나는 두 가지 원인(trigger)1) initial render (컴
React가 VirtualDOM을 활용하는 방법
원티드 프리온보딩 프론트엔드 챌린지 4월 - 리액트 해부학VirtualDOM, Reconciliation, FibercreateRoot()과 render()의 역할React가 Reconciliation을 통해 화면을 그리는 방법Fiber Reconciler의 rende
[Ngether] react-query를 사용한 채팅 리스트 페이지 구현
데이터가 inactive 상태가 된 후 cacheTime 동안은 해당 데이터의 cache가 존재하므로 새로운 데이터를 받아올 경우(refetch 이벤트 혹은 트리거 발생 시) 🌟isFetching🌟 상태를 거쳐 데이터가 fetch 된다. 이 때 새로운 데이터가 fe
[Ngether] 아토믹 디자인 도입
프로젝트에 아토믹 디자인을 적용할 것인지에 대해 팀원들 간의 상당한 의견 차이가 있었다. 충분한 고민 없이 도입하면 오히려 프로젝트 진행에 방해가 될 수 있다는 의견도 있었고, 실제로 이미 아토믹 디자인을 프로젝트에 적용해 본 많은 사람들이 아쉬운 점에 대해
styled-components 사용 시 : Babel 대신 SWC로 빌드하기
Next JS에서 styled-components를 사용하기 위해 .barbelrc을 생성하고 next/font를 사용하려고 하니 아래와 같은 에러가 발생했다. Syntax error: "@next/font" requires SWC although Babel is be