Frontend6 타입스크립트 기본 프로젝트 설정 0. nodejs 설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org1. 프로젝트 초기화npm init -> package.json 파일 생성 (프로젝트 종속성, 스크립트, 버전 정보 등 관리) 2. TypeScript 설치npm install typescript --save-dev -> 프로젝트에서 타입스크립트를 로컬 개발 의존성으로 설치 (타입스크립트 컴파일러tsc 설치) 3.Node.js 타입 정의 설치npm i @types/node-> Node.js에서 사용하는 전역 객체(process, require .. 2024. 12. 19. 상태관리와 Redux 언제든지 redux가 필요할 때 빠르게 복기하기 위해서 정리하는 용도로 작성!프론트엔드에서 상태관리란? 상태관리는 앱의 UI에 필요한 데이터나 상태를 저장하고 변경사항을 관리하는 과정을 말한다. React는 컴포넌트를 기반으로 UI를 구성하는데, 상태가 바뀌면 '리랜더링'이 발생하기 때문에 상태를 정확히, 효율적으로 관리해야 한다. 대규모 프로젝트의 경우 엄청나게 많은 컴포넌트가 존재하고 상태가 걷잡을 수 없이 많아지며 꼬일 수 있다. 또한 상태를 공유하기 위해 props-drilling와 같은 문제에 직면할 수도 있다. 그래서 컴포넌트별로 상태를 관리하는 것이 아니라, 중앙집중식으로 상태를 관리하려는 시도가 이어졌다.다양한 상태관리 라이브러리리액트,리액트네이티브에서 사용할 수 있는 상태관리 라이브러리의.. 2024. 11. 4. React 와 JavaScript정리 React는 JavaScript 기반 UI 라이브러리이다. 리액트는 기본적으로 index.html 하나로 동작하는 Single Page Application이다. 또한 클라이언트 사이드에서 JavaScript를 통해 동적으로 컨텐츠를 렌더링 하는 CSR 방식이다. - CSR(Client Side Rendering) 클라이언트 단에서 화면을 그리기 (React,Angular,Vue.js 등이 있다.)- SSR - 서버에서 완성된 html,css,js 파일을 전달하는 방식 (요즘은 Next.js가 핫하더라) React 기본 프로젝트의 index.js파일을 보면React와 ReactDOM을 불러와서 App을 렌더링 한다. ReactDOM.render(, document.getElementById('root.. 2024. 7. 28. Expo로 RN 프로젝트 시작하기 (settings) 사전 설치[ brew, VSCode, Xcode, Apple Command Line Tools, AndroidStudio, Node.js ] 를 미리 설치해 두면 좋다!) https://brew.sh/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.shhttps://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is f.. 2024. 7. 21. Page Routing / DOM 페이지 라우팅페이지 라우팅은 사용자가 요청한 경로에 따라 알맞은 페이지를 렌더링하는 과정을 의미한다.사용자가 웹 브라우저에서 /blog와 같은 경로를 요청하면, 서버는 해당 경로에 맞는 페이지 파일을 클라이언트로 전달하고,클라이언트는 해당 페이지를 렌더링해서 사용자에게 보여준다.(전통적 방식)MPA(Multi Page Application)여러 개의 HTML 페이지로 구성된 전통적인 웹 애플리케이션 방식을 의미한다. (과거에 만들어진 웹페이지에서 쉽게 적용된 것을 발견할 수 있다.) SSR(Server Side Rendering)서버 사이드 렌더링은 서버에서 HTML 파일을 생성해서 클라이언트에 전달하는 방식이다. 사용자가 특정 경로를 요청할 떄마다 서버가 해당 경로에 맞는 HTML 파일을 찾아 반환하는.. 2024. 6. 2. Vite 프로젝트 세팅 실행 테스트npm run dev 린트 설정 위 프로젝트 세팅은 node의 vite 라이브러리를 사용해서 시작하는 예시이다.node_modules 프로젝트의 모든 의존성 모듈이 저장되는 폴더.package.json 파일에 정의된 패키지들이 여기에 설치된다.public정적 자원을 보관하는 폴더.여기에는 웹팩 빌드 없이 바로 제공될 수 있는 파일들이 위치한다.ex. 이미지, 아이콘, 폰트 파일 등. 웹팩(Webpack)최신 JavaScript 애플리케이션을 위한 모듈 번들러.모듈 번들러는 여러 개의 파일(예: JavaScript, CSS, 이미지 파일 등)을 하나의 파일이나 몇 개의 파일로 병합하여브라우저가 효율적으로 로드할 수 있도록 한다.src 폴더src: 소스 코드가 위치하는 폴더. 애플리케이션의 주요 .. 2024. 6. 2. 이전 1 다음
