Frontend

넘블챌린지 [Square Select Game]

넘블챌린지의 새로운 프론트엔드 챌린지를 하게 되었다. 큰 단위는 아니지만 짧은 스프린트로 뭔가를 계속 만들어가고 거기서 고민을 하고 있다는 것에서 긍정적이라 생각한다. 이번 챌린지를 하면서도 크고 작은 고민들을 했고 그 고민들에 대해 기록하려 한다. 프로젝트의 구현 영상은 위에 gif로 첨부를 해두었다 사각형이 여러개 나오고 그중 색깔이 다른 하나를 제한시간 안에 클릭하면 다음 stage로 넘어가게 된다. 색깔은 점점 구분하기 어려워 진다. (stage 17에서 어려움을 겪는 모습을 확인할 수 있다....) 주요 코드에 대한 설명 // App.tsx // ScoreBoard.tsx export default React.memo(ScoreBoard); // GameBoard.tsx export defaul..

cannot get /path

react + webpack(직접설정) 을 사용하여 개발을 하고 있었고 react-router-dom을 통해 프론트에서의 라우터를 관리해주고 있었다. 다른 문서 작성을 위해 테스트 하던중에 이상한 점을 발견했다. 해당 url 접근시 페이지가 없을 경우 404 페이지를 띄워주고 싶었는데 cra + react-router-dom을 이용한 프로젝트에서는 문서대로 처리가 가능했고 직접 webpack을 세팅해준 프로젝트에서는 위와 같은 화면이 노출되고 있었다. https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes React Router | Overview Declarative routing for React apps at any ..

왜 웹팩을 사용해야할까요?

이 포스팅은 아래의 사이트를 번역한 글입니다.(오역과 개인의 생각 또한 포함되어 있습니다.) https://webpack.js.org/concepts/why-webpack/ Why webpack | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org 왜 웹팩일까요? 웹팩의 사용이유에 대해 이해하기 위해서 번들러가 유행하기 전에 자바스크립트를 웹에서 어떻게 사용하였는지 ..

cra typescript 초간단 세팅

CRA(Create React App)에 typescript를 적용하고 eslint와 prettier까지 적용해보는 스크립트 입니다. [blah blah] -> 괄호안의 내용을 blah blah가 의미하는 것으로 변경하면 됩니다. npx create-react-app [projectName] --template typescript // typescript로 cra 수행 yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin yarn add -D eslint-plugin-react yarn add -D prettier eslint-config-prettier eslint-plugin-prettier yarn remove p..

var, let, const

var는 javascript에서 es5 이전에 등장한 변수 선언 키워드 입니다. let, const는 es6에서 등장한 변수 선언 키워드 입니다. es6 이상에서는 대부분의 책, 블로그 들에서 var를 쓰지 말라고들 합니다. 그 이유에 대해서 알아볼게요 스코프 var는 함수 레벨 스코프를 가집니다. let, const는 블록 레벨 스코프를 가집니다. // var var a = 1; { var a = 3; console.log(a) // 3 } console.log(a) // 3 // let let b = 1 // 전역변수 { let b = 2; // 지역변수 console.log(b) // 2 } console.log(b) // 1 // const const c = 1; // 전역변수 { const c ..