Thinking Developer

Typescript는 Javascript를 Java, C, Swift, Kotlin처럼 정적 타입으로 쓸 수 있게 해주는 Javascript의 슈퍼셋이다. 빌드가 되면 브라우저 또는 Node.js가 이해할 수 있는 퓨어한 Javascript로 바뀌어 동적 타입인 Javascript의 태생적 한계를 극복하고 Javascript 생태계를 보다 안정적으로 쓸 수 있게 해준다. 다음을 살펴보자 let a = 1; console.log(typeof a); // number a = 'abc' console.log(typeof a); // string Javascript는 이처럼 변수를 선언해서 number 타입을 넣었다가 string 타입을 넣었다가 자유롭게 쓸 수 있다. 이처럼 동적 타입이기 때문에 때로는 변수를..

개발을 하다 보면 직접 만든 utils 또는 프론트엔드의 경우 components 폴더, styles 폴더 등 현재 작업 파일과 다른 경로의 파일들을 import 시켜야 할 때가 있다. import 시킬 필요가 없는 파일은 아주 단순한 스크립트이거나 온갖 로직을 하나의 파일에 다 작성할 때인데 별로 좋지 않은 패턴이다. 그래서 파일의 상단에는 다음과 같은 현상이 일어난다. import styled from 'styled-components'; import { TextField } from '../../components/textfield'; ... line 1과 line2가 import 방식이 조금 다른 것을 알 수 있다. line 1의 styled의 경우 styled-components라는 npm 패키..

ESLint가 개발할 때 혹은 빌드할 때 실수하지 않도록 우려가 될 만한 부분에 대해 에러를 뿜어주는 역할이라면 Prettier는 코드 작성 패턴을 사전에 설정해놓은 대로 자동으로 바꿔주는 역할을 한다. 그러므로 ESLint와 Prettier를 적절히 활용하면 에러를 미연에 방지하고, 코드가 예쁘게 나오고, 다른 사람과 협업 시에도 코드 컨벤션을 지키면서 작업을 할 수 있게 된다. 역시 VSCode 기준으로 설명하겠다. VSCode에서 prettier를 검색하고 다음의 확장프로그램을 설치한다. 그리고 프로젝트 최상위에 .prettierrc.js 라는 파일을 만들고 다음과 같이 작성 후 저장한다. module.exports = { semi: true, // 세미콜론(;) 사용 여부 trailingComma..

ESLint 공식 홈페이지에서는 ESLint에 대해 한마디로 다음과 같이 표현하고 있다. "Find and fix problems in your JavaScript code" ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 즉, 개발자가 javascript 코드의 여러가지 문제점들을 찾아서 고쳐주는 역할을 하는 것이다.(예..

1. 개발환경 Next.js와 기타 등등 라이브러리들을 설치하고 개발을 하려면 기본적으로 Node.js와 NPM이 설치되어 있어야 한다. 아래의 공식 사이트에서 운영체제에 맞게 다운로드하고 설치하면 된다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 본 포스팅의 예제 환경은 M1 맥북, VSCode이다. 공식 문서에서 안내하는 개발 가능 환경은 다음과 같으니 참고 바란다. Node.js 12.0 or later MacOS, Windows (including WSL), and Linux are supported Next.js by Vercel - The React Framew..

Next.js는 React.js를 개발할 때 SSR(Server Side Rendering)을 보다 쉽게 해주는 프레임워크 중 하나이다. React.js 실무 프로젝트에서 가장 많이 사용되는 프레임워크이며, 나 같은 경우엔 굳이 SSR이 꼭 필요한 상황이 아니더라도 라우팅 등이 편해서 React.js 프로젝트를 할 때는 Next.js 위에서 작업하는 것을 선호한다. 이 포스팅에서는 Next.js를 설치하고 TypeScript, ESlint, Prettier를 끼얹는 과정까지만 다룬다. React.js 및 Next.js 프로젝트에서는 위의 프레임워크, 라이브러리 외에도 Redux나 Styled-Components와 같은 패키지들을 주로 설치해서 쓰곤 하나 반드시 필요한 요소라고는 할 수 없다. TypeSc..

TypeScript는 JavaScript처럼 그 자체로 런타임에서 돌지 않는다. 다시 말해, TypeScript는 JavaScript로 컴파일이 되어야 Node.js든 브라우저에서든 작동할 수 있다. TypeScript는 JavaScript의 정적 타입 버전으로 원래 동적 타입 언어인 JavaScript를 좀 더 쓸 만하게 만든 언어이다. 물론 정적 타입 언어가 무조건 동적 타입 언어보다 좋은 것은 아니다. 경우에 따라 동적 타입 언어가 더 유리한 경우가 있다. 다만 협업을 하거나 오랜 기간 유지보수를 해야 할 경우에는 거의 대부분 정적 타입 언어가 유리하다. 아무튼 이제는 백엔드 영역에서 Node.js를 사용하거나, 수명 이상이 참여하는 프로젝트에서는 TypeScript는 필수적이다. Node.js의 ..

kimhongyeon/make-heritage-data 문화재청 API로 데이터를 수집하여 RDMBS용으로 테이블을 설계해 데이터를 가공한 뒤 테이블 단위로 json 저장 - kimhongyeon/make-heritage-data github.com 출퇴근하면서, 자기 전에 10분, 20분 시간을 내어 드디어 완성했다. 100% TypeScript로 작성이 되었다. // ~/src/app.ts import dataMake from "./dataMake"; import heritage from "./heritage"; heritage.run(); dataMake.run(); app.ts 파일이 실행 파일이다. heritage.run()은 문화재청 API를 가지고 문화재 목록정보, 상세정보, 이미지정보, 동..

VSCode 기준 기본적으로 tsc를 전역 설치해야 한다. 그런데 TypeScript 는 그대로 런타임에 돌지 않고 JavaScript로 변환된 다음에 실행되기 때문에 소스코드를 고칠 때마다 tsc를 돌려서 빌드를 해줘야 한다. 그게 귀찮아서 tsc-watch를 설치한다. $ npm install -g tsc tsc-watch # 필요시 sudo 포함하여 명령 . 이번 포스트에서는 설치만 적고, 활용법은 나중에... tsc, tsc-watch 활용법 TypeScript는 JavaScript처럼 그 자체로 런타임에서 돌지 않는다. 다시 말해, TypeScript는 JavaScript로 컴파일이 되어야 Node.js든 브라우저에서든 작동할 수 있다. TypeScript는 JavaScript의 정적 타입 버전..

데이터 테스트 기본적으로 페이징 기반으로 목록을 가져오는 게 있고, 그 목록의 각종 아이디값을 이용하고 상세정보, 이미지정보, 동영상정보, 나레이션 음성정보가 있었다. 음 근데 API 키나 그런 것 없다. 그냥 막 갖다 써도 되는가보다. http://www.cha.go.kr/cha/SearchKindOpenapiList.do 이 주소를 그냥 브라우저에 쳐봤는데 잘 나온다. 그런데 XML이다. 뭐 XML을 JSON으로 바꿔주는 오픈소스가 있겠지. 하다보면 될거다. 나머지 이미지, 동영상, 나레이션도 잘 된다. 근데 나레이션은 음성파일 URL이 지맘대로 떨어진다. 그냥 얘는 쓰지 말자. 기술 스택 구상 내가 실무에서 써본 주력 프레임워크는 Express.js, Vue.js다. 음 근데 백엔드에서는 Nest...