전체 글

React자바스크립트 라이브러리, 사용자 인터페이스를 만드는데 사용사용하기 쉽고, 로딩 기다릴 필요 없고, 화면 전환 빠름전통적인 웹사이트약간 무겁고, 불편함링크나 버튼 클릭 시 요청이 서버에 전송되고, html 페이지가 브라우저로 보내져서 화면에 보여줌새로운 html 페이지가 로딩되는 동안 기다려야 함 DOM 조작 : html 요소들이 화면에 렌더링됨JS 조작 : 사용자들이 보는 것 변경 가능(새로운 html 페이지 불러오지 않아도 됨) 왜 자바스크립트에 추가적으로 리액트가 필요할까?JS로 작업 할때는 모든 단계를 일일이 작성해야 함(명령형 접근방식) : 일련의 액션들을 단계별로 설명리액트는 유지보수와 관리가 용이하도록 유지됨최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줌선언형 방..

개발환경 설정 NVM 다운로드 및 설치 NVM = Node Version Manager 1. NVM 다운로드 접속 2. 최신 버전 nvm-setup.zip 파일 다운로드 3. 설치 진행 nvm version Node.js 설치 최신버전 설치 nvm install latest 특정 버전 설치 nvm install 버전이름 설치 버전 확인 nvm ls node -v // 노드 버전 확인 npm -v // npm 버전 확인 특정 버전 사용 nvm use 버전 Yarn 설치 npm 단점을 보완하여 성능/속도 개선한 것 Yarn 다운로드 접속 설치 버전 확인 yarn -v CRA (Create-React-App) 리액트 프로젝트 시작 시 필요한 개발 환경 세팅 도구 리액트 앱 생성 yarn create react..

React 란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 Facebook에서 개발한 라이브러리 SPA(Single Page Application) 개발 시 사용 재사용 가능한 UI 구성 요소 생성 오로지 view만 담당 내장 기능이 부족해 third-party 라이브러리(react-router-dom, redux) 등 함께 사용 Vritual DOM을 통해 최적화를 구현 왜 React 일까?? Virtual DOM을 사용하여 최종 변화만 실제 DOM에 전달하기 때문에 빠른 성능 유지 Component 기반 구조로 재사용 및 유지보수 용이 생태계가 넓고 다양한 라이브러리 사용 가능 React Native 활용한 앱 개발 가능 React 특징 단방향 데이터 흐름 Component 기반 구조 V..

Redux란? 가장 사용률이 높은 상태관리 라이브러리 Javascript application들의 state를 관리하는 방법 Angular, Vue.js, Vanila Javascript에서도 사용 가능 컴포넌트끼리 state를 공유 시 여러 컴포넌트를 거치지 않고 쉽게 state 전달 가능 미들웨어라는 기능을 통해 비동기 작업, 로깅 등 확장적인 작업들 쉽게 가능 Redux의 필요성 전역 상태 관리를 위한 라이브러리 컴포넌트 간 데이터(state, props)를 좀 더 편하게 전달하고자 사용 바깥에서 상태관리가 가능 Redux의 흐름 Redux의 개념 액션 (Action) 상태 변화가 필요할 때, 액션 발생 하나의 객체로 표현 액션 객체는 type 필드가 필수 추가적으로 필요한 요소는 필수적X { ty..

Javascript를 Typescript 전환하는 방법 비주얼 스튜디오 코드(VSCode)로 자바스크립트 페어링 자바스크립트용 타입스크립트 컴파일러 사용 자바스크립트 파일을 타입스크립트 파일로 변환 엄격한 타입 체크 Compilation Context 기본적으로 TypeScript 가 어떤 것이 유효하고 어떤 것이 유효하지 않은지 결정하기 위한 용어 컴파일 컨텍스트에는 어떤 파일에 대한 정보와 함께 어떤 컴파일러 옵션을 사용하는지에 대한 정보가 포함 Typescript 컴파일 tsconfig.json 명령어를 매번 입력하지 않고 컴파일 설정 파일 생성하여 사용 TypeScript 프로젝트의 루트 디렉토리(Root Directory)에 위치 tsconfig.json을 사용할 경우 인풋 파일이 없는 tsc ..