분류 전체보기
-
[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..
-
[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 내에 를 직접 넣어서 스크..
-
[CSS] 폰트 안티앨리어싱 Anti-AliasingWEB Dev/HTML | CSS 2023. 3. 14. 12:22
윈도우와 맥에서 브라우저 폰트 렌더링이 조금 다른 경우가 있다. 같은 폰트라도 맥과 윈도우에서 차이가 좀 있는데 윈도우가 조금 더 계단식으로 번지는 느낌인데 사실 폰트차도 좀 심하다. 맥에서는 이 같은 현상을 해결하는 안티 앨리어싱 Anti-Aliasing이 적용되고 있지만 윈도우에서는 가끔 느껴진다 😭 이 부분을 수정하기 위해서는 폰트 안티앨리어싱을 적용해주어야 한다. 안티앨리어싱을 원하는 span, p, heading 태그 등에 아래와 같이 아주 약간의 회전을 주면 윈도우에서 안티앨리어싱을 적용해준다. span{ transform: rotate(0.04deg); } 적용 전 적용 후 사실 무슨 차이인지 모르겠는 . 사실 이 글을 쓴 이유는 저 페이지들을 처음 마크업 할 때는 반드시 넣어서 맥과 윈도우..
-
[React] 원티드 프리온보딩 프론트엔드 Day3WEB Dev/StudyNote 2023. 3. 13. 21:37
😃 원티드 프리온보딩 프론트엔드 Day3 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 지난 시간 리뷰 JWT는 Json Web Token 토큰에 대한 명칭, 토큰을 만드는 기술 Json으로 받아서 로컬스토리지에 저장해놨다가 헤더에 담아 요청을 보낸다. cURL은 터미널에서 커맨드라인으로 url을 호출하는 기능으로 Command line url이라는 뜻 3강. 세션기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐 ..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 07WEB Dev/StudyNote 2023. 3. 12. 21:52
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-03-12 21:00 7일차 안내 -금일 진도 150p 책 요약 정리 4장 프로젝트 개발 명장면 스키마 설계 CutResolver는 cuts 쿼리 필드를 가지고 해당 필드는 filmId를 인자로 받아 해당 영화의 filmId를 지닌 Cut 배열을 반환한다. resolver 에 CutResolver 추가 명장면 목록 정보 UI 구성 타입 만들고 리졸버 만들고... 요청 훅과 타입 정의를 생성하고 명장면 목록 컴포넌트를 구성 yarn codegen 을 통해 생성한 useCutsQuery에 쿼리 변수로 부모 컴포넌트로 부터 받아온 filmId를 넘겨준다. 그리고 응답된 데이터와 ..