Bleeding edge

툴체인 Git git init npm npx add-gitignore osx windows node visualstudiocode npm init -y initial file mkdir public&&touch public/index.html mkdir src/utils && touch src/main.js &&touch src/utils/index.js browserslistrc > 0.5% in KR last 2 versions not dead ie 11 webpack touch webpack && touch webpack/common.js touch webpack/dev.js&&touch webpack/prod.js touch webpack/server.js //webpack/common.js im..

리액터의 라우터의 원리 : CSR (Client Side Rendering) 현재의 URL에 맞는 페이지를 렌더링 페이지의 리로드 없이 다른 페이지 이동 사용자의 페이지 이동을 감지하고 처리 가능 라우팅을 사용할 위치의 최상단에는 가 감싸고 있어야 한다. 는를 렌더링 할 때 props로 history 객체를 전달하는데, 이 객체는 history 패키지의 createBrowserHistory() 함수를 호출함으로써 생성된다. 마운트되는 순간에 props로 전달 받은 history 객체의 프로퍼티인 location 객체를 자신의 지역 상태로 저장한다. 그리고 props로 전달받은 history객체를 구독하고, 현재 URL이 변경될 때마다 자신의 지역 상태에 해당하는 location이 새로운 location으..

오늘 포트폴리오 피드백 : 피드백(다른 사람의 포트폴리오 포함) 링크를 걸 수 없는 환경이라면 블로그를 이용하여 느낀점이나 어떤 프로젝트에 관해서 내용을 넣는 것이 좋다. 프로젝트가 Vue나 React와 같은 것이 아닌 경우에는 그냥 공부용으로 확인을 할 수 있으나 열심히 공부했는지 알 수 없기에, 1번에 있는 내용처럼 블로그에서 자세히 기록하는 것이 좋다. ⇒ 예시 : JS에서 클로저를 이용하여서 무언가를 만든다면, 왜 그것을 사용하였고 어떤 점이 좋았는지 그리고 무엇을 배웠는지를 기록할 것 Web vital같은 경우는 프론트엔드에게 있어서 흥미로운 주제이다. 어떤 걸 개선하고 어떻게 개선했는지 자세히 작성하는 게 좋다. TIL은 나를 위해 적은 것이지 나를 위해 적은 것이 아니기 때문에 조금 더 아티..

초기 세팅의 중요성 항상 새로운 프로젝트를 시작하면 항상 먼저 해야하고, 이걸 하기 싫어서 프로젝트를 늦게 시작한 적이 많았다. “초기 세팅” 사실 프로젝트가 끝났을 때는 사실 초기 세팅에 대한 고통이 기억이 안나는 편이라 초기 세팅의 중요성을 잊고 있었다. 이번에 리액트 강사님께서 리액트 수업에 들어가기전에 초기 세팅에 대해 자세히 알려주셔서, 초기세팅의 중요성을 알 수 있었다. 초기세팅 어떤 것으로 구성되어 있을까? .vscode settings.json 사실 필수는 아니지만, 새로운 프로젝트에 새로운 세팅이 필요하다면 새로운 파일을 만드는게 좋다 extensions.json 필요한 익스텐션도 다시 설치하기 위해 파일로 보관하자 npm init package.json 가장 설정할게 많으니 밑에서 계속..

바벨 : 바벨은 컴파일러이다 (이전에는 트라인스파일러라는 이름으로 사용되었지만, 지금은 컴파일러라는 표현을 사용한다) 바벨을 대체할 수 있는 것은 플로우와 타입스크립트가 있다 바벨은 호환 문제를 컴파일로 해결합니다. 바벨 기능 구문 변환 대상 환경에 누락된 폴리필 기능(core-js 폴리필 활용) 소스 코드 변환(codemods) 바벨은 배포가 아닌 개발단계에서만 필요하기 떄문에 save dev라는 옵션이필요하다 CDN 가까운 곳에 있는 데이터를 사용할 수 있다. 같은 파일은 캐싱이 되어 사용할 수 있다.

diff&render import applyDiff from "./applyDiff.js"; import eventHolder from "./eventHolder.js"; let $root = null; // root container let rootComponentInstance = null; // root component's instance //$root를 통하여 initial render인지 아닌지를 확인한다 const bindEventHandler = ($root) => { for (const { type, selector, handler } of eventHolder) { (selector === "window" ? window : $root).addEventListener(type, hand..

자바스크립트로 CBD 구현하기 /* const eventHolder = []; export default eventHolder; */ class Component { constructor(props) { this.props = props; this.#holdEvents(); } //Component의 인스턴스를 생성할 때, 부모로부터 자식에게 값을 넘길 때 //props에 담아서 넘긴다. setState(newState) { this.state = { ...this.state, ...newState }; // if (this.state !== newState) this.state = newState; console.log('[RE-RENDERING] state:', this.state); render()..

프로젝트에서 생각하게 된 아이디어 express를 없이 라우팅 하기 미니 프로젝트를 만드는 동안에 express의 기능 없이 root/login과 같은 주소로 이동하면 login페이지가 그려지는 것을 만들고 싶었었다. 하지만, root/login으로 들어가면 404 에러를 만날 뿐이었다. 404 에러를 제거하는 방법? 1회차 404에러를 제거하기위해 첫번째로 404.html을 만들어 봤지만 아무런 반응도 없었다. 2회차 올리는 플렛폼마다 xml이나 다양한 방법을 통하여 404에러가 나왔을 때의 상황을 제어하는 것을 알 수 있었다. 내가 이용하는 플랫폼 : 깃페이지 무료고 바로바로 반영이되는 깃 페이지를 이용하여 올리기 떄문에 깃페이지에 대한 이해가 필요했다. 깃페이지는 404.md를 이용하여 GET할 값..

카카오 map map api를 사용하면서 생긴 문제 kakao is not defined Cannot read properties of null(reading 'currentStyle') 두가지가 있었다. 이전에 TIL로 작성을 한 적이 있었다. 1번같은경우 이전에 작성한 케이스가 맞았지만 2번 같은경우 우연히 에러가 발생하지 않는 경우를 골라 하였기 때문에 에러가 발생하지 않았던 것이다. 2번 에러가 생긴이유 우선 currentStyle을 잡는 객체가 무엇인지를 생각해봐야한다. 여러개의 글을 읽으면서 테스트를 해본 결과 나에게 문제가 생긴 이유는 동적으로 map의 컨테이너가 생겼다 없어졌다 하기 때문이었다. 즉, currentStyle은 맵의 컨테이너 사이즈가 현재 없다라는 것을 이야기한다. 해결 방법..