DGOS

[JavaScript] Closure의 개념과 활용

Closure

Intro Closure에 대해 개념은 알고 있었지만, 이것을 왜 쓰는지, 언제 쓰는지에 대해서는 확실하게 이해하지 못하고 있었습니다. 그래서 이번 포스팅에서, Closure의 활용 예제들을 통해 Closure에 대해 더 깊게 이해해보도록 하겠습니다. Closure란? Closure란 무엇일까요? Closure는 한 마디로 “lexical s...

Posted by dongjune on January 21, 2022

requestAnimationFrame으로 애니메이션 구현하기

requestAnimationFrame

🛫 Intro requestAnimationFrame은 웹 브라우저 상에서 애니메이션을 구동하고자 할 때 흔히 사용되는 Web API입니다. 이번 포스팅에서는 requestAnimation을 사용하는 이유와 기능들을 살펴보고 실습을 통해 실제 사용법까지 살펴보도록 하겠습니다. 🤔 requestAnimationFrame을 사용하는 이유 requestAn...

Posted by dongjune on November 21, 2021

[React] useCallback과 React.memo

React, useCallback, memo

🛫 Intro 이번 포스팅에서는 리액트의 최적화 기법 중 useCallback과 memo에 대해서 알아보도록 하겠습니다. 리액트 컴포넌트가 리랜더링 될 때마다 그 안에 선언 된 함수들은 매번 재생성 되게 됩니다. 이때 useCallback을 사용하면 함수의 참조 값을 유지해줄 수 있습니다! memo는 컴포넌트를 메모이제이션 해줍니다. 해당 컴포넌트에게...

Posted by dongjune on November 14, 2021

[React] react router dom 사용하기

React, Router

🛫 Intro 여러 페이지로 나뉘는 SPA 프로젝트를 개발한다면 react-router 가 필요합니다. 오늘은 웹에서 사용하는 react-router-dom 패키지에 대해 알아보겠습니다. 다음과 같이 설치 할 수 있습니다. 1 yarn add react-router-dom or 1 npm install react-router-dom 🧀 사용 모...

Posted by dongjune on November 6, 2021

[React] 컴포넌트 리스트와 key 속성

React, key

🛫 Intro React에서 여러개의 컴포넌트를 렌더링 하고 싶을 때 map을 사용할 수 있습니다. 1 2 3 4 5 const players = ['messi', 'ronaldo', 'son']; const playerList = numbers.map((player)=> <li>{player}</li> ); 하지...

Posted by dongjune on November 6, 2021

이벤트의 버블링(bubbling)과 캡쳐링(capturing)

event, bubbling, capturing

프론트엔드를 개발하면 정말 많은 상황에서 이벤트를 다루게 됩니다. 그런데 정작 그 이벤트가 어떤 방식으로 동작하는지에 대해 확실히 알지 못하다 보니 이벤트를 의도대로 동작하게 만들기가 어렵더라구요. 그래서 오늘은 이벤트가 어떻게 동작하는지 확실히 이해해보도록 하겠습니다. 이벤트가 발생하면 캡쳐링과 버블링이 일어나게 되는데요. 이게 도대체 무엇인지...

Posted by dongjune on October 17, 2021

[Javascript] this

js this

🍑 자바스크립트의 this 자바스크립트의 this는 다른 언어와는 달라 헷갈리는 개념입니다. java에서의 this는 인스턴스가 자기 자신을 가리키는 참조변수입니다. 하지만 자바스크립트의 경우 this에 바인딩 되는 객체는 함수의 호출 방식에 따라 달라지게 됩니다. 🍑 함수호출 방식에 따른 this 바인딩 자바스크립트의 this는 함수가 어떻게 호출되...

Posted by dongjune on September 21, 2021

[Javascript] 스코프(scope)

js scope

📌스코프란? 스코프는 프로그래밍 언어의 기본적인 개념이므로 확실한 이해가 필요합니다. 이번 포스팅에서 스코프에 대해 자세히 알아보도록 하겠습니다. 스코프란 참조대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙으로 식별...

Posted by dongjune on September 20, 2021

[Javascript] 프로토타입(Prototype)

js prototype

🧀 프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결돼있습니다. 이를 통해 객체 지향의 상속 개념 처럼 부모 객체의 프로퍼티, 메소드를 상속받아 사용할 수 있습니다. 그 부모객체가 바로 프로토타입입니다. 1 2 3 4 5 6 7 8 9 const student = { name: 'dongjune', scor...

Posted by dongjune on September 19, 2021

[프로그래머스 위클리 챌린지 3주차] 퍼즐 조각 채우기 - C++

weekly challenge 3

문제 위클리 챌린지 3주차 - 퍼즐 조각 채우기 구현 첫 시도 => 시간초과 처음 접근할때는 필요없는 경우까지 계산하여 경우의 수를 모두 계산했습니다. 블록의 순서의 모든 경우의 수 (필요없음) 4방향의 회전 수 고려 (모든 방향을 고려할 필요 없음) 들어갈 수 있는 칸에 넣은 경우와 안 넣은 경우 모두 고려 (필요없음, 넣을 수 있...

Posted by dongjune on September 4, 2021