본문 바로가기

전체 글107

[Javascript] this 할당하기 자바스크립트에서 함수 호출의 방식에 따라서 this에 어떤 객체가 할당되는지 달라진다. 일단 기본적으로 this는 전역객체(Window)를 가리킨다. 특정한 명시적인 객체의 바인딩이나 객체안에 속해 정의된 매서드 등등이 아니고서는 전역객체를 가리킨다. 그렇다면 this에 특정한 객체가 할당되기 위해서는 어떠한 방식을 해야할까? 1. 객체 안의 매서드로 함수를 할당 const data = { name : 'Alice', getName : function() { console.log(this.name); // Alice } } data.getName(); 위의 코드 처럼 객체 data 안에 정의된 매서드 getName 함수에서 this는 data 객체를 가리킨다. 따라서 this.name으로 Alice라는 .. 2021. 5. 27.
[Javascript] 브라우저 저장소 브라우저의 저장소는 크게 보면 Local Storage, Session Storage, Cookie로 나뉜다. 비교는 간단하게 표로...! Local Storage Session Storage Cookie 할당기준 도메인 도메인 도메인 용량 제한없음 제한 없음 4096바이트 저장 형태 key-value 형태 key-value 형태 key-value 형태 특징 탭이나 브라우저를 닫고 다시 열어도 데이터가 지워지지 않음. 새로고침을 해도 남아있음 탭을 닫으면 데이터가 지워짐. 새로고침을 했을 때는 남아 있음 서버에 매번 요청을 보낼 때 함께 전달됨. 만료시간을 설정할 수 있음. ** 할당기준이 도메인이라는 것은 저장소는 도메인 기준으로 별도로 분리 되어있다는 의미이다. 즉, xxx.com과 yyy.com은 .. 2021. 5. 27.
[내입맛대로만들기] TodoApp 만들기 대부분 프론트 개발자로 공부한다면 첫걸음은 TodoApp 을 만드는 것부터 시작한다.. 간단한 CURD로 가볍게 만들수 있지! 이미 프론트엔드 개발자로 이직한지 마음먹은지 1년, 이직한지 6개월 넘은 지금 이제야 Todo App을 만들어본다... 이유는? 일할 때 너무 필요해서... 회사 특성상 다양한 프로젝트를 동시에 하는 경우가 많은데 할일을 정리하는게 쉽지 않다.. 매일 프로젝트를 세 개씩 하는데.. 얘가 얜지 이런 라벨링이 너무 필요했고... 그리고 사람 특성상(?) 오늘의 할일을 내일의 나에게 미루는건 넘나 당연해서 ..... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이런 특성을 살린 내 입맛대로 만드는 Todo app을 만들고 싶었다. 그래서 기본적으로 Todo app의 특징은 1. 할일 등록 2. 할일 수정 3... 2020. 10. 15.
[Canvas] text 랜덤으로 나오다가 하나씩 나타나도록 하기 아래는 요런 느낌으로! random text가 좀더 다양한 캐릭터가 들어가면 이쁠거같음! 이건 react로 canvas 와 같이 구현해봄 import React, { useRef, useState, useEffect } from 'react'; const randomText = '~!@#$%^&*()_+`-={}[];":,./?qwertyuiopasdfghjklzxcvbnm'; function Canvas1() { const canvasRef = useRef(); const [context, setContext] = useState(null); const text = '얘들아 안녕!'; const textArr = text.split(''); let textIndex = -1; let rafId = un.. 2020. 8. 10.
[Canvas] Canvas로 비내리는 화면 만들기 1분코딩님 유투브 캔버스 라이브강좌 들으면서 이래저래 조작해서 만들어보았습니다! Interaction See the Pen wvGamZd by alice (@jyynkr92) on CodePen. 2020. 8. 10.
[Typescript] @type이 없는 외부 라이브러리 사용 방법 업무때 고생해서 일단 적어보기 1. tsconfig.json 아래 typeRoots와 declaration, declarationDir 등 입력할 것 { "compilerOptions": { ... "typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의 "declaration": true, // lib 만들 때 .d.ts 파일을 자동으로 "declarationDir": "./types" // 이 폴더에 만들어주는 옵션 }, "typeRoots": ["./types", "./node_modules/@types"], "include": ["src"] } 2. root에서 types 라는 폴더를 생성 3. type이 없던 외부 .. 2020. 7. 8.
[2019.03.15] Extra Long Factorials Problem The factorial of the integer , written , is defined as:Calculate and print the factorial of a given integer.For example, if , we calculate and get .Function DescriptionComplete the extraLongFactorials function in the editor below. It should print the result and return.extraLongFactorials has the following parameter(s):n: an integerNote: Factorials of can't be stored even in a long long v.. 2019. 3. 15.
[2019.03.14] Find Digits Problem An integer is a divisor of an integer if the remainder of .Given an integer, for each digit that makes up the integer determine whether it is a divisor. Count the number of divisors occurring within the integer.Note: Each digit is considered to be unique, so each occurrence of the same digit should be counted (e.g. for , is a divisor of each time it occurs so the answer is ).Function Des.. 2019. 3. 14.
[2019.03.13] Jumping on the Clouds: Revisited Problem Aerith is playing a cloud hopping game. In this game, there are sequentially numbered clouds that can be thunderheads or cumulus clouds. Her character must jump from cloud to cloud until it reaches the start again.To play, Aerith is given an array of clouds, and an energy level . She starts from and uses unit of energy to make a jump of size to cloud . If Aerith lands on a thundercloud, .. 2019. 3. 13.