분류 전체보기
-
GSAP 애니메이션 라이브러리 20일 플랜 (챗지피가 짜준)javascript 2025. 8. 20. 22:06
정해진 목표가 없는 공부 방법은 끝을 못 볼 것 같아 체계적인 공부 방법을 잡아야겠다고 생각이 들었다.바로 지피티 형님께 하루 1시간 20일(주5일) 플랜 요청을 했다.플랜 요청할 때 다음과 같은 목표들을 제시했다.1) 실무에 바로 사용할 수 있을 것2) 포트폴리오로 사용할 수 있을 정도의 실력이 될 것3) 요청사항이 들어와도 충분히 잘 쳐낼 수 있을 것 📆 4주 플랜(주 5일 · 하루 1시간)1주차 – 기본기 탄탄 + 타임라인 감각* Day1은 Draggable 플러그인 학습으로 Day1은 생략된 상태이다.Day2A: 히어로 섹션 와이프 인/아웃, 텍스트 from/to, 페이드-슬라이드.B: gsap.to/from/fromTo 스니펫 5종(좌/우/상/하, opacity, scale).Done 기준: ..
-
GSAP 애니메이션 라이브러리 1javascript 2025. 8. 19. 18:02
다시 초심을 잡아서 꾸준히 공부하는 기록을 남기고자 다시 돌아왔다.퍼블리셔로 일하면서 GSAP 애니메이션을 자유롭게 이용해 화면을 구현한다면 더할 나위 없는 장점이 될 것이라고 느꼈다.그리고 생각보다 애니매이션을 추가로 홈페이지가 더 다채로운 화면으로 또 UI/UX 적으로 크게 긍정적인 영향을 미치는 것을 볼 수 있었다. 공식 홈페이지 바로가기 먼저 GSAP는 애니메이션 라이브러리이다. 그래서 스크롤 이벤트, 도형의 움직임 등 구현할 수 있는 애니메이션이 매우 다양하다.GSAP 사이트로 들어가면 script 불러오는 방식이랑 문서가 있지만 전부 영어고 제대로 해석된 자료들이 없어 시간이 오래 걸렸지만, 이젠 내 친구 챗지피한테 물어보면서 독학할 수 있었다.사랑한다 지피티야❤️근데 물론 지피티에 100% ..
-
프로그래머스 코딩 입문 문제.js - 외계어 사전프로그래머스 문제 풀기 2023. 11. 24. 14:22
문제 설명 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..
-
[리액트 오류] JSON Error in .prettierrc.json리액트 2023. 6. 25. 10:14
prettier 사이트에서 설치한 후 echo {}> .prettierrc.json 이 코드를 터미널에 실행하면 .prettierrc.json 파일이 생성이 되고 파일 안에 {}가 적혀있어야하는데 자꾸 빈칸 처리만 되고 보이지 않았다. (아래 사진은 예시여서 빈칸이 아닌데 밑에 창보면 JSON.error라고 나온다.) 열심히 구글링해본 결과 한 사이트에서 해답을 얻을 수 있었다.하단에 UTF-16이면 UTF-8로 바꿔야한다. 그러면 오류는 사라지고 prettier가 제대로 작동하는 것을 볼 수 있다!
-
[리액트 오류] - Warning: Invalid DOM property `class`. Did you mean `className`리액트 2023. 6. 22. 14:50
개발자 툴에 Warning: Invalid DOM property `class`. Did you mean `className` 오류가 떠버렸다. 찾아보니 말 그대로 너가 쓴 class, className 의미하는거니? 라는 뜻이었고 코드를 살펴보니 JSX에서 class로 써버렸다. JS에서는 class로 작성하지만 JSX에서는 className으로 작성해야한다. 의미는 같지만 표기하는 법이 다르기에 꼭 유의해야한다. 안 그러면 위처럼 오류가 뜨기 때문이다. 오류 해결법은 class —> className으로 바꾸면 된다. 근데 하나하나 바꾸면 시간도 걸리고 귀찮다. 한번에 바꾸는 법을 알아보자! ctrl + f 를 누르면 위 창이 나온다. 맨 왼쪽 화살표를 클릭하면 두개의 input창이 생긴다. 위에선 ..
-
숨어있는 숫자의 덧셈(2) - 프로그래머스 문제프로그래머스 문제 풀기 2023. 3. 27. 13:54
숨어있는 숫자의 덧셈(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(..
-
프로그래머스 문제 풀기 - 모스부호(1)프로그래머스 문제 풀기 2023. 3. 22. 14:18
프로그래머스 문제 풀기 - 모스부호 (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'..
-
JavaScript match() 메서드javascript 2023. 3. 21. 14:44
JavaScript match( ) 메서드에 대해서 match( ) 메서드는 무엇일까? 문자열이 정규식과 매치되는 부분을 검색한다. str.match(regexp) regexp는 정규식 개체이다. RegExp가 아닌 객체 obj가 전달되면, new RegExp(obj)를 사용하여 암묵적으로 RegExp로 변환된다. 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열 : [ “” ]이 있는 Array가 반환된다. 여기서 RegExp란? 패턴을 사용해 텍스트를 판별할 때 사용한다. 리터럴 표기법과 생성자이다. 리터럴 표기법의 매개변수는 두 빗금으로 감싸야하며 따옴표를 사용하지 않는다. 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다. 결과 값은 문자열이 정규식과 일치하면, 일치하..