본문 바로가기

🖥️ Frontend/리액트(+타입스크립트)7

🌏 RealWorld 프로젝트 - react/recoil 신촌프관팀에서 사부가 내려준 숙제를 한다 뚠뚠 🌏 RealWorld란~ GitHub - gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more - gothinkster/realworld github.com Home - Conduit conduit.realworld.how front CodebaseShow codebase.show To.. 2024. 4. 2.
🟦 Typescript 공부하기 🟦 사부님 숙제. 오늘 10시 회의인데 3시간 남았다. TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 아~ 몰라몰라 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발 if ("" == 0) { // 참입니다! 근데 왜죠?? } if (1 < x < 3) { // *어떤* x 값이던 참입니다! } 존재하지 않는 프로퍼티의 접근을 허용 const obj = { width: 10, height: 15 }; // 왜 이게 NaN이죠? 철자가 어렵네요! const area = obj.width * obj.heigth; 정적 검사 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것 TypeScript == .. 2024. 3. 20.
⚛️ 모던 리액트 - 3장 투두리스트 만들기 보호되어 있는 글 입니다. 2024. 3. 12.
⚛️ 모던 리액트 - 1장 내 터진 출석프로그램..흑흑슨 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us ⚛️ 1. 리액트는 어쩌다 만들어졌을까? dom을 전부 날려버리고 다시 만들어서 보여주기 => 메모리에 가상 DOM을 만들 업데이트가 필요한 부분만 가상 DOM으로 수정 그 후 리액트의 알고리즘을 통해 다른 부분을 감지하여 실제 DOM에 패치 ⚛️ 2. 작업환경 준비 Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들.. 2024. 2. 25.
🟦 TypeScript 🟦 - 신촌알고리즘출석프로그램 Documentation - The Basics Step one in learning TypeScript: The basic types. www.typescriptlang.org 🟦 TypeScript 🟦 - Microsoft에 의해 개발된 오픈 소스 프로그래밍 언어 - JavaScript의 상위 집합(superset)으로, JavaScript에 타입 시스템을 추가하여 개발한 언어 - TypeScript는 크로스 플랫폼 및 크로스 브라우저 호환성을 갖춘 JavaScript 코드를 생성 - 웹, 서버, 모바일 애플리케이션 개발 등 다양한 분야에서 사용 🟦 TypeScript의 주요 특징 - 정적 타입 검사: TypeScript는 변수, 매개변수, 객체 속성 등에 대한 타입 정보를 명시적으로 선언할 수 있음.. 2024. 2. 11.
⚛️ React ⚛️ - 2.리액트 프로젝트 만들기 내일 아침에 이어서.. CPA (create-react-app) : 리액트 프로젝트 제작 npx (node pakage program) 리액트 웹 애플리케이션은 CRA라는 프로그램으로 node.js 프로젝트를 생성하여 제작 npx create-react-app fir_react --template typescript package.json CRA로 생성한 프로젝트에는 항상 이 파일 존재 터미널에서 npm start 명령을 실행하면 이 파일 내에서의 react-scripts start 명령 실행 npm run start - start 명령 : 프로젝트를 개발 모드로 실행 npm run build - build 명령 : 프로젝트를 빌드 모드로 실행 웹팩 webpack : 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러 다양.. 2023. 9. 11.
⚛️ React ⚛️ - 1. 리액트 개발 준비 ⚛️ 싱글 페이지 애플리케이션 / SPA 멀티 페이지 애플리케이션 : 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 기존 방식 (HTTP 요청 -> HTTP 응답 -> 렌더링 (반복)) 주소 창으로 요청하는 자원이 하나뿐 -> 렌더링을 지우는 과정에서의 깜빡임 노노 !이거! 내가 아빠 생일 프로그래밍 만들 때 엄청 고심한 거잖아! SPA로 하면 되는구낭 리액트 : 싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크 ⚛️ 클라이언트 동작 템플릿 엔진 프엔은 백에서 제공하는 json 데이터를 해석하여 자바스크입터 객체들의 조합을 얻은 후 이것을 웹이 이해할 수 있는 DOM 객체로 변환해줘야 함 프엔 프레임워크는 자바스크립트 객체를 DOM 객체로 전환해 주는 역할을 수행 프론트엔.. 2023. 9. 4.