저번 글에 이어 웹팩 프로젝트를 설정하겠습니다. 먼저 package.json 파일을 만들어 줍니다. 문법 npm init -y webpack 준비에 필요한 패키지들을 다운받아 줍니다. (-D : 개발 영역에 다운로드 받는 의미입니다.) npm i -D webpack webpack-cli webpack-dev-server@next webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다. (webpack version4 이후는 cli도 설치해야 합니다.) webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다. (이로인해 webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에..
이번에는 webpack 설정에 대해서 알아봅시다 👀 front-end의 필수 무기라고 할 수 있습니다. 먼저 등장 배경부터 알아보죠! | 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까? - 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다. 이 수많은 code line을 관리하려면 장난아니겠죠? 더 나아가 변수명도 만들기 힘들어집니다. 또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다. 결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다. SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다. 따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다. 따라서 webpack을..
진짜 한참을 삽질하다가 알아낸 오류 "getInitialProps should resolve to an object" 라는 오류 메시지인데 nextjs로 개발중에 getInitialProps 로 query 내용을 출력해보고 싶었다 단지 출력만 !!!! 근데 왜 날 괴롭히냐고,, 해결 방법은 엄청 간단했다 단지 return {} 을 적어주면 된다는 거... object를 return을 안 해줘서 발생하는 오류,,, 나중에 또 까먹을 수 있으니 여기에 기록하고 남겨둬서 검색하면 내 블로그가 나오겠지?
알고리즘이 나를 미치게한다 ㅋ 공부합시다 열어분,, 오늘은 DFS와 BFS에 대해 알아보겠습니다! | DFS(Depth First Search)란? - 그래프에서 다른 노드를 방문하기 전에 하나의 노드를 깊게 파고들며 순회하는 검색 알고리즘입니다. (깊이 우선 탐색 알고리즘이라고 불리죠.) - Stack또는 재귀함수를 이용해서 구현합니다. - 추가적으로 DFS를 이용할 때 "재귀호출(Recursion)"을 이용하면 코드가 훨씬 간결하고 쉬워집니다. 단 stack과 다른점은 자식이 1개 이상인경우 stack : 쌓고 나서 호출하기 때문에 자시중에 맨 마지막으로 들어간 녀석이 먼저 출력이 됩니다. 재귀호출 : 정방향으로 호출하기 때문. - 그래서 소위 깊이를 우선적으로 탐색한다는 의미로 DFS를 깊이우선검색..
안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는..
| React Soket IO socket.io란 websocket기반으로 client와 server간 양방향 통신을 가능하게 해주는 모듈입니다. 기본적인 socket의 연결, 해제기능들을 자바스크립트로 가능하게 만든 모듈이라 생각하시면 편할 것 같습니다. 기본적인 socket의 실행흐름에 대해 알고 사용하는 것이 더 의미가 있을 것 같습니다. Soket IO 특징 단점 - 한 번 연결해 놓으면 전역적인 특징을 갖고 있기 때문에 리액트에서 하나의 components에 연결을 했다가 다른 compoentns에 연결을 하면 연결이 끊어져버린다. 해결 - 위와 같은 이슈를 해결하기 위해서 하나의 components 즉, common compoennts에 기능 구현을 하면 된다. ( 예전에는 HOC(High o..
오늘은 고언어(golang)의 고루틴(gorutine)에 대해 알아보겠습니다 ! | Goroutine 고루틴 - 타 언어의 쓰레드(Thread)와 비슷한 기능 - 생성 방법 매우 간단, 리소스를 매우 적게 사용한다. - 수 많은 고루틴 동시 생성 실행 가능 - 비동기적 함수 루틴 실행(매우 적은 용량 차이) -> 채널을 통한 통신 가능 - 공유 메모리 사용 시 정확한 동기화 코딩이 필요함. - 싱글 루틴에 비해 항상 빠른 처리 결과는 아니다. 멀티 쓰레드의 장점 및 단점 장점 - 응답성 향상 - 자원 공유를 효율적으로 활용 & 사용 - 작업이 분리되어 코드가 간결하다. 단점 - 구현하기 어려움 - Test & 디버깅이 어렵다. - 전체 프로세스의 side effect - 성능 저하, 동기화 코등 반드시 ..