목록전체 글 (150)
On a couch
* 컨퍼런스 영상 시청 및 리뷰 스터디를 위한 인증글입니다. 강의 영상 : https://www.youtube.com/watch?v=mee1QbvaO10 강의 노트 CommonJS 모듈 시스템의 등장 javascript에 ‘모듈’이라는 개념이 없었을 때 라이브러리를 import 하려면, 스크립트 태그를 이용해서 해당 라이브러리의 전역을 참조해야 했다. ‘commonjs’라는 모듈 시스템이 등장해, script 사용으로 인해 발생하는 비효율을 해결하고자 했다. 함수 호출 한 번으로 모듈을 가져올 수 있게 되어 함수를 가져오거나 외부에 노출하는 동작이 쉬워짐. // export exports.add = function (){ ... } // improt const {add} = require('./add.j..
레퍼런스 [Redux] 리덕스의 내부 파헤치기 replaceReducer on @reduxjs/toolkit 설명 / 정의 react 페이지의 크기가 커지면서, 모든 페이지를 한 번들로 가져오기 부담스러워 코드 분할을 하였다. 그러다보니 마찬가지로 redux store도 처음부터 모든 state를 들고 있을 것이 아니라, 해당 state가 필요한 곳에서만 동적으로 추가하도록 변경할 필요가 생겼다. 그래서 선배와 이것저것 뒤지다가 발견한 코드가 이것이다. const staticReducers = { counter: counterReducerSlice, }; export const store = configureStore({ reducer: staticReducers, middleware: getDefaul..
레퍼런스 [리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components React Suspense 소개 (feat. React v18) Speed Up Your React Apps With Code Splitting 코드 분할이 필요한 이유 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 전부 읽어온다. 이 스크립트가 많아지면 네트워크 비용도 높아지고 병목현상이 생기게 된다. 따라서 자바스크립트로 작성된 모듈(js+css+img 등 dependancy가 있는 자원들 모두)을 하나의 번들파일로 만들고 tree-shaking, minify 등의 작업을 통해 사이즈를 줄이는 노력을 한다. 단, 하나의 번들파일로 압축한다고 하더라도 만약 앱..
레퍼런스 ESModule을 동적으로 import 하기 Speed Up Your React Apps With Code Splitting 설명 / 정의 대부분의 경우에는 파일 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다. // test.js export const sum = (a, b) => a + b // 상단에서 정적으로 import 하는 경우 import { sum } from './test' // 하단에서 동적으로 import 하는 경우 const sum = await import('./test') // default와 그 외 함수들..
프론트엔드 개발자라는 역할을 가지고 일을 한 지 벌써 3개월차가 되어 간다. 그 말인즉 아직 수습 기간을 지내고 있는 별 거 아닌 신참이다. 그런데도 하루하루가 쉽지만은 않아서, 짧은 회고도 제대로 하지 못하는 게 마음의 빚이었다. 공부할 때는 매일매일 특정한 챕터, 특정한 주제를 정해놓고 공부했기 때문에 하나의 완성된 글을 써 내기가 비교적 수월했는데 (물론 당시에는 이렇게 말하는 날이 올 거라곤 생각도 못 했다) 일을 시작하면서부터는 모르는 게 사방 천지게 깔려 있기 때문에 그때그때 땜질식으로 알아내는 게 훨씬 많다. 그래서 개인 노션 페이지에 블로깅 아이템은 늘어가고 있는데, 그걸 누구에게 보여줄 수 있을 만한 수준으로 다듬는게 마음만큼 잘 되지 않는다. 어쩌면 그냥 관성일 지도 모른다. 관성이라는..
회사에서 AWS 서비스를 잔뜩 연동해 사용하는데, 개념을 몰라 과정 파악이 어려웠다. 개념을 문서로 정리한 글을 못 찾아, 목마른 자가 우물을 파는 심정으로 정리해 보았다. 내용 추가 / 수정 환영합니다 :) 기본 개념 IoT 디바이스 - 클라우드 or 디바이스 - 디바이스의 통신을 용이하게 하는 기술이다. 이제는 칫솔, 진공 청소기, 자동차 및 기계와 같은 일상적인 디바이스가 센서를 사용하여 데이터를 수집하고 사용자에게 지능적으로 응답할 수 있다. 이러한 스마트 객체는 자동으로 인터넷과 데이터를 주고받을 수 있다. 이러한 모든 "보이지 않는 컴퓨팅 디바이스" 및 이와 관련된 기술을 사물 인터넷이라고 총칭한다. AWS IoT 개요 디바이스 연결과 관리 : 요건에 가장 잘 맞는 프로토콜(HTTP, MQTT..
watch 모드 tsc app.ts --watch또는 tsc app.ts -w 를 입력하면 해당 파일이 관찰 모드로 진입한다. ctrl+c로 저장할 때마다 컴파일이 실행된다. 단점은 특정 파일을 지정해야 한다는 것이다. 규모가 큰 프로젝트에서는 많이 사용하지 않는다. 전체 프로젝트 or 다수의 파일 컴파일하기 index.html에 다수의 js파일(ts로 컴파일하면 생길 파일)을 src로 걸어 두면, 그 중 한 가지만 변경사항이 생기더라도 전부 리컴파일한다. tsc --init 을 입력하면 tsconfig.json 파일이 생기면서 현재 프로젝트 폴더에 들어있는 모든 ts 파일을 컴파일 대상으로 본다. tsc -w 또는 —watch를 입력하면 관찰 모드로 확인하고, 변경 사항이 적용되어야 하는 모든 ts파일..
섹션1 메모 강의 프로젝트 설정 타입스크립트 컴파일러 설치 : npm install -g typescript 이후의 명령어는 tsc 폴더를 만들고 npm init 으로 package.json 생성, tsc init으로 ts 설정 npm install --save-dev lite-server 로 dev dependency에 ‘lite-server’ 설치 package.json 내부 scripts에 "start": "lite-server" 로 명령어 설정 후 실행 tsc app.js 로 작성한 ts코드 js로 컴파일하여 터미널과 브라우저에서 결과 확인 가능 *nodemon으로 워칭하는 법 https://colinch4.github.io/2020-12-03/README.typescript-개발환경구성/ 섹션2..
폭풍같은 일주일이었다. 많은 것들이 지나갔는데 그 사이 아무것도 기록하지 못한 것이 신경쓰여서 간단한 기록을 남긴다. 1. 첫 기업 과제를 제출했다. 개인적으로 여러 면에서 의미가 있었다. 일단 서류 과정을 통과하고 기업 과제를 받아볼 수 있었다는 것 자체로 특별한 일이었다. 거기에 이전까지 원티드에서 훑어보던 기업들에 비해 관심을 가지고 있는 도메인이어서 과제 구현하는 것도 재밌었다. 프로젝트 종료된 이후에 자소서 작성, 일반면접 준비, 기술면접 준비 등 이런저런 이유들로 리팩토링도 미뤄지고 직접 코드 작성하는 시간이 줄어서 에너지가 좀 다운되는 느낌이 있었다. 다시 구현에 집중하는 시간을 끼워넣은 게 일정 환기 면에서도 도움이 되었고, 또 나름대로 타입스크립트도 써 보고 계속 생각만 하던 바닐라 Da..
메인 프로젝트 이후 동기분들의 결과물을 보다가 React query를 이용하신 분들이 꽤 많다는 걸 알게 되었다. 구두로만 '좋아요 써 보세요'라고 듣다가 모 기업 과제를 진행하면서 구체적으로 무엇이 좋은지 알아보았다. 참고자료는 1. 카카오 기술블로그 : React에서 서버 데이터를 최신으로 관리하기(React Query, SWR) https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/ 2. 오픈소스컨설팅 테크블로그 : React-Query 도입을 위한 고민 (feat. Recoil) https://tech.osci.kr/2022/07/13/react-query/ 3. 노경환님 블로그 : react-query 가이드 https://kyou..