놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습목표 1. 리덕스 기본 용어에 친숙해진다. 2. 리덕스에서 미들웨어의 역할을 이해한다. 3. 비동기 작업을 더욱 효율적으로 관리해주는 미들웨어 redux-thunk 와 redux-saga가 있음을 인지한다. 리덕스 기본 개념 복습 스토어 비유적으로 표현한다면 '은행(bank)'을 떠올리면 된다. 💰 store는 나의 data를 넣을 수 있는 장소를 생성한다. 정보가 저장되는 곳이라고 생각하면 된다. 한개의 프로젝트는 단 하나의 스토어만 가질 수 있다. import {createStore} from 'redux' const store = createStore() 이런식으로 만드는데, 아마 에러창이 뜰 ..

// 5강: 함수에 타입 지정하는 법 & void 타입 // 변수만 만들면 any가 자동할당 된다. let y; // 결국 매개변수도 변수를 선언하는 것이기에 아무것도 지정안하면 any가 할당된다. // 함수는 파라미터, 리턴 값 타입 지정이 가능하다 function double(x: number): number { return x * 2; } // 함수에서 void 타입 활용 가능 // void => 실수로 뭔가 return하는 것을 사전에 막을 수가 있다. // void: 존재하지 않음, 아무것도 없이 비어있음 function 함수(x: number): void { 1 + 1; } //참고) 파라미터 타입 지정을 해주었다면, 함수 호출할때 인수가 반드시 들어가야한다. 아니면 에러남! (JS랑 다른점 ..

// 1. Union type => 타입 2개 이상 합친 새로운 타입 만들기 let box1: string | number = "안녕"; // 언제든 수정 가능 box1 = 123; // 만약에 type이 많다면? let box2: string | number | boolean = true; // 배열안에 문자 or 숫자가 껴있는 타입 지정 let arr1: (number | string)[] = [1, "2", 3]; let arr2: Array = [1, "2", 3]; // 객체 타입 지정도 마찬가지 let obj: { age: number | string } = { age: 32 }; // 2. any => 모든 자료형 허용. 타입 실드 해제(타입스크립트 쓰는 의미가 사라진다. 버그 잡아주지 못한..

변수에 타입을 지정한다 => 변수에 베리어를 씌우는거랑 유사 // 타입 스크립트 기본 타입 정리 var 이름 = "kim jung hee"; var 나이 = 27; var 결혼했니 = undefined; var 담배했니 = null; var 회원들 = ["영희", "철수"]; var 컴퓨터들 = { computer1: "apple", computer2: "samsung", }; // 3강 타입스크립트 과제 // 1. 나의 이름, 나이, 출생지역을 변수로 저장하기 var myName = "kim jung hee"; var myAge = 27; var myHomeTown = "서울"; // 2.내가 가장 좋아하는 곡과 가수 이름을 변수에 object 자료형으로 담아보기 var myFavorite = { so..

타입스크립트 : 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 정적 타입의 컴파일 언어이며, 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다. 타입스크립트 장점 1. 타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 2. 자바스크립트 보다 에러메세지 퀄리티가 높다. 3. 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 타입스크립트 단점 1. 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다. 2. 코드가 길어져 가독성이 떨어질 수 있다. tsconfig.json 파일 설정 //tsconfig.json { "compilerOp..

오늘부터 팀원 한명과 함께 타입스크립트 강의를 듣기로 하였다. 강의 시작은 우선 코딩애플의 "빠르게 마스터하는 타입스크립트"로 정하였다. 하루에 두강씩 듣는 것을 목표로 하고있다. 아마 3강은 좀 빡세다고 생각한다. (다른것도 하면서 해야하기에...;) 또한 블로그 글쓰는 형식도 바꿔보려고 한다. 나의 팀원 중 한분이 블로그에 강의 내용을 요약하는 것이 아니라, 새로 자신이 찾아봐서 알게된 내용을 블로그 글로 쓰던데 나도 이번 포스팅에서는 그렇게 해볼 예정이다!! 내가 이렇게 글을 쓰는 이유는 내 나름대로 그냥 강의를 듣는 것이 아니라 이 강의를 듣고나서의 내가 얻을 수 있는것을 한문장으로 정의하고 싶어서이다. 나는 목적이 있어야 강의도 원만하게 들을 수 있는 스타일이기 때문이다. 강의 목표는 뭘로 잡을..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p354 ~p390 14.1 비동기 작업의 이해 동기: 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업 불가능. 비동기: 동시에 여러가지 요청 처리 가능. 기다리는 과정에서 다른 함수 호출 할 수 있음. 14.2 axios로 API 호출해서 데이터 받아오기 axios : 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점이다. import { useState } from "react"; import axios from "axios"; function App() { const [da..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p324 ~p352 학습목표 1. 전통적인 웹페이지의 어떤 문제를 SPA가 해결해주었는지 설명할 수 있다. 2. Route path와 comonent 를 이용하여 url별로 페이지를 다르게 보여줄 수 있다. 3. Link 컴포넌트를 사용할 수 있다. 13.1 SPA란? SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 전통적인 웹 페이지 방식 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비를 했..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p290~p310 새로 알게된 내용 1. useState안에 함수 넣어주기 useState(createBulkTodos()) vs useState(createBulkTodos) function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); // 고윳값으로 사용될 id // ref를 사용하여 변수 담기 const nextId = useRef(2501); (…) }; useState(createBulkTodos())라고 작성하면 리렌더링 될 때마다..

작성일: 2022.2.5 (토) 문득, 원범 멘토님과 얘기를 나누던 중, 내가 왜 next.js를 쓰는지에 대한 인지도 하지 못한채, 감귤마켓 프로젝트를 진행하고 있다는 느낌이 들었다. 간단하게 Postman으로 get 요청을 보내봄으로 써, 둘의 차이를 알아보려고 한다. 클라이언트 사이드 렌더링(리액트) 리액트를 통해서 api get을 요청하니까, body안에 내용물이 div하나 밖에 보이지 않았다. 아마 브라우저에 입장에서는 body안의 내용을 제대로 인지하지 못할까 싶지 않다. 서버사이드 렌더링 이런식으로 Postman을 통해서 요청을 보내보니, body안의 모든 내용들이 나와있다. 이러한 성격 때문에 next가 SEO에 좋다고 한다는 것을 느꼈다. (body의 여러 태그들과 내용들을 알 수 있으니..