Jieunny의 블로그

📣 OpenWeather API를 이용해서 날씨 검색 서비스 구현하기스터디에서 각자 타입스크립트를 이용한 미니 프로젝트를 해오기로 했는데, 나는 날씨 검색 서비스를 만들기로 했다. 🚨css 랑 기능 추가하면서 밑에 적은 코드랑 조금 달라졌다 🔗 파일 구조 src ㄴ components ㄴ PrintWeather.tsx : 날씨가 어떤지를 출력하는 컴포넌트 ㄴ InsertCityName.tsx : 도시를 입력할 input, 검색버튼을 출력하는 컴포넌트 ㄴ img : 배경화면이 될 날씨 이미지를 가지고 있는 폴더 ㄴ type : openWeather에서 제공해주는 데이터 타입을 담고있는 폴더 ㄴ types.ts ㄴ App.tsx : api로 데이터를 받아오고, 그에 맞는 배경화면과 다른 컴포넌트들을 모두 출..

𝟭. React + TypeScript 프로젝트 설정하기 ✔️ 프로젝트 생성하기 1️⃣ create-react-app 으로 리액트 프로젝트 시작하기 npm install -g create-react-app // 설치 create-react-app . --typescript ➰ tsconfig.json 파일이 만들어진다. ➰ App.ts가 아닌 App.tsx 파일이 만들어진다. ㄴ 타입스크립트만 쓸 수 있는 게 아니라 jsx코드(타입스크립트안에 자바스크립트)도 쓸 수 있다. 2️⃣ src 폴더 정리하기 ➰ src ㄴ App.tsx ㄴ App.tsx 파일에 필요없는 import, 컴포넌트 지우기 ㄴ index.css html { font-family: sans-serif; } body { margin: 0;..

𝟭. Webpack이란 무엇이며 왜 필요한가? ✔️ 웹팩 : 파일을 묶는(bundle) 것을 도와주는 도구 ➰ 코드를 묶음으로써 HTTP 요청의 양을 줄여준다. ➰ 코드를 최적화(최대한 작게) 하고, 빌드 절차를 추가하고, 추가 빌드 툴을 제공한다. 𝟮. Webpack 설치하기 & 중요 종속성 npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader // --save-dev:모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것 // 실제 릴리즈시에는 필요없는 모듈의 경우 ➰ webpack-cli : 프로젝트에서 웹팩 명령어를 실행하기 위함. ➰ webpac..

✔️ 모듈 형식의 코드를 작성해서 여러 개의 파일에 코드를 나눈다. ➰ 각 파일이 관리 가능하고 유지보수 가능하게 되는 것 ➰ import, export로 간단하게 참조 가능 🚨 Chrome 또는 Firefox를 사용하자. 𝟭. 모듈 코드 작성하기 1️⃣ 여러 개의 코드 파일, 타입스크립트 파일 작성 후 수동으로 컴파일 된 js 파일을 HTML에 import 하는 것 2️⃣ Namespaces & File Bundling 3️⃣ ES6 Imports / Exports -> 권장 𝟮. 네임스페이스 작업하기 1️⃣ drag-drop-interface.ts 만들기 2️⃣ Draggable, DragTarget 인터페이스 잘라서 붙여넣기 // drag-drop-interface.ts namespace App {..

너무 어려워서 블로깅 어떻게 해야할지 모르곘다.. 일단 완벽히 이해하는 건 포기하고 따라 치면서 흐름만이라도 이해하려고 노력했다ㅠㅠ 내가 이해할 수 있는 언어로 주석을 작성하려고 나름대로 적었지만, 코드가 길어지면서 힘들어졌다...🥹 간단한 프로젝트라매..쉽다매..ㅠㅠㅠㅠㅠㅠㅠ 이번 강의 들으면서 느낀것 🚨 컴파일이 되고 있는지 항상 확인하자.. 🚨 에러가 나면 오타가 없는지 항상 확인하자.. 📣 ts 코드 📌 app.ts // Drag & Drop interface // 한 박스에서 다른 박스로 프로젝트 항목 옮기기 interface Draggable { // 드래그에 관한 이벤트 리스너를 가지고 있음. dragStartHandler(event: DragEvent): void; dragEndHandle..

📣 강의 내용 정리 ✔️ 데코레이터란? ➰ 클래스 선언과 멤버에 대한 주석과 메타 프로그래밍 구문을 모두 추가할 수 있는 방법을 제공하는 기능으로, 데코레이터 함수는 인자로 전달받은 함수의 동작을 수정한다. ➰ 쉽게 말해 데코레이터 패턴은 클래스를 수정하지 않고 클래스의 멤버들의 정의를 수정 및 기능을 확장할 수 있는 구조적 패턴의 하나 ➰ 매개변수, 속성, 접근자, 메소드, 클래스에 첨부할 수 있는 특별한 선언 함수 ➰ 데코레이터가 어디에 장식되느냐에 따라서, 데코레이터 함수로 넘어오는 인자의 개수나 리턴값이 달라진다 (데코레이터의 종류가 달라지는 것) ✚ 메타프로그래밍이란? 더보기 ➰ 자기 자신 혹은 다른 컴퓨터 프로그램을 데이터로 취급하며 프로그램을 작성, 수정하는 것을 말한다. 📚 참고 : htt..