0차0차

GSAP 애니메이션 라이브러리 20일 플랜 (챗지피가 짜준)

유니유뉘 — Wed, 20 Aug 2025 22:06:28 +0900

정해진 목표가 없는 공부 방법은 끝을 못 볼 것 같아 체계적인 공부 방법을 잡아야겠다고 생각이 들었다.

바로 지피티 형님께 하루 1시간 20일(주5일) 플랜 요청을 했다.

플랜 요청할 때 다음과 같은 목표들을 제시했다.

1) 실무에 바로 사용할 수 있을 것

2) 포트폴리오로 사용할 수 있을 정도의 실력이 될 것

3) 요청사항이 들어와도 충분히 잘 쳐낼 수 있을 것

4주 플랜(주 5일 · 하루 1시간)

1주차 – 기본기 탄탄 + 타임라인 감각

* Day1은 Draggable 플러그인 학습으로 Day1은 생략된 상태이다.

Day2

A: 히어로 섹션 와이프 인/아웃, 텍스트 from/to, 페이드-슬라이드.
B: gsap.to/from/fromTo 스니펫 5종(좌/우/상/하, opacity, scale).
Done 기준: 히어로 타이틀 1.2s에 깔끔히 등장, 재실행해도 부자연스러움 없음.

Day3

A: timeline()으로 히어로 시퀀스(타이틀→서브→CTA 버튼).
B: 타임라인 제어 스니펫: pause/resume/reverse/seek, 라벨(<, >, "label+=0.5").
Done: 타임라인을 버튼으로 정상 제어.

Day4

A: 섹션2 카드 3개 순차 등장 + 약간의 overlap(포지션 파라미터).
B: ease 카탈로그( power, back, elastic, bounce )를 한 눈에 비교 스니펫.
Done: 8개 이징 비교 예제 1개.

Day5

A: 반응형 대응: 폰/태블릿/데스크톱에서 등장 거리·duration 다르게(matchMedia).
B: matchMedia() 템플릿 스니펫.
Done: 3 breakpoint에서 자연스러움 확인.

2주차 – ScrollTrigger 정복

Day6

A: 기본 스크롤 리빌(섹션 진입 시 fade-up).
B: ScrollTrigger 베이직 템플릿( trigger, start, end, toggleActions ).
Done: 세 섹션에서 같은 패턴 재사용.

Day7

A: pin + scrub으로 스토리텔링 섹션 1개 완성.
B: “sticky 이미지 + 텍스트 변환” 스니펫.
Done: 0~100% 구간에서 자연스러운 스크럽.

Day8

A: 수치 카운트업(TextPlugin 없이도 가능, 있으면 더 편함) + 프로그레스 바.
B: 카운터·프로그레스 재사용 스니펫(옵션: duration, start/end).
Done: 스크롤에 따라 숫자/바 동기화.

Day9

A: 섹션 전환 애니메이션(풀스크린 페널 슬라이드).
B: “다중 섹션 전환” 스니펫(각 섹션별 트리거 반복 생성 패턴).
Done: 3개 섹션 이상 자연스러운 전환.

Day10

A: ScrollTrigger + Timeline 결합 최종 점검(라벨, seek로 QA).
B: 디버그 스니펫(markers: true 토글, ScrollTrigger.getAll() 정리).
Done: 모든 트리거 marker off 시에도 정상 동작.

3주차 – 플러그인 응용(의뢰 대응력 ↑)

Day11 (TextPlugin)

A: 히어로 소제목 타이핑 효과(리타입/삭제 변형 포함).
B: 텍스트 타이핑 스니펫(속도, 지연, 커서 깜빡임).
Done: 한글/영문 모두 자연스러움 확인.

Day12 (MotionPathPlugin)

A: SVG 경로 따라 로고 아이콘 이동(스크롤 연동).
B: 모션패스 스니펫(SVG path 셀렉터, autoRotate 옵션).
Done: path 변경해도 쉽게 교체 가능.

Day13 (Draggable 심화)

A: 커스텀 슬라이더(좌/우 drag, 스냅, inertia).
B: Draggable 캐러셀 스니펫(스냅 포인트, bounds 템플릿).
Done: 키보드/버튼 제어도 추가(접근성 향상).

Day14 (FlipPlugin)

A: 그리드↔리스트 레이아웃 전환.
B: Flip 스니펫(상태 캡처→애니메이션, 필터/정렬 대응).
Done: 이미지 비율 다양한 케이스에서도 안정.

Day15 (정리·클론 미니)

A: 작은 브랜드 섹션 클론(로고 reveal+숫자 카운트+pin).
B: 오늘 만든 핵심 스니펫 3개 리팩토링(옵션화).
Done: 코드 주석/옵션화 완료.

4주차 – 고급 응용 + 쇼케이스 마감

Day16 (패럴랙스)

A: 다층 패럴랙스(배경/중경/전경), ScrollTrigger로 depth 감도 조절.
B: 패럴랙스 스니펫(요소별 factor 옵션).
Done: 모바일 성능 체크(이미지 최적화 포함).

Day17 (SVG/라인 드로잉)

A: 로고 라인 드로잉 + fill-in.
B: “라인 길이 계산 + 스크롤 연동” 스니펫.
Done: 고해상도에서도 aliasing 최소화.

Day18 (프레임워크 준비)

A: React/Vite 구조로 포폴 페이지 이식(또는 최소 샘플).
B: @gsap/react + useGSAP 훅 등록/컨텍스트 샘플.
Done: CSR 전용 가드, gsap.registerPlugin() 위치 명확.

Day19 (Three.js 연동 맛보기)

A: 카메라 포지션/타겟 GSAP 애니메이션(스크롤 구간 전환).
B: “three + GSAP” 미니 스니펫(카메라·오브젝트 rotate/position).
Done: 프리징 없이 자연스러운 트랜지션.

Day20 (최종 마감)

A: 랜딩페이지 쇼케이스 디테일링(히어로, 스토리 섹션, 통계, 패럴랙스, 라인드로잉).
B: 스니펫 라이브러리 문서화(폴더 구조·옵션 표·예시 GIF).
Done: 포트폴리오 배포(간단 호스팅 or GitHub Pages).

하루하루 공부하고 블로그 후기를 남기면서 생각의 변화가 어떻게 흘러갈지 너무 궁금하다.

또 포트폴리오 제작 및 배포를 하면서 해당 플랜에 대해 리뷰를 남겨 과연 추천할만한 플랜인지도 작성할 예정이다.

GSAP 애니메이션 라이브러리 1

유니유뉘 — Tue, 19 Aug 2025 18:02:08 +0900

다시 초심을 잡아서 꾸준히 공부하는 기록을 남기고자 다시 돌아왔다.

퍼블리셔로 일하면서 GSAP 애니메이션을 자유롭게 이용해 화면을 구현한다면 더할 나위 없는 장점이 될 것이라고 느꼈다.

그리고 생각보다 애니매이션을 추가로 홈페이지가 더 다채로운 화면으로 또 UI/UX 적으로 크게 긍정적인 영향을 미치는 것을 볼 수 있었다.

공식 홈페이지 바로가기

먼저 GSAP는 애니메이션 라이브러리이다. 그래서 스크롤 이벤트, 도형의 움직임 등 구현할 수 있는 애니메이션이 매우 다양하다.

GSAP 사이트로 들어가면 script 불러오는 방식이랑 문서가 있지만 전부 영어고 제대로 해석된 자료들이 없어 시간이 오래 걸렸지만, 이젠 내 친구 챗지피한테 물어보면서 독학할 수 있었다.

~~사랑한다 지피티야❤️~~

근데 물론 지피티에 100% 의존하면 안되고 문서 보면서 파악하고 이해 안 되는 부분이 생기면 그때 지피티랑 토론하듯이 대화해야 양질의 정보를 얻을 수 있다.

앞서 작성한 것처럼 다양한 애니메이션을 구현할 수 있는데

스크롤 + 움직임 애니메이션을 함께 사용했을 때 아주아주 매력적이다. 특히 스크롤 애니메이션 직접 구현하다 보면 어느 부분에서 버벅임이 있거나 반응형 대응에 취약하거나 혹은 비효율적인 코드 작성으로 페이지자체가 매우 느려지곤 한다. 이는 전부 사용자에게 부정적인 경험을 겪게 하고 결과적으론 홈페이지 이탈자가 많아지는 결과를 초래한다.

그렇다면 본론으로 들어가 세팅부터 스크롤 애니메이션, 도형 움직임, 바운스와 타이머, 좀 더 효율적으로 작성해야할 관점에 대해 작성해보려고 한다.

Quick start > Installation 클릭하면 npm, CDN, yarn으로 다양하게 설치 가능하다.

그 중에서 CDN으로 설치하려고 한다.

아래 스크립트 태그를 코드 내에 삽입

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

그리고 Plugins 카테고리 내 다양한 체크박스들이 있다.

해당 체크박스들은 애니메이션 종류들이니 해당 애니메이션 사용 예정이면 체크해서 생성된 스크립트 태그를 추가해줘야한다.

예시)

GSAP 애니메이션 기능 중에 Draggable을 사용할 예정이라면

해당 애니메이션 체크 후 생성된 스크립트 태그를 삽입하면 된다.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>

위 처럼 하나씩 추가하면 된다.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

SplitText까지 체크하면 위처럼 3개로 늘어나게 된다.

Draggable 애니메이션 구현하는데 정의되지 않은 기능이라면서 콘솔창에 나온 적이 있었는데

알고 보니 그냥 해당 애니메이션 태그 삽입 안해서 생긴 문제다. ~~허허허~~

자바스크립트 작성할 때 기본 프레임은 체크하면 아래 콘텐츠에 나온다.

<script>
 // use a script tag or an external JS file
 document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(Draggable)
  // gsap code here!
 });

</script>

gsap.registerPlugin(Draggable) 이라고 작성해줘야한다.

->설치할 때 양식은 gsap.registerPlugin(플러그인작성)

만약에 여러 개의 플러그인을 사용한다면 아래처럼 작성하면 된다.

gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);

~~위 내용은 FAQs에서 해당 내용 찾을 수 있다.~~

~~Do I need to gsap.registerPlugin() each plugin?~~

Typically, yes. ~~~

~~gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin);~~

왜 gsap.registerPlugin(플러그인) 이 코드를 삽입해야할까?

보통 CDN 방식은 플러그인이 로드될 때 자동 등록되서 동작하지만, 순서가 잘못되면 자동 등록이 실패하고

"플러그인 is not defined" 라는 에러 코드가 나올 수 있다.

그래서 안전한 실행을 위해서 꼭꼭 gsap.registerPlugin(플러그인) 삽입 방식을 권장한다.

ES 모듈 방식은 그냥 무조건 해야한다. 안 하면 플러그인 작동 안되고 번들에서 빠지게 되어서 안된다. (*트리 셰이킹 이슈 방지)

=> 그냥 필수라고 생각하자

*트리 셰이킹 이슈

번들러가 사용되지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화인데 플러그인을 코드에서 직접 참조하지 않으면 번들러가 사용하지 않는다고 생각하고 플러그인 코드를 통째로 빼버리는 이슈

지금까지 Draggable 플러그인 세팅까지 완료했다. 이제 사용해보자.

친절한 Docs를 살펴보자. 보자보자

Draggable 공식문서 이미지

플러그인 등록 -> 기능 구현으로 스크립트 작성하면 된다.

#yourID는 애니메이션 먹일 아이디, type은 종류라고 생각하면 될 것 같다.

type에는 x, y, left, top, rotation이 있다.

x,left은 좌우 / y, top은 상하 / rotation은 회전이다.

자세한 속성은 아래 콘텐츠로 정리되어 있다.

https://gsap.com/docs/v3/Plugins/Draggable/#type

스크롤 내리다 보니 코드가 더 길어져있다.

Draggable.create("#yourID", {
  type: "y",
  bounds: document.getElementById("container"),
  inertia: true,
  onClick: function () {
    console.log("clicked");
  },
  onDragEnd: function () {
    console.log("drag ended");
  },
});

bounds와 inertia와 onClick했을 때와, onDragEnd 했을 때 동작까지 옵션 지정까지 디테일하게 설정 가능한 것을 확인할 수 있다.

bounds : 드래그 가능한 영역 지정
inertia : 놓았을 때의 관성효과 (밀리는 효과)
onclick : 클릭 이벤트
onDragEnd : 드래그 끝났을 때 이벤트

그렇다면 이제 직접 코드로 입력해서 어떻게 움직이는지 보려고 한다.

근데 더 작성하고 싶은데 너무 길어졌다. 일단 올리고 수정하면서 내용 보충하려고 한다.

See the Pen Untitled by Siyoon Kim (@siyoonagain) on CodePen.

프로그래머스 코딩 입문 문제.js - 외계어 사전

유니유뉘 — Fri, 24 Nov 2023 14:22:54 +0900

문제 설명

PROGRAMMERS-962 행성에 불시착한 우주비행사 머쓱이는 외계행성의 언어를 공부하려고 합니다. 알파벳이 담긴 배열 spell과 외계어 사전 dic이 매개변수로 주어집니다. spell에 담긴 알파벳을 한 번씩만 모두 사용한 단어가 dic에 존재한다면 1, 존재하지 않는다면 2를 return 하도록 solution 함수를 완성해 주세요.

...

문제 요약

1. spell의 철자들이 dic 요소들 중 순서에 상관없이 전부 포함되어야 한다.

2. spell의 철자가 a, b, c라면 dic 요소 중 하나가 ‘abc’, ‘bca’, ‘cda’ 등 순서에 상관없이 다 들어가야 한다.

3. ‘abcd’ 이처럼 spell에 없는 요소인 d가 들어가 있는 건 인정하지 않는다.

작성한 답

function solution(spell, dic){
	let check = dic.some((x)=> spell.every(i)=>x.includes(i)));
	if(check){
		return 1
	}else{
		return 2
	}
}

function solution(spell, dic) {
    return dic.some((x)=> spell.every((i)=>x.includes(i))) ? 1 : 2
}

상단 코드에서 if문 대신 삼항 연산자를 사용해서 한 줄 코드로 요약할 수 있었다.

some()과 every() 메서드로 spell 요소들이 dic 요소에 다 포함이 되면 true, 하나라도 포함되지 않으면 false가 나오게 했다.

그래서 true라면 1, false라면 2를 반환하는 코드이다.

위 코드에서 x는 dic의 요소, i는 spell의 요소가 된다.

⇒ dic의 요소에 spell의 요소들이 전부 포함되나요? 들어가면 true 아니라면 false 반환해 주세요.

여기서 some를 사용한 이유는 각각의 배열 요소들을 비교하기 위해서 사용했다. for 문이나 filter를 사용해 배열의 요소들을 불러와도 된다.

filter 사용하면

function solution(spell, dic){
	dic.filter((x)=>spell.every((i)=>x.includes(i))).length ? 1 : 2;
}

이런 식으로 포함되어 있다면 1 아니면 2로 표현한다. 여기서 length 붙인 이유는 filter로 했을 때 true, false로 반환되지 않고 해당되는 요소들을 반환하기에 요소들이 있으면 배열의 길이는 0이 아닐 테니 1, 0이면 2를 반환하도록 한다. (0, null, undefined는 false로 인식)

(~~이 답은 이미 있는 답안인데 볼 때마다 매번 어떻게 간단하게 작성했을까 감탄하게 된다.~~)

for문 사용하면

function solution(spell, dic){
	for(i=0;i<dic.length;i++){spell.every((e)=>dic[i].includes(e)) ? 1 : 2};
}

filter와 비슷해 보이는데 정확하게 some()과 every() 메서드는 무엇일까?

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트한다. 만약 배열에서 주어진 함수가 true를 반환하면 true를 반환하고 그렇지 않다면 false를 반환한다. 이 메서드는 배열을 변경하지 않는다.

⇒ 주어진 조건을 만족시키는 요소가 최소 1개 이상 있는지를 확인할 때 사용한다. 그래서 반환값이 true일 때까지 확인한다. 마지막까지 true를 반환하지 않는다면 false를 반환한다. or과 비슷하다고 보면 된다.

every() 메서드는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트한다. 이 메서드는 boolean 값을 반환한다.

⇒ 모든 원소가 조건을 통과하는지 확인할 수 있다. 그래서 반환값이 false가 나오면 동작을 멈추고 false를 반환한다. and와 비슷하다고 보면 된다.

메서드에 대해 더 자세한 설명을 보고 싶다면 공식 사이트에서 확인하면 좋을 것 같다.

[리액트 오류] JSON Error in .prettierrc.json

유니유뉘 — Sun, 25 Jun 2023 10:14:54 +0900

prettier 사이트에서 설치한 후 echo {}> .prettierrc.json 이 코드를 터미널에 실행하면

.prettierrc.json 파일이 생성이 되고 파일 안에 {}가 적혀있어야하는데 자꾸 빈칸 처리만 되고 보이지 않았다.

(아래 사진은 예시여서 빈칸이 아닌데 밑에 창보면 JSON.error라고 나온다.)

열심히 구글링해본 결과 한 사이트에서 해답을 얻을 수 있었다.하단에 UTF-16이면 UTF-8로 바꿔야한다.

그러면 오류는 사라지고 prettier가 제대로 작동하는 것을 볼 수 있다!

[리액트 오류] - Warning: Invalid DOM property `class`. Did you mean `className`

유니유뉘 — Thu, 22 Jun 2023 14:50:38 +0900

개발자 툴에 Warning: Invalid DOM property `class`. Did you mean `className` 오류가 떠버렸다.

찾아보니 말 그대로 너가 쓴 class, className 의미하는거니? 라는 뜻이었고 코드를 살펴보니 JSX에서 class로 써버렸다. JS에서는 class로 작성하지만 JSX에서는 className으로 작성해야한다. 의미는 같지만 표기하는 법이 다르기에 꼭 유의해야한다. 안 그러면 위처럼 오류가 뜨기 때문이다.

오류 해결법은 class —> className으로 바꾸면 된다.

근데 하나하나 바꾸면 ~~시간도 걸리고 귀찮다~~. 한번에 바꾸는 법을 알아보자!

ctrl + f 를 누르면 위 창이 나온다. 맨 왼쪽 화살표를 클릭하면 두개의 input창이 생긴다.

위에선 단어 선택을 아래는 뭐라고 바꿀 것인지 적고 replace all를 의미하는 빨간 동그라미를 친 아이콘을 누르면 된다!

그러면 class인 단어들이 className으로 바뀌고 개발자 툴에 있던 오류가 사라진 걸 확인 할 수 있다.

숨어있는 숫자의 덧셈(2) - 프로그래머스 문제

유니유뉘 — Mon, 27 Mar 2023 13:54:45 +0900

숨어있는 숫자의 덧셈(2) 문제 풀어보기!

문제 )
문자열 my_string이 매개변수로 주어지는데 소문자, 대문자, 자연수로만 구성되어 있다.
매개 변수 안의 자연수들의 합을 return하라.

예시로 my_string = "aAb1B2cC34oOp"이라면 반환해야 할 값은 37이다. ( 1+2+34 = 37 )

내가 생각한 코드 작성 단계는 첫 번째, 먼저 자연수만 남길 수 있도록 하기. 두 번째 남겨진 자연수들을 합해서 리턴하기로 이루어져 있다.

자연수만 남기기 위해선 정규표현식을 사용해야 훨씬 편리하다는 것을 알았다.

/[^a-zA-Z]+/g -> 이 정규식 표현을 사용해 문자열을 필터링할 것이다.

const fil = /[^a-zA-Z]+/g;
let number = my_string.match(fil);
//["1","2","34"];

이를 fil이란 변수에 저장한 후 my_string에서 문자열을 필터링하고 필터링한 (자연수만 남아있는) 값을 number라는 변수에 담아준다. 그러면 number에는 자연수만 남는데 console.log를 찍어보면 알 수 있다.

let answer = 0;
number.map((x,i)=> answer += Number(number[i]));
return answer;

더한 값들을 저장할 변수 answer를 만들어두고 이제 map 함수를 이용해 각각의 숫자를 더해주면 된다.

그러면 answer에는 37이 리턴이 된다.

하지만 제출 후 채점했을 때 테스트 8 에러로 통과하지 못했다. 그 이유는 my_string에 자연수가 없을 경우를 고려하지 못했기 때문이다. 그래서 if문을 사용해 자연수가 없을 땐 0을 리턴하도록 했다.

let answer = 0;

if(!number){
	return 0;
}else if(number){
	number.map((x,i)=> answer += Number(number[i]));
    return answer;
}

최종 코드

function solution(my_string) {
   const fil = /[^a-zA-Z]+/g;
    let answer = 0;
    let number = (my_string.match(fil));
    
    if(!number){
        return 0;
    }else if(number){
        number.map((x,i)=> answer +=  Number(number[i])); 
        return answer;
    }
    
}

나의 주관적인 생각

결과적으로 테스트에 통과했지만 생각보다 필요하지 않는 코드로 구성되어 있어서 그런 게 아닐까 생각이 들었다.

그 이유는 러닝타임이 너무 오래걸렸기 때문이다. 그리고 다른 사람들이 작성한 코드랑 비교하면 위의 코드가 긴 편에 속한다.

이 코드를 수정한다면 불필요한 코드가 무엇이었을지 파악하고 그것을 수정하여 런타임을 줄이는데 목표를 잡아야겠다.

프로그래머스 문제 풀기 - 모스부호(1)

유니유뉘 — Wed, 22 Mar 2023 14:18:54 +0900

프로그래머스 문제 풀기 - 모스부호 (1)

문제

모스부호로 된 변수 letter를 영어 소문자 문자열로 반환하는 것이다.

morse 부호가 담긴 배열이 주어지고 letter 변수에는 ".... . .-.. .-.. ---"가 담겨온다.

morse = { 
    '.-':'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'
}

이 문제에는 map과 split그리고 join 함수를 사용했다.

그렇다면 첫 번째로 해야 할 것은

1. 변수 letter에 담긴 데이터들을 나누기

자세히 보면 공백으로 구분되어 있는데 공백을 기준으로 하나씩 나누어줄 것이다.

let array = letter.split(' ');

split를 사용해 공백을 기준으로 문자열을 나누었다. => ["....",".",".-..",".-..","---"];

2. key : value 이용하기

return morse["...."]

위 코드를 입력하면 "h"가 반환되는 걸 알 수 있다. (morse를 자세히 보면 key : value로 이루어져 있다.)

3. map 함수를 이용해 morse[array 안의 요소] 넣고 반환하기

map를 이용하면 (x, i) 중에서 i 두 번째 인자로 쉽게 배열의 요소를 하나씩 돌릴 수 있다.

let array = letter.split(' ');

return array.map((x,i)=> morse[array[i]]);

array.map((x, array의 길이)) => morse[array[0 ~ array 변수 길이만큼 반복]]);key 값 = morse["...."] / value 값 = "h"

이렇게 하면 ' "h", "e", "l", "l", "o" ' 가 반환된다.

4. 하나의 문자열로 합쳐주기

하나로 합쳐주기 위해 join 함수를 이용한다.

return array.map((x,i)=> morse[array[i]]).join("");

위 코드를 통해 letter의 모스부호를 해석한 "hello"가 반환된다.

전체적인 코드

function solution(letter) {
    const morse = { 
    '.-':'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'
	}
    
    let array = letter.split(' ');
    return array.map((x,i)=> morse[array[i]]).join("");
}

JavaScript match() 메서드

유니유뉘 — Tue, 21 Mar 2023 14:44:59 +0900

JavaScript match( ) 메서드에 대해서

match( ) 메서드는 무엇일까?

문자열이 정규식과 매치되는 부분을 검색한다.

str.match(regexp)

regexp는 정규식 개체이다. RegExp가 아닌 객체 obj가 전달되면, new RegExp(obj)를 사용하여 암묵적으로 RegExp로 변환된다. 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열 : [ “” ]이 있는 Array가 반환된다.

여기서 RegExp란?

패턴을 사용해 텍스트를 판별할 때 사용한다.
리터럴 표기법과 생성자이다.
- 리터럴 표기법의 매개변수는 두 빗금으로 감싸야하며 따옴표를 사용하지 않는다.
- 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다.

결과 값은 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array를 반환한 다음 괄호 안에 캡처된 결과가 온다. 일치하는 것이 없으면 null이 반환된다.

정규식에 g 플래그가 포함되어 있지 않으면 , str.match()는 RegExp.exex()와 같은 결과를 반환한다. 반환도니 Array는 원래 문자열의 값을 가지는 input 속성을 포함한다. 그리고 문자열에서 제로 베이스의 인덱스를 나타내는 index속성 또한 포함한다.

정규식에 g플래그가 포함되어 있으면, 일치는 객체가 아닌 일치하는 하위 문자열을 포함하는 Array를 반환한다. 캡처된 그룹은 반환되지 않는다. 일치하는 것이 없으면 null이 반환된다.

예시)

let a = "Apple cider is cider?"
let b = a.match("is");

console.log(b);

//['is']

match 안에 있는 값을 찾으면 그 값을 반환하고 index 값까지 나온다.

나의 주관적인 생각

프로그래머스 문제 풀다가 matchAll 메서드를 이용한 간단하고 깔끔한 코드를 봤어서 이렇게 찾아 공부해봤는데 찾으면 찾을수록 이걸 잘 써먹기 위해선 정규 표현식에 대해 제대로 알고 난 후에 이 메서드를 다시 공부하는 게 좋을 것 같다.

그래서 지금 여기 내용이 부족하지만 정규 표현식 → match( ) → matchAll( ) 를 익히고 나서 다시 수정할 계획이다!

JavaScript 이벤트 처리기 함수 - e.currentTarget

유니유뉘 — Mon, 20 Mar 2023 13:25:23 +0900

JavaScripte e.currentTarget에 대해서

e.currentTarget은 무엇일까?

e.currentTarget은 Javascript의 이벤트 처리기 함수이

며 현재 이벤트가 발생한 요소를 가리킨다.

근데 e.target과 차이점이 있다.

e.target를 사용하면 클릭한 그 요소만을 가져오고 e.currentTarget를 사용하면 클릭한 그 요소의 부모 태그까지 가져온다.

예시)

<div class="parent">
	<span class="click">click</span>
</div>

document.querySelector(".parent").addEventListener('click',function(e){
	console.log(e.target);
	console.log(e.currentTarget);
})

//<span class="click">click</span>

//<div class="parent">
//	<span class="click">click</span>
//</div>

이렇게 e.target는 해당 요소만(click클래스) 가져오지만 e.currentTarget은 그 요소의 부모요소(parent클래스)까지 가져온다.

e.currentTarget 값은 이벤트가 처리되는 동안만 사용할 수 있다.

counter 기능 코딩 연습하는데 참고한 곳에서 코드 작성할 때 e.currentTarget를 사용했는데 신박했다고 느꼈다.(~~개인적으로~~)

마이너스 버튼, 초기화 버튼, 플러스 버튼 총 3개의 버튼이 있는데 버튼클래스를 눌렀을 때 *클래스가 포함되어 있다면 이런 동작을 해줘! 였다.

<h1 class="value">0</h1>
<button class="btn mi">-</button>
<button class="btn reset">reset</button>
<button class="btn plus">+</button>

let btns = document.querySelectorAll(".btn");
let num = document.querySelector(".value");
let count = 0;

btns.addEventListener('click',function(e){
	let 이벤트값 = e.currentTarget.classList;
	if(이벤트값.contains('mi')){
		count--;
	}else if(이벤트값.contains('plus')){
		count++;
	}else{
		count = 0;
	}
	value.textContent = count;
});

이렇게 button 태그를 btn 클래스로 묶어서 클릭했을 때 부모요소까지 가져와 내가 원하는 class명이 포함되어있다면 원하는 동작을 할 수 있도록 실행할 수 있었다. 이로써 코드는 깔끔해지고 간단해질 수 있었다.

카운터 만드는 기능은 이곳에서 배웠다. 다른 기능들도 알고 싶으면 이 사이트에 가서 만들어보는 걸 추천한다!

JavaScript sort()메서드

유니유뉘 — Sun, 19 Mar 2023 14:15:24 +0900

JavaScript sort() 메서드에 대해서

sort() 메서드는 무엇일까?

sort( ) 메서드는 배열의 요소를 정렬한다. 원본 배열의 요소 순서를 변경하므로, 배열 자체가 변경된다. 이 메서드는 기본적으로 문자열을 변환한 후 유니코드 순서로 정렬된다. 따라서 숫자를 정렬할 때는 정렬 기준을 정의해주어야 한다.

arr.sort([ compareFunction ])

기본적으로 오름차순으로 정렬된다.

const fruits = ['banana','orange','apple','grape'];
fruits.sort();
console.log(fruits);

//['apple', 'banana', 'grape', 'orange']

만약 내림차순으로 정렬하고 싶다면

const numbers = [5,2,8,1,4];
numbers.sort((a,b)=>b - a);
console.log(numbers);

//[8, 5, 4, 2, 1]

compareFunction 자리에 콜백 함수를 사용하여 정렬 기준을 정의할 수 있다. 이 콜백 함수는 두 개의 인자( ‘a’, ‘b’ )를 받아서 ‘-1’ , ‘0’, ‘1’ 중 하나를 반환해야 한다. 반환값이 음수면 ‘a’가 ‘b’보다 작은 것으로 간주해 ‘a’가 ‘b’ 앞으로 정렬된다. 반환값이 양수이면 ‘a’가 ‘b’보다 큰 것으로 간주하여 ‘a’가 ‘b’ 뒤로 정렬된다. 반환값이 ‘0’이면 ‘a’와 ‘b’의 순서는 변경되지 않는다.

const fruits = ['banana','orange','apple','grape'];
fruits.sort((a , b) => a.length - b.length );
console.log(fruits);

//['apple', 'grape', 'banana', 'orange']

하지만 sort( ) 메서드는 큰 배열을 정렬할 땐 속도가 느려질 수 있다.

이 메서드에 대한 주관적인 생각

이리저리 순서가 정렬되어 있지 않는 배열에 sort( ) 메서드를 사용하고 큰 수를 찾던가 작은 수를 찾는 방법일 때 많이 이용했던 것 같다. 그래서 순서 정렬이 전부일 거라 생각했는데 자세히 파고 드니 콜백함수를 어떻게 사용하느냐에 따라 다르고 지금까지 한 배열은 짧아서 sort로만 잘 이용할 수 있었는데 수백 가지의 데이터들을 정렬해야 할 상황이 올 때 어떤 방식으로 코드를 짜야할지 고민할 수 있는 기회가 되었다.