-
GSAP 애니메이션 라이브러리 20일 플랜 (챗지피가 짜준)
정해진 목표가 없는 공부 방법은 끝을 못 볼 것 같아 체계적인 공부 방법을 잡아야겠다고 생각이 들었다.바로 지피티 형님께 하루 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 애니메이션 라이브러리 1
다시 초심을 잡아서 꾸준히 공부하는 기록을 남기고자 다시 돌아왔다.퍼블리셔로 일하면서 GSAP 애니메이션을 자유롭게 이용해 화면을 구현한다면 더할 나위 없는 장점이 될 것이라고 느꼈다.그리고 생각보다 애니매이션을 추가로 홈페이지가 더 다채로운 화면으로 또 UI/UX 적으로 크게 긍정적인 영향을 미치는 것을 볼 수 있었다. 공식 홈페이지 바로가기 먼저 GSAP는 애니메이션 라이브러리이다. 그래서 스크롤 이벤트, 도형의 움직임 등 구현할 수 있는 애니메이션이 매우 다양하다.GSAP 사이트로 들어가면 script 불러오는 방식이랑 문서가 있지만 전부 영어고 제대로 해석된 자료들이 없어 시간이 오래 걸렸지만, 이젠 내 친구 챗지피한테 물어보면서 독학할 수 있었다.사랑한다 지피티야❤️근데 물론 지피티에 100% ..
-
프로그래머스 코딩 입문 문제.js - 외계어 사전
문제 설명 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
prettier 사이트에서 설치한 후 echo {}> .prettierrc.json 이 코드를 터미널에 실행하면 .prettierrc.json 파일이 생성이 되고 파일 안에 {}가 적혀있어야하는데 자꾸 빈칸 처리만 되고 보이지 않았다. (아래 사진은 예시여서 빈칸이 아닌데 밑에 창보면 JSON.error라고 나온다.) 열심히 구글링해본 결과 한 사이트에서 해답을 얻을 수 있었다.하단에 UTF-16이면 UTF-8로 바꿔야한다. 그러면 오류는 사라지고 prettier가 제대로 작동하는 것을 볼 수 있다!
-
[리액트 오류] - Warning: Invalid DOM property `class`. Did you mean `className`
개발자 툴에 Warning: Invalid DOM property `class`. Did you mean `className` 오류가 떠버렸다. 찾아보니 말 그대로 너가 쓴 class, className 의미하는거니? 라는 뜻이었고 코드를 살펴보니 JSX에서 class로 써버렸다. JS에서는 class로 작성하지만 JSX에서는 className으로 작성해야한다. 의미는 같지만 표기하는 법이 다르기에 꼭 유의해야한다. 안 그러면 위처럼 오류가 뜨기 때문이다. 오류 해결법은 class —> className으로 바꾸면 된다. 근데 하나하나 바꾸면 시간도 걸리고 귀찮다. 한번에 바꾸는 법을 알아보자! ctrl + f 를 누르면 위 창이 나온다. 맨 왼쪽 화살표를 클릭하면 두개의 input창이 생긴다. 위에선 ..
-
GSAP 애니메이션 라이브러리 20일 플랜 (챗지피가 짜준)javascript 2025.08.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.08.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.06.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.06.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창이 생긴다. 위에선 ..