profile
개발기록
태그 목록
전체보기 (61)JavaScript(6)코딩테스트(6)자바스크립트(5)animation(5)크롤링(5)애니메이션(5)캔버스(4)canvas(4)context(4)React(4)쟈스(4)파이썬(4)자스(4)js(4)ctx(3)리액트(3)이미지(3)cheatsheet(3)운영체제(3)넥스트(2)객체(2)function(2)python(2)git(2)클래스(2)치트시트(2)알고리즘(2)puppeteer(2)입출력(2)함수(2)this(2)animate()(2)컨텍스트(2)flutter(2)사전(2)http(2)코테(2)next.js(2)nodejs(2)제로초(2)font(2)선언(1)웹팩(1)import(1)동기식(1)autoindex(1)(1)shadow(1)drawImage(1)assembly(1)도커파일(1)snackbar(1)(1)mouseup(1)errno(1)프로그래머스(1)레티나(1)buildcontext(1)OOP(1)전공지식(1)시뮬레이션(1)리스트(1)bind(1)web fonts(1)linked list(1)집기(1)(1)System Call(1)규칙(1)튀기는(1)image(1)Syntax(1)위젯트리(1)카카오(1)딕셔너리(1)빅오(1)리덕스(1)language(1)vector(1)input(1)튜플(1)컴공(1)dotenv(1)collide(1)retina(1)서버(1)프론트(1)obj(1)Message(1)hot-loader(1)드래그(1)img(1)(1)요청(1)외부함수(1)family(1)Debian(1)class(1)ball(1)바벨(1)web font(1)UTC(1)export(1)사이드프로젝트(1)문법(1)font file(1)포트폴리오(1)폰트(1)dev-server(1)interaction(1)dictionary(1)tcp(1)webpack(1)php(1)세트(1)호출(1)코드(1)블로그(1)클리핑(1)error(1)collision(1)UDP(1)인스턴스(1)https(1)Nginx(1)속도(1)declare(1)next(1)extern(1)(1)syscall(1)docker(1)오토인덱스(1)clipping(1)ft_server(1)velocity(1)컨테이너(1)default(1)nested(1)파일(1)mouseover(1)arrow(1)인터뷰(1)commit(1)완전탐색(1)click(1)클릭(1)ttf(1)데이타베이스(1)코딩셰프(1)mask(1)timezone(1)mysql(1)화살표(1)CSS(1)스크린샷(1)fonts(1)함수 표현식(1)복잡도(1)에르노(1)그리디(1)날짜(1)boucing(1)벡터(1)focus(1)css선택자(1)EventListener(1)localstorage(1)함수 선언문(1)핫로더(1)freebsd(1)에러(1)개발자(1)버스터(1)매스크(1)래퍼(1)multiline(1)toc(1)클립(1)Markdown(1)마크다운(1)libasm(1)bounce(1)mousedown(1)호버(1)submit(1)addEventListener(1)display(1)woff(1)style(1)clip(1)app(1)font-face(1)carry flag(1)키프레임(1)(1)MariaDB(1)구현(1)next js(1)wrapper(1)바인드(1)에러번호(1)babel(1)화질(1)svg(1)데브서버(1)otf(1)redux-wrapper(1)Map(1)워드프레스(1)자료형(1)wordpress(1)미니쉘(1)GSAP(1)new Date(1)시스템콜(1)데비안(1)mouseout(1)응답(1)토이프로젝트(1)어셈블리(1)브라우저사이즈(1)Date(1)error number(1)drag(1)redux(1)튀기기(1)speed(1)set(1)stash(1)생성자(1)도커(1)apply(1)call(1)웹폰트(1)dockerfile(1)전공(1)minishell(1)pick(1)로그인(1)nextjs(1)취업(1)인터렉션(1)KST(1)scaffold.of()(1)object(1)dday(1)buster(1)shadowBlur(1)마우스오버(1)

[JS] Code Snippets

str의 조합을 리턴

2021년 4월 3일
·
0개의 댓글
post-thumbnail

[Bouncing Ball] Interactions만들기 -mouseover시 속도 변경, 이미지 집어서 드래그

브라우저 창에 마우스 호버하면 슬로우모션으로 애니메이션 실행마우스로 움직이는 공 잡아서 드래그mouseover 로 호버했을 때 공들의 속도를 늦추기mouseout 으로 마우스가 브라우저 밖으로 나갔을 때 속도 원상복귀브라우저 창에 마우스를 호버하면 슬로우모션으로 공이

2021년 2월 7일
·
0개의 댓글
post-thumbnail

[Bouncing Ball] clip()으로 도형에 이미지 넣고 애니메이션 적용

벽에 부딫히는 공 애니메이션clip 사용하기캔버스에 이미지 그리기공에 이미지 넣기clip() 기능을 사용해 핑크색 공 안에 보라색 상자를 넣을 수 있다즉, 핑크색 공은 보라색 상자 내부에만 존재drawImageimg.onload는 이벤트리스터로 작성해도 된다이미지 출력

2021년 2월 5일
·
0개의 댓글

[Bouncing Ball] 윈도우 창에 부딪히는 공 애니메이션

캔버스에 공 그리기애니메이션 만들기beginPath로 시작점 알리기원의 중심, 시작각도, 끝각도, 그리는 방향 설정fillStyle로 채울 색 설정 (이미지패턴같은 것도 가능)fill()로 채움그림을 그릴 캔버스를 생성해준다Ball의 draw 함수를 호출해 ball을

2021년 2월 5일
·
0개의 댓글
post-thumbnail

[애니메이션 초기작업] 윈도우 창이 변할 때마다 Canvas 크기 새로 지정

2차원 비트맵 그래픽과 애니메이션을 그릴 수 있는 HTML 요소패스, 도형, 글자 등을 그리고 이미지를 추가하는 다양한 함수들이 존재width와 height 속성만 존재 (default width: 150, height: 300)캔버스는 고정 크기의 드로잉 영역을 생성

2021년 2월 3일
·
0개의 댓글
post-thumbnail

CSS에 폰트 적용하기 (웹폰트 & 폰트 파일)

눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다적용적용파일을 다운받은 후 프로젝트 디렉토리에 복사한다url 자리에 해당 폰트 파일의 경로 기입font-family이름은 원하는대로 지정적용

2021년 1월 31일
·
0개의 댓글

GSAP with React

GSAP 기존 TweenMax와 TimelineMax 라이브러리가 GSAP으로 통합되었다고한다. 통합되면서 ScrollMagic과 함께 사용하는데 어려움이 생겼고 ScrollMagic측에서 별다른 해결법을 내놓지 않는 것 같다 그러던 와중에 GSAP에서 Scroll

2021년 1월 27일
·
0개의 댓글

[JS] CheatSheet - Etc

name으로 data를 localStorage에 저장name으로 저장된 data를 localStorage에서 불러오기localStorage 비우기

2021년 1월 17일
·
0개의 댓글

[JS] CheatSheet - Map, Set

📖 Map 🎯 new Map() ➡︎ Map 생성 🎯 map.set() ➡︎ Map에 자료 입력/제거/수정 🎯 map.has() ➡︎ Map에 key 있는지 확인하기 🎯 map.get() ➡︎ Map의 value 가져오기 📖 Set 🎯 new Set() ➡︎ Set 생성 🎯 set.has() ➡︎ Set 자료 꺼내보기 🎯 set...

2021년 1월 17일
·
0개의 댓글

[JS] CheatSheet - Object

인덱스가 key프로퍼티를 갖고 있는지 불리언으로 리턴

2021년 1월 17일
·
0개의 댓글

[Assembly Language] 시스템콜 에러처리

🎯 외부 함수 \_\_error를 사용해서 errno의 값을 세팅해줄 것Your code must set the variable errno properly.For that, you are allowed to call the extern \_\_\_error.🎯 er

2020년 12월 23일
·
0개의 댓글

[Assembly Language] 시스템콜

시스템 콜 관련 header들시스템 콜이란 프로그램이 운영체제의 커널에게 특정 작업을 수행해달라고 요청하는 것으로 다음과 같은 종류가 있다프로세스 제어(process Control)파일 조작(file manipulation)장치 관리(Device Management)정

2020년 12월 23일
·
0개의 댓글

[python] Linked List

geeksforgeeks python Linked List노드 생성 함수data에 값 저장next에 다음 노드 연결Linked List 생성아무것도 저장되지 않은 head도 생성됨Linked List의 head를 Node로 초기화data가 1인 Node를 생성해서 he

2020년 12월 21일
·
0개의 댓글

[minishell 미니쉘] 기초

fork()로 기본 쉘 돌리기ls, pwd 등 간단한 명령어가 가능하다

2020년 12월 21일
·
0개의 댓글

우테코 3기 프리코스 후기

벌써 프리코스가 마무리되었습니다. 3주 동안의 짧은 시간이었지만 기대 이상으로 많이 성장했고 배웠습니다. 특히 자바스크립트의 모듈과 클래스, 함수 등의 사용법을 파악할 수 있었고 규모가 큰 프로젝트도 만들어낼 수 있게 되었습니다. 지켜야할 컨벤션과 요구사항들이 있다보니

2020년 12월 15일
·
0개의 댓글

[CheatSheet] 코딩테스트 Python

참고 동빈나 이코테 enumerate 인덱스와 값을 바로 가져올 수 있다 (단, iterable 해야함) ord(), chr() 파이썬에서는 C처럼 문자에 숫자를 더해 새로운 문자를 구할 수 없다 즉, 아래 식이 성립하지 않는다 숫자는 숫자끼리 연산해야하기 때문에

2020년 12월 9일
·
0개의 댓글

[JS] 함수 내에서 함수 호출

index.js에서 Hello() 라는 함수 안에 one() 함수를 넣었다one()함수는 test.js에 있는 Two 클래스를 불러와 그 안의 two() 함수를 실행시킨다Two 클래스를 불러온 수 new Two()로 새로 만들어줘야한다.

2020년 11월 27일
·
0개의 댓글

[JS] eventListener submit and click, focus()

입력창과 버튼이 함께 있는 form은 submit 액션을 받을 수 있다submit은 엔터를 치면 버튼이 눌리며 클릭도 가능하다 버튼은 입력창과 분리되어있기때문에 submit 액션을 받을 수 없다오로지 클릭만 가능하기에 click 액션밖

2020년 11월 27일
·
0개의 댓글

multiline git commit messages

2020년 11월 27일
·
0개의 댓글

[JS] Load font

아래는 나눔바른고딕의 fontWeight: 400을 가져온 것이다하지만 여기서 가져온 NanumBarunGothic은 볼드체가 따로 없어 bold적용이 안된다따라서 맥과 윈도우의 기본 폰트인 Arial을 사용해보도록 하자기본 폰트인 Arial에 이렇게 strong을 적

2020년 11월 27일
·
0개의 댓글