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

AI가 그려주는 그림일기 서비스 [여름방학]의 프론트엔드를 개발 중이다. 특별한 이슈가 없다면 3월 초에는 서비스가 출시될 예정이다. React로 개발했으며, 타겟 환경은 모바일이다. 개발 중에는 테스트를 크롬 브라우저에서 하다보니, 모바일에서 실제로 일어나는 이슈 등을 확인하기 어려운데, 배포 후 모바일에서 확인 시에 하나의 문제점까지는 아니지만, 사용자 입장에서 불편할 수도 있는 사소한 이슈를 발견하였다. 지금까지 내가 진행했던 프로젝트 중에서 모바일을 주 타겟으로 잡은 경우가 거의 없어서 지금까지는 아마 발견을 못했던 것 같다. 이슈 🔨 이슈는 input 또는 textarea 태그에서 사용자가 입력하려고 클릭하여 액티브가 되었을 때, 화면이 확대되는 이슈 이다. 이 이슈의 문제는 모두 작성하고 나서..

React에서 페이지네이션과 sorting(최신순 / 별점높은순) 을 구현하고자 한다. 현재 리뷰리스트를 뿌려주는 페이지를 구현 중이다. 백엔드에서 sortType과 pageNum에 따라 데이터를 뿌려주며, 전체 데이터 수도 전달받는 다는 가정 하에 진행한다. URL 주소의 파라미터 http://localhost:3000/review?sort=latest&page=1 위와 같은 방식으로 sort 방식과 page를 파라미터로부터 받아와서 맞는 데이터를 뿌려줄 것이다. // src/pages/ReviewListPage/ReviewListPage.jsx /* 리뷰페이지 url로부터 params 값 가져오기 */ const location = useLocation(); const sort = new URLSea..

결과물 미리보기 모바일 버전에서는 모든 메뉴를 나열하기에 너비가 부족하므로 메뉴 버튼을 클릭했을 때만 메뉴가 보이고, 닫을 수 있도록 반응형으로 구현하고자 한다. 반응형 너비 기준 반응형 너비 나누는 기준은 아래와 같이 적용했다. 테블릿 버전일경우 달라지는 것은 폰트 사이즈 변경뿐이기에 자세한 설명들은 생략하고 모바일 버전일 때를 주로 다루겠다. /* 노트북 & PC (해상도 1024px)*/ @media screen and (min-width:1024px) { 스타일 입력 } /* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ @media screen and (min-width:768px) and (max-width:1023px) { 스타일 입력 } /* 모바일 가로, 모바일 세로..

리엑트 네이티브 껍데기에 알맹이는 리엑트 웹사이트인 웹뷰를 제작한다. Expo 프로젝트 시작하기 npx create-expo-app app-name Ok to proceed? (y) y EAS CLI 설치 npm install -g eas-cli react-native-webview 라이브러리 설치 npx expo install react-native-webview WebView 컴포넌트 불러오기 import * as React from "react"; import { WebView } from "react-native-webview"; import { StyleSheet } from "react-native"; import Constants from "expo-constants"; export defa..

Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com 회원가입 및 로그인, 팀 생성 과정은 생략 Add new site - Import an existing project 연동 원하는 깃 레포지토리 선택 빌드 설정해주기 레포지토리 안에 프론트/백을 나누어 관리중이라면 프론트 폴더(client)를 Base directry에 입력한다. build command 는 CI=..

디바운싱(debouncing)이란? -> 변화하는 도중에는 효과가 발생 안 하다가, 멈출 시 효과가 발생하는 것 디바운싱 구현 with setTimeout / clearTimeout 전역 변수로 timer 변수를 정의한다. setTimeout을 실행하는 타이머를 이 timer에 저장한다. 특정 이벤트(여기에서는 input)리스너를 등록한다. 만약 timer 값이 있다면, 아직 타이머에 설정한 시간이 지나지 않았으므로, 다시 타이머를 초기화해준다. (clearTimeout) timer에 setTimeout를 저장하며, 실행될 코드를 안에 작성한다. let timer; $(window).resize(function() { clearTimeout(timer); timer = setTimeout(function..

firebase의 firestore를 db로 사용할 것이다. 파이어베이스 연동 server 디렉토리에서 파이어베이스 dependency를 설치한다. yarn add firebase ▼ server/firebase.js 파이어베이스의 튜토리얼을 따라 아래 내용이 포함되도록 파이어베이스 설정을 한다. 파이어베이스 쿼리 작성 상품 쿼리 작성 ▼ server/resolvers/product.ts createAt 기준으로 내림차순 정렬 startAt 옵션은 쿼리 결과의 시작 지점을 지정한다. unshift() : 배열 앞에 새로운 값을 추가하고 배열의 전체 개수를 리턴함 / shift() : 배열의 맨 앞 값을 삭제하고 삭제한 값을 리턴함 where 옵션은 쿼리를 필터링하는 데 사용된다. (특정 조건을 만족하는 ..

상품을 관리할 수 있는 어드민 페이지를 만들 것이다. 어드민 api 작성 addProduct : 상품 추가 updateProduct : 상품 수정 deleteProduct : 상품 삭제 상품 삭제의 경우에는 실제 db에서는 삭제하지 않는 대신에 삭제한 상품임을 flag처리하기 위해서 해당 상품의 createdAt정보를 지울 것이다. schema 작성 Mutation의 schema를 정의한다. ▼ server/src/schema/products.ts extend type Mutation { addProduct( imageUrl: String! price: Int! title: String! description: String! ): Product! updateProduct( id: ID! imageUrl:..

기존에는 product 갯수가 20개였지만, 60개로 늘려서 product.json 파일을 수정한다. 60개의 상품을 4개의 페이지로 나눈다고 생각하면 id 1~15번인 15개의 상품을 먼저 보여주고, 커서가 끝까지 갔을 때 id가 16~30번인 15개의 상품을 보여주고 ... 하는 식으로 무한 스크롤로 페이지를 나눌 수 있다. 무한스크롤 적용하기 커서 Pagination 서버에서 cursor를 argument로 받아주어야 한다. 커서를 아이디 값으로 하면 그 값에 따라 상품이 변경되어 보이게 할 수 있다. ▼ server/src/schema/products.ts extend type Query { products(cursor: ID): [Product!] product(id: ID!): Product!..