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

* 예시 프로젝트는 React Native CLI로 만들어진 프로젝트임을 참고 바랍니다. React Native 개발 환경 설정은 공식 문서를 참고하세요. Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev React Native 프로젝트 폴더 구조 셋팅 react-native init 명령어로 프로젝트를 시작하면 아래와 같은 폴더 구조를 기본으로 셋팅해준다. 해당 프로젝트 루트에 components 폴더와 assets 폴더를 구성할 수도 있지만 app과 관련된 것들을 app 폴더에서 관리해주기 위해 아래와..

React Native React Native는 React를 만든 페이스북이 만든 모바일 앱 개발을 위한 JavaScript 기반 프레임워크다. React와 React Native의 가장 큰 차이점은 React는 JavaScript 라이브러리 이지만, React Native는 프레임워크라는 점이다. React는 JavaScript 라이브러리 이므로 JavaScript를 쓰는 느낌에 더 가깝다면, React Native는 만들어진 프레임을 가져다 쓰는 느낌에 가깝다. 그러나 이 둘의 근본은 같아서 React를 어느정도 사용해본 사람들은 금방 React Native도 익숙해질 수 있다. React Native는 HTML이나 CSS를 사용하지 않는다. 그 대신 JavaScript 쓰레드로부터의 메시지를 사용하..

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

React Router는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. v6로 업그레이드 되면서 React Hooks 를 기반으로 한 React Router Hooks 들이 추가되었다. 쿼리스트링 파서(parser)를 따로 설치하지 않아도 될 정도로 편리한 기능들이 있어서 정리해보려고 한다. 기본 설치 $ npx creat-react-app react-router-practice $ npm i react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserR..

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) 타입스크립트는 자바스크립트의 기본적인 틀을 가져가되, 거기에 타입 지정이라는 옵션을 얹은 것이라고 생각하면 된다. 초창기의 웹페이지는 지금의 웹페이지처럼 사용자와 인터랙티브한 기능이 많지 않았고, 도서관에서 책을 꺼내보듯이 인터넷 생태계에 많은 양의 정보를 저장해두고 꺼내보는 형식이었다. 그래서 자바스크립트는 견고한 구조를 짜기보다는 빠르게 어떤 기능을 만들기 위해 개발된 언어였다. 그러나 복잡한 웹앱들이 등장하고 프론트 ..