WEB Dev
-
[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가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..
-
[React] 원티드 프리온보딩 프론트엔드 Day4WEB Dev/StudyNote 2023. 3. 16. 21:31
😃 원티드 프리온보딩 프론트엔드 Day4 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 로그인이란? 사용자 식별, 인증, 권한 부여. 클라이언트에서 전달한 사용자 정보를 식별하고 서버에서는 인증한 정보를 세션이나 토큰에 담아 돌려 준다. 더보기 저작권으로 인하여 추후 손그림으로 변경할 예정입니다. 세션이란? 사용자가 로그인하고 로그아웃 할 때까지의 시간. 이것을 세션 id를 이용해 쿠키로 저장을 한다...
-
[Javascript] <script>의 실행 순서를 결정하는 속성 aysnc와 deferWEB Dev/Javascript | REACT | Node.js 2023. 3. 15. 11:42
카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다. 나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고 개별 페이지에 적용해야 하는 스크립트는 별도로 로 import를 해주는데 카페24는 나름대로 노코딩 툴이기 때문에 라는 카페24만의 문법이 존재한다. 카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면 원하는 기능이 제대로 작동이 안 되는 경우가 있다. 특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...! DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다. 그래서 가끔은 html 내에 를 직접 넣어서 스크..