초급

07. 배열과객체

작성자:

📁 완성파일 💡 1. baisc.ts hobbies 변수는 문자형 배열을 가지고 있다 let hobbies:string[]; hobbies=["수영","축구",/* 5 */] hobbies 에 숫자자료형을 넣으면 에러를 표시한다 변수 dog은 자료형을 명시 하지 않았다 let dog; dog={ name:"망고", age:5, } 자료형을 지정하지 않을경우 default 로 any 타입을 가지게 된다 let dog:any 과 같다 any 타입은 불가피 할 경우에 사용하는 것으로 사용을 … 더 읽기

03. 설치삭제

작성자:

타입스크립트(TypeScript, 타입스크립트) 개발 환경을 구성하기 위해 패키지 관리자인 npm(Node Package Manager, 엔피엠)을 사용하여 타입스크립트 컴파일러를 설치하고 제거하는 과정을 다룬다. 윈도우와 맥(macOS) 등 운영체제 환경에 따라 달라지는 명령어 형식과 관리자 권한 적용 방식을 정리한다. 설치가 정상적으로 완료되었는지 버전을 확인하는 방법과 시스템 전체에 적용되는 전역 설치 및 특정 디렉터리에 한정되는 로컬 설치의 차이점을 설명한다. 1. 설치 타입스크립트 … 더 읽기

04. 개발환경-설정

작성자:

1.타입스크립트의 이해 🔗공식홈 1.1. 정의 자바스크립트에 타입(type)을 추가한 확장 언어로 새로운 언어가 아니다. 1.2. 설치 https://www.typescriptlang.org/ko/download/ 웹브라우저는 자바스크립트 만을 해석할수 있으므로 타입스크립트로 개발후 자바스크립트로 변환(compile) 해야 한다. 다양한 방법중 NodeJs를 사용하도록 한다. 1.2.1. 프로젝트 환경설정 빈 폴더 생성 후 vscode로 열기 터미널 창에 아래의 명령어 실행 // 타입스크립트 설치 로컬/전역중 택일 //// 로컬 npm install … 더 읽기

02. 설치

작성자:

📁 완성파일 01. 개요 🤔 타입스크립트(TypeScript)는 마이크로소프트에서 개발한 자바스크립트의 상위 집합 언어이다. 타입스크립트는 자바스크립트의 모든 기능에 더해서 정적 타입, 클래스, 인터페이스, 상속 등을 지원한다. 타입스크립트는 자바스크립트 코드로 컴파일되며, 이를 통해 자바스크립트로 작성된 어플리케이션을 쉽게 타입스크립트로 변경할 수 있다. 자바스크립트 문법에 타입을 표기하는 방식이며 자바스크립트의 superset (상위확장) 이라고도 한다. 브라우저에서 실행되지 않으며 자바스크립트 형태로 컴파일 해야한다 … 더 읽기

01. GSAP 기초 애니메이션

작성자:

1. gsap gsap공식사이트 gsap코드펜 gsap치트시트 gsap의 모든 기능이 있는 cdn 링크 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS나 순수 자바스크립트보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리이며, HTML5와 Flash 두 개의 플랫폼에서 사용할 수 있다. GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 탁월한 퍼포먼스로 알려져 있다. … 더 읽기

02. 실전-api데이터-연동-공유-관리

작성자:

🐨 0. 준비 0.1. 시작파일 💡 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 파일활용방법안내 다운로드 받은 start.zip 파일의 압축을 푼다 새 리액트 앱을 설치한다. 리액트 앱 설치를 모를경우 아래 링크를 참고한다. 🔗[리액트 설치안내](https://www.notion.so/b2b65b3a6a9743ef84174efb17630e12) 리액트 앱의 설치가 왼료 되었으면 1번의 파일압축을 푼다 압축을 풀게 되면 start/src 폴더가 있다. 2번의 src폴더에 4번의 src 폴더와 package.json … 더 읽기

12. composition

작성자:

1. 기초영상 2. 심화영상 3. Composition? (컴포지션?) Nested Component 컴포넌트 라고도 하고 중첩 컴포넌트라고도 합니다. 컴포넌트를 중첩하는 것을 말합니다. 리액트 앱은 수많은 컴포넌트를 가지게 됩니다. 컴포넌트간의 주고받는 데이터 뿐만 아니라 박스나 컨테이너에서 사용하는 스타일코드의 중복까지도 최소화 하려면 props 만으로는 한계가 있는데요. 이때 사용할수 있는것이 composition(합성) 입니다. 앱에서 반복 사용되는 UI 디자인 코드를 별도의 컴포넌트로 생성하여 … 더 읽기

02. 리액트소개

작성자:

1.리액트소개 1.1.리액트란? JavaScript 라이브러리 UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발. 페이스북과 개발자,기업,단체에 의해 유지보수됨. 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함. 1.2.리액트의 특징 JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다. 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다.• https://babeljs.io/repl 에서 변환되는 과정을 볼수있다 SPA (Single Page Application) 이다. 모바일애플리케이션을 개발할 … 더 읽기

01. api활용

작성자:

1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. 연관링크 🔗 연관링크 API란? fetch와 promise 예제 MDN fetch MDN try…catch 문 axios 공식홈 #3. fetch fetch() fetch 함수는 웹에서 데이터를 요청하고 받아오는 자바스크립트 기능이다. 간단하게는 fetch('주소')를 사용해 데이터를 요청하고, .then()을 통해 받은 데이터를 처리한다 우리의 레시피 앱은 … 더 읽기

01. router

작성자:

🐨 https://qwerewqwerew.github.io/retype-react/레시피앱/8/#1-시작파일 https://qwerewqwerew.github.io/retype-react/레시피앱/8/#1-시작파일 1. Router 이해 (Part1) 1.1. 시작파일 💡 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 파일다운로드 파일활용방법안내 다운로드 받은 start.zip 파일의 압축을 푼다 새 리액트 앱을 설치한다. 리액트 앱 설치를 모를경우 아래 링크를 참고한다. 🔗[리액트 설치안내](https://www.notion.so/b2b65b3a6a9743ef84174efb17630e12) 리액트 앱의 설치가 왼료 되었으면 1번의 파일압축을 푼다 압축을 풀게 되면 start/src 폴더가 있다. … 더 읽기