배꼽파지 않도록 잘 개발해요

fetchfetch('보내고 싶은 URL');const res = await fetch(url);// 리스폰스 상태 코드res.status;// 리스폰스 헤더res.headers;// 리스폰스 바디await res.json(); // JSON 문자열을 파싱해서 자바스크립트 객체로 변환await res.text(); // 문자열을 그대로 가져옴fetch는 기본적으로 GET 리퀘스트를 보낸다. promise를 리턴하는데, 시간이 지나고 response가 도착하면 promise는 fulfilled 상태가 되고 response를 결과값으로 갖게 된다. 그래서 response를 가져오려면 await 문을 써야함. 이 중에서 많이 사용하는 것은 상태코드, header, body임.body 내용은 단순히 프로퍼티로 ..

◆ 배열 렌더링하기 ◆ 데이터 가져오기 ◆ 입력 폼 다루기 배열 렌더링하기 mock 데이터 추가하기 ReviewList.js function ReviewList({ items }) { console.log(items); return ; } export default ReviewList; components/App.js import ReviewList from "./ReviewList"; import items from '../mock.json'; function App() { return } export default App; index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './comp..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 position 일반적인 글의 흐름에서 벗어나고 싶을 때 사용 속성값 : static, relative, absolute, fixed, sticky 위치의 기준 : position 으로 정하기 구체적인 위치 : top, right, bottom, left 으로 지정함. ex. 이미지나 영상 위에 글자가 겹치기 화면 위쪽에 메뉴가 스크롤을 해도 떠있는 것처럼 글 흐름이랑 상관없이 static position 속성의 기본 값 원래 있어야 할 위치에 배치 일반적인 글의 흐름을 따름 relative 원래 위치를 기준으로 움직이고, 원래 있던 공간은 그냥 비워놓고 배치함. margin : 다른 요소들도 이동함. relative : 다른..

◆ TypeScript 시작하기 ◆ Enum ◆ Interface ◆ 그 밖의 타입들 ◆ 제네릭 ◆ tsconfig.json TypeScript 시작하기 TypeScript 프로젝트 만들기 Node.js 프로젝트 생성 npm init 타입스크립트 개발모드로 설치 npm install --save-dev typescript 타입스크립트 사용에 필요한 설정 파일 설치 npx tsc --nit · npx : node 모듈을 시행하는 명령어 · tsc : 타입스크립트에서 제공하는 타입스크립트 컴파일러 모듈 (TS를 JS로 바꿔줌) · --init : 초기 파일 생성 package.json 파일에서 스크립트 추가 "scripts": { "build": "tsc" }, main.ts 파일 생성 console.log..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • 리액트 개발을 위한 환경 : Node.js, VScode, Chrome • Node.js 설치 : LTS 버전이 더 안전함 • React 개발자도구 https://react.dev/ React React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, an..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 모듈 모듈의 장점 · 코드를 효율적으로 관리할 수 있음 · 다른 프로그램에서 재사용할 수 있음 · 이미 만들어진 모듈도 많음 Node.js ·크로스플랫폼 오픈소스 자바스크립트 런타임 환경 ·윈도우, 리눅스, macOS 등을 지원함. ·V8 자바스크립트 엔진으로 구동되며, 웹 브라우저 바깥에서 자바스크립트 코드를 실행할 수 있음. 프론트엔드 개발도 Node.js 환경에서 많이 함. - 코드 개발 시에는 서드파티 모듈과 Node.js가 제공하는 기능을 활용 - 개발이 완료되면 최종 결과물을 빌드해서 웹 브라우저에서 실행함. 모듈의 정확한 의미는 context에 따라 달라질 수 있음. • 웹브라우저에서의 모듈 : ES 모듈 = 모듈..

async/await async/await 구문은 Syntactic sugar(기존 문법을 더 편하게 사용할 수 있도록 하는 문법적 장치)에 해당 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text(); console.log(result); } fetchAndPrin..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 객체 지향과 절차 지향 • 객체 지향 프로그래밍 : 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것 • 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 객체만들기 Object-Literal · 객체를 나타내는 문자열 · 중괄호 안에 프로티와 메소드를 나열 프로퍼티 : 객체의 상태를 나타내는 변수들 / email, birthdate 메소드 : 객체의 행동을 나타내는 함수들 / buy(item) this : 현재 객체 자체를 의미 (user) this.email : user의 email 프로퍼티 const user = { email: 'gildong@google..

fetch 함수와 비동기 실행 • 동기 실행 : 코드를 순차적으로 한 줄씩 실행하는 방식 • 비동기 실행 : 코드를 순차적으로 진행하지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 시작하는 방식 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 여기서 then 메소드는 콜백을 등록만 함. then 메소드가 콜백을 등록하면 바로 console.log('End')가 실행됨. 서버에 response가 도착하게 되면 등록해두었던 콜백..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 fetch 함수 구글 홈페이지를 볼 수 있는 이유 웹 브라우저가 구글 홈페이지를 제공하는 서버에 어떤 요청을 보냄 → 서버가 보내 준 응답(코드 덩어리)을 받아서 해석해줌 fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 구글 화면을 구성하는데 필요한 HTML과 자바스크립트 코드들 • Request : 웹 브라우저가 서버로 보내는 요청 • Response : 서버가 다시 보내지는 응답 fetch · 서버로 리퀘스트를 보내고 리스폰스를 받는 함수 .then((response) ..