working_helen

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 API로부터 데이터를 받아오고, 해당 데이터를 입력으로 사용하는 과정 구현하기 1. API에서 데이터 로드 2. API 데이터로 일기장 구성하기 1. API에서 데이터 로드 const getData = async()=>{ const res = await fetch("API 주소").then((res)=>res.json()); } useEffect(()=>{ getData();}, []) - asyc, wait, fetch 함수 → json 형태로 저장 - useEffect 빈배열 [] 이용 → 리액트가 Mount될 때 API 호출 실행 2. API 데이터로 일기장 구성하기 - {JSON} ..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 useEffect를 이용해 컴포넌트의 Lifecycle에 따른 함수 실행 구현하기 1. React 컴포넌트의 Lifecycle 2. useEffect를 이용한 예외 처리 3. useEffect를 이용한 컴포넌트 조작 1. React 컴포넌트의 Lifecycle 1) Lifecycle 3가지 탄생 Mount : 컴포넌트가 화면에 나타나는 것 변화 Update/Re-rend : 컴포넌트가 변화하는 것 죽음 UnMount : 컴포넌트가 화변에서 사라짐 2) useEffect - React Hooks : Class형 컴포넌트가 가지고 있는 기능 중 함수형 컴포넌트에서 사용할 수 있는 기능 - Cl..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 리액트 흐름에 따라 일기장 데이터 추가, 삭제, 수정 구현하기 1. Event & Data 흐름 2. 데이터 추가 : onCreate() 3. 데이터 삭제 : onDelete() 4. 데이터 수정 : isEdit, localContent, handleQuitEdit, handleEdit, onEdit 1. Event & Data 흐름 역방향 이벤트 흐름 : Event는 아래에서 위로 단방향 데이터 흐름 : Data는 위에서 아래로 - 공통 부모 App.js에서 [State 변수, State 변경 함수] 생성 - DiaryEditor는 App에서 props로 전달한 setData 함수 호출 ..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 일기장 입력 + 저장 기본 구조 구축하기 1. 일기장 입력 컴포넌트 : DiaryEditor.js 2. 일기장 목록 컴포넌트 : DiaryList.js 3. 일기장 목록 아이템 컴포넌트 : DiaryItem.js 4. 전체 애플리케이션 컴포넌트 : App.js 일기장 컴포넌트 구조 1. 일기장 입력 컴포넌트 : DiaryEditor.js 1) [state, setState] - State 변수 생성 - 사용자 입력을 받아 값이 변화할 변수들 State 객체 생성 - state = { author, content, emotion'} 2) handleChangeState - State 변수 변..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 4. React.js 기초 1. State 2. Props 3. 리액트 렌더링(rendering) 4. 실습 예제 1. State - 컴포넌트 내부에서 관리하는 동적 데이터 - 컴포넌트 내부에서 함수를 이용해 값을 변화시킬 수 있는 데이터 import React, {useState} from "react"; const [State의 값 변수, State를 변화시키는 함수] = useState(State 초기값); useState() : 배열을 반환, 배열의 비구조화 할당 count : State 값을 나타내는 변수 setCount : count를 변화시키는 함수 State 값 변수와 State 변화 함수 이름은 유일 (이름 중복 불가) ..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 3. Node.js 기초 / 섹션 4. React.js 기초 1. Node.js 2. React.js 3. CommonJS vs ES Modules 1. Node.js 1) Node.js의 개념 (Node.js는 공식 홈페이지) Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. ※ 런타임 = 특정 언어로 만든 프로그램들을 실행할 수 있는 환경 - Node.js는 JavaScript 실행 환경 - 기존의 JS는 웹 브라우저를 실행한 상태에서만 사용 가능 - Node.js는 JS를 웹 브라우저 외의 서버 환경에서도 사용할 수 있게 도와주는 역할 2) Node.js의 특징 Node.js =..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 2. JavaScript 응용 1. Truthy & Falsy 2. 비 구조화 할당 3. Spread 4. 동기/비동기 5. 콜백 함수 1) 콜백 함수 2) 콜백 지옥 (Callback Hell) 3) Promise 4) async & await 5) API 호출 1. Truthy & Falsy - Falsy에 해당되는 것 : null, undefined, 0, "" (빈 문자열) - 단락회로 평가 : 논리연산자가 앞에서부터 평가하고, 결과가 결정되면 뒤를 고려하지 않는 특성 - 아래 코드에서 person이 'Falsy'면 바로 'Falsy'로 name 할당, name이 Truthy면 바로 name 값을 리턴 const getName =..

강의명 : 제임스코딩 풀스택 개발 입문 5주 완성 - 섹션 7 JavaScript 객체와 배열 강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 1. JavaScript 기본 1. 객체 2. 배열 1. 객체 const class = { //객체의 속성들 정의 key : value; key : value; ... } - 속성(property)으로 구성된 데이터 집합 - { } 안에 '속성이름(key) : 속성값(value)'으로 정의한다. - key는 string 타입이지만 value는 모든 타입이 올 수 있다. 함수가 value가 되면 method라고 부른다. 1) value에 접근하기 class.key;//점 표기법(dot notation) class[key];//대괄호 표기법(bra..

강의명 : 제임스코딩 풀스택 개발 입문 5주 완성 - 섹션 5. JavaScript 기초 1. undefined vs null 2. 함수 선언 3. 호이스팅 (hoisting) 4. 함수 생성 실습 강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 1. JavaScript 기본 1. 명시적 형변환 2. Null 변환 연산자 1. undefined vs null - undefined : 아직 값이 할당되지 않은 상태 - null : 의도적으로 값이 없음을 나타내는 경우 사용 let a; console.log(a); let b = null; console.log(b); console.log(null === undefined); 2. 함수 선언 - 함수 선언식 / 함수 표현식 / 화살표 함수..

강의명 : 제임스코딩 풀스택 개발 입문 5주 완성 목차 : 섹션 2 HTML 1. HTML vs CSS vs JS 2. HTML 주요 태그 3. 회원가입 폼 만들기 실습 1. HTML vs CSS vs JS HTML : 웹 사이트 언어의 코드를 통해 브라우저가 이해할 수 있는 언어로 웹을 디자인 = 웹에 포함되는 컨텐츠를 설계하는 언어 = 웹 전체적인 몸체 설계하는 역할 CSS : 웹 디자인을 담당하는 언어 = 몸체를 꾸미는 역할 JS : 동적 컨트롤이 가능하게 해주는 언어 = 웹을 동적으로 만들어주는 역할 (위키백과) 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전..