말은 쉽지, 코드를 보여줘!

css나 js의 경우 여러 파일단위로 모듈화 해서 관리된다. 이를 실제 페이지에서 사용할 경우 html 태그(

정리하면 어떠한 비동기 함수의 후처리에서 이전 함수의 데이터가 필요한 상황이라면 인자로 해당 데이터 또는 미리정의된 함수를 받을 수 밖에 없다. 그런데 후처리는 호출한 쪽의 책임이기 때문에 미리정의된 함수를 전달하는 것이 적절하고 이렇게 인자로 전달받는 후처리함수를 콜백함수라 한다. 그런데 콜백함수로 후처리를 정의하다보면 여러 비동기함수를 연결해서 사용할 경우 행의 길이가 길어지는 것은 불가피하다. 예를 들어 jquery ajax 를 비동기로 호출하는 함수가 5개가 있고 이를 연결해서 사용해야 하는 상황을 가정해보면 될 것 같다. 이를 개선하기 위해 promise 의 jquery 버전인 Deferred 가 사용된다. 후처리를 호출한 쪽에 정의하는 구조로 콜백함수가 필요없다. 호출한 쪽에서 후처리를 하기 ..

비구조화 할당 문법은 1. 비구조화 할당문법을 타입스크립트에서 사용할 경우 조금 다르게 사용해야 한다. 일반 자바스크립트에서는 아래와 같이 사용할 수 있었다. const object = { a: 1, b: 2, } const { a, b } = object 그런데 타입스크립트에서는 타입을 먼저 선언하고 사용하기 때문에 interface 를 사용한다면 아래와 같이 사용하게 될 것이다. interface TestType { a: number b: number } const object: TestType = { a: 1, b: 2 } const { a, b } = object 타입스크립트에서 타입 선언시 속성키값 우측에 ? 를 포함할 경우 선택적 속성으로 만들 수 있는데 이 경우 선언한 타입 외에 undefi..

일단 타입스크립트 환경에서는 기본 자바스크립트와는 다른 별도의 문법이 사용된다. 변수나 함수를 정의할 때 타입을 선언하는 것인데 일반 브라우저에서는 이 코드가 당연히 동작하지 않는다. 실제로 동작이 가능하도록 코드를 변환해주는 컴파일 과정이 필요한데 이를 타입스크립트 컴파일러가 담당한다. 이런 컴파일 과정에서 타입을 체크해서 지정되지 않는 타입이 대입되었거나 할 경우 컴파일 에러를 발생시킨다. 이를 위해 타입스크립트는 기본적으로 string, number 같은 자바스크립트의 기본타입에 대한 정보가 있어야 하는데 이를 정의해놓은 파일이 lib.d.ts 파일이다. 해당파일은 프로젝트에서 node_modules/typescript/lib/lib.d.ts 로 확인할 수 있고 타입스크립트 컴파일러는 컴파일시 해당..

일단 CNA 에서 제공하는 예제에서는 NextPage 컴포넌트 생성시 화살표 함수를 사용하고 있다. 그런데 리액트에서 함수형 컴포넌트 생성시에는 함수선언문이 선호된다고 한다. https://velog.io/@velopert/create-typescript-react-component 통일을 위해 NextPage 컴포넌트 생성시에도 함수선언문을 사용하는게 좋을 거 같긴한데 궁금한 점. 1. 리액트에서 함수형 컴포넌트 생성시 왜 함수선언문이 선호되는걸까? 위 링크에서도 자세한 이유는 설명하지 않고 그냥 해외 유명 개발자들이 그렇게 사용한다고 안내하고 있다. 구체적인 이유를 알고 싶다.. 2. NextPage 컴포넌트의 경우 화살표 함수를 변수에 담아서 그것을 리턴하고 있는데 변수 타입을 NextPage로 지..

props와 state는 컴포넌트에서 사용하거나 변화에 따른 리랜더링 기준이 되는 데이터를 담고 있다는 점에서 비슷하다. 하지만 props는 부모 컴포넌트가 설정해서 자식 컴포넌트로 넘겨주는 값으로 자식 컴포넌트에서는 readOnly 인 반면 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 마음대로 변경할 수 있다. 현재 리액트에서는 클래스형 컴포넌트보다 함수형 컴포넌트 작성이 권장되고 함수형 컴포넌트에서는 useState Hooks 를 통해 state 를 사용한다.

1. Typescript는 코드 작성시 변수, 함수, 클래스 등에 타입을 지정할 수 있고 전용 컴파일러가 일반 javascript 문법으로 컴파일하는 과정에서 타입을 체크한다. 만약 지정된 타입 외의 값을 대입하려 한다면 컴파일러가 경고메시지를 출력하는데 이로 인해 타입안정성이 보장되고 자연스레 생산성도 향상된다. 2. 변수 선언시 타입을 지정할 수 있다. let var_number: number; let var_string: string; let var_boolean: boolean; let var_enum: 1 | 2 | 3 = 1; //타입 외에 값을 제한할 수도 있다. let var_union: number | string; // 여러개의 타입을 지정할 수도 있다. 이를 union 타입이라고 부른..

Next.js 의 pages 디렉토리는 파일기반으로 라우팅 기능이 수행되게 하는 핵심적인 역할을 한다. 이 안에서도 특별한 역할을 하는 파일들이 있는데 _app.jsx, _document.jsx, _error.jsx 파일들이다.(타입스크립트를 사용한다면 확장자는 .tsx 가 될 것이다) 이 파일들이 필수로 필요한 것은 아니지만 그 특징을 활용하면 보다 효율적으로 개발할 수 있다. _app.jsx 파일의 경우 페이지의 body 부분이 만들어지기 전에 호출되기 때문에 pages 하위의 특정 페이지가 호출될 때 공통으로 적용할 header, footer 등을 추가할 수 있게 된다. 이에 레이아웃 정의시 활용될 수 있다. _document.jsx 파일의 경우 _app.jsx 에 의해 만들어진 body를 토대로 ..

CNA(create next-app)으로 Next.js 프로젝트를 생성할 경우 기본적으로 생성되는 디렉토리들은 아래와 같다. public: 정적자원의 root 디렉토리이다. styles: 정적자원 중 css 파일을 별도로 보관하는 디렉토리로 보인다. 아마도 global css를 보관할 거 같다. pages: 넥스트의 파일구조 라우팅 기능을 담당하는 디렉토리로 간단하게 apache 의 documentRoot와 비슷하게 생각하면 된다. public 디렉토리에 test.png 파일을 보관할 경우 html에서 /test.png 로 접근할 수 있다. 주의할 점은 랜더링이 완료된 html에서만 접근이 가능하다는 것이다. 랜더링 전 파일 내에서 improt 로 참조할 경우에는 해당되지 않는다. 기본적으로 상대경로 접..

Next.js를 시작하기에 앞서 개발환경을 셋팅해본다. 기준 환경은 맥북, vscode 이다. 1. Node 설치 https://nodejs.org/ko/ 에서 다운로드해서 설치하자. 그럼 기본적으로 Node.js와 npm이 설치된다. 설치가 완료되었으면 아래 명령어로 버전을 확인하며 정상 설치 확인 node -v npm -v node 는 구글 크롬의 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 일반적으로 자바스크립트 엔진은 브라우저에 내장되어 있고 이에 자바스크립트를 사용하기 위해서는 기본적으로 브라우저가 필요하다. Node.js 를 설치하게 되면 해당 로컬환경에서도 자바스크립트를 사용할 수 있게 된다. npm 은 웹에 업로드된 재사용 가능한 코드들을 모듈로 만들어놓은 노드 패키지들을 사..