전체 글
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 10WEB Dev/StudyNote 2023. 4. 23. 22:23
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-04-23 21:00 11일차 안내 - 10일차 글이 어디로 갔지 책 요약 정리 5장 프로젝트 개발 Ⅱ User 리졸버 create까지는 유저가 메모리에만 머무르고 insert 메서드를 통해 실제 디비에 작성된다. argon2로 안전하게 비밀번호를 해시 함수로 변경한다. class-vaildator로 유효성 검사 데코레이터로 email과 username, password의 유효성을 검사한다. 도커 mysql 시간대가 로컬과 맞지 않아서 docker run --name mysql-container -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=qwer1..
-
[React] 리덕스 간단하게 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 4. 17. 23:22
드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다. 📌 들어가며 리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다. 이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다. State를 사용하는 범위에 따..
-
[에러대백과] __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a functionWEB Dev/에러대백과 2023. 4. 12. 22:41
⛔ 에러 코드 //error __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function 💊 해결 방법 import ReactDOM from 'react-dom/client'; 문을 import ReactDOM from 'react-dom' 으로 변경해주면 오류는 사라진다. 하지만 콘솔에 from "react-dom" which is not supported. You should instead import it from "react-dom/client". 에러가 나고 있다. 리액..
-
[Javascript] 객체 다루기WEB Dev/Javascript | REACT | Node.js 2023. 4. 12. 00:14
서버에서 통신으로 받아온 객체 형태의 값을 다룰 때 자주 사용해야 하는 객체 다루기 방법들을 정리 📌 객체 안에 키, 값 쌍 더하기 (수정도 방법 동일) food라는 객체 안에 description이라는 키와 'Very cheesy vegetarian pizza' 이라는 값를 추가하려고 한다. const food = { id: 1, cost: "12,000", name: "Vegan Pizza", }; 🔸객체.키 or 객체[키] 사용하기 객체명에 점을 찍고 삽입할 키 이름을 작성한 다음 값을 할당해준다. 동일한 방법으로 대괄호에 키를 넣을 수 있다. 포인트는 대괄호에 key를 따옴표를 붙여 문자 처리를 해주어야 한다. key는 객체명을 따옴표로 묶 못하기 때문에 key명이 숫자나 .이 있는 경우, 공백이..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 09WEB Dev/StudyNote 2023. 4. 9. 20:19
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-04-02 21:00 9일차 안내 - 책 요약 정리 5장 프로젝트 개발 Ⅱ 회원가입 typeORM : 관계형 데이터베이스 모델 연결해주는 TypeORM으로 mysql을 연결한다. server 폴더 아래에 yarn add typeorm mysql2 로 typeorm과 mysql2 설치한다. 도커가 안돼서 오늘은 이만..
-
[React] useReducer Hook 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 4. 7. 00:53
이 예제는 Udemy의 React 완벽 가이드 강의에서 발췌하였습니다. 📌 들어가며 상태를 관리하다보면 상태를 변경하는 핸들러 함수가 무한히 많아지는 현상이 일어나고 그에 따라 상태도 같이 늘어난다. 그때마다 useState를 호출해서 하나씩 상태를 관리하기란 쉽지 않다. 이를 위해 리액트에게는 useReducer라는 강력한 무기가 있는데, 강력한 만큼 useState처럼 쉽게 쓸 수 없는 만만치 않은 훅이라 별도로 공부를 해본다. 📌 useReducer란 리액트의 상태 관리를 위한 훅(Hook) 중 하나로, 복잡한 상태를 관리하거나 상태 변경 로직을 별도로 분리할 필요가 있는 경우에 사용한다. useState로 많은 상태를 관리하는 것보다 useReducer로 상태를 묶어 관리하면 가독성 있는 상태 관..
-
[에러대백과] Typeorm createConnection deprecatedWEB Dev/에러대백과 2023. 4. 3. 18:31
⛔ 에러 코드 //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(더 ..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 08WEB Dev/StudyNote 2023. 3. 26. 22:50
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-26 21:00 8일차 안내 -금일 진도 161p -다음부터는 5장 서버에서 엔티티 만들고, 리졸브 만들고 리졸브를 가지고 올 수 있는 쿼리를 만들고 codegen으로 제너레이트 해주고 프론트에서 가져다 쓴다. 책 요약 정리 4장 프로젝트 개발 명장면 자세히보기 모달 ui를 구현하기 위해서 명장면 쿼리 필드를 구성한다. cutId를 이용해서 동일한 명장면을 반환하고 필드 리졸버를 구성해서 film 필드를 구성. @Root() 데코레이터로 상위 필드인 Cut에 접근하여 filmId값을 기준으로 id값이 일지하는 영화를 찾아 반환. 명장면 상세 정보 모달 창 구현 cut...
-
[React] 컨텍스트 Context 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 3. 22. 00:27
해당 내용은 SOAPLE 님의 처음 만난 리액트(React) 강좌에서 발췌하였습니다. 📌 들어가며 리액트에서 상태관리를 할 수 있는 방법은 다양하게 존재한다. 상태관리 라이브러리를 쓰기 전에 리액트 내장 훅으로 사용할 수 있는 Context API에 대해서 공부해보고자 한다. 📌 context란 리액트 개별 컴포넌트들은 props를 통해 데이터를 전달한다. (부모 ➡️ 자식) props를 통해 데이터를 전달하게 되면 다수의 컴포넌트에서 필요한 데이터는 Props Chain(Drilling) 현상이 일어난다. 이를 해결하기 위해 Context가 발전했다. 📌 context의 원리 리액트를 props 방식으로 운영할 때는 아래 그림과 같이 props를 props가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..
-
[Twitter] 트위터 픽셀 설치StartUP/GA | Marketing 2023. 3. 17. 16:00
멜론 머스크놈의 트위터가 갑자기 프로모션에 후해졌다. 돈 때문이겠지? 트위터 전환 추적을 위한 픽셀 설정하기 트위터에서 광고를 집행하였을때 메타에서 제공하는 것처럼 유저의 행동을 추적하여 전환율을 확인할 수 있다. 트위터에서 제공하는 픽셀을 설정하면 되는데 그 과정을 기록해본다. (이전에는 Twitter UWT나 Single Event Tag를 사용했다고 함. 이전에는 아마 공식 대행 업체를 사용해야만 트위터 프로모션을 집행할 수 있었던 것으로 기억) 트위터 픽셀을 생성하기 위해 참고할 문서는 아래와 같다. Conversion tracking for websites Learn about how to add and use conversion tracking for websites with Twitter A..