다국어 설정을 위한 Settingnpm i next-i18nextnext.config.jsconst { i18n } = require("./next-i18next.config"); module.exports = { i18n, };next-i18next.config.js

fake server 라이브러리npm i mirage베이스서버 세팅page단위돈 내고 쓰는 Postman이 최고시다

SSR은 사실 ..

직접 작성한 예제를 기반으로 작성코드와 같이 보시면 더욱 도움될 것 같습니다이전 글 에서 크게 달라지는 것이 없다.Action, Reducer은 완전하게 동일하다.달라지는 점은, Context API에선 전역 데이터에 접근하기 위해 Provider에 등록했고 Reduc

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - 공식문서위의 말처럼 기계적인 props전달 코드를 없앨 수 있는 방법 중 하나다.전역데이터를 공유하는 방법이며 로그인 유저, 테마 등의 데이터를

redux의 배경이되는 Flux패턴과 이를 기반으로한 redux를 이해하기 위해 작성 > Facebook에서는 알림기능에서 에러가 반복되어 양방향 데이터흐름의 MVC패턴에서 예측되지 않는 문제점을 해결하기 위해 Flux패턴을 도입했다고 한다. What is Flux

Type Test해보는 사이트(https://www.typescriptlang.org/play?>각 Component 폴더에서 types.ts 를 분리해 import로 사용함.매개변수에 대한 타입(Date) : 으로 지정Return Type(string) :

실행컨텍스트는 코드가 실행되기 위해 필요한 환경이미지출처, 내용참고사이트자바스크립트가 call Stack으로 코드를 처리하는 것은 알고있다.이 Call Stack에 쌓이는 것은 함수다. 쌓인다고 해서 내부 로직이 실행되는 것이 아니다.이 함수가 실행되려면 필요한 것들이

여기서 한가지 염두에 두고 글을 읽어야할 것이 있는데, JS엔진이 행하는 컴파일과정, 실행과정을 나누어서 생각을 해야한다.컴파일은 말 그대로 실행전, 인터프리터가 코드를 실행할 수 있도록 준비해놓 단계이고 실행은 바이트코드로 이루어진 기계어를 실행하는 것이다.코드 실행

이번 과제는 자란다의 기업과제이다.구현해야 할 사항은 크게 다음과 같았다.회원가입 / 로그인 - 유효성체크관리자계정에서 사용자 검색, 권한 수정, 페이지네이션권한에 따른 페이지 접근 분기2번 기능을 본인 포함 3명의 팀원과 페어프로그래밍으로 진행했다.사용자데이터를 필터

지난 달 26일부터 프리온보딩 과정에 참여하게 되었다.이전부터 프론트엔드를 하겠다고 생각하고, 공부를 시작했다.그러나 독학하는게 생각보다 쉽지않았다. 혼자하는게 일정에서는 자유로울수 있지만 그만큼 늘어지기 십상이었다.또한 문제가 발생했을 때 이를 해결하는 방법이 맞는

추가로 더 다룰 예정입니다.Json 객체를 사용해 가볍고, self-contained 방식으로 정보를 안전성있게 전달해주기 위한 토큰.JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact

Side effect가 없이 in, output이 동일한 순수함수로만 작성되고 공유상태, mutable을 피하는 SW를 만드는 프로세스함수형 프로그래밍은 명령형(imperative) 이 아닌 선언형(declarative) 이며 애플리케이션의 상태는 순수 함수를 통해 전

이전글에서는 자바스크립트 엔진이 js를 어떻게 읽고 해석하는지에 다뤘습니다.해당 글은구성요소와 이벤트루프가 어떻게 돌아가는지에 대한 글입니다.V8은 single thread으로 되어있는 실행 엔진이고 상당히 많은 일을 한다.js코드를 해석, 실행도 하며 callStac

이전 글에서 다루지 않았던 자바스크립트 엔진에 대한 글입니다.HTML이 parsing될 때 script태그를 만나면 parsing이 일시중지되고 script를 해석, 실행한다.이 해석, 실행되는 것이 어떻게 이루어지는가에 대한 정리를 시작해보자.컴파일러, 인터프리터,

브라우저의 동작을 정리한 원문(https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/> Rendering Engine이 UI를 그려내기까지의 과정을 다루고 있으며,이전\_랜더링과정을 정리해놓은 글

과제 1 1. API Request 1.1 Making Http Request 스크롤 구현전, api호출을 위한 http request를 만들어야 했다. 이를 위한 방법에는 크게 2가지, fetch, axios 가 있다. 이 둘의 차이점을 먼저 확인해보자 f

무한스크롤을 구현하는 방법scrollIntersectionObserver스크롤이벤트를 attch하여 현재 스크롤위치를 계산해 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다.스크롤마다 이벤트가 발생하므로 성능이슈를 예방하기 위해 쓰로틀링 적용을

nextJS build된 정적파일 무중단 서비스하기, nginx SSL적용 및 리버스프록시설정 nextJS를 배포하기 위해 .next라는 정적파일로 build하고 이를 배포하는 방법으로 기존에 진행했었다. 무중단서비스를 위해 PM2로 서버가 크래시나도 재시작을 할

메소드를 호출한 객체가 저장되어있는 속성으로 함수를 호출하는 방법에 의해 결정됨일반 함수에서 this -> window중첩 함수에서 this -> window이벤트에서 this -> 이벤트 객체메소드에서 this -> 메소드 객체메소드 내부의 중첩 함수에서 this -