Jaeilit

비동기 프로그래밍의 반대 말은 동기 프로그래밍입니다. 동기 프로그래밍은 순차적으로 위에서 아래로 작성 된 순서대로 코드를 실행하는 프로그래밍법을 이야기하는데요 만약에 동기적으로 프로그래밍을 하다가 시간이 많이 걸리는 작업을 만나면 어떻게 될까요? 브라우저는 이 동기작업이 완료 될때까지 멈춰있게 됩니다. 이런 현상을 방지하고자 비동기적인 프로그래밍이 필요한데 자바스크립트 엔진에서는 브라우저의 웹 API 를 활용하여 비동기 프로그래밍을 할 수 있습니다. 자바스크립트 엔진에는 메모리 힙과 콜 스택이 있습니다. 그 중에서 콜 스택이 비동기 프로그래밍을 가능하게 하는데 어떻게 가능하게 하는지 살펴보겠습니다. 콜 스택에는 함수를 호출하면 함수의 실행 컨텍스트가 순차적으로 스택 구조로 쌓이게 됩니다. 그래서 호출스택..

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터입니다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있습니다. 먼저, 인터프리터란 사람이 이해할수있는 고수준의 언어를 기계어(저수준언어)로의 컴파일을 하지않고 한줄씩 명령어를 읽으면서 바로 실행하는 프로그램 또는 환경을 이야기 합니다. 파이썬, JS 등이 대표적인 언어입니다. 인터프리터는 단점으로 최적화 과정없이 변환하기 때문에 컴파일러보다 성능이 느리다는 점입니다. 흔히들 JS 엔진은 브라우저에서 인터프리터로 처리된다고 알고있지만 V8 엔진에서는 순수 인터프리터만 사용하여 구동하지 않습니다. 인터프리터일 경우 항상 같은 코드를 반복해서 실행합니다. 웹이란 특성상 새로고..

웹 페이지의 서비스들이 규모가 커지기 시작하고 SPA 의 프레임워크/라이브러리 들이 등장함에 따라서 번들러의 역할도 중요해졌습니다. 또한 최근 트렌드 중 Nexjts 는 리액트의 Server Components 를 활용하여 번들 용량을 최대한 줄여 사용자 경험과 성능을 더 최적화 하려고 하고 있기 때문에 번들이 무엇인가에 대해 한번 공부해보려고 했습니다. 모듈 번들러란 브라우저가 필요한 리소스들(html, css, js 기타 Img file font 등)을 병합 및 압축을 해주는 동작입니다. 번들러중에서도 가장 많이 사용되는 모듈 번들러는 Webpack 웹팩 입니다. 그 외에도 Rollup, Parcel, 최근 Vite 도 있습니다. 번들러 사용 이전에는 JS 파일을 사용하기 위해서 기능/페이지 단위 모..

프로그래밍 패러다임에서도 설명드렸다시피 프로그래밍에는 크게 명령형과 선언형으로 구분됩니다. 명령형은 결과(Waht)보다 과정(How)을 중요시하고 선언형은 과정(How)보다 결과(What)를 중요시합니다. 이 과정에서 명령형은 OOP 를 지향하여 객체들간의 상호작용과 객체의 상태변화를 중심으로 프로그래밍을 설계하고 선언형은 함수형 프로그래밍을 지향합니다. 함수형 프로그래밍의 특징 - 순수함수 - 불변성 - 고차함수 - 1급 객체 순수함수 순수함수란 같은 입력에는 항상 같은 출력을 반환해야하며, 외부상태를 변경하지않고 외부에 사이드이팩트를 미치지 않는 함수를 말합니다 순수함수 예제) // 순수 함수 예제 1: 두 숫자의 합을 반환하는 함수 function add(a, b) { return a + b; } ..

JS 모듈 시스템 모듈 시스템은 코드를 모듈이라는 독립적인 단위로 구성하고, 이를 필요한 곳에서 재사용할 수 있도록 하는 개념입니다. 1. CommonJs CommonJS 는 모듈 시스템의 일종으로, Javascript 를 서버사이드에서 사용하기 위해서 설계되었습니다. 주로 Node.js 환경에서 사용되며, 파일 단위로 코드를 모듈화하고 필요한 곳에서 재사용할수있게 해줍니다. (범용적인 사용) CoomonJS 는 ES6 이전에 널리 사용되었던 모듈 시스템 중 하나입니다. CJS 는 동기적으로 동작하기 때문에 해당 모듈의 내용이 완전히 로드 될때까지 다음 모듈은 기다려야합니다. 또한 동기적이란 말과 헷갈릴수도 있는 동적 로딩입니다. 동적 로딩이란 런타임 시에 필요한 모듈을 동적으로 결정하고 로딩할 수 있는..

프론트엔드 개발자로써 컴포넌트를 만들고 사용하는데 익숙합니다... 컴포넌트를 만드는 패턴에도 여러가지가 존재하고 만드는 것에 대해서도 알게모르게 규칙들이 존재합니다. 그리고 UI 컴포넌트에 대한 디자인 시스템이라는 개념도 등장하고 이 개념을 뒷받침 해줄 아토믹 패턴도 등장했습니다. 아토믹 디자인 패턴에 대한 장점과 단점 또한 명확하며 그 단점을 보완해줄 스토리북이라는 프레임워크도 등장했습니다. 이런것들을 생태계라고 표현한다면 제가 처음 리액트를 접했을 때 보다 엄청 비대해졌습니다. 물론 이런 개념적인 부분이 모든 프론트엔드 개발자분들에게 필수역량이 아니기에 무시하는 사람도 존재합니다. 단적으로 예를들어서, 페이지 단위로 파일을 작업하고 이것을 컴포넌트라고 부르며 모든 코드를 페이지 단위로 만들어버릴 수도..

테스트 코드 테스트 코드를 왜 작성할까요? 테스트 코드를 작성해야하는 이유는 여러가지가 있습니다. 첫째 버그를 미리 발견할 수 있기 때문입니다. 테스트 코드를 작성하면 코드를 실행하기 전에 버그를 미리 발견할 수 있고 예상치 못한 사이드 이팩트를 찾아내고 버그를 수정함으로써 프로덕트와 내 코드를 더 안전하게 만들수 있습니다. 둘째 리팩토링과 유지보수에 유리합니다. 테스트 코드를 작성하면 리팩토링 과정에서 코드를 변경 할때 기존의 기능들이 올바르게 동작하는지 확인할 수 있어 코드의 유지보수성을 높이고 변경으로 인한 오류를 방지하는데 도움이 됩니다. 셋째 팀 협업 강화에 도움이 됩니다. 테스트 코드를 작성하면 코드의 안전성을 높여 팀내 협업을 강화에 도움이 됩니다. 테스트 코드 종류 유닛 테스트 가장 작은 ..

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. @svg/webpack 으로 react compoent 로 svg 를 사용하고 있었는데 jest testing 하려니까 이런 에러가 발생했다. 에러 내용은 import 를 잘못했다는 내용이다. 첫번째 시도 - 구글링 @icons/ 경로로 tsconfig 에서 path 를 매핑해서 쓰고있었는데 이게 문젠가 싶어서 jest config 에서 moduleNameMapper 부분을 여러번 수정해봤지만 이건 아니였다. tsconfig "paths": { ..

위키에서 소개하는 패러다임이란, 한 시대의 사람들의 견해나 사고를 근본적으로 규정하고 있는 테두리로써 인식의 체계, 또는 사물에 대한 이론적인 틀이나 체계를 의미하는 개념이라고 한다. 위 글에서 "체계" 라는 말이 공통적으로 나온다. 즉 프로그래밍 패러다임은 프로그래밍에 대한 체계라고 볼 수 있다. 사실 패러다임이 어떤 사전적인 의미를 가지고있는지보다는 어떤 패러다임이 있는지가 더 중요하다. 패러다임의 종류 무수히 많은 패러다임이 존재하지만 웹 개발시 가장 중요시되는 명령형 프로그래밍과 선언형 프로그래밍에 대해 알아보려고 한다. 1. 명령형 프로그래밍(How) 명령형 프로그래밍은 어떻게에 집중한 프로그래밍으로 절차형 프로그래밍과 객체지향 프로그래밍이 있다. - 어떻게 하는지만 묘사하고 무엇을 해야하는지는..

어제 작업하고 푸쉬까지 했는데 오늘 다시 npm run dev 개발 서버를 열어보니 Error: connect ECONNREFUSED 127.0.0.1:3001 라는 에러가 발생했다. 소켓은 쓰지도 않는데 소켓이라..? 일단, 내용은 3001번 포트로 연결하지 못했다는 것인데 로컬은 3000번 포트를 쓰고 있는데 이게 무슨 일이람.. 문제 해결을 위해서 했던 방법들을 나열 해봤다. 1. ls -i :3000 으로 3000번 포트 찾아서 포트 죽여버리기 2. 브라우저에서 localhost 페이지에 쿠키/캐시를 다 날려버리기 3. rm -rf node_modules 로 패키지를 다 삭제하고 설치하기 결론적으로 이 3가지 방법으로도 해결하지 못했는데 사실 json-server 를 썻고 포트를 3001번으로 사..