본문 바로가기

ALL

(119)

패스트캠퍼스 챌린지 2일차 [2일차 강의명] Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 3. 무작정 시작하기 Ch 4. 웹에서 시작하기 Ch 3. 무작정 시작하기 주요 내용 HTML Doctype 뜯어보기 상대 경로와 절대 경로 개발자 도구 새로 알게 된 점 html 파일은 따로 폴더 안에서 관리하면 안된다. => 브라우저는 root 경로에 있는 index라는 html 파일을 가장 먼저 찾기 때문이다. 파일 연결할 때 주변 파일 or 폴더면 /(루트 기준 - 절대 경로)

패스트캠퍼스 챌린지 1일차 [1일차 강의명] Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 1. 개요 Ch 2. VS Code 패캠 강의 듣는 이유 일단 패캠을 알게 된 경로는 [벨로퍼트와 함께하는 모던 리액트] 라는 블로그 튜토리얼(?)을 아는 분이 추천해줘서 이걸로 리액트를 공부했었는데 개인적으로 굉장히 맘에 들었었다. 근데 내가 본 이 튜토리얼이 ㅍㅋ 리액트 강의 자료 문서였던 것이다. 이것 뿐만 아니라 ㅍㅋ 뭐 유명하니까 알고는 있었다! 방학도 했겠다 뭐할까 구경하다가 패캠 홈페이지에 들어가봤는데 강의가 되게 다양해서 몇 분 동안 구경했던거 같다 🤓 근데 이 프론트엔드 초격자 패키지가 html부터 react, ts 등등... 처음부터 끝까지 코스가 짜져 있고 ts도 배우고 싶었던 참이기에 강의를 들어보..

React 공부하기(8) - 상태 관리, Context API of 리액트 타입스크립트 3. 타입스크립트로 리액트 상태 관리하기 카운터 만들어보기 인풋 상태 관리하기 useReducer 사용해보기 import React, { useReducer } from 'react'; type Color = 'red' | 'orange' | 'yellow'; type State = { count: number; text: string; color: Color; isGood: boolean; }; type Action = | { type: 'SET_COUNT'; count: number } | { type: 'SET_TEXT'; text: string } | { type: 'SET_COLOR'; color: Color } | { type: 'TOGGLE_GOOD' }; function reducer(st..

React 공부하기(8) - 리액트 프로젝트에서 타입스크립트 사용하기 타입스크립트를 사용하는 이유 1. IDE(Integrated Development Environment)를 더욱 더 적극적으로 활용 (자동완성, 타입확인) 2. 실수 방지 1. 타입스크립트 연습 $ mkdir ts-practice # ts-practice 라는 디렉터리 생성 $ cd ts-practice # 해당 디렉터리로 이동 $ yarn init -y # 또는 npm init -y 이렇게 하면 ts-practice 디렉터리에 package.json 이라는 파일이 만들어집니다. 타입스크립트 설정파일 생성하기 $ yarn global add typescript 그리고 프로젝트 디렉터리 안에서 tsc --init 명령어를 입력하면 tsconfig.json 파일이 자동생성됩니다. { "compilerOpti..

React 공부하기(7) - redux-saga of 리덕스 미들웨어 10. redux-saga : "액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 한다." 예를 들어,,, 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있습니다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있습니다 (참고) API 요청이 실패했을 때 재요청하는 작업을 할 수 있습니다. Generator 문법 배우기 => 함수를 작성할 때 함수를 특정 구간에 멈춰 놓을 수도 있고, 원할 때 다시 돌아가게 할 수도 있다. => 결과값을 여러번 반환할 수도 있다. function* sumGenerator() { co..

React 공부하기(7) - redux-thunk of 리덕스 미들웨어 4. redux-thunk : "액션 객체가 아닌 함수를 디스패치 할 수 있다." => 함수를 디스패치 할 때에는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와주어야 한다. 이 함수를 만들어주는 함수를 thunk라고 부른다. const getComments = () => (dispatch, getState) => { // 이 안에서는 액션을 dispatch 할 수도 있고 // getState를 사용하여 현재 상태도 조회 할 수 있습니다. const id = getState().post.activeId; // 요청이 시작했음을 알리는 액션 dispatch({ type: 'GET_COMMENTS' }); // 댓글을 조회하는 프로미스를 반환하는 getComments 가 있다고 가정해봅..

React 공부하기(7) - 리덕스 미들웨어 보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때이다. (redux-thunk, redux-sage 등) $ yarn add redux react-redux 2. 미들웨어 만들어보고 이해하기 리덕스 미들웨어의 템플릿 const middleware = store => next => action => { // 하고 싶은 작업... } function middleware(store) { return function (next) { return function (action) { // 하고 싶은 작업... }; }; }; store: 리덕스 스토어 next: 액션을 다음 미들웨어에게 전달하는 함수 next(action) action: 현재 처리하고 있는 액션 객체 미들웨어 직접 작성..

React 공부하기(6) - 리덕스(Redux) 🔧 리덕스 개발자도구 적용하기 https://react.vlpt.us/redux/06-redux-devtools.html 6. 리덕스 개발자도구 적용하기 · GitBook 6. 리덕스 개발자도구 적용하기 이번에는 리덕스 개발자 도구를 사용하는 방법에 대해서 알아보겠습니다. 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회 할 수 있 react.vlpt.us 3. 리덕스 사용할 준비하기 import { createStore } from 'redux'; // 스토어 생성 import { createStore } from 'redux'; // createStore는 스토어를 만들어주는 함수입니다. // 리액트 프로젝트에서는 단 하나의 스토어를 만듭니다. /* 리덕스에서 관리 할 상태 정..

이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음

티스토리툴바