Bleeding edge

{error ? "A" : null} => {error && "A"} if {error ===null || error==undefined} console.log('error') => error&& console.log('error') error?.(log) dynamic import import (".../api/db.json").then( something => console.log(something)) webpack을 쓰면 const db = require('../api/db.json') 과같이 사용할 수 있다. const navigation:{item :list} = db 툴체인은 로더, 패키지, 미니마이저를 분류로 추가해야할 것을 추가하는 연습을 해야하며, package.json에서 필요한 명령어..

Typescript config setting { "compilerOptions": { "target": "es2015", "module": "NodeNext", "moduleResolution": "node", //jsx를 사용하려면 필수로사용해야한다 "jsx": "react-jsx", "jsxImportSource": "react", "baseUrl": "./src", "typeRoots": ["node_modules/@types", "./src/types"], "allowJs": true, "noEmit": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": tru..

Webpack, Babel Webpack pack : 묶음 Web에 올려진 것을 묶음으로 묶어주는 것 Babel 바벨탑이 언어 때문에 고난이었던 바벨탑을 연상하면, 바벨은 트렌스 파일러라는걸 알 수 있다 둘의 관계? 정확히는 Webpack으로 하나의 묶음으로 만들 때, Babel을 이용하여 버전이 낮은 브라우저도 호환이 되도록 만들어 준다 사용해야하는 이유? 요번에 이력서를 제출하면서 느낀 것인데 프로젝트가 웹팩을 이용하면 폴더와 파일이 상당히 깔끔하게 정리될 수 있다. 지금 이력서에 있난 파일중 어떤 파일 같은경우 한개의 파일에 모든 코드가 모여있는데, 필요한 적재적소에 적절한 파일들을 넣고 webpack으로 묶은 뒤에, dist폴더(배포 폴더)에 필요한 것만 만들고 정리하는 것이 깔끔하다. 툴체인이 ..

툴체인 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으..

오늘 문제를 풀다가 queue를 구현해야 풀 수 있는 문제를 만났다. 평소에 queue라는 것을 생각하면, FIFO에 대해서만 생각하고 생각을 끝냈던 것 같다. 먼저 들어가면 먼저 나온다. 그래서 오늘 백준에서 문제를 풀이할 때 queue의 구현성을 먼저 생각하지 못했던 것 같다. queue 언제 쓸까? 아니, queue의 특징을 조금 더 나열하는게 좋을 것 같다. FIFO search bigO(n) insert bigO(1) delete bigO(1) 탐색이 적고, enqueue dequeue가 많은 경우에 사용하기 좋다. 이전에 스택 문제를 풀 때 스택을 구현하여도 불편하지 않았던 이유는 배열을 이용하여 pop을 이용하여도 손쉽게 풀리며 배열을 사용하면, search도 1, pop도 1 push도 1..

프로젝트를 시작하게 된 계기 처음 이 프로젝트를 시작하게 된 계기는 “윈도우에 있는 스티커 메모에 투명한 기능이 있었으면 좋겠다. “라고 생각하고 short-cut-marker 라는 이름으로 프로젝트를 시작하였다. 만들고 사용해 보니, 메모장 자체는 글자 크기가 고정되어 있어서 강조된 부분이 없어서 보기 불편했다. 또 메모장에 저장된 것은 핸드폰으로 확인할 수 없어서 아쉬웠다. 개선책 augmentedDevice 상단에 고정되고 투명도를 조절할 수 있는 브라우저를 만들고, 그 브라우저에서 노션이나 블로그를 이용하면 내가 원하는 메모에 하이라이트를 적용할 수 있고, 영상을 보면서 코딩할 일이 있을 때, 유튜브를 켜두고 작업하면 편할 것 같다는 생각이 들었다. electron을 선택한 이유 프론트엔드 개발자..

프로젝트를 시작하게 된 계기 처음 이 프로젝트를 시작하게 된 계기는 백준 온라인 저지 사이트에서 오답이 나왔을 때, 문제를 다시 읽으려면 다시 문제 페이지로 이동하는 것이 불편하다는 점에서 시작됐다. 페이지 이동을 줄여주기 위해서 문제 제출 페이지에서 문제도 볼 수 있게 만들기로 했다. 크롬 익스텐션을 선택한 이유 내가 직접 사이트를 수정할 권한이 없기에 이 문제를 해결하기 위해서는 브라우저의 익스텐션을 개발하기로 했다. 브라우저의 익스텐션은 사람들이 가장 많이 이용하는 크롬을 기준으로 만들기로 했다. 다행히도 크롬 익스텐션은 js를 이용하여 구현할 수 있었다. 처음에 만들기로 한 문제 제출 페이지에서 문제를 볼 수 있게 만드는 것은 local-storage를 이용하여 만들었기에 빠르게 만들었다. 새로운..

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