DEVELOP
article thumbnail
[ JavaScript ] 프로그래머스 level1 문제 풀이 (5)
CODING TEST/Programmers 2023. 8. 4. 03:19

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 가장 가까운 같은 글자 #142086 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 ..

article thumbnail
[ JavaScript ] 프로그래머스 level1 문제 풀이 (4)
CODING TEST/Programmers 2023. 8. 2. 16:21

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 삼총사 #131705 문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째,..

article thumbnail
[ JavaScript ] 프로그래머스 level1 문제 풀이 (3)
CODING TEST/Programmers 2023. 7. 30. 02:46

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 약수의 개수와 덧셈 #77884 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ left ≤..

article thumbnail
[ React - 쇼핑몰 사이트 ] firebase와 연동하기
FRONTEND/React 2023. 7. 23. 01:41

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

article thumbnail
[ React - 쇼핑몰 사이트 ] admin - CRUD(상품 추가 & 수정 & 삭제) & 장바구니 삭제 상품 처리
FRONTEND/React 2023. 7. 19. 03:04

상품을 관리할 수 있는 어드민 페이지를 만들 것이다. 어드민 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:..

article thumbnail
[ React - 쇼핑몰 사이트 ] 무한스크롤 적용하기 - useInfiniteQuery & InterSectionObserver
FRONTEND/React 2023. 7. 18. 02:45

기존에는 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!..

article thumbnail
[ React - 쇼핑몰 사이트 ] json DB 생성 & resolver 연동 & 클라이언트에 DB 반영
FRONTEND/React 2023. 7. 16. 03:23

json DB 생성 dbController 작성 DBfield와 basePath, filenames를 정의한다. readDB와 writeDB를 정의한다. ▼ server/src/dbController.ts export enum DBfield { CART = "cart", PRODUCTS = "products", } const basePath = resolve(); const filenames = { [DBfield.CART]: resolve(basePath, "src/db/cart.json"), [DBfield.PRODUCTS]: resolve(basePath, "src/db/products.json"), }; export const readDB = (target: DBfield) => { try { r..

article thumbnail
[ React - 쇼핑몰 사이트 ] 클라이언트-서버 분리 & ApolloServer Schema, Resolver & Unexpected end of JSON input , Unknown file extension ".ts" 에러 해결
FRONTEND/React 2023. 7. 15. 03:05

클라이언트와 서버 분리 (모노레포) 모노레포 : 여러 개의 프로젝트를 단일 코드베이스 내에 저장하는 구조 현재까지 진행한 프로젝트 파일을 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..