전체 글 383

[프로그래머스] 코드 처리하기

문제 설명 문자열 code가 주어집니다. code를 앞에서부터 읽으면서 만약 문자가 "1"이면 mode를 바꿉니다. mode에 따라 code를 읽어가면서 문자열 ret을 만들어냅니다. mode는 0과 1이 있으며, idx를 0 부터 code의 길이 - 1 까지 1씩 키워나가면서 code[idx]의 값에 따라 다음과 같이 행동합니다. mode가 0일 때 code[idx]가 "1"이 아니면 idx가 짝수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 0에서 1로 바꿉니다. mode가 1일 때 code[idx]가 "1"이 아니면 idx가 홀수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 1에서 0으로 바꿉..

기존의 Loding Bar -> Skeleton UI 교체

기존의 Loding bar로 표현되었던 걸 Skeleton UI를 직접 구현하여서 교체하였다. 교체 한 이유는 기존의 Loading Bar보다 사용자에게 좀 더 자연스러운 UI를 보여주고 싶어서입니다. 아래는 제가 직접 구현 한 코드입니다. {Array.from({ length: 6 }).map((_, index) => { return ( ); })} const loading = keyframes`{ 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }`; const Container = styled.div` padding-top: 27rem; width: 100%; display: flex; justify-content: center; `; ..

지식 정리 📝 2023.11.20
[프로그래머스] 영어 끝말잇기

문제 설명 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 ..

[프로그래머스] 다항식 더하기

문제 설명 한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해 보세요. 같은 식이라면 가장 짧은 수식을 return 합니다. 제한사항 0

Vite 프로젝트에서 개발 서버와 실서버 구분하는 방법

오늘 프로젝트 QA처리 도중 개발 서버와 실서버 모두 같은 이름의 사용자를 띄워줘야 하는 상황이 있었습니다. 이때 같은 이름의 사용자를 불러오는 key가 staffId였는데 개발서버와 실서버의 staffId값이 서로 다른 상황이라 구분을 해줄 수 있어야 했습니다. 이때 참고 한 문서가 아래의 링크입니다. https://ko.vitejs.dev/guide/env-and-mode.html Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev import.meta.env.MODE -> 이 문구를 console.log()로 찍어보면 개발 환경일 때는 즉 local인 경우에는 'development'를 출력하고 개발 환경이 아닌 경우에는 ‘production'를 출력한다. 이를 통해 문제를 해결..

지식 정리 📝 2023.11.15
[프로그래머스] 배열 만들기 2

문제 설명 정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 "0"과 "5"로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 만약 그러한 정수가 없다면, -1이 담긴 배열을 return 합니다. 제한사항 1 ≤ l ≤ r ≤ 1,000,000 입출력 예 l r result 5 555 [5, 50, 55, 500, 505, 550, 555] 10 20 [-1] 나의 풀이 function solution(l, r) { const answer = []; for(let i=l; i num === '0' || num === '5')) continue answer.push(i) } return answer.length > 0 ? answe..

[프로그래머스] 짝지어 제거하기

문제 설명 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. 제한사항 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있습니다. ..

Jsp 에서 Template literals(``) 변수 사용 법

React가 아닌 Jsp 환경에서 함수 작성 중 변수로 받은 값들이 console.log()에는 잘 출력되는데 변수를 활용할 때는 값이 제대로 출력되지 않는 어려움을 겪었다. 이때 회사 선배분이 해결법을 알려주셔서 아래와 같이 적용했더니 해결할 수 있었다. function markPosition(mark, target){ let markBox = document.querySelector(`.markBox\${target}`); }

지식 정리 📝 2023.11.09