JayGo 개발 연습장

Udemy The Web Developer 부트캠프 2024>CommonJS의 모듈 시스템은 module.exports라는 객체에 등록한 값을 모듈 외부로 내보낼 수 있다. 값을 받아서 사용하는 곳에서선 require 키워드를 사용한다.디렉토리의 index.js 파일은 디렉토리의 진입점이 된다. 디렉터리에서 export하는 모든 값들을 index.js에서 불러와서 한번에 내보낼 수 있다. 그러면 해당 값들엔 디렉토리의 경로만으로 접근할 수 있다.NPM은 다른 사람들이 미리 만들어 놓은 유용한 도구, 기능, 값, 함수 등이 저장되어 관리되는 저장소이다. NPM을 사용하면 원하는 도구를 쉽게 프로젝트에 다운로드 받고 적용할 수 있다. npm install을 할 때 -g 커맨드를 포함하면 전역으로 패키지를 설..

모듈이란?컴퓨터 과학에서 '모듈'이란 '독립된 하나의 소프트웨어 또는 하드웨어의 단위'를 의미한다(출처: 위키백과. 모듈은 다른 소프트웨어와 구분되는 독립적인 하나의 소프트웨어라는 뜻이다.정의가 좀 어렵다. 자바스크립트 생태계의 모듈 관련 여러 자료들을 읽어보면서 나름대로 추상화해 본 정의는 '독립된 네임스페이스를 갖는 공간'이다. '독립된 네임스페이스'란 쉽게 얘기해서 한 모듈에서 사용한 식별자 이름을 다른 모듈에서 그대로 사용했을 때 문제가 되지 않게 구분되어 있다는 의미를 갖는다. 즉, 모듈은 '같은 식별자 이름을 쓰더라도 문제가 생기지 않는 독립된 공간'을 의미한다고 볼 수 있다(주관이 들어간 정의라 팩트 체크가 좀 더 필요하다).왜 모듈이라는 게 필요할까?라고 누군가 묻는다면, 나는 '소프트웨어..

제로초 Node.js는 그 자체로 서버인 게 아니라, 실행 환경인 '런타임'이다. 서버 기능을 코드를 작성해서 Node.js로 실행하면 서버 역할을 해주는 거고, 데스크톱 제어 코드를 작성해서 Node.js로 실행하면 데스크톱 앱, 모바일이면 모바일처럼 된다. Node.js 자체는 웹 브라우저 이외의 곳에서 자바스크립트를 실행할 수 있도록 해준 실행기이다.노드에서도 멀티 스레드를 구현은 가능하다(14버전부터 지원은 가능하다). 하지만, 구현이 가능하다 뿐이지, 효율적인 개발을 위해 기본적으로 싱글 스레드로 동작하는 걸 기본으로 한다.싱글 스레드로 메인으로 동작하기 때문에 컴퓨터 자원을 효율적으로 사용할 수 있지만, 컴퓨터 자원을 다 돌려서 빠르게 작업을 처리하는 건 노드로 구현하는 게 쉽지 않다.자바스크..

지난 포스트에서 리액트의 createElement 함수의 동작을 커스텀하게 만들어서 적용하기 위한 기본 환경 설정에 대해 살펴봤다. 간단하게 요약해 보면 다음과 같다.Vite로 프로젝트를 빌드한다(바닐라 타입스크립트 프로젝트).tsconfig.json에 "jsx": "preserve"로 설정해서 타입스크립트 트랜스파일러가 JSX 구문을 트랜스파일링하지 못하게 막는다."jsxFactory"와 "jsxFragmentFactory" 속성에 이후에 JSX 구문 분석 시 사용될 함수를 정의해서 이후에 변환될 값을 기준으로 타입 검사를 수행할 수 있게 설정한다.JSX 구문 분석 함수의 타입을 src/types/jsx.d.ts에 정의해두고, tsconfig.json 파일에 "types": ["./src/types/j..

JSX와 React.createElementJSX는 리액트에서 HTML과 유사한 형식으로 마크업을 작성할 수 있게 해주는 문법이다. 익숙한 HTML 문법을 그대로 활용해 DOM의 구조를 표현할 수 있기 때문에 직관적이고 편리하다.JSX는 아래와 같은 형태로 사용한다.const App = () => { return ( Hello World! )}JSX로 작성한 구문은 트랜스파일을 통해 아래와 같은 리액트 메서드로 변환되며,// ~ React 16 버전React.createElement("div", null, React.createElement("h1", null, "Hello, world!"));// React 17 버전 ~_jsx("div", null, _jsx("h1", nu..

createElement 함수 동작 직접 구현해 보기리액트는 HTML 태그를 거의 그대로 사용할 수 있게 지원하는 JSX 문법이라는 게 적용된다.JSX 구문은 생긴 건 HTML과 거의 유사하게 생겼지만 사실은 JavaScript이고, 실행 결과 또한 Javascript 객체로 변환돼서 메모리에서 관리된다.JSX 구문은 tagName(type), props, children, key 등으로 구성된 객체로 변환되고, HTML의 중첩 구조는 props 객체의 children 프로퍼티를 통해 구현된다. 즉, children 프로퍼티를 사용해 HTML 태그의 위계가 표현된다.Babel을 사용하면 JSX 구문 분석기를 커스텀할 수 있다. @bable/preset-react의 runtime을 automatic, im..

여러 개발 문서들을 보면 빌드, 번들링, 트랜스파일링 등의 용어가 빈번하게 사용되는 걸 보게 된다. 대충은 무슨 의미인지 알고 있지만, 정확한 이해가 없으니 문서의 내용 이해가 어려웠던 경험들이 있다. 실제로 사용해 보는 게 가장 좋겠지만, 아직 배포할 서비스가 없는 관계로, 문서를 읽는 데 이해를 높이는 정도로만 간단하게 공부해 봤다.번들링(Bundling)코드를 효과적으로 관리하기 위해선 적절한 방식으로 파일을 쪼개서(모듈화 해서) 관리하는 것이 필요하다. 이렇게 사용 목적이나 시점에 따라 자바스크립트 파일을 쪼개서 관리하는 것을 '모듈 시스템'이라고 한다. ES5까지는 언어 차원에서 모듈 시스템 지원이 없었지만, ES6로 넘어오면서 언어에서 모듈 시스템을 지원해 주게 됐다.모듈로 파일을 나눠서 관리..

할 일 관리 서비스 만들기createBrowserRouter로 라우팅을 하면 loader라는 속성을 제공한다. 해당 속성을 사용하면 페이지가 라우팅 되는 시점에 곧바로 loader에 등록해 둔 메서드가 실행돼서 서버의 데이터를 받아올 수 있다. 데이터는 컴포넌트에서 useLoaderData 훅을 사용해 받아올 수 있다.useEffect의 의존성 배열로 빈 배열을 넘겨서 처음 컴포넌트가 렌더링 될 시 서버 데이터를 패치할 수도 있지만, 그렇게 되면 useEffect 실행 전에 한 번, useEffect 실행 후 서버 데이터로 상태를 변경한 이후에 또 한 번, 이렇게 총 두 번 렌더링이 발생한다. 하지만 loader와 useLoaderData 훅을 사용하면 라우팅 시점에 페이지의 컴포넌트를 렌더링하기 전에 ..

할 일 관리 서비스 만들기Access Token을 코드의 일반 변수로 정의한 다음 axios의 인스턴스로 관리하면 새로고침 때마다 Access Token이 휘발되는 문제가 있다. Refresh Token이 있었다면 새로고침 시 Refresh Token을 사용해서 토큰을 다시 받아오는 처리를 해줬겠지만, 연습용 API엔 Refresh Token이 구현돼있지 않아서, 일단 local storage에 저장하는 쪽으로 계획을 변경했다.분명 더 찾아보면 로컬 변수에 정적으로 토큰 정보를 받아두면서도 새로 고침에 대응하는 법이 있을 것 같긴 한데, 어떻게 하는건지 잘 모르겠다. 나중에 다시 찾아보고 공부해봐야겠다.API 명세를 보면 필수로 요구되는 params가 있는 경우가 종종 있다. 이럴 땐 headers에 p..

할 일 목록 관리 서비스 작업axios의 인스턴스를 사용하면 headers의 Authorization에 bearer ${accessToken}과 같이 로그인 시 미리 받아온 토큰 정보를 박아두고 사용할 수 있다.http 요청을 보낼 때 따로 키를 챙길 필요 없이 axios 인스턴스로 요청을 바로 보내면 되니까 편리하다.axios의 인터셉터로 request가 보내지기 전의 요청 내용이나 response를 받기 직전의 응답 내용을 사전에 가로채서 원하는 로직을 넣어줄 수도 있다. 예를 들어, 요청을 보내기 전에 Access Token이 없거나, 토큰의 만료 기간이 완료됐다면, 그에 대한 적절한 대응을 해줄 수 있다.만약에 Access Token의 만료 기간을 클라이언트에서 따로 관리하지 않고 있다면 resp..