Code Splitting과 cra-bundle-analyzer React는 빌드되면서 Webpack을 통한 번들링 작업을 하게 된다. cra로 React를 시작할 경우 기본적으로 Webpack, Babel 설정이 되는데 번들링이 되면서 하나로 합쳐진 js는 프로젝트가 커질수록 용량도 커지고 그로 인해 페이지 최초 접속 시 CSR 특성상 리소스들과 하나로…
Redux-Saga 맛보기 redux-saga는 redux-thunk와 마찬가지로 redux 미들웨어로써 redux 사용 시 비동기 요청의 side effect를 줄이기 위해서 사용된다. 지금까지 redux-thunk를 사용하거나 컴포넌트에서 비동기 요청을 직접 처리했었다. redux-saga를 공부하고 적용해보면서 redux-thunk와는 다르게 eff…
Visual Studio Code(VSCode) Emmet 사용 (JSX Emmet 설정) 근래 들어 React, Vue와 기본적인 HTML, CSS 등 프론트엔드 공부를 많이 진행하면서 여러 강좌를 보다 HTML에서 사용했던 Emmet을 VSCode에서 일반 사용과 React JSX에서도 사용하는 방법을 공유하고자 한다. Emmet 이란? 위키에서 HT…
React, GraphQL, Apollo 맛보기 GraphQL을 공부하면서 서버를 간단하게 개발해보고 이후 적용할 만한 프로젝트가 있으면 사용해보고자 했지만 하면서 프론트엔드에는 어떤 식으로 Apollo가 Redux를 대체할 수 있다는 것인지와 프론트엔드에 간단하게라도 붙여보고 싶어 테스트를 해본 경험을 공유하고자 한다. Express, GraphQL, …
graphql-voyger사용 최근에 GraphQL에 대해서 궁금증을 가졌었다. 간단하게라도 직접 해보는 게 생각정리도 빠르고 더욱 유익하다고 느껴 저번 포스팅에서 간단하게 Express, React와 Apollo, GraphQL을 사용해서 서버와 클라이언트를 생성했다. 이번에 Naver DEVIEW 프론트엔드 GraphQL 관련 영상을 보면서 graph…
Express / GraphQL / Appllo 맛보기 2 (Mysql) 이번에는 Expess, GraphQL, Apollo-Server, Mysql을 사용해서 Express와 Mysql 연결과 Apollo-Server를 사용한 GraphQL 서버를 간단하게 만들어 볼려고한다. 추후 다음 포스팅을 통해서 React와 GraphQL, Apollo-Clien…
시작하며 이번에 GraphQL을 알게 되면서 한 번을 사용해서 서비스를 제공해보고 싶었지만 회사에서 제대로 GraphQL을 적용할 여건이 생기지 않아 개인적으로 간단하게나마 구현해보면서 GraphQL이 무엇인지? 어떤 상황에서 개발에 어울릴지 장점은 무엇인지? 에 대하여 정리해보고 간단하게 테스트 해보았다. Express / GraphQL / Appllo…
시작하며 작년부터 Vue나 React 평소에 관심이 있던 SPA들을 공부하고 프로젝트를 진행하면서 자연스럽게 node에 대한 관심이 생기게 되었고 node를 기반으로 한 api 서버를 구축해보고자 인프런에서 온라인 강의를 듣게 되었다. 강의를 들으면서 알게 된 지식과 덧붙여 개인적으로 공부하여 알게 된 점들을 포스팅하려고 한다. Node.js 란? 구글링…
React Create-React-App(CRA) 환경변수 간단 사용 (dotenv) React Create React App(CRA)은 개발자가 Babel이나 webpack 같은 build 도구를 별다른 설치 과정과 설정 없이도 동작할 수있도록 도와준다. CRA로 React Project를 진행할 경우 dotenv를 포함하게 되는데 dotenv는 pro…
프로그래머스 해시 코딩 테스트 연습 이번에는 완전 탐색 관련 코딩 테스트 문제를 풀어보았다. 물론 여러 개발자들이 다양한 알고리즘을 통하여 문제를 해결했겠지만, 나의 방식으로 문제 풀이를 정리해보려 한다. 누군가에겐 조금이라도 도움이 되었으면 한다. 프로그래머스 > 완전 탐색 > 모의고사 Level 1 / JavaScript 해당 문제는 아래 URL을 통…