Graphql apollo-client 초기셋팅 설정

리엑트 리덕스 설치 명령어store 생성store를 생성할 때 반드시 주입해 주어야하는것은 Reducer 이다.reducer의 역할은 store안에있는 state를 어떻게 바꿀것인가를 결정하는 역할을 한다.reducer는 두개의 파라미터를 받는다provider, use

구글 로그인을 리액트에서 구현하기위한 방법을 적은 포스트

모달같은 컴포넌트는 모달 전체가 렌더링 되는 곳에 실제로 렌더링 되어서는 안된다.실제 렌더링 되는 곳위와 같이 렌더링 되어서는 안된다. → 물론 렌더링 되었을때 위와 같이 되어도 사용자 UI에는 모달창이 보이지만 코드 적으로 이는 좋은 코드는 아니다.프로젝트에서 Mod

리액트의 JSX 문법의 제한사항과 그에 대한 해결방법

Cors 이슈 간략하게 cors이슈란 서로 다른 포트끼리 통신할때 발생하는 error이다. Cross-Origin Resource Sharing 으로 브라우저에서 어떤 리소스를 허용하고자 할때에 다른 포트에서온 정보에 대해서 어떤 보안적인 규칙을 지켜야 한다는 이슈가

리액트 타입스크립트 프로젝트 생성 npx create-react-app \[프로젝트 명] --template typescript컴포넌트 생성index.js 에 npm에 배포할 컴포넌트 설정tsconfig.json 에 npm 배포전 환경 설정4-1. 해당 tsconfig

MongoDB 사이트로 이동회원가입후 무료 (Share) DB 생성사용자 이름 & 비밀번호 작성사용자 IP 등록 // 임시적으로 배포를 하기위해서 0.0.0.0/0 을 통해 모든 아이피 허용생성된 DB에서 connect를 눌러서 Connect your applicati

파일 생성 = ex) server 명칭으로 파일 생성파일 생성후 node 초기화 작업 = npm init -yserver 파일에 index.js 파일 생성3-1. index.js 파일에 express 코드 작성 (초기 서버 생성 및 요청&응답)pakage.json 파일

리액트에서 useState 를 사용하는 이유리액트가 사용자의 인터렉션을 최소화 시켜주기위해 사용하는웹 어플리케이션이다.기존에는 사용자의 ui가 변경될때 웹의 새로고침이 필요하였는데리액트의 state를 사용하게 되면값이 바뀐다고 하더라도 새로고침없이 사용자에게 변경된

2차 프로젝트 회고록..사실 이번 회고록은 시간이 지나고 나서 작성하는 회고록이다..회고록이란건 바로 작성하여 내가 어떤일을 잘하였고 못하였고 등등을 적으면서회고를 하는것인데 그러지 못한점이 아쉽다.그러지 못한이유를 변명삼아 적어보자면2차 프로젝트의 결과물이 썩 마음에

프로젝트 회고록이번에 나이키 클론 코딩 프로젝트를 팀단위로 진행 하였다.처음하는 프로젝트인 만큼 처음에는 떨리기도 하고, 잘 할수 있을지 걱정도 되었지만 이렇게 끝나고 회고록을 작성하고 있는걸 보니 그래도 잘 끝난 것 같다.각설하고 회고록이란 내가 과거를 돌아 보면서

콜백함수에서 콜백 지옥에 빠지지 않기위한 Promise 사용 방식에 대한 복습위와같이 then을 이용해서도 할 수 있지만 보다 가독성과 쉽게 사용하기 위해서async과 await을 이용하여 나타낼수 있다.위와 같은 형식으로 async 문법을 이용해서 콜백 함수로 불러올

라이프사이클 메서드의 이해라이프사이클은 총 세 가지, 마운트, 업데이트, 언마은트 카테고리로 나뉜다.마운트 -> 업데이트 -> 언마운트마운트DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트 라고한다.컴포넌트 만들기 -> constructor -> getDerive

복습할 내용: 자바스크립트 배열의 map() 메서드 & 함수 컴퍼넌트에서 map() 메서드를 이용한 내용추가 기능Javascript - Array.prototype.map()Array(배열)의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.m

4편에서 배열과 객체의 state사용법에 대해서 적을려고했는데 배열부분만 적었다. 객체 부분은 후에 좀더 react에 대해서 알고 난뒤에 적어야함 (어려움)이번편은 이벤트 핸들링에 대한 복습이다.이벤트 핸들링시 주의사항본격적인 이벤트 핸들링 복습이전 주의 사항에 대해서

state를 사용할 때 주의 사항 (배열 & 객체 업데이트 방식)state의 값을 변경해 주기 위해서는 setState를 통해 전달받은 셰터 함수를 사용해야하는데 배열과 객체를 업데이트 하기위해서는 일반적인 업데이트 방식과는 차이가 있다위의 컴퍼넌트를 보면 let ch

리액트를 다루는 기술 3탄 까지 와버렸네요...이번편은 2탄에서 이어지는 편입니다.한 컴포넌트에서 useState 여러 번 사용하기useState는 한 컴포넌트에서 여러번 사용이 가능합니다.해당 컴포넌트에는 state를 하나더 추가하여 message 의 색상을 변경해주

오늘도 리액트를 다루는 기술 책을보며 React의 기초에 대해서 복습해 본다. >State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의마한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이여, 컴포넌트 자신은 해당 pr

리액트를 다루는 기술이란 책을 읽고 정리한 React 정리본