내가 보려고 정리하는 리액트 애플리케이션에 카카오톡 공유 기능 추가하는 법 ! KaKao Developers 애플리케이션 추가등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 사용자에게 보여질 앱 아이콘과 앱 이름, 사업자명을 작성하고나면, 앱 아이디와 앱 키들을 확인할 수 있다. 플랫폼 등록하기 나는 React로 개발했으므로, 좌측 메뉴 플랫폼 > Web 플랫폼 등록에 들어간다. 본인이 배포한 도메인을 넣어주면 되고, 개발 모드에서 로컬에서 테스트 가능해야 하기 때문에 로컬 주소도 넣어준..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리덕스를 사용하는 이유 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있다. 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며,..

클라이언트와 서버 분리 (모노레포) 모노레포 : 여러 개의 프로젝트를 단일 코드베이스 내에 저장하는 구조 현재까지 진행한 프로젝트 파일을 client와 server를 따로 두어 분리할 것이다. client workspace - 먼저, 현재 까지의 파일들을 모두 client 디렉토리에 넣는다. - package.json 파일의 name 속성을 client로 변경한다. - "name": "client", 루트 프로젝트 - 루트 프로젝트 경로에서 yarn init -y를 입력하고, package.json 파일이 생긴 것을 확인한다. - package.json에 아래를 추가한다. "private": true, "workspaces": [ "client", "server" ], "scripts": { "clien..

장바구니 상태관리(recoil) 선택된 상품에 대한 상태관리를 하기 위해 checkedCartState를 recoil로 관리한다. ▼ src/recoils/cart.ts export const checkedCartState = atom({ key: "cartState", default: [], }); }); 결제창 연결하기 Pick 기존 타입에서 원하는 속성만 선택하여 새로운 타입을 생성하는 역할을 한다. Pick을 사용하면 기존 타입에서 필요한 일부 속성만 선택하여 새로운 타입을 만들 수 있다. Pick itemData 컴포넌트 분리하기 ▼ src/components/cart/itemData.tsx const ItemData = ({ imageUrl, title, price, }: Pick) => { ..

쇼핑몰 dummy data https://fakestoreapi.com 위 사이트에서 읽어올 것이다. Fake Store API Fake store rest api for your ecommerce or shopping website prototype fakestoreapi.com React-query 사용하기 Quick Start | TanStack Query Docs This example very briefly illustrates the 3 core concepts of React Query: Queries tanstack.com react-query 다운로드 yarn add react-query react-query dev-tool 사용 import { ReactQueryDevtools } fr..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com Header 컴포넌트 작성하기 ▼ components/Header.tsx import Link from 'next/link'; import styles from '../src/styles/header.module.scss'; interface Props {} const HeaderComponent = ({}: Props) => { return ( ); }; export ..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com getStaticProps gatStaticProps 함수에서 리턴된 props를 받아서 pre-rendering할 수 있다 ▼ src/pages/section1/getStaticProps.tsx ▽ 2초 대기 후 랜덤한 값을 data로 리턴하고 그 값을 받아 화면에 출력하는 기능을 한다. import type { NextPage } from 'next'; interfa..

인프런 '박용주 지식 공유자님' 의 [Next.js 시작하기] 강의를 수강하고 작성한 게시글입니다. Next.js 시작하기(feat. 지도 서비스 개발) - 인프런 | 강의 Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다., - 강의 소개 | 인프런... www.inflearn.com 프로젝트 생성 $ npx create-next-app@latest --typescript ESLint # ESLint : 코드에 대한 룰 $ npm rin lint - .eslintrc.json 파일이 자동 생성되며, 권장 사항인 next/core-web-vitals 라는 룰로 설정된다. Prettier # Prettier : 코드를 좀 더 깔끔하게 만들어주는 code ..

[노마드 코더 - NextJS 시작하기] 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co getServerSideProps - SSR를 선택할 수 있게 한다. ▼ myapp/src/pages/index.tsx import { GetServerSideProps } from "next"; /* ... */ const Home = ({ results }: { results: movie[] }) => { return ( {results?.map((movie) => ( /* ... */ export const getServerSideProps: GetServ..

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관 www.inflearn.com 타입 추론 (Type Inference) - 변수를 선언하거나 초기화 할 때 타입이 추론된다. - 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다. - 아래 코드에서 x의 타입을 지정하지 않아도 number로 간주된다. let x = 2; Best C..