맨 땅에 프론트엔드 개발자 되기

프론트엔드의 기술은 정말 빨리 변하는 것 같다. 불과 1년 전만 해도 React와 Vue가 프론트엔드 기술 시장의 점유율을 가지고 싸우는 것 같더니 React가 우세한 것 같다가 이제는 Next.js가 대세로 자리잡고 있는 것 같다. (리액트 개발자들이 진화한 걸까?) 웹페이지를 만들 때 SEO(검색엔진 최적화)는 빼놓고 생각할 수 없는 문제라 React에 부가 라이브러리를 설치하는 방법으로 보완하는 방법도 있었지만 (이 글에서 싱글 페이지 어플리케이션이 왜 SEO에 취약한 지는 다루지 않겠다. 많은 설명 글들이 있으니 찾아보시길..) Next.js는 정말 편리하게 서버사이드 렌더링을 지원해주고 다른 부가적인 기능들이 많기 때문에 리액트 좀 다뤄봤던 개발자들은 안 쓸 수가 없는 프레임워크인 것 같다. 시..

tsc와 tsconfig.json TypeScript를 사용하기 위해서 tsconfig.json 파일은 필수사항은 아니다. TypeScript가 전역으로 설치되어 있다면, tsc 명령어를 통해서 .ts로 작성된 파일을 .js로 컴파일 할 수 있다. $ tsc example.ts 위 명령어를 실행하면 동일한 경로에 js로 컴파일링된 example.js 파일이 생성된다. 그렇다면 왜 tsconfig.json 파일을 설정할까? vscode는 기본적으로 TypeScript에 대한 intellisense를 지원한다. (여담이지만, TypeScript도 마이크로소프트가 만들고, vscode도 마이크로소프트가 만듦. 마이크로소프트 다해먹어!! 짱짱맨!!) 우리가 개발을 하면서 어떤 코드가 잘못되었는지 빨간 밑줄을 쳐..

CRA(Create-React-App)는 React를 사용할 때 필요한 Babel 이나 Webpack 같은 패키지들을 한번에 설치해주는 도구라서 굉장히 편리하다. CRA + TypeScript 조합으로 사용할 때도 매우 간단한 방법으로 초기 세팅을 할 수 있다. CRA + TypeScript 명령어 $ npx create-react-app ts-react-practice --template typescript ts-react-practice 부분은 내 프로젝트 명을 써주면 되므로 그곳만 교체해서 사용하면 된다. 별도의 ES LInt나 Prettier 설정을 해줄 수도 있지만 나는 VS code의 Extension을 사용하고 있기 때문에 설정해주지 않았다. 기존 프로젝트에 TypeScript 적용하기 이미..

타입스크립트를 사용할 줄 알아야 프론트엔드 개발자 연봉이 높아진다던데ㅋㅋ 왜 그렇게 타입스크립트를 기업에서 우대해주고 프론트엔드 개발에 있어서 점점 쓸 줄 모르면 안 되는 상황까지 가는가...? 그 이유가 궁금해서 나름대로 이유를 찾아보고 정리해봤다. 타입스크립트(TypeScript) 타입스크립트는 자바스크립트의 기본적인 틀을 가져가되, 거기에 타입 지정이라는 옵션을 얹은 것이라고 생각하면 된다. 초창기의 웹페이지는 지금의 웹페이지처럼 사용자와 인터랙티브한 기능이 많지 않았고, 도서관에서 책을 꺼내보듯이 인터넷 생태계에 많은 양의 정보를 저장해두고 꺼내보는 형식이었다. 그래서 자바스크립트는 견고한 구조를 짜기보다는 빠르게 어떤 기능을 만들기 위해 개발된 언어였다. 그러나 복잡한 웹앱들이 등장하고 프론트 ..