더보기더보기코딩테스트 연습 - 성격 유형 검사하기 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제를 풀기위해 아래와 같은 요소들을 고려하였다.객체를 효율적으로 활용하기 위해 key와 value를 배열로 변환하여 사용한다.더해줄 점수 값을 효율적으로 계산하기 위해 선택된 점수에서 4를뺀뒤 절댓값을 취하도록 한다.더보기더보기function solution(survey, choices) { let obj = {R:0, T:0, C:0, F:0, J:0, M:0, A:0, N:0} for(..

더보기더보기얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요.문제를 풀기위해 ..

더보기더보기더보기길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) =..

혼자서 혹은 개발자들끼리 특정 웹페이지를 만들려고 하면 디자인에서 어려움을 겪을 수 있는데 Uiverse.io 사이트를 활용하면 여러 상황에 맞는 UI들을 찾아서 사용할 수 있다. HTML과 CSS로 단순하게 제공되어서 원하는 프로젝트에 편리하게 사용할 수 있다.TailwindCSS로 제공되는 요소들도 많이 있어서 필요에 따라 선택하여 사용할 수 도 있다. Uiverse | The Largest Library of Open-Source UI elements Uiverse | The Largest Library of Open-Source UI elementsCommunity-made library of free and customizable UI elements made with CSS or Tailwin..

웹페이지를 개발할때는 HTML, CSS, JavaScript를 사용한다. 여러 환경에서 사용되는 다양한 웹브라우저(Chrome, Edge, Safari 등)들은 모두 동일한 웹 기술을 보장하지 않는다. 브라우저 종류 뿐 아니라 버전에 따라서도 호환성이 달라지는데 사용자에게 균일한 웹 환경을 제공하기 위해서는 호환성을 확인할 필요가 있다. Can I Use 사이트를 활용하면 각 브라우저에서 어떤 웹 기술이 호환되는지 빠르게 확인할 수 있다.  화살표 함수는 비교적 최근의 자바스크립트 버전인 ES6에서 업데이트되었다. ES6의 주요 기능이 호환되지 않는 IE 브라우저를 포함하여 여러 구버전 브라우저에서 지원하지 않는것을 확인할 수 있다. 자바스크립트 외에도 HTML 요소인 시맨틱태그나 CSS 속성들도 검색해..

더보기더보기당신은 동영상 재생기를 만들고 있습니다. 당신의 동영상 재생기는 10초 전으로 이동, 10초 후로 이동, 오프닝 건너뛰기 3가지 기능을 지원합니다. 각 기능이 수행하는 작업은 다음과 같습니다.10초 전으로 이동: 사용자가 "prev" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 전으로 이동합니다. 현재 위치가 10초 미만인 경우 영상의 처음 위치로 이동합니다. 영상의 처음 위치는 0분 0초입니다.10초 후로 이동: 사용자가 "next" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 후로 이동합니다. 동영상의 남은 시간이 10초 미만일 경우 영상의 마지막 위치로 이동합니다. 영상의 마지막 위치는 동영상의 길이와 같습니다.오프닝 건너뛰기: 현재 재생 위치가 오프닝..

next.js의 클라이언트 컴포넌트에서 세션스토리지를 사용하면 세션스토리지가 정의되어있지 않다는 에러(ReferenceError: sessionStorage is not defined)가 발생한다. 사용자의 브라우저에 있는 세션스토리지를 사용하기위해서는 클라이언트측에서 sessionStorage가 사용되도록 해야한다. next.js는 기본적으로 서버측에서 페이지를 만드는 SSR 환경이기때문에 단순히 가져다 사용할경우 에러가 발생한다. 이를 해결하기 위해서는 조건부 실행, 클라이언트 사이드 함수 활용 등의 방법이 있다. 1. 조건부 실행 (window 객체 검사)window의 정의여부를 검사하여 현재 코드가 서버에서 실행되고 있는지 클라이언트에서 실행되고 있는지를 알 수 있다.아래와 같은 코드로 조건부 실..

Grid에 항목들을 채워넣다보면 기존에 정해놓은 그리드 사이즈를 초과하여 공간을 차지하게 되는 경우가 있다.그리드 컨테이너안에 들어있는 아이템 내부도 원하는 항목들로 채워넣게 되는데 내부 항목들의 종류나 길이에 따라 이러한 문제가 발생하기도 한다.이는 그리드의 각 아이템에서 해결하는 방법이 있고 그리드 컨테이너 설정 자체에서 해결하는 방법이 있다. 1. 그리드 아이템에서 해결하기텍스트의 white-space 속성으로 인해 문제가 발생할 수 있다.원래 텍스트의 길이가 길어지면 정해진 width를 넘어갈때 자동으로 줄바꿈된다.하지만 텍스트가 길때 자동으로 생략 처리 하고싶거나 여러가지 텍스트 표시방법을 바꿀때 white-space 속성을 사용하게 된다. white-space 속성은 HTML요소의 공백과 줄바..