분류 전체보기 139

Next.js - Slider 로 슬라이드 구현

Next.js 타입스크립트환경에서 Slider 컴포넌트를 만드는 과정을 기록해보려합니다. 1. npm 설치npm i react-slick slick-carousel 2. ImageSlider 컴포넌트생성"use client";import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";import { useState } from "react";import Slider from "react-slick";import Image from "next/image";import { FaCircle, FaRegCircle } from "react-icons/fa";interface ImageSliderProps { i..

React 2024.07.19

프로그래머스 - 주식가격 (Javascript) 풀이

문제초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 풀이- 반복문을 두번 돌리는데 만약 j 번쨰 요소 보다 i 번째 요소가 클 경우가 가격이 떨어진 것이기 때문에 break; 하면 끝납니다.function solution(prices) { var answer = new Array(prices.length).fill(0); for (let i = 0; i prices[j]) { break; } } } return answer;}

알고리즘 2024.06.16

프로그래머스 - 다리를 지나는 트럭 (Javascript) 풀이

문제트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. solution 함수의 매개변수로 다리에 올라갈 수 있는 트럭 수 bridge_lenth, 다리가 견딜 수 있는 무게 weight, 트럭 별 무게 truck_weights가 주어집니다. 이떄 모든 트럭이 다리를 건너려면 최소 몇초가 걸리는지 return 하도록 solution 함수를 완성하세요. 풀이- 문제에서 시간은 반복문을 통해 작업이 진행된 횟수이다. time = 0 선..

알고리즘 2024.06.15

프로그래머스 - 프로세스 (Javascript) 풀이

풀이1. 배열에 index를 부여해야한다. 예를들어 기존 배열 index로보면 0이 첫번째 1이 두번쨰... 이런식으로 가지만 해당 문제에서는 만약 큰 수가 존재하면 다시 넣어야 한다는 가정이 있다. 만약 0번째 index에 있는 데이터를 다시 넣게 된다면 0번 index 에서 arr.length-1 값이 되어 버린다. 그렇다면 location 인자로 주어지는 값은 다른 값을 가르키게 되는 것이다. 2. 먼저 map을 통해 숫자 배열을 객체배열로 변경하면서 fixIndex 프로퍼티를 추가한다. 3. while(true) 를 통해 실행하고, 배열에 첫번째 있는 값을 뽑아서 그 값이 가장 큰지를 체크하고 가장 크지 않으면 첫번쨰 있던 값을 맨뒤로 보낸다. 객체 배열이기때문에 처음에 부여한 인덱스는 fixIn..

알고리즘 2024.06.12

프로그래머스 - 기능개발 (Javascript) 풀이

풀이 [93, 30, 55] 라는 배열이 주어지고 각 개발 속도는 [1, 30, 5] 이다. 개발 속도를 구하는 식은 (100 - 현재 개발진행퍼센트) / 개발속도 이다. 93일 경우 (100 - 93) / 1 하면 되는데 이게 나누다가 소수점이 나오는 경우도 계속 발생하기에 Math.ceil 을 통해 올림을 해줘야 한다. Math.ceil((100 - 93) / 1)) 하면 된다. 이렇게 하면 개발완료까지 남은 일수를 모두 구할 수 있고 이걸 map 을 통해 수행한다. let days = progresses.map((progress, index) => Math.ceil((100 - progress) / speeds[index])); 그 다음 특정 변수에 첫번째 개발이 끝날때까지 남은 일수 즉 days의..

알고리즘 2024.06.09

프로그래머스 - 같은 숫자는 싫어 (Javascript) 풀이

풀이배열 arr의 각 원소는 0~9 까지로 이루어져있고 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려한다. 여기서 포인트는 연속적으로 반복되는 숫자를 제거하는 것이다. 임시 변수를 만들고 임시변수에 첫번째 인덱스 값을 넣어두고, 해당 값이랑 비교하면서 같지 않을 경우에 answer에 데이터를 넣고, 임시변수에 값도 해당 값으로 변경하면 된다. function solution(arr){ var answer = []; let temp = arr.shift(); answer.push(temp); for(var i = 0; i

알고리즘 2024.06.08

프로그래머스 - 추억 점수(Javascript)풀이

접근 1. 파라미터 name (사람 이름을 담은 문자열) , yearning (각 사람별 그리움 점수를 담은 정수배열), photo (이차원 문자열배열)2. 여기서 name과 yearning의 배열 길이는 항상 같다는 것을 알 수 있고, 그 값을 Map 에 모두 담습니다.3. 이차원 배열을 반복문 안에서 계속 순회하며 Map 에 만약 값이 있을 경우 그리움 점수가 있다 것을 알 수 있으니 해당 값을 다 더해서 answer  배열에 추가하면 된다.   function solution(name, yearning, photo) { var answer = []; var map = new Map(); for(var i = 0; i { let total = 0; ..

알고리즘 2024.06.05

프로그래머스 - 달리기 경주(Javascript)풀이

https://school.programmers.co.kr/learn/courses/30/lessons/178871?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 얀에서는 매년 달리기 경주가 열ㄹ비니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 떄 추월한 선수의 이름을 부릅니다. 예를들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 떄, 해설진이 "soe" 선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, ..

알고리즘 2024.05.08

Nest.js - onModuleInit, onModuleDestroy 서버 실행과 종료시 실행되는 로직 구현

먼저 프로젝트 세팅으로 시작합니다. nest new study-nest 다 만들어진 이후 해당 프로젝트 디렉토리에 접속하여 설정관련 클래스들을 넣을 모듈을 하나 생성합니다. nest g module config 여기서 구현해볼 상황은 웹서버가 실행되고 난 뒤 계속 지속적인 작업이 필요하고, 서버가 종료될 시 끝내야 할 작업이 필요할 때 상요하면 좋을 것이 OnModuleInit과 OnModuleDestroy 입니다. 두 인터페이스는 Nest.js 에서 지원하는 라이프 사이클 인터페이스 입니다. OnModuleInit 이 인터페이스는 해당 모듈이 초기화될때 실행되는 메서드 onModuleInit 을 구현해야합니다. 이 메서드는 Nest.js가 모듈의 종속성을 모두 해결한 후, 모듈 자체가 초기화될 때 호출..

Nest.js 2024.04.17

Moleculer - Node.js 프로젝트 세팅

Moleculer CLi 설치 npm install -g moleculer-cli 공식문서 - https://moleculer.services/docs/0.14/moleculer-cli.html 프로젝트 생성(타입스크립트) moleculer init project-typescript education 위 명령어를 입력시 여러 질문들이 나오는데 Gateway 관련부분을 yes 를 입력하면 자동으로 api.service.ts 가 만들어지면서 ApiGateway 가 mixins 옵션에 추가되는거 같다. (mixins 는 공식 문서에서 아래처럼 나와 있는데 결국 해당 서비스의 기능들이 모두 사용가능하게 된다는 것 같다.) 더보기 Mixins are a flexible way to distribute reusab..

Node.js 2024.04.13