What I Learned Today커스텀 컴포넌트를 만드기 실습유저 카드 컴포넌트인 user-card-class.jsx 생성// user-card-class.jsximport { Component } from 'react'import './user-card.css'export default class UserCardClass extends Component { render() { const { id, name, age, address, phoneNumber } = this.props return ( {name} 나이 {age}세 ..
What I Learned Today어제는 바닐라 리액트만 배웠었다.하지만 바닐라 리액트를 사용하면서 느낀점은 바닐라 자바스크립트와 별로 다를게 없었다는 것. JSX리액트에서 마크업을 표현할 때 널리 사용되는 XML과 유사한 자바스크립트 문법 확장이다.Vanilla React와 JSX 비교// Vanilla Reactconst box = React.createElement( Box, {}, shouldShowAnswer(user) ? React.createElement( Answer, { value: false }, '답변: 아니오' ) : React.createElement( Box.Comment, {}, '댓..
What I Learned Today오늘부터 바닐라 리액트에 대해 배우기 시작했다.아마 바닐라 리액트를 탄탄하게 배우고 리액트로 들어가지 않을까 싶다. 리액트 컴포넌트사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 코드 조각자체적으로 상태와 UI를 관리하며 조합하여 복잡한 화면을 효율적으로 만들 수 있다.리액트 앱에서 컴포넌트는 개별적인 파일로 분리되어 관리한다.컴포넌트 트리컴포넌트는 다른 컴포넌트를 내부에 포함할 수 있다.포함된 컴포넌트는 하위 컴포넌트, 포함하는 컴포넌트는 상위 컴포넌트가 된다.컴포넌트 타입자바스크립트에서는 재사용 가능한 설계 구현을 위해 함수 또는 클래스를 사용한다.함수, 클래스 타입이 재사용을 위한 리액트 컴포넌트의 타입이다.함수 컴포넌트컴포넌트 외부로부터 속성을 전달 받아 ..
What I Learned Today드디어 바닐라 프로젝트가 끝났다.이번 프로젝트는 기획부터 디자인 시안까지 모두 만들어야 했고 최대한 라이브러리를 사용하지 않는 바닐라 JS 프로젝트였다.우리는 프로젝트 캘린더를 이렇게 작성했다. 기획부터 탄탄하게 잡아야 나중에 경로가 틀어지거나 하는 일이 없기 때문에 기획 단계에 시간을 투자했다.우리는 네이버 검색 API를 활용한 도서 검색 및 추천 사이트를 만들기로 결정했고 최대한 사용자 경험과 접근성을 챙기기로 정했다.주제를 선정한 이유외부 API를 연동, 데이터를 가공, 렌더링하는 과정을 겪음으로써 비동기 처리 역량을 키울 수 있을 것이라고 생각했다.우리는 디자인 시안이 없었기에 레퍼런스를 찾는 시간을 갖게 되었지만 마땅한 레퍼런스가 없어서 처음부터 만들게 되었..
What I Learned Today비동기 자바스크립트 - AJAX 라이브러리라이브러리가 필요한 이유XHR과 Fetch API는 저수준(Low-level) API 이다.저수준 API를 사용하는 것에 문제가 있는 것은 아니지만 많은 코드 작성이 필요하다..then() 메서드 두 번 이상 사용예를 들어 Fetch API를 사용할 땐 항상 .then() 메서드가 두 번 이상 필요하다.콘텐츠 유형에 적절한 메서드 사용실제 요청에서는 적절한 메서드를 사용해 응답을 처리해야 한다,.서버가 보내는 콘텐츠 유형에 따라 적절한 메서드 .json(), .text(), .blob()를 호출해야 한다.직접 오류 처리 필요Fetch API는 오류가 발생할 경우 .catch() 메서드를 호출하지 않는다.따라서 fetch() 사용..
What I Learned Today비동기 자바스크립트 - 인증JS를 사용해 인증하는 방법기본 인증 (Basic Authentication)OAuth 인증 (Open Authentication)기본인증사용자 이름과 비밀번호를 서버에 전송할 때 발생한다.기본 인증을 수행하려면 Authorization 헤더를 전송해야 한다.이때 헤더 값은 Basic (Base64로 인코딩 된 문자열)인코딩은 텍스트를 Base64 포맷으로 변환하는 것을 말한다.디코딩은 Base64를 텍스트로 변환화는 과정을 말한다.Base64 인코딩텍스트를 Base64 포맷으로 변환하려면 btoa() 함수를 사용한다.btoa (Binary to ASCII)는 바이너리 데이터를 ASCII 문자열로 변환한다.btoa 함수는 서유럽 언어만 지원하..
What I Learned Today비동기 자바스크립트 - Fetch APIFetch APIAJAX 요청을 위한 현대적인 방법기존의 XMLHttpRequest보다 더 간결하고 강력한 인터페이스 제공요청fetch() 함수를 사용fetch(url, option(옵션))// 예) 깃허브 repo를 가져오는 요청fetch('https://api.github.com/users/dohyeon0709/repos')응답 처리Fetch API는 Promise를 반환하며 응답은 Response 객체로 제공이 response 객체는 다양한 메서드를 통해 데이터를 추출할 수 있다.fetch() 함수의 응답 결과를 확인하려면 .then() 메서드를 사용한다.하지만 fetch() 응답은 "읽기 가능한 스트림(readable st..
What I Learned Todayswitch 문// 기본 사용법switch (조건) { case '값': // ... break default: // ...}// break 키워드 사용하지 않기switch(취미) { case '수영': case '스킨스쿠버': case '윈드서핑': // ... break case '영화 감상': // ... break // ... }// 블록으로 묶기switch(취미) { case '수영': case '스킨스쿠버': case '윈드서핑': { // ... break } case '영화 감상': { // ... break } // ... }switch 문은 여러 if 구문을 합친 것과 같다.일반적으로 조건이 특정 값인지 확인할 때 사용한다.여러 조..
What I Learned TodayText 및 HTML 변경선택된 DOM 요소의 텍스트 콘텐츠 또는 HTML을 변경할 때 다음의 두 가지 방법을 사용한다.textContent : DOM 요소의 텍스트 콘텐츠를 변경할 때는 .textContent 속성을 사용한다.텍스트만 변경HTML 태그 무시innerHTML : DOM 요소 내부의 HTML을 변경할 때는 .innerHTML 속성을 사용한다.HTML 구조를 포함한 콘텐츠 변경HTML 태그 해석 DOM에 요소 추가createElement() : DOM 요소를 추가하려면 먼저 요소를 생성해야 한다.요소를 생성할 때는 .createElement() 메서드를 사용한다.초기 생성 시 메모리에만 존재한다.생성된 요소에 클래스 또는 textContent 속성을 사용하..
What I Learned Today목적에 맞는 함수 설계함수 작성 시 하나의 기능을 구현하는 목적만 가져야 한다.무슨 일을 하는 지 알기 쉽고 작성 또한 수월하다.함수 이름은 동사로 시작해야 한다.기능을 알기 쉽다.함수를 작성할 때 주석을 작성한다.기능을 이해하고 사용을 쉽게 한다.함수에 주석을 추가할 때는 JSDoc 방식을 사용한다.JSDoc 방식 - /** 으로 시작하고 */ 으로 끝나는 여러 줄 주석작성할 기능은 최소 아래 세 가지 사항을 문서화 해야한다.함수의 목적, 함수의 매개변수, 함수의 반환값 범위(Scope) 관리변수가 포함된 환경을 자칭하는 이름이다.범수에 접근할 수 있으면 해당 변수가 범위 내에 있다고 말한다.JS에서 5개의 범위글로벌 (Global Scope)함수 외부에 선언된 변수..
