즐겁게, 코드

자바스크립트는 정말 다양한 배열 조작 메서드를 제공하는데요, 메서드의 동작을 구분하는 여러 기준 중 하나는 바로 “원본 배열을 변경하느냐” 일 것입니다. // 1. 원본 배열은 변경되지 않는 예시 const frontEnd = ["react.js"] const backEnd = ["node.js"] const fullstack = frontEnd.concat(backEnd) // frontEnd, backEnd 원본 배열의 값은 이전과 동일합니다. console.log(fullstack) // ["react.js", "node.js"] // 2. 원본 배열이 변경되는 예시 let techStack = ["react.js"] teckStack.push("node.js") // techStack 원본 배열에..

Nest.js는 Express.js와 유사한 백엔드 프레임워크인데요, 아마 Express.js를 사용해본 경험이 있다면 한번쯤은 이런 고민을 해본적이 있을 것입니다. npm i express, 프로젝트 준비 끝! 그런데 이젠 뭘 해야하지? Express는 분명 편리하고 강력한 백엔드 프레임워크지만, 미들웨어와 라우팅 등의 기능을 자유도가 매우 높은 메서드로만 구현했기 때문에 프로젝트의 구조화 가 매우 어렵다는 단점이 있었습니다. Nest는 이런 문제를 해결하기 위해 타입스크립트를 기본으로 사용하고 모듈 단위를 통해 백엔드 코드를 보다 구조적으로 작성할 수 있게 해주는 프레임워크인데요, 오늘은 Nest의 소개와 함께 간단한 API 서버를 만들어보도록 하겠습니다. Nest 설치하기 Nest는 자체적인 cli..

자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다. 오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다. type userType = { id: number; email: string; password: string; firstname: string; lastname: string; }; 여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다. 하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다. type userType = { id?: number; email?: string; password?: string; firstname?: st..

타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분인데요, 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 같은 특이한 타입들이 존재하기 때문입니다. const onChangeEmail = e => { setEmail(e.target.value); }; 위 코드의 이벤트 콜백 인자 e의 타입은 과연 무엇일까요? 아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any타입을 사용하시는 분도 많을 텐데요, 정확한 답은React.ChangeEvent입니다. 이걸 도대체 어떻게 알까 싶지만, 사실 여기에는 규칙이 하나 있습니다. 이벤트에도 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있음은 아실텐데요, 이 중에서 사용할 이벤..

내용 : 파일명 변경 후 임포트 시 Already included file name~ 에러가 출력됨. 원래 SignUpModal 이라는 이름의 파일을 SignupModal로 변경했더니 갑자기 빨간 줄이 그어지면서 알 수 없는 오류가 출력됩니다. 아마 바벨이나 웹팩 문제인줄 알고 발만 동동 구르실 수 있는데, 다행히 타입스크립트 설정으로 고칠 수 있는 문제였습니다. Already included file name~ 에러가 출력된다면 tsconfig.json의 옵션 중 forceConsistentCasingInFileNames 가 true로 되어 있을 것입니다. forceConsistentCasingInFileNames 옵션을 false로 설정해주면, 문제가 해결됩니다. (+ 설정을 변경했음에도 문제가 해결..

타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..