서버에서 통신으로 받아온 객체 형태의 값을 다룰 때 자주 사용해야 하는 객체 다루기 방법들을 정리 📌 객체 안에 키, 값 쌍 더하기 (수정도 방법 동일) food라는 객체 안에 description이라는 키와 'Very cheesy vegetarian pizza' 이라는 값를 추가하려고 한다. const food = { id: 1, cost: "12,000", name: "Vegan Pizza", }; 🔸객체.키 or 객체[키] 사용하기 객체명에 점을 찍고 삽입할 키 이름을 작성한 다음 값을 할당해준다. 동일한 방법으로 대괄호에 키를 넣을 수 있다. 포인트는 대괄호에 key를 따옴표를 붙여 문자 처리를 해주어야 한다. key는 객체명을 따옴표로 묶 못하기 때문에 key명이 숫자나 .이 있는 경우, 공백이..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-04-02 21:00 9일차 안내 - 책 요약 정리 5장 프로젝트 개발 Ⅱ 회원가입 typeORM : 관계형 데이터베이스 모델 연결해주는 TypeORM으로 mysql을 연결한다. server 폴더 아래에 yarn add typeorm mysql2 로 typeorm과 mysql2 설치한다. 도커가 안돼서 오늘은 이만..

이 예제는 Udemy의 React 완벽 가이드 강의에서 발췌하였습니다. 📌 들어가며 상태를 관리하다보면 상태를 변경하는 핸들러 함수가 무한히 많아지는 현상이 일어나고 그에 따라 상태도 같이 늘어난다. 그때마다 useState를 호출해서 하나씩 상태를 관리하기란 쉽지 않다. 이를 위해 리액트에게는 useReducer라는 강력한 무기가 있는데, 강력한 만큼 useState처럼 쉽게 쓸 수 없는 만만치 않은 훅이라 별도로 공부를 해본다. 📌 useReducer란 리액트의 상태 관리를 위한 훅(Hook) 중 하나로, 복잡한 상태를 관리하거나 상태 변경 로직을 별도로 분리할 필요가 있는 경우에 사용한다. useState로 많은 상태를 관리하는 것보다 useReducer로 상태를 묶어 관리하면 가독성 있는 상태 관..

⛔ 에러 코드 //error Connection is a single database ORM connection to a specific database. Its not required to be a database connection, depend on database type it can create connection pool. You can have multiple connections to multiple databases in your application. @deprecated node.js 생태계의 데이터베이스 ORM 라이브러리인 TypeORM 설치 후 책에 나온 코드를 따라 입력하니 Connection 과 createConnection 메소드에 취소선이 그어지고, deprecated(더 ..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-26 21:00 8일차 안내 -금일 진도 161p -다음부터는 5장 서버에서 엔티티 만들고, 리졸브 만들고 리졸브를 가지고 올 수 있는 쿼리를 만들고 codegen으로 제너레이트 해주고 프론트에서 가져다 쓴다. 책 요약 정리 4장 프로젝트 개발 명장면 자세히보기 모달 ui를 구현하기 위해서 명장면 쿼리 필드를 구성한다. cutId를 이용해서 동일한 명장면을 반환하고 필드 리졸버를 구성해서 film 필드를 구성. @Root() 데코레이터로 상위 필드인 Cut에 접근하여 filmId값을 기준으로 id값이 일지하는 영화를 찾아 반환. 명장면 상세 정보 모달 창 구현 cut...

해당 내용은 SOAPLE 님의 처음 만난 리액트(React) 강좌에서 발췌하였습니다. 📌 들어가며 리액트에서 상태관리를 할 수 있는 방법은 다양하게 존재한다. 상태관리 라이브러리를 쓰기 전에 리액트 내장 훅으로 사용할 수 있는 Context API에 대해서 공부해보고자 한다. 📌 context란 리액트 개별 컴포넌트들은 props를 통해 데이터를 전달한다. (부모 ➡️ 자식) props를 통해 데이터를 전달하게 되면 다수의 컴포넌트에서 필요한 데이터는 Props Chain(Drilling) 현상이 일어난다. 이를 해결하기 위해 Context가 발전했다. 📌 context의 원리 리액트를 props 방식으로 운영할 때는 아래 그림과 같이 props를 props가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..