전체 글 24

Json-server 구동 오류

리액트로 토이프로젝트를 하고 있는데, 백엔드가 필요했다. 가장 간단하게 CRUD 할 수 있는 json-server 로 사용해보려 한다. json-server - npm (npmjs.com) json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 2 months ago. Start using json-server in your project by running `npm i json-server`. There are 311 other projects in the npm registry using json-ser www.npmjs.com 사용법은 아주 아..

Error 2023.05.22

JavaScript : Promise

개요 1. Promise를 어따써? 2. Promise의 기본 3. fetch에서 사용하기 1. Promise를 어따써? 리액트 프로젝트를 하다가, fetch API를 사용하게 되면서 Promise에 대해 알아야 한다. Pomise는 ECMAScript6부터 추가되었고, 비동기 처리를 간결하게 하기 위해서 사용된다. 기본적으로 자바스크립트는 싱글스레드로, 동기적으로 처리된다. 그러나 setTimeout 이나 addEventListenter 메서드는 비동기로 실행되는데 console.log("A"); setTimeout(function() {console.log("B"),0}; console.log("C"); 위와 같은 코드가 있을때, A->C->B 손서로 콘솔에 표시된다. 왜냐면, 말했다시피 setTim..

자바스크립트 2023.05.20

React 002

개요 1. 컴포넌트의 동작(feat.Prop) 2. CSS module 3. 몇가지 유의점 4. 이벤트 5. State 1. 컴포넌트의 동작. 사용자 정의 태그이자 return 값으로 JSX코드를 반환하는 함수. 컴포넌트! 컴포넌트는 내가 만든 기능의 단위라고 할 수 있을것 같다. 예를들어, 라는 컴포넌트가 있다. 이 컴포넌트의 기능은 어떠한 포스팅과 작성자를 하나로 묶어 보여주는 기능이다. return 값으로 태그에 묶인 태그 두개를 가지고 있다. p태그 안에는 각각 {prop.title}, {prop.body} 로 중괄호에 묶인 자바스크립트 코드가 동적으로 할당되어있다. 두번째로 라는 컴포넌트가 있다. PostList의 기능은 Post 의 List를 보여주는 것이고, return 값으로 태그에 묶인 ..

리액트 2023.05.17

React 001

개요 1. 리액트 2. 리액트 프로젝트 환경 3. 파일 구조 뜯어보기 이고잉님의 리액트 강의를 다 들었다. 막연히 자바스크립트를 마스터해야 리액트로 진입할 수 있겠다고 생각했는데, 들어보니 자바스크립트와 리액트는 또 조금은 다른 영역이라, 기본문법 정도 익히고 리액트로 넘어가서 부족한 부분은 틈틈히 보충하는 것이 맞는 것 같다. 초행길은.. 갈팡질팡 정신없도다. 아무튼, 그래서 대충 리액트가 뭐다~ 하는것과 prop, state 의 개념과 사용법 정도를 익혔으니 좀 더 디테일 하게 공부해보자! 스케치는 끝났다 😤 1. 리액트 메타에서 개발한 오픈 소스 자바스크립트 라이브러리. 리액트란, 일단 어렵게 생각할 필요없이 그냥 사용자정의태그를 만들 수 있게 해주는 기술이다! HTML태그 쓰듯이, 내가 원하는대로..

리액트 2023.05.17