개 친 바

[HTML] 노마드코더 코코아톡 클론코딩 1일차

안댕이 — Wed, 14 Aug 2024 17:49:22 +0900

SASS를 공부하려고 했다.

이전에 노마드코더에서 바닐라 JS 강의를 재밌게 들었던 기억이 있어서 들어가서 강의를 보는데,

SASS를 시작하기 전에 HTML, CSS부터 복습하는 건 어떨까? 라는 생각이 들었다.

회사에서 쓰는 코드는 생각보다 한정되어 있고, 쓰는 태그만 쓰다보니 (사랑하는 flex)

다른 태그들에게 소홀해졌기에 복습도 할 겸 강의 들여다보다가 평생수강권 결제해버렸다.

커리큘럼을 보니 거의 아는 내용이었지만, 기초부터 탄탄하게 복습해보자는 생각!!!

커리큘럼에 git 강의까지 포함되어 있어서 이 강의로 선택했다.

또한 2주 챌린지로 14일동안 매일매일 과제 12개를 해내야한다. 2번 이상 결석 시 가차없이 탈락...

퇴근하고 집에서 공부하기 쉽지 않았는데, 강제성이 필요할 것 같아서 챌린지도 신청했다!!!

챌린지 시작하기 전까지 강의 다 들어야지.

(9/9 - 9/23)

시맨틱 태그

시맨틱 태그 : HTML5에서 도입된 태그들로, 웹 페이지의 구조와 의미를 명확하게 나타내기 위해 사용

<header> 머리말. 로고, 내비게이션 메뉴, 사이트 제목 등

<nav> 내비게이션 링크

<main> 문서의 주요 컨텐츠, 문서의 핵심 내용

<section> 문서의 주요 컨텐츠 영역 내에서 특정 주제, 기능을 구분. 일반적으로 각각의 제목을 가지며 독립적인 주제

<article> 독립적이고 자족적인 컨텐츠. 블로그 포스트, 뉴스기사 등 문서 내에서 개별적으로 의미를 가지는 부분에 사용

<aside> 주요 콘텐츠와는 관련이 있지만, 부가적인 정보를 나타냄. 사이드바 등

<footer> 바닥글. 저작권 정보, 소셜 링크, 추가적인 내비게이션 링크 등

<figure> 이미지, 차트, 다이어그램 등 독립적인 컨텐츠를 포함하는 영역

<figcaption> <figuer> 태그에 포함된 컨텐츠에 대한 설명 제공

시맨틱 태그의 장점

1. 접근성 향상

2. SEO 개선

3. 유지보수 용이성

자주 사용하는 태그

<h1> ~ <h6> 제목

<ol> (orderd list) 순서가 있는 목록

<ul> (unorderd list) 순서가 없는 목록

<li> (list item) 목록 요소

<a> 앵커 태그, 페이지 연결. href="이동 경로"

<img> 이미지, src="이미지 경로"

<span> 짧은 텍스트

<p> 긴 텍스트, 문단

<abbr> 준말/머릿말, title="설명" 작성 시 마우스 hover하면 출력됨

<q> 짧은 인용문

<blockquote> 긴 인용문

<cite> 인용 출처
<code> 짧은 코드 조각
<mark> 하이라이트

form 태그

<form> HTML에서 사용자 입력을 받아 서버로 전송할 때 사용되는 태그. (코코아 클론코딩에서는 JS를 다루지 않기 때문에 단순 구조만 작성했다.)

<input> 사용자로부터 데이터를 입력받는 여러 종류의 필드. type 손성에 따라 다양한 입력 필드 생성

`<input>` type 속성

button	기본 동작이 없는 버튼
checkbox	단일 값을 선택/선택 취소 할 수 있는 체크박스
color	컬러팔레트 입력
date	날짜 입력 (년,월,일 시간x)
datetime-local	날짜, 시간
email	이메일 입력
file	파일 선택, (accept로 선택할 수 있는 파일 유형 선택)
hidden	표시되지 않지만 값이 서버로 제출됨
month	년, 월 입력
week	년, 주
time	시간
number	숫자 입력
password	값이 가려진 텍스트
radio	하나의 값을 선택할 수 있는 라디오버튼
range	범위 컨트롤
reset	폼의 내용 리셋 (권장하지 않음)
search	검색. (줄바꿈은 입력값에서 자동으로 제거)
submit	양식 제출
tel	전화번호
url	url 입력
test	기본값 (줄바꿈은 입력값에서 자동으로 제거)

<textarea> 여러 줄의 텍스트 입력

<label> 입력 필드에 대한 설명(레이블) 제공. 레이블을 클릭하면 해당 입력필드에 포커스 이동

<label for="name">이름</label>
<input id="name" type="text" />

<select> 드롭다운 목록 생성. <option>과 함께 사용

<label for="fruit">favorite fruit</label>
<select name="fruit" id="fruit">
    <option>apple</option>
    <option>banana</option>
    <option>orange</option>
</select>

<button> 클릭 가능한 버튼 생성 type 속성에 따라 제출/리셋/일반 버튼 으로 사용 가능

<fieldset> 관련된 입력 필드들을 그룹화하여 폼의 일부로 묶음

<legend> <fieldset>과 함께 사용되어 그룹의 제목 정의

<output> 계산 결과나 사용자 입력에 따른 결과 표시

니꼬쌤이 알려준 내용 말고도 추가로 몇 개 더 적어서 정리해봤다.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[CSS] 동영상 배경 설정하기

안댕이 — Wed, 31 Jul 2024 13:46:15 +0900

메인페이지 리뉴얼 작업을 하는데, 3개 섹션의 배경을 동영상으로 삽입해야 했다.

서버에 비메오에 업로드하고 iframe으로 불러와 사용하는 방식으로 작업한다.
position을 사용해서 작성했는데, 여백이 생기고 난리!

목표

다양한 장치의 화면 비율에 맞추어 꽉 차는 배경 동영상 설정하기

HTML

<section class="videoSection">
	<!-- 텍스트 영역 -->
    <div class="txtWrap">
        <p>텍스트</p>
    </div>
    <!-- 배경 비디오 -->
    <div class="videoWrap">
        <iframe id="iframe" src="비메오링크?badge=0&autoplay=1&loop=1&title=0&autopause=0&muted=1&controls=0" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</section>

CSS

.videoSection { position: relative; background: #000; }
.videoSection .txtWrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 1; color: #fff; }
.videoSection .videoWrap { position: relative; width: 100%; height: 0; padding-top: 44.5%; overflow: hidden; }
.videoSection .videoWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

여기서 중요한 부분은 .videoSection .videoWrap 요소의 padding-top 이다.
화면 크기에 맞춰 자동으로 동영상 비율이 조절되므로, 다양한 장치에서도 비율이 유지된다.

일반적인 16:9 비율의 동영상(1920*1080) 크기는 padding-top: 56.25%가 된다.
하지만 이번에 전달받은 영상의 크기가 1920*855 이므로 padding-top을 조절했다.

비율 = 높이 / 너비 = 1920 / 855 = 0.4453

구해진 비율을 퍼센트로 변환(x100)하여 padding-top: 44.5% 으로 설정해주면
어떤 장치에서도 비율이 유지되는 동영상 배경 설정 끝~

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

02장. 자바스크립트

안댕이 — Thu, 30 May 2024 10:00:52 +0900

✅ 자바스크립트의 탄생

1995년, 웹페이지의 보조적인 기능을 수행하기 위해 브렌던 아이크가 개발했다.
1996년 3월, '모카' 넷스케이프 내비게이터에 탑재
→ 96년 9월 '라이브스크립트' 변경
→ 96년 12월 '자바스크립트' 최종 명명

✅ 자바스크립트의 표준화

자바스크립트의 파생 버전인 "JScript"와 자바스크립트가 표준화되지 못하고 적당히 호환되어 크로스 브라우징 이슈가 발생했다.
자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상 동작하는 표준화된 자바스크립트의 필요성이 되두되었고, 1996년 11월 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 ECMA 인터내셔널에 자바스크립트의 표준화를 요청했다.

1997년 7월, ECMA-262라 불리는 표준화된 자바스크립트 초판(ECMAScript 1) 사양 완성
→ 1999년 ECMAScript 3(ES3) 공개
→ 2009년 ECMAScript 5(ES5) 출시, HTML5와 함께 출현한 표준 사양
→ 2015년 ECMAScript 6(ES6) 공개, let/const 키워드, 화살표 함수, 클래스, 모듈 등 범용 프로그래밍 언어로서 갖춰야할 기능을 대거 도입하는 큰 변화.
ES6 이후의 버전업은 비교적 작은 기능을 추가하는 수준으로 매년 공개할 것으로 예고되었다.

✅ 자바스크립트 성장의 역사

1) Ajax(Asynchronous JavaScript and XML)

1999년, 자바스크립트를 이용해 서버와 브라우저 비동기 방식으로 데이터를 교환할 수 있는 통신기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.

이전의 웹페이지는 html로 시작하여 html로 끝나는 완전한 html 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 이러한 방식은 변경할 필요가 없는 부분도 서버로부터 다시 전송받아야 하기 때문에 불필요한 데이터 통신이 발생하고, 성능 면에서도 불리하다. 이로 인해 화면이 전환되면 깜빡이는 현상이 발생했고, 웹페이지의 한계로 받아들여졌다.

Ajax의 등장 이후, 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경이 필요한 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 웹 브라우저에서도 데스크톱 앱과 유사하게 빠른 성능과 부드러운 화면 전환이 가능해진 것이다.

2) jQuery

2006년, jQuery의 등장으로 DOM(Document Object Model)을 더 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느정도 해결되었다.

3) V8 자바스크립트 엔진

자바스크립트가 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인된 이후, 자바스크립트로 웹 어플리케이션을 구축하려는 시도가 늘며 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었다.

2008년, 구글의 V8 자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여주었고, 이 덕분에 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.

4) Node.js

2009년, 라이언 딜이 발표한 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨 자바스크립트 실행 환경이다. 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP등 빌트인(내장) API를 제공한다.

Node.js는 자바스크립트 엔진을 기반으로 하므로 Node.js 환경에서 동작하는 애플리케이션은 자바스크립트를 사용해 개발한다.
프런트엔드와 백엔드 영역에서 모두 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습할 시간을 덜 수 있다는 장점이 있다.

비동기 I/O를 지원하며, 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합하다. 하지만 CPU 사용률이 높은 앱에는 권장하지 않는다.

5) SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 개발 규모와 복잡도도 상승했다. 이로 인해, 이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고 이를 보완하기 위해 많은 패턴과 라이브러리가 출현했다. 그 덕에 많은 도움이 되었지만 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축이 어려웠고, 필연적으로 프레임워크가 등장했다.

이러한 요구에 발맞춰 CBD(Component based development) 방법론을 기반으로 하는 SPA가 대중화 되었다.

✅ 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다. 자바스크립트는 이 모든 걸 아우르는 개념

✅ 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어.

기본 문법은 C, 자바와 유사하고, 셀프(Self)에서는 프로토타입 기반 상속을, 스킴(Scheme)에서는 일급 함수의 개념을 차용

자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter language).
+ 인터프리터 언어의 특징
1) 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행
2) 실행파일을 생성하지 않음
3) 인터프러트 단계와 실행 단계가 분리되어 있지 않음. 한 줄씩 바이트코드로 변환하고 즉시 실행
4) 코드가 실행될 때마다 인터프리트 과정이 반복 수행
5) 인터프리트 단계와 실행 단계가 분리되지 않고 반복 수행되므로 코드 실행 속도가 비교적 느림

하지만 대부분의 모던 브라우저에서 사용되는 인터프리터는 복잡한 과정을 거치며 일부 소스코드를 컴파일하고 실행한다. 이를 통해 인터프리터 언어의 장점인 동적 기능 지원을 살리며 실행 속도가 느린 단점을 극복한다. 현재는 컴파일러와 인터프리터의 기술적 구분이 점차 모호해져 가는 추세다. 하지만 자바스크립트는 인터프리터의 도움 없이 실행할 수 없기 때문에 컴파일러 언어라고 할 수 없다.

이웅모, 『모던 자바스크립트 Deep Dive』 (위키북스, 2020)

01장. 프로그래밍

안댕이 — Wed, 29 May 2024 15:52:24 +0900

프로그래밍: 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
→ 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고, 상세하게 요구사항을 설명하는 작업

→ 그 결과물이 바로 '코드'
→ 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 바라봐야 함 = Cumputational thinking(컴퓨팅 사고)

프로그래밍 언어 : 구문(Syntax) + 의미 (Sementics), 컴퓨터와의 대화에 사용되는 표현 수단

프로그래밍은 요구사항의 집합을 분석하여 적절한 자료구조와 함수의 집합으로 변환한 뒤, 그 흐름을 제어하는 것

이웅모, 『모던 자바스크립트 Deep Dive』 (위키북스, 2020)

00. 모던 자바스크립트 Deep Dive 공부 시작!

안댕이 — Wed, 29 May 2024 15:30:53 +0900

10월에 사두고 펴보지도 못했던 딥다이브

이제 활짝 펼치고 공부 시작...

머릿말에 적혀있는 명언이 되게 와닿는다.

빨리 가는 유일한 방법은 제대로 가는 것이다.
로버트 C.마틴. <클린코드>의 저자

빙빙 돌다 제자리로 온 지금

960페이지 완독 가보자고~

[카카오 이모티콘] 2024년 중간 기록

안댕이 — Tue, 28 May 2024 15:06:02 +0900

웹 퍼블리셔로 근무하며 개발자의 꿈을 꾼지 n년(?)... n개월(?)...

물가는 오르고, 내 월급은 그대로이기 때문에 부업 파이프라인을 만들기 위해 노력해보았다!

유튜브도 열심히 했으나 투자한 시간 대비 수익은 잘 나지 않는다.

하지만 카카오 이모티콘? 최고다.

2022년에 첫 출시한 나의 첫 이모티콘이 지금 2024년까지 꾸준히 치킨 n마리 이상 사먹을 정도의 용돈을 벌어다 준다.

나같은 소작가에게도 이정도 수익이면 감지덕지 해삐해삐

그래서 2024년에는 월마다 하나 이상은 제안하자! 다짐했는데 하다보니 더 진심으로 임해버렸다.

24년 5월까지 35건 제안했다! (재제안 포함)

그래도 절반 이상은 신규 제안이니 20건 정도는 새로 그린 셈

꽤나 열심히 했고, 결과도 나쁘지 않다.

전체 제안 78건 | 심사중 1건 | 승인 8건 | 미승인 69건

열심히 그렸더니 두둑해진 나의 창고

미승인도 많이 늘었지만 8개의 이모티콘을 가진 작가가 되었다... 야호

요즘 방통대 과제에도 치이고, 학은제 교양 강의에도 치이고, 회사 업무에도 치이다 보니

힐링한답시고 퇴근 후에 이모티콘 작업 하느라 블로그를 방치했었는데 결과는 좋음 하하하

이제 회사 업무도 살짝 아주 살짝 널널해졌으니 블로그도 열심히 하고, 이모티콘은 짬짬이 그려야지

두마리 토끼, 아니 세마리 네마리 다 잡아주겠어

많이 벌어와 나의 작품들아... ❤

[Vanilla JS] 버튼을 클릭하면 늘어나는 아코디언 메뉴

안댕이 — Tue, 28 May 2024 14:44:22 +0900

목표

버튼을 클릭하면 아래로 길어지는 아코디언 메뉴 구현

HTML

<ul class="accordionMenu">
  <li>
    <button class="accordionBtn">Q. 사용 시간은?</button>
    <div class="content">
      <p>A. 60분 사용 가능합니다.</p>
    </div>
  </li>
  <li>
    <button class="accordionBtn">Q. 사용 방법은?</button>
    <div class="content">
      <p>A. 부착하여 사용하시면 됩니다.</p>
    </div>
  </li>
  <li>
    <button class="accordionBtn">Q. 몇 회 사용 가능?</button>
    <div class="content">
      <p>A. 1일 1회 사용 가능합니다.</p>
    </div>
  </li>
</ul>

CSS

- transition은 height: auto에는 먹히지 않는다. max-height를 활용하는 방법으로 수정 가능하다.

/* reset */
* { margin: 0; padding: 0; }
button { display: block; border: none; }

/* 기본 세팅 */
.accordionMenu { width: 100vw; height: auto; }
.accordionMenu li { margin-bottom: 10px; }
.accordionMenu li .content p,
.accordionMenu li .accordionBtn { width: 70%; margin: 0 auto; padding: 16px; text-align: left; font-size: 14px; background: #ffe3e3; box-sizing: border-box; cursor: pointer; }

/* 컨텐츠 */
.accordionMenu li .content { height: 0; overflow: hidden; transition: height 0.3s ease; }

/* + 버튼 */
.accordionMenu li .accordionBtn { position: relative; }
.accordionMenu li .accordionBtn::before,
.accordionMenu li .accordionBtn::after { content: ''; position: absolute; top: 25px; right: 10px; display: block; width: 16px; height: 2px; background: #1a1a1a; }
.accordionMenu li .accordionBtn::after { transform: rotate(90deg); transition: transform 0.3s ease; }

/* 활성화 */
.accordionMenu li.active .content { height: 50px; }
.accordionMenu li.active .accordionBtn::after { transform: rotate(0deg); }

JavaScript

document.querySelectorAll('.accordionBtn').forEach(btn => {
    btn.addEventListener('click', () => {
        const accordionItem = btn.parentElement;

        accordionItem.classList.toggle('active');
    });
});

결과물

See the Pen Accordion Menu by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[Vanilla JS] 스와이퍼 없이 슬라이더 구현하기 (+ play/stop/progress bar)

안댕이 — Tue, 28 May 2024 13:15:08 +0900

목표

Swiper.js 없이 바닐라로 무한 슬라이더 구현하기.

1. 5초동안 하나의 슬라이더를 보여주고, 프로그레스바로 남은 시간 출력

2. 정지 버튼을 누르면 프로그레스바가 초기화되고, 자동 슬라이드가 멈춤

3. 재생 버튼을 누르면 프로그레스바가 재시작죄고, 자동 슬라이드가 재개됨

HTML

<section class="intro">
  <div class="introSlider">
    <div class="slideItem"></div>
    <div class="slideItem"></div>
    <div class="slideItem"></div>
  </div>
  <!-- 프로그레스 바 -->
  <div class="progressBar">
    <div class="progress"></div>
  </div>
  <!-- 슬라이더 번호 -->
  <div class="progressNo">
    <span>01</span>
    <span>02</span>
  </div>
  <!-- 재생/정지 버튼 -->
  <button class="progressBtn"></button>
</section>

CSS

/* reset */
* { margin: 0; padding: 0; }
button { border: none; }

/* 슬라이더 */
.intro { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; }
.introSlider { display: flex; width: 100%; height: 100%; padding: 0; transition: transform 0.5s ease; }
.introSlider .slideItem { position: relative; width: 100%; flex-shrink: 0; }

/* 프로그레스 바 */
.intro .progressBar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 35%; background-color: #929292; height: 3px; overflow: hidden; }
.intro .progressBar .progress { height: 100%; background-color: #1a1a1a; width: 0%; transition: width 5s linear; }

/* 슬라이더 번호 */
.intro .progressNo { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; justify-content: space-between; width: 50%; color: var(--mainTxtColor); }

/* 재생, 정지 버튼 */
.intro .progressBtn { position: absolute; left: 77%; bottom: 10px; width: 20px; height: 20px; color: #fff; background: url('https://blog.kakaocdn.net/dn/mhzTr/btsHFxtZpUK/7fjd1ftrMrzpcA5Y783kJk/img.png') no-repeat; background-size: cover; }
.intro .progressBtn.play { background-image: url('https://blog.kakaocdn.net/dn/ceMqwq/btsHFa6RMzO/iKuw9Q4OCYqqoo3k8lpNck/img.png');  } 


/* 슬라이드 아이템 색상 설정 */
.introSlider .slideItem:nth-child(1) { background: #ffb7b7; }
.introSlider .slideItem:nth-child(2) { background: #b7deff; }
.introSlider .slideItem:nth-child(3) { background: #ecffb7; }

JavaScript

const slides = document.querySelectorAll('.introSlider .slideItem');
const progressBar = document.querySelector('.progress');
const progressNum1 = document.querySelector('.progressNo span:first-child');
const progressNum2 = document.querySelector('.progressNo span:last-child');
const progressBtn = document.querySelector('.progressBtn');
let num = [1, 2];
let currentIndex = 0;
let width = slides[0].clientWidth;
let timer;
let autoSlide = true;

// 슬라이더 숫자 초기화
progressNum1.innerText = `0${num[0]}`;
progressNum2.innerText = `0${num[1]}`;

// 이전 슬라이드
function slideToPrev(){
  num[0] = num[0] == 1 ? 3 : num[0]-1;
  num[1] = num[1] == 1 ? 3 : num[1]-1;
  currentIndex = currentIndex == 0 ? 2: (currentIndex - 1) % slides.length;
  let newTransformValue = -width * currentIndex;
  document.querySelector('.introSlider').style.transform = `translateX(${newTransformValue}px)`;
  progressNum1.innerText = `0${num[0]}`;
  progressNum2.innerText = `0${num[1]}`;
  resetProgressBar();
  if(autoSlide == true)  playProgressBar();
}

// 다음 슬라이드
function slideToNext() {
  num[0] = num[0] == 3 ? 1 : num[0]+1;
  num[1] = num[1] == 3 ? 1 : num[1]+1;
  currentIndex = (currentIndex + 1) % slides.length;
  let newTransformValue = -width * currentIndex;
  document.querySelector('.introSlider').style.transform = `translateX(${newTransformValue}px)`;
  progressNum1.innerText = `0${num[0]}`;
  progressNum2.innerText = `0${num[1]}`;
  resetProgressBar();
  if(autoSlide == true)  playProgressBar();      
}

function resetProgressBar(){     
  progressBar.style.transition = 'none';
  progressBar.style.width = '0%';
}

function playProgressBar(){
  setTimeout(() => {
    progressBar.style.transition = 'width 5s linear';
    progressBar.style.width = '100%';
  }, 100);
}

// 자동 슬라이드 ON 
function playAutoSlide(){
  timer = setInterval(slideToNext, 5000);
  resetProgressBar();
  playProgressBar();
}

// 자동 슬라이드 OFF
function pauseAutoSlide(){
  clearInterval(timer);
  resetProgressBar();
}

// 자동 슬라이드 on/off
progressBtn.addEventListener('click', function(){
  this.classList.toggle('play'); 
  autoSlide = !autoSlide; // true / false 
  autoSlide == true ? playAutoSlide() : pauseAutoSlide();
})

// 자동 슬라이드 함수 호출
playAutoSlide();

// 드래그      
const slideWrap = document.querySelector('.introSlider');
let dragStartX = 0;
let dragEndX = 0;
slideWrap.addEventListener('touchstart', dragStart);
slideWrap.addEventListener('touchmove', dragMove);
slideWrap.addEventListener('touchend', dragEnd);

// touchstart
function dragStart(e) {
  dragStartX = e.touches[0].clientX;
  if(autoSlide == true) clearInterval(timer); //자동슬라이드 중지
}
// touchmove
function dragMove(e) {
  dragEndX = e.touches[0].clientX;
}
// touchend
function dragEnd(e) {
  let diffX = dragEndX - dragStartX;
  if (diffX > 50) {
    slideToPrev();
  } else if (diffX < -50) {
    slideToNext();
  } 
  if(autoSlide == true) timer = setInterval(slideToNext, 5000); // 자동슬라이드 재시작
}

결과물

See the Pen vanilla slider by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

1월 회고 + 2월 시작!

안댕이 — Thu, 1 Feb 2024 20:02:58 +0900

1월 회고.

시간이 왜 이렇게 빠르지

2024년 시작 글 쓴 지 일주일 된 것 같은데 벌써 2월이다

작년 12월까지 회사 업무가 널널해서 쉬엄쉬엄 했는데

이번년도 되자마자 엄청난 업무량...

그리고 생각보다 쉽지 않은 방통대 직장병행...

그래도 신년 버프로 퇴근하고 공부도 좀 하고, 이모티콘도 그리고,

블로그도 쓰고, 유튜브 업로드도 꽤 했다. 나 꽤나 부업에 진심일지도

이모티콘은 무려 다섯개나 제출했다

게다가 하나는 승인

이번년도는 꾸준히 제출해서 부자가 될 것... ~~(큰 꿈)~~

1월, 영상도 꽤 열심히 올렸더니 유튜브 구독자도 많이 늘었다

회사 일보다 부업이 더 즐거운데 정상인가

취미지만 열심히 해볼 예정

1월 한 달 동안 꽤 열심히 살았으나 리액트 강의를 완강하지 못했다.

바빴지만 나태했던 나. 반성해

아 그리고 다이어트 실패다. 2월부턴 진짜...

2월.

2월 되자마자 등록금 납부 아이고 내 통장

이제 방통대 3학년 2학기, 작년 한학기 생각보다 힘들었다

이번에 미리미리 공부해서 좋은 학점 받는 게 목표!

포부 좋게 6과목 수강신청 완료

이번 학기는 느낌이 좋다 ^ㅡ^

이번 달에는 리액트 강의 완강하고, 코테 문제도 더욱 적극적으로 풀어야겠다

그리고 블로그 방치하지 않기. 약속

⭐️ 2월 목표 ⭐️

노마드코더 리액트 강의 완강
프로그래머스 코딩테스트 Lv.1 5문제 이상 풀기
퍼블리싱 가이드 정리

2월도 화이팅 아자아자 와쟈쟈

[Git] Git 기초 / 맥OS 깃 설치

안댕이 — Tue, 2 Jan 2024 22:32:54 +0900

갓생 1일차.

무지성 add + commit만 알고 있던 나. 미루고 미루던 git을 공부할 것이다.

학교다니면서 프로젝트 할 때 몇 번 사용하고, 회사에서는 회사 공유폴더에 백업해두는 편이라 깃을 잘 사용하지 않았다. 코테 문제 백준허브로 업로드 하는 정도....? (그것도 백준허브가 다 해줌)

주변에서 많이들 추천해준 코딩애플님의 강의로 선택했다.

git 설치하기

맥OS는 처음이니까 차근차근 따라 해보자.

1. 홈브류 설치

- 홈브류(Homebrew)란? 맥OS용 패키지 관리 애플리케이션

1) 터미널 열기

2) https://brew.sh/ 접속해서 길게 적혀있는 설치 명령어를 터미널에 입력

3) 비밀번호 입력하라고 하셨는데 안해도 잘 넘어가더라. 엔터 엔터 하니 설치 완료

4) 홈브류 설치 다 됐으면 터미널에 brew install git 입력

2. 추가 세팅

1) 터미널에 git config --global init.defaultBranch main 입력

기본 브랜치 이름을 master에서 main으로 변경해주는 명령

2) 터미널에 git config --global core.editor "code --wait"

git의 기본 에디터가 Vim이 아닌 VSCode로 변경됨. 초보는 하라고 하셔서 했다.

3. 확인

1) 작업용 폴더 생성하고 터미널에서 열기

2) git --version 입력하고, 버전이 뜨면 성공적으로 설치 완료! 안뜨면 재부팅

4. 유저이름 세팅

1) git config --global user.email "안댕이@gmail.com"

2) git confit --global user.name "안댕이"

이렇게 설치는 끝났다.

사용해보기

1. VSCode에서 작업폴더 열고, 터미널 열고, git init 입력

- 이제 작업폴더를 감시한다.

2. 파일의 현재 상태를 기록하려면

git add 파일명
git commit -m '메모'

git add명령으로 기록할 파일을 고르고, git commit으로 파일 기록을 명령한다.

작업폴더에서 add를 통해 staging area에 파일을 올리는 행위를 스테이징 한다고 한다.

그리고 commit을 통해 repository(저장소)에 파일을 저장한다

알아두면 좋은 명령어

1. 여러 파일 스테이징

git add app1.txt app2.txt //...
git add . //모든 파일 스테이징

2. 상태창 열기

git status

지금 어떤 파일들이 스테이징 되어있는지, 수정했는지 확인 가능

3. commit 내역 조회

git log --all --oneline

커밋 다섯번 연습해보라고 하셨다. 해보고 다음 강의로 넘어가야지

2024년 시작!

안댕이 — Mon, 1 Jan 2024 23:50:48 +0900

어느새 2024년이 시작됐다.

매년 하는 새해 결심이지만 이번년도는 진짜(?)다.

운동도 하고, 공부도 하고, 책도 읽어야지...

회사 업무가 갑자기 많아지고, 그만큼 스트레스도 늘어난 12월...

이로 인해 블로그와 코테에도 약간 소홀해졌다. 아주 약간...

이제 새해를 맞이했으니 새마음 새뜻으로 다시 개발자의 길을 닦아보려 한다. 뽀득뽀득

이제 매 월 목표를 세우고, 월 말에 주절주절 회고록을 쓸 것이다.

다이어리 사놓고 한 번도 꽉 채워본 적 없는데, 이번엔 쓴다. 진짜진짜로.

⭐️ 2024년 목표 ⭐️

10kg 감량 (주 4회 이상 운동하기)
토이 프로젝트 3개 이상
모던 자바스크립트 Deep Dive 완독
개발자 취업.... ~~제발요~~

⭐️ 1월 목표 ⭐️

노마드코더 리액트 강의 완강
프로그래머스 코딩테스트 Lv.1 5문제 이상 풀기
(이제 난이도가 조금 높아졌다.)
카카오 이모티콘 2개 이상 제출

지금 하고있는 회사 업무... 제발 여유가 생겼으면 좋겠다.

마감 기한 얼마 안남았으니 불태우고, 퇴근 후에 공부하는 갓생 살아보자 아좌좌

[프로그래머스] Lv.1 카드 뭉치 / JS

안댕이 — Mon, 20 Nov 2023 14:42:42 +0900

문제 설명

코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.

원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다.
한 번 사용한 카드는 다시 사용할 수 없습니다.
카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다.
기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다.

예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 두 번째 카드 뭉치에서 "want"와 "to"를 사용하고 첫 번째 카드뭉치에 "drink"와 "water"를 차례대로 사용하면 원하는 순서의 단어 배열을 만들 수 있습니다.

문자열로 이루어진 배열 cards1, cards2와 원하는 단어 배열 goal이 매개변수로 주어질 때, cards1과 cards2에 적힌 단어들로 goal를 만들 있다면 "Yes"를, 만들 수 없다면 "No"를 return하는 solution 함수를 완성해주세요.

⭐ 제한사항

1 ≤ cards1의 길이, cards2의 길이 ≤ 10
- 1 ≤ cards1[i]의 길이, cards2[i]의 길이 ≤ 10
- cards1과 cards2에는 서로 다른 단어만 존재합니다.
2 ≤ goal의 길이 ≤ cards1의 길이 + cards2의 길이
- 1 ≤ goal[i]의 길이 ≤ 10
- goal의 원소는 cards1과 cards2의 원소들로만 이루어져 있습니다.
cards1, cards2, goal의 문자열들은 모두 알파벳 소문자로만 이루어져 있습니다.

입출력 예

입출력 예 설명

입출력 예 #1

본문과 같습니다.

입출력 예 #2

cards1에서 "i"를 사용하고 cards2에서 "want"와 "to"를 사용하여 "i want to"까지는 만들 수 있지만 "water"가 "drink"보다 먼저 사용되어야 하기 때문에 해당 문장을 완성시킬 수 없습니다. 따라서 "No"를 반환합니다.

나의 답변

function solution(cards1, cards2, goal) {
    return goal.map((v) => {
        // 카드 배열 첫번째 요소 각각 비교
        if(cards1[0] === v) {
            cards1.shift();
        } else if(cards2[0] === v) {
            cards2.shift();
        } else {
            return "No";
        } 
    }).includes("No") ? "No" : "Yes";
}

1차 풀이.

굳이 includes와 삼항연산자를 넣지 않아도 될 것 같아 다시 풀어봤다.

function solution(cards1, cards2, goal) {
    for(let v of goal) {
        if(cards1[0] === v) {
            cards1.shift();
        } else if(cards2[0] === v) {
            cards2.shift();
        } else {
            return "No";
        } 
    }
    
    return "Yes";
}

더 간결해진 듯!!!!

[프로그래머스] Lv.1 콜라 문제 / JS

안댕이 — Mon, 20 Nov 2023 14:14:47 +0900

문제 설명

오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.

정답은 아무에게도 말하지 마세요.

콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?

단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.

문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. 이 경우 상빈이는 총 10 + 5 + 2 + 1 + 1 = 19병의 콜라를 받을 수 있습니다.

문제를 열심히 풀던 상빈이는 일반화된 콜라 문제를 생각했습니다. 이 문제는 빈 병 a개를 가져다주면 콜라 b병을 주는 마트가 있을 때, 빈 병 n개를 가져다주면 몇 병을 받을 수 있는지 계산하는 문제입니다. 기존 콜라 문제와 마찬가지로, 보유 중인 빈 병이 a개 미만이면, 추가적으로 빈 병을 받을 순 없습니다. 상빈이는 열심히 고심했지만, 일반화된 콜라 문제의 답을 찾을 수 없었습니다. 상빈이를 도와, 일반화된 콜라 문제를 해결하는 프로그램을 만들어 주세요.

콜라를 받기 위해 마트에 주어야 하는 병 수 a, 빈 병 a개를 가져다 주면 마트가 주는 콜라 병 수 b, 상빈이가 가지고 있는 빈 병의 개수 n이 매개변수로 주어집니다. 상빈이가 받을 수 있는 콜라의 병 수를 return 하도록 solution 함수를 작성해주세요.

⭐ 제한사항

1 ≤ b < a ≤ n ≤ 1,000,000
정답은 항상 int 범위를 넘지 않게 주어집니다.

입출력 예

a	b	n	result
2	1	20	19
3	1	20	9

입출력 예 설명

입출력 예 #1

본문에서 설명한 예시입니다.

입출력 예 #2

빈 병 20개 중 18개를 마트에 가져가서, 6병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 8(20 – 18 + 6 = 8)개 입니다.
빈 병 8개 중 6개를 마트에 가져가서, 2병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 4(8 – 6 + 2 = 4)개 입니다.
빈 병 4 개중 3개를 마트에 가져가서, 1병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 2(4 – 3 + 1 = 2)개 입니다.
3번의 교환 동안 상빈이는 9(6 + 2 + 1 = 9)병의 콜라를 받았습니다.

나의 답변

function solution(a, b, n) {
    let total = n; // 남은 병
    let bottle = 0; // 갖다주는 병
    let service = 0; // 받은 콜라
    let cnt = 0; // 받은 콜라 카운트
    
    while(total >= a) {
        // 최대로 갖다줄 수 있는 병의 개수
        bottle = total - total % a;
        // 빈 병 갖다줌
        total -= bottle;
        // 서비스 받음
        service += Math.floor(bottle/a) * b;
        // 서비스 추가
        total += service;
        // 카운트
        cnt += service;
        // 서비스 초기화
        service = 0;
    }
    
    return cnt;
}

정답은 아무에게도 말하지 마세요 아닌가

console.log("아무에게도 말하지 마세요") 생각했는데 아니다 하하하하

중간중간 사고가 멈췄다..........

아니 분명 이해했는데? 왜??? 안되지???? 이러면서 반복하다가 결국 다 지우고 다시 시작하고 반복

변수 잔뜩 생성해서 풀어봤다

⭐ 참고할 답변

solution = (a, b, n) => Math.floor(Math.max(n - b, 0) / (a - b)) * b

이렇게도 풀 수 있구나

Math.max(n - b, 0) 이 부분은 n - b와 0 중에서 큰 값을 선택한다. 음수일 경우 방지!

대단해.........................................

[프로그래머스] Lv.1 폰켓몬 / JS

안댕이 — Fri, 17 Nov 2023 16:39:00 +0900

문제 설명

당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다.
홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다.

첫 번째(3번), 두 번째(1번) 폰켓몬을 선택
첫 번째(3번), 세 번째(2번) 폰켓몬을 선택
첫 번째(3번), 네 번째(3번) 폰켓몬을 선택
두 번째(1번), 세 번째(2번) 폰켓몬을 선택
두 번째(1번), 네 번째(3번) 폰켓몬을 선택
세 번째(2번), 네 번째(3번) 폰켓몬을 선택

이때, 첫 번째(3번) 폰켓몬과 네 번째(3번) 폰켓몬을 선택하는 방법은 한 종류(3번 폰켓몬 두 마리)의 폰켓몬만 가질 수 있지만, 다른 방법들은 모두 두 종류의 폰켓몬을 가질 수 있습니다. 따라서 위 예시에서 가질 수 있는 폰켓몬 종류 수의 최댓값은 2가 됩니다.
당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다.
nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다.
폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다.
가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다.

입출력 예

nums	result
[3, 1, 2, 3]	2
[3, 3, 3, 2, 2, 4]	3
[3, 3, 3, 2, 2, 2]	2

입출력 예 설명

입출력 예 #1

문제의 예시와 같습니다.

입출력 예 #2

6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다.
가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리, 2번 폰켓몬 한 마리, 4번 폰켓몬 한 마리를 고르면 되며, 따라서 3을 return 합니다.

입출력 예 #3

6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다.
가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리와 2번 폰켓몬 두 마리를 고르거나, 혹은 3번 폰켓몬 두 마리와 2번 폰켓몬 한 마리를 고르면 됩니다. 따라서 최대 고를 수 있는 폰켓몬 종류의 수는 2입니다.

나의 답변

function solution(nums) {
    const max = Math.floor(nums.length / 2); // 가져갈 수 있는 폰켓몬 최댓값
    const cnt = [...new Set(nums)].length; // 폰켓몬의 종류
    
    return max < cnt ? max : cnt;
}

문제를 정답률 높은 순에서부터 풀고 있는데, 이 문제는 읽다가 말려서 다음문제로 넘어갔었다.

다시 순서대로 해보려 문제를 다시 차근차근 읽어보니 어????? 너무 쉬웠다.

총 N마리의 폰켓몬 중에서 절반을 가져가도 좋다고 했으니, 절반을 최댓값으로 변수에 저장해두고, 두 종류 이상의 폰켓몬은 가질 수 없으니 Set으로 중복값을 제거한 뒤, 그 개수와 비교해주면 끝!

너무 허무하게, 쉽게 풀었다.

이번 답안도 제출하고 다른 사람의 풀이를 보니 추천 가장 많은 답안과 거의 동일하게 풀어서 뿌듯 ✌

[프로그래머스] Lv.1 두 개 뽑아서 더하기 / JS

안댕이 — Fri, 17 Nov 2023 14:35:03 +0900

문제 설명

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

numbers의 길이는 2 이상 100 이하입니다.
- numbers의 모든 수는 0 이상 100 이하입니다.

입출력 예

numbers	result
[2, 1, 3, 4, 1]	[2, 3, 4, 5, 6, 7]
[5, 0, 2, 7]	[2, 5, 7, 9, 12]

입출력 예 설명

입출력 예 #1

2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.)
3 = 2 + 1 입니다.
4 = 1 + 3 입니다.
5 = 1 + 4 = 2 + 3 입니다.
6 = 2 + 4 입니다.
7 = 3 + 4 입니다.
따라서 [2,3,4,5,6,7] 을 return 해야 합니다.

입출력 예 #2

2 = 0 + 2 입니다.
5 = 5 + 0 입니다.
7 = 0 + 7 = 5 + 2 입니다.
9 = 2 + 7 입니다.
12 = 5 + 7 입니다.
따라서 [2,5,7,9,12] 를 return 해야 합니다.

나의 답변

function solution(numbers) {
    const answer = [];
    
    for(let i = 0; i < numbers.length; i++) {
        for(let j = i+1; j < numbers.length; j++) {
            answer.push(numbers[i] + numbers[j]);
        }
    }
    
    return [...new Set(answer.sort((a, b) => a - b))];
}

풀이 다 하고 채점도 하고, 다른 사람의 풀이도 참고하려 들어가봤는데 추천 수 가장 많은 답변이랑 거의 똑같았다!

이러면 뭔가 기분이 좋단 말이죠

[프로그래머스] Lv.1 푸드 파이트 대회 / JS

안댕이 — Fri, 17 Nov 2023 14:30:54 +0900

문제 설명

수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다.

이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는 음식을 주문했는데, 대회의 조건을 고려하지 않고 음식을 주문하여 몇 개의 음식은 대회에 사용하지 못하게 되었습니다.

예를 들어, 3가지의 음식이 준비되어 있으며, 칼로리가 적은 순서대로 1번 음식을 3개, 2번 음식을 4개, 3번 음식을 6개 준비했으며, 물을 편의상 0번 음식이라고 칭한다면, 두 선수는 1번 음식 1개, 2번 음식 2개, 3번 음식 3개씩을 먹게 되므로 음식의 배치는 "1223330333221"이 됩니다. 따라서 1번 음식 1개는 대회에 사용하지 못합니다.

수웅이가 준비한 음식의 양을 칼로리가 적은 순서대로 나타내는 정수 배열 food가 주어졌을 때, 대회를 위한 음식의 배치를 나타내는 문자열을 return 하는 solution 함수를 완성해주세요.

⭐ 제한사항

2 ≤ food의 길이 ≤ 9
1 ≤ food의 각 원소 ≤ 1,000
food에는 칼로리가 적은 순서대로 음식의 양이 담겨 있습니다.
food[i]는 i번 음식의 수입니다.
food[0]은 수웅이가 준비한 물의 양이며, 항상 1입니다.
정답의 길이가 3 이상인 경우만 입력으로 주어집니다.

입출력 예

food	result
[1, 3, 4, 6]	"1223330333221"
[1, 7, 1, 2]	"111303111"

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

두 선수는 1번 음식 3개, 3번 음식 1개를 먹게 되므로 음식의 배치는 "111303111"입니다.

나의 답변

function solution(food) {
    let answer = "";
    
    for(let i = 1; i < food.length; i++) {
        for(let j = 0; j < Math.floor(food[i] / 2); j++) {
            answer += i;
        }
    }
    
    return answer + "0" + [...answer].reverse().join('');
}

갈수록 문제가 길어진다.....

이 문제는 나름 쉽게 풀었음.......................!

⭐ 참고할 답변

function solution(food) {
    let res = '';
    for (let i = 1; i < food.length; i++) {
        res += String(i).repeat(Math.floor(food[i]/2));
    }

    return res + '0' + [...res].reverse().join('');
}

for문 하나로도 풀 수 있었네

repeat 메서드 활용해서 뚝딱 풀이한 답변 메모

[프로그래머스] Lv.1 비밀지도 / JS / 비트연산자

안댕이 — Fri, 17 Nov 2023 14:22:48 +0900

문제 설명

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.

지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다.
전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다.
"지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다.
암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진수에 해당하는 값의 배열이다.

네오가 프로도의 비상금을 손에 넣을 수 있도록, 비밀지도의 암호를 해독하는 작업을 도와줄 프로그램을 작성하라.

입력 형식

입력으로 지도의 한 변 크기 n 과 2개의 정수 배열 arr1, arr2가 들어온다.

1 ≦ n ≦ 16
arr1, arr2는 길이 n인 정수 배열로 주어진다.
정수 배열의 각 원소 x를 이진수로 변환했을 때의 길이는 n 이하이다. 즉, 0 ≦ x ≦ 2n - 1을 만족한다.

입력 형식

원래의 비밀지도를 해독하여 '#', 공백으로 구성된 문자열 배열로 출력하라.

입출력 예제

나의 답변

function solution(n, arr1, arr2) {
    const newArr1 = arr1.map((v) => v.toString(2));
    const newArr2 = arr2.map((v) => v.toString(2));

    newArr1.forEach((v, i) => {
        for(let idx = v.length; idx < n; idx++) {
            newArr1[i] = '0' + newArr1[i];
        }
    });
    
    newArr2.forEach((v, i) => {
        for(let idx = v.length; idx < n; idx++) {
            newArr2[i] = '0' + newArr2[i];
        }
    });
    
    const newArr = newArr1.map((v, i) => {
        return [...v].map((el, j) => {
            return Number(el) + Number(newArr2[i][j]);
        }).join('');
    });
    
    return newArr.map((v) => [...v].map((el) => el === '0' ?  ' ' : '#').join(''));
}

난 분명 노가다로 풀었다.

다 풀고 나서 해설 보니 비트연산을 잘 다룰 수 있는지 묻고자 하는 의도였다고 한다... 머쓱

아주 쉬운 문제였다고... ㅎ ㅎㅎ ㅎ

이제라도 알고 가면 되는거지.... ~~~....

갈 길이 멀다 멀어

⭐ 참고할 답변

var solution=(n,a,b)=>a.map((a,i)=>(a|b[i]).toString(2).padStart(n,0).replace(/0/g,' ').replace(/1/g,'#'))

padStart : 문자열 메서드. 현재 문자열의 시작 부분에 특정 길이로 패딩(공백이나 다른 문자)을 추가하는 데 사용.

비트연산자

1. 비트 AND (&) : 두 비트가 모두 1이면 결과가 1이 되고, 그 이외의 경우에는 0

let result = 5 & 3; // 0101 & 0011 = 0001
console.log(result); // 출력: 1

2. 비트 OR (|) : 두 비트 중 하나라도 1이면 결과가 1이 되고, 둘 다 0인 경우 0

let result = 5 | 3; // 0101 | 0011 = 0111
console.log(result); // 출력: 7

3. 비트 XOR (^) : 두 비트가 서로 다르면 결과가 1이 되고, 같으면 0

let result = 5 ^ 3; // 0101 ^ 0011 = 0110
console.log(result); // 출력: 6

4. 비트 NOT (~) : 각 비트를 반전시킴. 0은 1로, 1은 0으로 변환.

let result = ~5; // ~0101 = 1010 (부호 비트 포함)

console.log(result); // 출력: -6

let result = ~5; // ~0101 = 1010 (부호 비트 포함)
console.log(result); // 출력: -6

5. 비트 왼쪽 시프트 (<<) : 숫자의 비트를 왼쪽으로 이동. 오른쪽에 0으로 채워짐

let result = 5 << 1; // 0101을 왼쪽으로 1번 시프트하면 1010
console.log(result); // 출력: 10

6. 비트 오른쪽 시프트 (>>) : 숫자의 비트를 오른쪽으로 이동. 부호 비트에 따라 왼쪽에 0 또는 1로 채워짐

let result = 5 >> 1; // 0101을 오른쪽으로 1번 시프트하면 0010
console.log(result); // 출력: 2

7. 부호없는 오른쪽 시프트 (>>>) : 숫자의 비트를 오른쪽으로 이동시키며, 부호 비트와 상관없이 항상 0으로 채워짐

let result = -5 >>> 1 // 0101을 오른쪽으로 1번 시프트하면 0010
console.log(result); // 출력: 2147483645

CS 공부도 해야지

[프로그래머스] Lv.1 문자열 내 마음대로 정렬하기 / JS

안댕이 — Thu, 16 Nov 2023 14:05:38 +0900

문제 설명

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

⭐ 제한사항

strings는 길이 1 이상, 50이하인 배열입니다.
strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
모든 strings의 원소의 길이는 n보다 큽니다.
인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

입출력 예

strings	n	return
["sun", "bed", "car"]	1	["car", "bed", "sun"]
["abce", "abcd", "cdx"]	2	["abcd", "abce", "cdx"]

입출력 예 설명

입출력 예 #1

"sun", "bed", "car"의 1번째 인덱스 값은 각각 "u", "e", "a" 입니다. 이를 기준으로 strings를 정렬하면 ["car", "bed", "sun"] 입니다.

입출력 예 #2

"abce"와 "abcd", "cdx"의 2번째 인덱스 값은 "c", "c", "x"입니다. 따라서 정렬 후에는 "cdx"가 가장 뒤에 위치합니다. "abce"와 "abcd"는 사전순으로 정렬하면 "abcd"가 우선하므로, 답은 ["abcd", "abce", "cdx"] 입니다.

나의 답변

function solution(strings, n) {
    const sortedArr = strings.sort((a, b) => a[n].charCodeAt() - b[n].charCodeAt());
    return sortedArr.sort((a, b) => {
        if(a[n].charCodeAt() - b[n].charCodeAt() === 0) {
            return a.localeCompare(b);
        };
    });
}

charCodeAt() : 문자열에서 특정 인덱스에 해당하는 문자의 유니코드를 반환

localeCompare() : 문자열과 문자열 비교, 두 문자열이 동일하면 0, 아니라면 크기에 따라 양수 또는 음수 반환

처음으로 localeCompare 메서드를 사용하여 풀어보았다. sort 메서드 내에서 문자열을 비교하고, 그 반환값을 기준으로 정렬하는 방식! 메서드를 알고 나서는 쉽게 풀었지만 좀 헤맨 문제 ..

[프로그래머스] Lv.1 K번째수 / JS

안댕이 — Wed, 15 Nov 2023 13:40:35 +0900

문제 설명

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.

예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.
1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.
2에서 나온 배열의 3번째 숫자는 5입니다.

배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

⭐ 제한사항

array의 길이는 1 이상 100 이하입니다.
array의 각 원소는 1 이상 100 이하입니다.
commands의 길이는 1 이상 50 이하입니다.
commands의 각 원소는 길이가 3입니다.

입출력 예

표

array	commands	return
[1, 5, 2, 6, 3, 7, 4]	[[2, 5, 3], [4, 4, 1], [1, 7, 3]]	[5, 6, 3]

입출력 예 설명

[1, 5, 2, 6, 3, 7, 4]를 2번째부터 5번째까지 자른 후 정렬합니다. [2, 3, 5, 6]의 세 번째 숫자는 5입니다.
[1, 5, 2, 6, 3, 7, 4]를 4번째부터 4번째까지 자른 후 정렬합니다. [6]의 첫 번째 숫자는 6입니다.
[1, 5, 2, 6, 3, 7, 4]를 1번째부터 7번째까지 자릅니다. [1, 2, 3, 4, 5, 6, 7]의 세 번째 숫자는 3입니다.

나의 답변

function solution(array, commands) {
    return commands.map(([i, j, k]) => {
        return array.slice(i-1, j).sort((a, b) => a - b)[k-1];
    });
}

i부터 j까지 slice 메서드로 자르고, sort로 정렬한 배열의 [k-1] 인덱스 위치, 즉 k번째 수를 가져온다.

메서드를 어느정도 공부하고 풀이하니까 쉽고, 간단하게 풀이할 수 있었다.

[프로그래머스] Lv.1 가장 가까운 같은 글자 / JS

안댕이 — Tue, 31 Oct 2023 15:13:09 +0900

문제 설명

문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다.
예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다.

b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다.
n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다.
a는 자신보다 두 칸, 네 칸 앞에 a가 있습니다. 이 중 가까운 것은 두 칸 앞이고, 이는 2로 표현합니다.

따라서 최종 결과물은 [-1, -1, -1, 2, 2, 2]가 됩니다.

문자열 s이 주어질 때, 위와 같이 정의된 연산을 수행하는 함수 solution을 완성해주세요.

⭐ 제한사항

1 ≤ s의 길이 ≤ 10,000
- s은 영어 소문자로만 이루어져 있습니다.

입출력 예

s	result
"banana"	[-1, -1, -1, 2, 2, 2]
"foobar"	[-1, -1, 1, -1, -1, -1]

입출력 예 설명

입출력 예 #1

지문과 같습니다.

입출력 예 #2

설명 생략

나의 답변

function solution(s) {
    const answer = new Array(s.length).fill(-1);
    
    // 뒤에서부터 비교
    for(let i = s.length-1; i >= 0; i--) {
        // 자기랑 같은 글자가 나올때까지 반복
        for(let j = i-1; j >= 0; j--) {
            // 같은 글자가 나오면 배열 값 변경
            if(s[i] === s[j]) {
                answer[i] = i - j;
                // 가장 가까운 글자이므로 반복 중지
                break;
            };
        }
    }
    
    return answer;
}

진짜 여러가지 시도를 해봤으나 모조리 실패...

작성한 코드 다 지우고 다시 시작해서 풀어보았다.

이중 for문이라 시간복잡도는... 안좋지만... 해결한 것에 의의를 두며 다른 코드 보고 흡수하자

⭐ 참고할 답변

function solution(s) {
    const hash={};

    return [...s].map((v,i)=>{
        let result = hash[v] !== undefined ? i - hash[v] : -1;
        hash[v] = i;
        return result;
    });
}

객체를 활용한 풀이

[프로그래머스] Lv.1 숫자 문자열과 영단어 / JS

안댕이 — Tue, 31 Oct 2023 14:04:07 +0900

문제 설명

네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.

다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

1478 → "one4seveneight"
234567 → "23four5six7"
10203 → "1zerotwozero3"

이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.

참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다.

⭐ 제한사항

1 ≤ s의 길이 ≤ 50
s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다.
return 값이 1 이상 2,000,000,000 이하의 정수가 되는 올바른 입력만 s로 주어집니다.

입출력 예

s	result
"one4seveneight"	1478
"23four5six7"	234567
"2three45sixseven"	234567
"123"	123

나의 답변

function solution(s) {
    let answer = '';
    
    answer = s.replaceAll(/zero/g, 0)
        .replaceAll(/one/g, 1)
        .replaceAll(/two/g, 2)
        .replaceAll(/three/g, 3)
        .replaceAll(/four/g, 4)
        .replaceAll(/five/g, 5)
        .replaceAll(/six/g, 6)
        .replaceAll(/seven/g, 7)
        .replaceAll(/eight/g, 8).replaceAll(/nine/g, 9);
    
    return Number(answer);
}

세미 노가다(?)

replaceAll() 메서드를 사용해서 풀어보았다.

⭐ 참고할 답변

function solution(s) {
    let numbers = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
    var answer = s;

    for(let i=0; i< numbers.length; i++) {
        let arr = answer.split(numbers[i]);
        answer = arr.join(i);
    }

    return Number(answer);
}

split() 메서드를 활용한 풀이..

numbers[i]를 구분자로 사용하여 나누고, 숫자인 i를 기준으로 join(i)을 활용해 붙여주기를 반복한다.

이런 사고가 가능할 때까지 열심히 풀어보자...

[프로그래머스] Lv.1 시저 암호/ JS

안댕이 — Tue, 31 Oct 2023 13:55:44 +0900

문제 설명

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요.

⭐ 제한사항

공백은 아무리 밀어도 공백입니다.
s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다.
s의 길이는 8000이하입니다.
n은 1 이상, 25이하인 자연수입니다.

입출력 예

s	n	result
"AB"	1	"BC"
"z"	1	"a"
"a B z"	4	"e F d"

나의 답변

function solution(s, n) {
    const A = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    const a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
  'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    
    const arr = [];
    
    [...s].forEach((v, i) => {
        if(v === " ") {
            arr.push(" ");
        } else {
            if(v.match(/[A-Z]/g)) {
                A[A.indexOf(v)+n] === undefined
                ? arr.push(A[(A.indexOf(v)+n)-26])
                : arr.push(A[A.indexOf(v)+n]);
            } else {
                a[a.indexOf(v)+n] === undefined
                ? arr.push(a[(a.indexOf(v)+n)-26])
                : arr.push(a[a.indexOf(v)+n]);
            }
        }
    });
    
    return arr.join("");
}

대문자와 소문자 각각 담긴 배열을 생성하여 풀어봤다

[Vanilla JS] 숫자 상승 애니메이션 / 카운트 애니메이션

안댕이 — Fri, 27 Oct 2023 16:58:06 +0900

목표

0부터 원하는 숫자까지 숫자가 상승하는 애니메이션 구현

HTML

<h2 id="count"></h2>

CSS

#count { font-size: 30px; }

JavaScript

let countBox = document.querySelector('#count');
let count = 0;
let num = 1234567890;

let counting = setInterval(function () {
    if (count >= num) {
        count = num;
        clearInterval(counting);
    } else {
        count += 12345678;
    }
    countBox.innerHTML = new Intl.NumberFormat().format(count);
}, 10);

결과물

See the Pen Count Animation by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[Vanilla JS] 스크롤 이벤트 구현 Scroll Event

안댕이 — Fri, 27 Oct 2023 16:34:33 +0900

목표

외부 라이브러리 없이 바닐라JS로 스크롤 이벤트 구현

HTML

<div class="wrap">
  <header id="header">Header</header>
  <body id="body">
    <div class="scroll scrollRight">Go Right</div>
    <div class="scroll scrollLeft">Go Left</div>
    <div class="scroll scrollUp">Go Up</div>
    <div class="scroll scrollDown">Go Down</div>
    <div class="delayScale">
      <ul>
        <li class="delayList">1</li>
        <li class="delayList">2</li>
        <li class="delayList">3</li>
      </ul>
    </div>
  </body>
</div>

CSS

/* reset */
.wrap { width: 100%; margin: 0 auto; background-color: #eee; }
li { list-style: none; }

#header,
#body { width: 50vw; margin: 0 auto; text-align: center; }
#header { position: sticky; top: 0; left: 0; height: 5vw;  margin-bottom: 20vw; line-height: 5vw;  background-color: #ccc; z-index: 999; }
#body .scroll { margin: 20vw auto; border-radius: 50%; }
#body .scroll,
#body .delayScale .delayList { width: 15vw; height: 15vw; line-height: 15vw;}
#body .delayScale ul { display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
#body .delayScale ul.on .delayList { animation: scale 1s 1 forwards; background-color: #ff8181; opacity: 0; }

/* background color */
#body .scroll.scrollUp { background-color: #81d1ff; }
#body .scroll.scrollDown { background-color: #ff81a7; }
#body .scroll.scrollLeft { background-color: #fff281; }
#body .scroll.scrollRight { background-color: #ff8181; }

/* scroll */
.scroll { opacity: 0; transition: 0.8s; }
.scrollRight { transform: translate(-20vw, 0); }
.scrollLeft { transform: translate(20vw, 0); }
.scrollUp { transform: translate(0, 10vw); }
.scrollDown { transform: translate(0, -10vw); }
.scrollAction { opacity: 1; transform: translate(0); }

/* animation */
@keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes scale {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

JavaScript

// Header 포함 높이 계산
const windowHeightWithHeader = window.innerHeight + document.querySelector("#header").offsetHeight;

// 스크롤 이벤트 핸들러
function scrollAction() {
  const scrollElements = document.querySelectorAll(".scroll");

  if (!scrollElements) {
    return;
  }

  scrollElements.forEach((scrollElement) => {
    const scrollHeight = scrollElement.getBoundingClientRect().top + 200;
    scrollElement.classList.toggle("scrollAction", windowHeightWithHeader > scrollHeight);
  });
}

// 애니메이션 이벤트 핸들러
function scaleEvent(selector) {
  const imgWrap = document.querySelector(selector);
  const imgWrapHeight = imgWrap && imgWrap.getBoundingClientRect().top;
  if (imgWrap && imgWrapHeight) {
    imgWrap.classList.toggle("on", windowHeightWithHeader > imgWrapHeight);
  }
}

// 애니메이션 delay 설정
function aniDelay(elements, delay) {
  elements.forEach((element, index) => {
    element.style.animationDelay = delay * index + "s";
  });
}

// 실행
const delayList = document.querySelectorAll('.delayList');

document.addEventListener("scroll", function() {
  scrollAction();
  scaleEvent('.delayScale ul');
});

document.addEventListener("DOMContentLoaded", function() {
  aniDelay(delayList, 0.3);
});

결과물

See the Pen Scroll Event by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[Vanilla JS] 무한 슬라이더 구현

안댕이 — Fri, 27 Oct 2023 15:46:40 +0900

목표

외부 라이브러리를 사용하지 않고, 계속해서 반복되는 무한 슬라이더 구현
(마지막 슬라이드에 도달하면 다시 첫번째 슬라이드로)
자동으로 넘어갈 것

HTML

<div id="sliderWrap">
  <ul class="slider">
    <li>
      <div class="itemWrap"></div>
    </li>
    <li>
      <div class="itemWrap"></div>
    </li>
    <li>
      <div class="itemWrap"></div>
    </li>
  </ul>
  <div id="btn" class="directionNav">
    <button id="prev" class="btn">prev</button>
    <button id="next" class="btn">next</button>
  </div>
  <ul class="dot">
    <li class="dots on">btn01</li>
    <li class="dots">btn02</li>
    <li class="dots">btn03</li>
  </ul>
</div>

CSS

/* reset */
li { list-style: none; }
button { border: none; }
div, ul, li, button { margin: 0; padding: 0; }

#sliderWrap { position: relative; width: 300px; height: 200px; overflow: hidden; }

/* slide item */
#sliderWrap .slider { position: absolute; top: 0; left: 0; height: 100%;}
#sliderWrap .slider li { float: left; position: relative; top: 0; left: 0; height: 100%; }
#sliderWrap .slider li .itemWrap { width: 100%; height: 100%; text-align: center; }

/* item background color */
#sliderWrap .slider li:nth-child(1) .itemWrap { background-color: #ff8181; }
#sliderWrap .slider li:nth-child(2) .itemWrap { background-color: #fff281; }
#sliderWrap .slider li:nth-child(3) .itemWrap { background-color: #81d1ff; }

/* button */
#sliderWrap .directionNav { position: relative; width: 100%; height: 100%; }
#sliderWrap .directionNav button { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; font-size: 0; background: none; cursor: pointer; }
#sliderWrap .directionNav button::after { display: block; content: ""; width: 100%; height: 100%; border-right: 3px solid #000; border-top: 3px solid #000; transform: rotate(45deg); opacity: 0.6; }
#sliderWrap .directionNav button#prev { left: 20px; }
#sliderWrap .directionNav button#prev::after { transform: rotate(-135deg); }
#sliderWrap .directionNav button#next { right: 20px; } 

/* pagination */
.dot { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.dot li { float: left; width: 10px; height: 10px; margin: 0 4px; border-radius: 50px; background: #000; opacity: 0.3; text-indent: -9999px; cursor: pointer; }
.dot li.on { opacity: 1; }

JavaScript

function initializeSlider() {
  const slideWrapper = document.getElementById('sliderWrap');
  const slider = document.querySelector('#sliderWrap .slider');
  const slides = document.querySelectorAll('#sliderWrap .slider li');
  const sliderWidth = slideWrapper.clientWidth;
  const totalSlides = slides.length;
  
  let slideIndex = 0;
  let autoSlider;

  // Set slide widths
  slides.forEach(function (element) {
    element.style.width = sliderWidth + 'px';
  });

  slider.style.width = sliderWidth * totalSlides + 'px';

  // Next, Prev, Pagination
  const nextBtn = document.getElementById('next');
  const prevBtn = document.getElementById('prev');
  const dot = document.querySelector('.dot');
  const allBtn = document.getElementById('btn');

  function plusSlides(n) {
    showSlides(slideIndex + n);
  }

  function showSlides(n) {
    slideIndex = (n + totalSlides) % totalSlides;
    slider.style.left = -(sliderWidth * slideIndex) + 'px';
    pagination();
  }

  function currentSlides(n) {
    showSlides(n);
  }

  function pagination() {
    const dots = document.querySelectorAll('.dot li');
    dots.forEach(function (element) {
      element.classList.remove('on');
    });
    dots[slideIndex].classList.add('on');
  }

  // Handle dot clicks
  dot.addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
      showSlides(Array.from(event.target.parentNode.children).indexOf(event.target));
    }
  });

  // Handle button clicks
  nextBtn.addEventListener('click', function () {
    plusSlides(1);
  });

  prevBtn.addEventListener('click', function () {
    plusSlides(-1);
  });

  // Handle hover
  const hoverElements = [allBtn, dot];

  hoverElements.forEach(function (element) {
    element.addEventListener('mouseover', function () {
      this.classList.add('active');
      clearInterval(autoSlider);
    });

    element.addEventListener('mouseleave', function () {
      this.classList.remove('active');
      startAutoSlider();
    });
  });

  // Auto slider
  function startAutoSlider() {
    autoSlider = setInterval(function () {
      plusSlides(1);
    }, 3000);
  }

  // Initialize auto slider
  startAutoSlider();
}

// 호출하여 슬라이더 초기화
initializeSlider();

결과물

See the Pen slider 01 by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[CSS] 서서히 증가하는 막대 그래프 구현

안댕이 — Fri, 27 Oct 2023 14:47:05 +0900

목표

서서히 증가하는 막대그래프 구현

HTML

<div class="graphWrap">
  <div class="graph" >
    <div id="item1" class="p-100"></div>
    <div id="item2" class="p-50"></div>
  </div>
</div>

CSS

/* reset */
ul { list-style: none; }
div, ul, li { margin: 0; padding: 0; }

/* 그래프 */
.graphWrap { position: relative; width: 300px; height: 300px; margin: 20px auto 0; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa;  }
.graphWrap .graph > div { position: absolute; bottom: 0; width: 69px; border-radius: 50px 50px 0 0; }
.graphWrap .graph > div#item1 { left: 60px; background: #ddd; }
.graphWrap .graph > div#item2 { left: 180px; background: #aaa; }

/* 애니메이션 */
.p-100{ height: 300px; animation:p-100 2s; }
.p-50 { height: 150px; animation:p-50 2s; }

@keyframes p-100{from{height:0px}to{height: 300px}}
@keyframes p-50{from{height:0px}to{height: 150px}}

결과물

See the Pen Vertical Graph by AnJunghee (@AnJunghee) on CodePen.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[Vanilla JS] 무한루프 슬라이더 구현

안댕이 — Fri, 27 Oct 2023 14:25:52 +0900

목표

외부 라이브러리를 사용하지 않고, 멈추지 않고 계속 반복하여 보여주는 무한루프 슬라이더 구현

응용하여 띠배너로 사용!

HTML

<div>
    <div class="slideWrap">
        <ul class="imgSlide">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</div>

CSS

/* reset */
section { width: 100%; }
li { display: inline-block; list-style: none; }

/* 슬라이드 */
.slideWrap { display: flex; position: relative; top: 0; left: 0; height: 200px; overflow: hidden;  }
.slideWrap .imgSlide { display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
.slideWrap .imgSlide.original { animation: 30s linear 0s infinite normal forwards running slide01; }
.slideWrap .imgSlide.clone { animation: 30s linear 0s infinite normal none running slide02; }
.slideWrap .imgSlide li { width: 200px; height: 200px; line-height: 200px; margin-right: 5vw; background-color: #ccc; text-align: center; }

/** 애니메이션 **/
/* 원본용 */
@keyframes slide01 { 
    0% { transform: translateX(0); }
    50% { transform: translateX(-100%); }
    50.01% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* 복제용 */
@keyframes slide02 { 
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}

JavaScript

const imgSlide = document.querySelector(".imgSlide");

// 복제
const clone = imgSlide.cloneNode(true);

// 복제본 추가
document.querySelector(".slideWrap").appendChild(clone);

// 원본, 복제본 위치 지정
document.querySelector(".imgSlide").offsetWidth + "px";

// 클래스 할당
imgSlide.classList.add("original");
clone.classList.add("clone");

결과물

See the Pen &lt;a href="https://codepen.io/AnJunghee/pen/OJoqzvV"&gt; Infinite slide&lt;/a&gt; by AnJunghee (&lt;a href="https://codepen.io/AnJunghee"&gt;@AnJunghee&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[Vanilla JS] 탭 메뉴 구현 / 버튼마다 다른 컨텐츠 보여주기

안댕이 — Fri, 27 Oct 2023 13:59:32 +0900

목표

버튼을 누르면 각각 다른 컨텐츠가 보여지는 탭 메뉴 구현

HTML

<div class="tab_menu">
  <ul class="videoList">
    <li class="is_on">
      <div class="cont"></div>
    </li>
    <li>
      <div class="cont"></div>
    </li>
    <li>
      <div class="cont"></div>
    </li>
    <li>
      <div class="cont"></div>
    </li>
  </ul>
  <ul class="videoBtn">
    <li class="is_on">
      <button class="tabBtn" onclick="btnEvent()">1</button>
    </li>
    <li>
      <button class="tabBtn" onclick="btnEvent()">2</button>
    </li>
    <li>
      <button class="tabBtn" onclick="btnEvent()">3</button>
    </li>
    <li>
      <button class="tabBtn" onclick="btnEvent()">4</button>
    </li>
  </ul>
</div>

CSS

/* reset */
ul { list-style: none; }
button { border: none; }

/* 컨텐츠 */
.tab_menu { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90%; box-sizing: border-box; }
.tab_menu .videoList { width: 100%; margin-bottom: 10px;}
.tab_menu .videoList li .cont{ display: none; width: 100%; height: 100px; }

/* 컨텐츠 background color */
.tab_menu .videoList li:nth-child(1) .cont{ background-color: #ff8181; }
.tab_menu .videoList li:nth-child(2) .cont{ background-color: #fff281; }
.tab_menu .videoList li:nth-child(3) .cont{ background-color: #81d1ff; }
.tab_menu .videoList li:nth-child(4) .cont{ background-color: #ff81a7; }
 
/* is on */
.tab_menu .videoList li.is_on .cont{ display: block; }

/* 버튼 */
.tab_menu .videoBtn { display: flex; justify-content: space-between; gap: 10%; width: 100%; height: 100%; }
.tab_menu .videoBtn li { margin-top: 10px; flex-grow: 1; }
.tab_menu .videoBtn li .tabBtn{ width: 100%; padding: 20px; border-radius: 5px; background-color: #ddd; color: #fff; text-align: center; font-size: 18px; font-weight: 500; line-height: 22px;}

/* 버튼 background color */
.tab_menu .videoBtn li:nth-child(1).is_on .tabBtn{ background-color: #ff8181; }
.tab_menu .videoBtn li:nth-child(2).is_on .tabBtn{ background-color: #fff281; }
.tab_menu .videoBtn li:nth-child(3).is_on .tabBtn{ background-color: #81d1ff; }
.tab_menu .videoBtn li:nth-child(4).is_on .tabBtn{ background-color: #ff81a7; }

JavaScript

function btnEvent() {
  const tabMenu = document.querySelector('.tab_menu');
  const tabList1 = Array.from(tabMenu.querySelectorAll('.videoList li'));
  const tabList2 = Array.from(tabMenu.querySelectorAll('.videoBtn li'));

  tabMenu.addEventListener('click', (e) => {
    const target = e.target;
    if (target.classList.contains('tabBtn')) {
      e.preventDefault();
      const index = tabList2.indexOf(target.parentNode);
      if (index !== -1) {
        tabList1.forEach((item, i) => {
          item.classList.remove('is_on');
          tabList2[i].classList.remove('is_on');
        });
        tabList1[index].classList.add('is_on');
        tabList2[index].classList.add('is_on');
      }
    }
  });
}

결과물

See the Pen &lt;a href="https://codepen.io/AnJunghee/pen/BaObmee"&gt; Tab&lt;/a&gt; by AnJunghee (&lt;a href="https://codepen.io/AnJunghee"&gt;@AnJunghee&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

응용 - 카테고리 구현

See the Pen &lt;a href="https://codepen.io/AnJunghee/pen/LYJaOjL"&gt; Category&lt;/a&gt; by AnJunghee (&lt;a href="https://codepen.io/AnJunghee"&gt;@AnJunghee&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

11,072종의 무료 html 아이콘

SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.

www.flaticon.com

[프로그래머스] Lv.1 최소직사각형 / JS

안댕이 — Thu, 26 Oct 2023 09:57:00 +0900

문제 설명

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다.

아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.

명함 번호	가로 길이	세로 길이
1	60	50
2	30	70
3	60	30
4	80	40

가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 x 50)입니다.

모든 명함의 가로 길이와 세로 길이를 나타내는 2차원 배열 sizes가 매개변수로 주어집니다. 모든 명함을 수납할 수 있는 가장 작은 지갑을 만들 때, 지갑의 크기를 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

sizes의 길이는 1 이상 10,000 이하입니다.
- sizes의 원소는 [w, h] 형식입니다.
- w는 명함의 가로 길이를 나타냅니다.
- h는 명함의 세로 길이를 나타냅니다.
- w와 h는 1 이상 1,000 이하인 자연수입니다.

입출력 예

sizes	result
[[60, 50], [30, 70], [60, 30], [80, 40]]	4000
[[10, 7], [12, 3], [8, 15], [14, 7], [5, 15]]	120
[[14, 4], [19, 6], [6, 16], [18, 7], [7, 11]]	133

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

명함들을 적절히 회전시켜 겹쳤을 때, 3번째 명함(가로: 8, 세로: 15)이 다른 모든 명함보다 크기가 큽니다. 따라서 지갑의 크기는 3번째 명함의 크기와 같으며, 120(=8 x 15)을 return 합니다.

입출력 예 #3

명함들을 적절히 회전시켜 겹쳤을 때, 모든 명함을 포함하는 가장 작은 지갑의 크기는 133(=19 x 7)입니다.

나의 답변

function solution(sizes) {
    const width = [], height = [];
    
    sizes.forEach(([w, h]) => {
        if(w > h) {
            width.push(w);
            height.push(h);
        } else {
            width.push(h);
            height.push(w);
        }
    });
    
    width.sort((a, b) => b - a);
    height.sort((a, b) => b - a);
    
    return width[0] * height[0];
}

배열을 활용하여 풀이해보았다.

sizes 배열을 순회하며 가로 길이와 세로 길이를 비교하여 더 큰 값을 width 배열에 추가하고,

sort 메서드로 배열을 내림차순으로 정렬한다.

내림차순 정렬을 한 배열의 첫번째 요소끼리 곱해준다.

⭐ 참고할 답변

function solution(sizes) {
    const rotated = sizes.map(([w, h]) => w < h ? [h, w] : [w, h]);

    let maxSize = [0, 0];
    rotated.forEach(([w, h]) => {
        if (w > maxSize[0]) maxSize[0] = w;
        if (h > maxSize[1]) maxSize[1] = h;
    })
    return maxSize[0]*maxSize[1];
}

내가 작성한 코드보다 간결하고, 가로, 세로 각각의 배열을 생성하지 않아도 된다!

maxSize 변수의 값을 업데이트 해주고, 마지막에 곱한 값을 반환한다.

생각보다 간단했지만 어려웠던... 그런... 문제

[프로그래머스] Lv.1 크기가 작은 부분 문자열 / JS

안댕이 — Fri, 1 Sep 2023 15:09:58 +0900

문제 설명

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.

예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.

⭐ 제한사항

1 ≤ p의 길이 ≤ 18
p의 길이 ≤ t의 길이 ≤ 10,000
t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.

입출력 예

t	p	result
"3141592"	"271"	2
"500220839878"	7	8
"10203"	"15"	3

입출력 예 설명

입출력 예 #1

본문과 같습니다.

입출력 예 #2

p의 길이가 1이므로 t의 부분문자열은 "5", "0", 0", "2", "2", "0", "8", "3", "9", "8", "7", "8"이며 이중 7보다 작거나 같은 숫자는 "5", "0", "0", "2", "2", "0", "3", "7" 이렇게 8개가 있습니다.

입출력 예 #3

p의 길이가 2이므로 t의 부분문자열은 "10", "02", "20", "03"이며, 이중 15보다 작거나 같은 숫자는 "10", "02", "03" 이렇게 3개입니다. "02"와 "03"은 각각 2, 3에 해당한다는 점에 주의하세요

나의 답변

1️⃣ for문 사용

function solution(t, p) {
    let count = 0;
    for(let i = 0; i < t.length; i++) {
        const substring = t.slice(i, i + p.length);
        if(substring.length === p.length && parseInt(substring) <= parseInt(p)) {
            count++;
        }
    }
    return count;
}

2️⃣ 배열 활용

function solution(t, p) {
    return [...t].map((_, i) => t.substr(i, p.length)).filter((v) => v.length === p.length && +v <= +p).length;
}

for문이 더 효율적일 듯 하다!

[프로그래머스] Lv.1 삼총사 / JS

안댕이 — Fri, 1 Sep 2023 14:16:22 +0900

문제 설명

한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다.

한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하세요.

⭐ 제한사항

3 ≤ number의 길이 ≤ 13
-1,000 ≤ number의 각 원소 ≤ 1,000
서로 다른 학생의 정수 번호가 같을 수 있습니다.

입출력 예

number	result
[-2, 3, 0, 2, 5]	2
[-3, -2, -1, 0, 1, 2, 3]	5
[-1, 1, -1, 1]	0

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

학생들의 정수 번호 쌍 (-3, 0, 3), (-2, 0, 2), (-1, 0, 1), (-2, -1, 3), (-3, 1, 2) 이 삼총사가 될 수 있으므로, 5를 return 합니다.

입출력 예 #3

삼총사가 될 수 있는 방법이 없습니다.

나의 답변

function solution(number) {
    let answer = 0;
    for(let x = 0; x < number.length; x++) {
        for(let y = x+1; y <= number.length; y++) {
            for(let z = y+1; z <= number.length; z++) {
                let sum = number[x] + number[y] + number[z];
                if (sum === 0) answer++;
                sum = 0;
            }
        }
    }
    return answer;
}

[프로그래머스] Lv.1 예산 / JS

안댕이 — Fri, 1 Sep 2023 14:13:51 +0900

삭제

문제 설명

S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다.

물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다.

부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

d는 부서별로 신청한 금액이 들어있는 배열이며, 길이(전체 부서의 개수)는 1 이상 100 이하입니다.
d의 각 원소는 부서별로 신청한 금액을 나타내며, 부서별 신청 금액은 1 이상 100,000 이하의 자연수입니다.
budget은 예산을 나타내며, 1 이상 10,000,000 이하의 자연수입니다.

입출력 예

d	budget	result
[1, 3, 2, 5, 4]	9	3
[2, 2, 3, 3]	10	4

입출력 예 설명

입출력 예 #1

각 부서에서 [1원, 3원, 2원, 5원, 4원]만큼의 금액을 신청했습니다. 만약에, 1원, 2원, 4원을 신청한 부서의 물품을 구매해주면 예산 9원에서 7원이 소비되어 2원이 남습니다. 항상 정확히 신청한 금액만큼 지원해 줘야 하므로 남은 2원으로 나머지 부서를 지원해 주지 않습니다. 위 방법 외에 3개 부서를 지원해 줄 방법들은 다음과 같습니다.
- 1원, 2원, 3원을 신청한 부서의 물품을 구매해주려면 6원이 필요합니다.
- 1원, 2원, 5원을 신청한 부서의 물품을 구매해주려면 8원이 필요합니다.
- 1원, 3원, 4원을 신청한 부서의 물품을 구매해주려면 8원이 필요합니다.
- 1원, 3원, 5원을 신청한 부서의 물품을 구매해주려면 9원이 필요합니다.
3개 부서보다 더 많은 부서의 물품을 구매해 줄 수는 없으므로 최대 3개 부서의 물품을 구매해 줄 수 있습니다.

입출력 예 #2

모든 부서의 물품을 구매해주면 10원이 됩니다. 따라서 최대 4개 부서의 물품을 구매해 줄 수 있습니다.

나의 답변

function solution(d, budget) {
    d.sort((a, b) => a - b);

    let answer = 0;
    for (let el of d) {
        budget -= el;
        if(budget < 0) break;
        answer++;
    }

    return answer;
}

⭐ 참고할 답변

function solution(d, budget) {
    return d.sort((a, b) => a - b).reduce((count, price) => {
        return count + ((budget -= price) >= 0);
    }, 0);
}

boolean값으로 덧셈하는 것도 좋은 방식인 것 같다

[프로그래머스] Lv.1 이상한 문자 만들기 / JS

안댕이 — Thu, 31 Aug 2023 17:05:28 +0900

문제 설명

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

⭐ 제한사항

문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다.
첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다.

입출력 예

s	return
"try hello world"	"TrY HeLlO WoRlD"

입출력 예 설명

입출력 예 #1

"try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 "TrY", "HeLlO", "WoRlD"입니다. 따라서 "TrY HeLlO WoRlD" 를 리턴합니다.

나의 답변

function solution(s) {    
    return s.split(" ").map((v) => [...v].map((char, i) => i % 2 ? char.toLowerCase() : char.toUpperCase()).join("")).join(" ");
}

메서드야 고마워

[프로그래머스] Lv.1 3진법 뒤집기 / JS

안댕이 — Thu, 31 Aug 2023 17:05:22 +0900

문제 설명

자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

n은 1 이상 100,000,000 이하인 자연수입니다.

입출력 예

n	result
45	7
125	229

입출력 예 설명

입출력 예 #1

답을 도출하는 과정은 다음과 같습니다.

따라서 7을 return 해야 합니다.

입출력 예 #2

답을 도출하는 과정은 다음과 같습니다.

따라서 229를 return 해야 합니다.

나의 답변

function solution(n) {
    return parseInt([...n.toString(3)].reverse().join(""), 3);
}

다 풀고 좋아요 가장 많은 답변이랑 정답 똑같으면 기분이 좋다

[프로그래머스] Lv.1 같은 숫자는 싫어 / JS

안댕이 — Thu, 31 Aug 2023 17:05:14 +0900

문제 설명

배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,

arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.
arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.

배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

⭐ 제한사항

배열 arr의 크기 : 1,000,000 이하의 자연수
배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수

입출력 예

arr	answer
[1, 1, 3, 3, 0, 1, 1]	[1, 3, 0, 1]
[4, 4, 4, 3, 3]	[4, 3]

입출력 예 설명

입출력 예 #1, 2

문제의 예시와 같습니다.

나의 답변

function solution(arr) {
    return arr.filter((v, i) => v !== arr[i+1]);
}

[프로그래머스] Lv.1 최대공약수와 최소공배수 / JS

안댕이 — Wed, 30 Aug 2023 16:17:30 +0900

문제 설명

두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다.

⭐ 제한사항

두 수는 1이상 1000000이하의 자연수입니다.

입출력 예

n	m	return
3	12	[3, 12]
2	5	[1, 10]

입출력 예 설명

입출력 예 #1

위의 설명과 같습니다.

입출력 예 #2

자연수 2와 5의 최대공약수는 1, 최소공배수는 10이므로 [1, 10]을 리턴해야 합니다.

나의 답변

function solution(n, m) {
    let gcd = 0;
    
    // 최대공약수 구하기
    for(let i = 1; i <= Math.max(n, m); i++) {
        if(n % i === 0 && m % i === 0) gcd = i;
    }
    
    return [gcd, (n * m) / gcd];
}

최소공배수 = (n * m) / 최대공약수

[프로그래머스] Lv.1 직사각형 별찍기 / JS

안댕이 — Wed, 30 Aug 2023 16:09:09 +0900

문제 설명

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.
별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.

⭐ 제한사항

n과 m은 각각 1000 이하인 자연수입니다.

입출력 예

입력

5 3

출력

*****
*****
*****

나의 답변

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    const n = data.split(" ");
    const a = Number(dt[0]), b = Number(dt[1]);

    const star = '*'.repeat(a);
    for(let i = 0; i < b; i++) {
        console.log(star);
    }
});

갑자기 답안에 Node.js 문법이 들어있어서 당황

학교다닐 때 별찍기 진짜 많이 했는데, JS로는 처음 풀어본다. repeat 너무 좋아

좋아요 가장 많이 받은 답변이랑 똑같이 풀어서 뿌듯하다 ✨

[프로그래머스] Lv.1 행렬의 덧셈 / JS

안댕이 — Wed, 30 Aug 2023 15:57:43 +0900

문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

⭐ 제한사항

행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

입출력 예

arr1	arr2	return
[[1, 2], [2, 3]]	[[3, 4], [5, 6]]	[[4, 6], [7,9]]
[[1], [2]]	[[3], [4]]	[[4], [6]]

나의 답변

1️⃣ 2중 for문을 활용한 풀이

function solution(arr1, arr2) {
    const answer = [];
    for(let i = 0; i < arr1.length; i++) {
        answer.push([]);
        for(let j = 0; j < arr1[i].length; j++) {
            answer[i].push(arr1[i][j] + arr2[i][j]);
        }
    }
    return answer;
}

2️⃣ map() 메서드를 활용한 풀이

function solution(arr1, arr2) {
    return arr1.map((row, i) => row.map((col, j) => col + arr2[i][j]));
}

[프로그래머스] Lv.1 문자열 다루기 기본 / JS

안댕이 — Wed, 30 Aug 2023 15:27:29 +0900

문제 설명

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.

⭐ 제한사항

s는 길이 1 이상, 길이 8 이하인 문자열입니다.
s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다.

입출력 예

s	return
"a234"	false
"1234"	true

나의 답변

function solution(s) {
    return (s.length === 4 || s.length === 6) && s.replaceAll(/[0-9]/g, '').length === 0;
}

⭐ 참고할 답변

function solution(s) {
    return /^\d{6}$|^\d{4}$/.test(s);
}

정규식 제대로 공부해야겠다 wow

test() : 문자열이 정규표현식과 매칭되면 true, 아니면 false 반환

[프로그래머스] Lv.1 부족한 금액 계산하기 / JS

안댕이 — Wed, 30 Aug 2023 15:16:38 +0900

문제 설명

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다.
놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요.
단, 금액이 부족하지 않으면 0을 return 하세요.

⭐ 제한사항

놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수
처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수
놀이기구의 이용 횟수 count : 1 ≤ count ≤ 2,500, count는 자연수

입출력 예

price	money	count	result
3	20	4	10

입출력 예 설명

입출력 예 #1

이용금액이 3인 놀이기구를 4번 타고 싶은 고객이 현재 가진 금액이 20이라면, 총 필요한 놀이기구의 이용 금액은 30 (= 3+6+9+12) 이 되어 10만큼 부족하므로 10을 return 합니다.

나의 답변

function solution(price, money, count) {
    let fee = 0;
    for(let i = 1; i <= count; i++) {
        fee += price * i;
    }
    return fee < money ? 0 : fee - money;
}

⭐ 참고할 답변 - 가우스 공식

function solution(price, money, count) {
    const tmp = price * count * (count + 1) / 2 - money;
    return tmp > 0 ? tmp : 0;
}

수학을 잘해야 하는 이유

[프로그래머스] Lv.1 문자열 내림차순으로 배치하기 / JS

안댕이 — Wed, 30 Aug 2023 15:06:54 +0900

문제 설명

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.
s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

⭐ 제한사항

str은 길이 1 이상인 문자열입니다.

입출력 예

s	return
"Zbcdefg"	"gfedcbZ"

나의 답변

function solution(s) {
    return [...s].sort().reverse().join("");
}

[프로그래머스] Lv.1 약수의 개수와 덧셈 / JS

안댕이 — Wed, 30 Aug 2023 15:02:20 +0900

문제 설명

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

1 ≤ left ≤ right ≤ 1,000

입출력 예

left	right	result
13	17	43
24	27	52

입출력 예 설명

입출력 예 #1

다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.

입출력 예 #2

다음 표는 24부터 27까지의 수들의 약수를 모두 나타낸 것입니다.

따라서, 24 - 25 + 26 + 27 = 52를 return 해야 합니다.

나의 답변

function solution(left, right) {
    let answer = 0;
    
    for(let i = left; i <= right; i++) {
        let count = 0;
        for(let j = 1; j <= i; j++) {
            if(i % j === 0) count++;
        }
        count % 2 ? answer -= i : answer += i;
    }
    
    return answer;
}

⭐ 감탄한 답변

function solution(left, right) {
    var answer = 0;
    for (let i = left; i <= right; i++) {
        if (Number.isInteger(Math.sqrt(i))) {
            answer -= i;
        } else {
            answer += i;
        }
    }
    return answer;
}

약수는 대칭을 이루는데, 제곱근만이 자기자신과 대칭을 이루기 때문에 제곱근이 정수면 약수의 개수가 홀수다...

천잰가

[프로그래머스] Lv.1 내적 / JS

안댕이 — Wed, 30 Aug 2023 14:30:20 +0900

문제 설명

길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.

이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)

⭐ 제한사항

a, b의 길이는 1 이상 1,000 이하입니다.
a, b의 모든 수는 -1,000 이상 1,000 이하입니다.

입출력 예

a	b	result
[1, 2, 3, 4]	[-3, -1, 0, 2]	3
[-1, 0, 1]	[1, 0, -1]	-2

입출력 예 설명

입출력 예 #1

a와 b의 내적은 1*(-3) + 2*(-1) + 3*0 + 4*2 = 3 입니다.

입출력 예 #2

a와 b의 내적은 (-1)*1 + 0*0 + 1*(-1) = -2 입니다.

⭐ 내적이란?

유클리드 공간의 두 벡터로부터 실수 스칼라를 얻는 연산

같은 위치의 성분을 곱한 뒤 모두 합하여 얻는 값 ... ‍♀️

나의 답변

function solution(a, b) {
    return a.reduce((acc, curr, i) => acc += curr * b[i], 0);
}

for문으로 풀다가 reduce 인자값으로 index가 들어갈 수 있는 걸 깨닫고 다시 풀었다.

[프로그래머스] Lv.1 수박수박수박수박수박수? / JS

안댕이 — Wed, 30 Aug 2023 14:18:41 +0900

문제 설명

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

⭐ 제한사항

n은 길이 10,000이하인 자연수입니다.

입출력 예

n	return
3	"수박수"
4	"수박수박"

나의 답변

function solution(n) {
    let result = "";
    for(let i = 0; i < n; i++) {
        result += i % 2 ? "박" : "수"
    }
    return result;
}

⭐ 참고할 답변

function solution(n) {
    return '수박'.repeat(n/2) + (n%2 ? '수' : '');
}

[프로그래머스] Lv.1 가운데 글자 가져오기 / JS

안댕이 — Wed, 30 Aug 2023 14:10:40 +0900

문제 설명

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

⭐ 제한사항

s는 길이가 1 이상, 100이하인 스트링입니다.

입출력 예

s	return
"abcde"	"c"
"qwer"	"we"

나의 답변

function solution(s) {
    const mid = Math.floor(s.length/2);
    return s.length % 2 ? s[mid] : s[mid-1] + s[mid];
}

⭐ 참고할 답변

function solution(s) {
    return s.substr(Math.ceil(s.length / 2) - 1, s.length % 2 === 0 ? 2 : 1);
}

substr로 잘라줘도 되는구나

[프로그래머스] Lv.1 제일 작은 수 제거하기 / JS

안댕이 — Wed, 30 Aug 2023 10:50:32 +0900

문제 설명

정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.

⭐ 제한사항

arr은 길이 1 이상인 배열입니다.
인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.

입출력 예

arr	return
[4, 3, 2, 1]	[4, 3, 2]
[10]	[-1]

나의 답변

1️⃣ splice, indexOf를 활용한 풀이

function solution(arr) {
    arr.splice(arr.indexOf(Math.min(...arr)), 1);
    return arr.length ? arr : [-1];
}

2️⃣ filter를 활용한 풀이

function solution(arr) {
    const filteredArray = arr.filter((v) => v !== Math.min(...arr));
    return filteredArray.length ? filteredArray : [-1];
}

이제 문제 제목을 보면 이거 이 메서드 쓰면 되겠다! 싶은 생각이 든다

좀 성장한 듯

[프로그래머스] Lv.1 없는 숫자 더하기 / JS

안댕이 — Wed, 30 Aug 2023 10:37:18 +0900

문제 설명

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

1 ≤ numbers의 길이 ≤ 9
- 0 ≤ numbers의 모든 원소 ≤ 9
- numbers의 모든 원소는 서로 다릅니다.

입출력 예

number	return
[1, 2, 3, 4, 6, 7, 8, 0]	14
[5, 8, 4, 0, 6, 7, 9]	6

입출력 예 설명

입출력 예 #1

5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다.

입출력 예 #2

1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야 합니다.

나의 답변

function solution(numbers) {
    const set = new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
    numbers.forEach((v) => set.delete(v));
    return [...set].reduce((acc, curr) => acc + curr);
}

set을 생성하고, numbers에 들어있는 숫자는 지운다.

그리고 reduce로 값을 모두 더해 출력하면 끝!

⭐ 참고할 답변

function solution(numbers) {
    return 45 - numbers.reduce((cur, acc) => cur + acc, 0);
}

0부터 9까지 모두 더한 값에서 numbers의 모든 원소를 더한 값을 빼면 없는 원소들의 합이 나온다.

이런 수학적 사고가... 필요하다...

[프로그래머스] Lv.1 핸드폰 번호 가리기 / JS

안댕이 — Wed, 30 Aug 2023 10:17:58 +0900

문제 설명

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

⭐ 제한사항

phone_number는 길이 4 이상, 20이하인 문자열입니다.

입출력 예

phone_number	return
"01033334444"	"*******4444"
"027778888"	"*****8888"

나의 답변

1️⃣ *로 채워진 배열을 생성하여 뒷 4자리 문자열과 더해주기

배열을 생성하는 과정이 생략되어도 될 것 같다.

function solution(phone_number) {
    const num = phone_number.length - 4;
    return new Array(num).fill("*").join('') + phone_number.slice(num);
}

2️⃣ fill() 활용

1번의 풀이를 조금 더 간결하게 풀어보았다. fill이 배열을 새로 채워주니까, 0부터 뒷 4자리 이전까지를 *로 채우고, join("")으로 문자열로 변환하여 반환

function solution(phone_number) {
    return [...phone_number].fill("*", 0, phone_number.length - 4).join("");
}

3️⃣ repeat() 활용 ✨

*을 반복해서 찍어주면 되는 거니까, repeat()을 쓰는 게 훨씬 간결하고 좋은 것 같다.

function solution(phone_number) {
    return "*".repeat(phone_number.length - 4) + phone_number.slice(-4);
}

[프로그래머스] Lv.1 음양 더하기 / JS

안댕이 — Wed, 30 Aug 2023 09:53:07 +0900

문제 설명

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

⭐ 제한사항

absolutes의 길이는 1 이상 1,000 이하입니다.
- absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.
signs의 길이는 absolutes의 길이와 같습니다.
- signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

입출력 예

absolutes	signs	result
[4, 7, 12]	[true, true, true]	9
[1, 2, 3]	[false, false, true]	0

입출력 예 설명

입출력 예 #1

signs가 [true,false,true] 이므로, 실제 수들의 값은 각각 4, -7, 12입니다.
따라서 세 수의 합인 9를 return 해야 합니다.

입출력 예 #2

signs가 [false,false,true] 이므로, 실제 수들의 값은 각각 -1, -2, 3입니다.
따라서 세 수의 합인 0을 return 해야 합니다.

나의 답변

function solution(absolutes, signs) {
    return signs.map((v, i) => v ? absolutes[i] : -absolutes[i]).reduce((acc, curr) => acc + curr, 0);
}

Lv. 0에서 배열 메서드 공부하고 푸니까 이제 아주 쉽게 풀 수 있다!

[프로그래머스] Lv.1 나누어 떨어지는 숫자 배열 / JS

안댕이 — Wed, 30 Aug 2023 09:43:28 +0900

문제 설명

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.
divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

⭐ 제한사항

arr은 자연수를 담은 배열입니다.
정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.
divisor는 자연수입니다.
array는 길이 1 이상인 배열입니다.

입출력 예

arr	divisor	return
[5, 9, 7, 10]	5	[5, 10]
[2, 36, 1, 3]	1	[1, 2, 3, 36]
[3, 2, 6]	10	[-1]

입출력 예 설명

입출력 예 #1

arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 [5, 10]을 리턴합니다.

입출력 예 #2

arr의 모든 원소는 1으로 나누어 떨어집니다. 원소를 오름차순으로 정렬해 [1, 2, 3, 36]을 리턴합니다.

입출력 예 #3

3, 2, 6은 10으로 나누어 떨어지지 않습니다. 나누어 떨어지는 원소가 없으므로 [-1]을 리턴합니다.

나의 답변

function solution(arr, divisor) {
    const answer = arr.filter((v) => v % divisor === 0).sort((a, b) => a - b);
    return answer.length ? answer : [-1];
}

술술 풀고 정답 확인하니 좋아요 가장 많은 정답이랑 비슷했다.

괜히 기분 좋다

개 친 바

[HTML] 노마드코더 코코아톡 클론코딩 1일차

시맨틱 태그

자주 사용하는 태그

form 태그

<input> type 속성

[CSS] 동영상 배경 설정하기

목표

HTML

CSS

02장. 자바스크립트

✅ 자바스크립트의 탄생

✅ 자바스크립트의 표준화

✅ 자바스크립트 성장의 역사

1) Ajax(Asynchronous JavaScript and XML)

2) jQuery

3) V8 자바스크립트 엔진

4) Node.js

5) SPA 프레임워크

✅ 자바스크립트와 ECMAScript

✅ 자바스크립트의 특징

01장. 프로그래밍

00. 모던 자바스크립트 Deep Dive 공부 시작!

[카카오 이모티콘] 2024년 중간 기록

[Vanilla JS] 버튼을 클릭하면 늘어나는 아코디언 메뉴

목표

HTML

CSS

JavaScript

결과물

[Vanilla JS] 스와이퍼 없이 슬라이더 구현하기 (+ play/stop/progress bar)

목표

HTML

CSS

JavaScript

결과물

1월 회고 + 2월 시작!

[Git] Git 기초 / 맥OS 깃 설치

git 설치하기

사용해보기

알아두면 좋은 명령어

2024년 시작!

[프로그래머스] Lv.1 카드 뭉치 / JS

문제 설명

⭐ 제한사항

입출력 예

입출력 예 설명

나의 답변

[프로그래머스] Lv.1 콜라 문제 / JS

문제 설명

⭐ 제한사항

입출력 예

입출력 예 설명

나의 답변

⭐ 참고할 답변

[프로그래머스] Lv.1 폰켓몬 / JS

문제 설명

⭐ 제한사항

입출력 예

입출력 예 설명

나의 답변

[프로그래머스] Lv.1 두 개 뽑아서 더하기 / JS

문제 설명

⭐ 제한사항

입출력 예

입출력 예 설명

나의 답변

[프로그래머스] Lv.1 푸드 파이트 대회 / JS

문제 설명

⭐ 제한사항

입출력 예

입출력 예 설명

나의 답변

⭐ 참고할 답변

[프로그래머스] Lv.1 비밀지도 / JS / 비트연산자

문제 설명

입력 형식

입력 형식

입출력 예제

나의 답변

`<input>` type 속성