훨~~씬 많지만 너무 유명한건 제쳐두고 사람들이 잘 모를만한것. 하지만 없으면 너무 귀찮아지는 것들을 소개해보려고합니다. 1. Better Comments 코드에 컬러 주석을 추가하여 가독성을 높여주는 확장 기능입니다. 중요한 부분을 쉽게 구분할 수 있게 해줍니다. 2. Bracket Pair Colorizer 2 괄호를 색상으로 구분하여 보여주는 확장 기능으로, 코드의 구조 파악을 돕습니다. 3. File Tree Generator 프로젝트의 구조를 트리 형태로 생성하여 문서화에 도움을 주는 확장 기능입니다. README 파일 작성에 유용합니다. 4. Reactjs Code Snippets React 개발 시 자주 사용하는 코드 스니펫을 제공하여 빠른 코드 작성을 도와주는 확장 기능입니다. 5. SVG..
웹에서 애니메이션은 사용자 경험을 향상하고, 사용자의 관심을 끌며, 사용자에게 시각적 피드백을 제공하는 데 사용됩니다. 이런 애니메이션을 생성하는 데는 크게 두 가지 접근 방법이 있다: CSS 애니메이션과 JavaScript 애니메이션이다. 이 두 가지 방법은 각각 장점과 단점이 있으며, 프로젝트 정책에 따라 다른 방법이 더 적합할 수 있다. 그렇다면 두 방법의 차이는 무엇이고 어떤 경우에 어떤 방법을 선택해야 하는지, 그리고 이 모든 것을 이해하기 위해 브라우저의 렌더링 원리부터 간단하게 알아보자. 브라우저 렌더링 원리: Reflow와 Repaint 브라우저가 웹페이지를 렌더링하는 과정은 크게 Layout, Paint, Composite 세 단계로 이루어진다. Layout(Reflow): 브라우저가 요..
JavaScript는 단일 스레드(single-threaded) 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 그렇다면 비동기(asynchronous) 코드가 어떻게 가능한 것일까요? 그것이 바로 JavaScript의 Event Loop 때문입니다. 비동기 자바스크립트 소개 JavaScript는 웹에서 가장 널리 사용되는 언어 중 하나입니다. 이는 대부분의 웹 브라우저에 내장되어 있으며, 서버 사이드 개발(Node.js)까지도 가능하게 합니다. JavaScript는 동기(synchronous) 코드와 비동기(asynchronous) 코드를 모두 지원합니다. 동기 코드는 순차적으로 실행되며, 각 작업이 완료될 때까지 다음 작업은 대기 상태에 있습니다. 이와 반대로 비동기 코드는 작업이 완료되기를 기..
1. 서버란? 서버는 무언가를 제공해 주는 컴퓨터로, 우리가 인터넷을 통해 접근하는 대상은 웹사이트나 리소스 자체가 아니라, 해당 웹사이트와 리소스를 응답해 주는 컴퓨터에 접속하는 것입니다. 서버는 서비스를 운영하기 위해 특정 컴퓨터를 가동하고, 그 컴퓨터에서 특정 프로그램을 실행하여 네트워크를 통해 접근하면 특정 리소스를 응답해 주도록 만듭니다. 인터넷을 통해 이 컴퓨터 외부에서 접근 가능하도록 설정하며, 이러한 동작을 하는 컴퓨터를 우리는 '서버'라고 부릅니다. 서버는 물리적인 실체가 있는 컴퓨터로, CPU, GPU, RAM, 메모리 등으로 구성되어 있고 각기 다른 사양을 가지고 있습니다. 서버가 '터졌다'라고 말하는 것은 서버 컴퓨터가 사용 가능한 사양을 초과하는 계산이 필요한 경우, 컴퓨터가 제대..
자바스크립트에서 비동기를 처리할 때 다음 3가지를 사용하면 된다. Callback, Promise, Async/Await 하지만 이것들은 언제 어떻게 쓰이는지, 어떤 차이가 있는지, 그렇다면 어떤 걸 써야 하는지 헷갈릴 수 있기 때문에 정리를 하려 한다. Callback function add(a, callback){ setTimeout(()=> callback(a + 10), 100); } add(5, res => { add(res, res =>{ add(res, res =>{ console.log(res) }) }) }); // 35 console.log(a) // undefined 이 콜백 예제에서 함수 add의 리턴 값이 얼마인지를 보는 것은 중요하지 않다. setTimeout이 일어나는 코드적 ..
CSS에서의 애니메이션 사용 transition/animation 속성 Javascript의 애니메이션 사용 requestAnimationFrame() CSS 애니메이션 간단하게 처리하는 애니메이션의 경우 CSS로 처리한다. CSS 애니메이션의 장점 반응형으로 애니메이션을 구현하기 좋다. 미디어 쿼리를 이용하여 해당경우에 맞춰 스타일링을 해주면 되기 때문. 외부 라이브러리를 필요로 하지 않다. 나는 라이브러리를 가져오는 것을 별로 선호하지 않기 때문에 메리트가 있다. 메인 스레드가 아닌 별도의 컴포지터 스레드에서 그려지기 때문에 메인스레드에서 작업하는 JS보다 효율적이다. 좀 더 나아가서 최적화에 대한 고민을 한다면, CSS 애니메이션에 대해서 최적화를 고려해볼 수 있다. 브라우저 렌더링 관점에서 Jav..
클로저를 한 문장으로 정리하면, 현재의 유효범위를 넘어 Scope Chain으로 연결되어 있는 객체, 변수등의 참조를 발생시키는 것 코드로 예를 들어보면 function outer() { var count = 0; function inner() { count++; console.log(count); } return inner; } var increment = outer(); increment(); // 1 increment(); // 2 increment(); // 3 // outer 함수는 count 변수를 선언, inner 함수 반환 // 반환된 inner 함수는 count 변수 참조, count 값을 증가시킨 후에 출력 // outer 함수를 실행하면, count 변수와 함께 inner 함수가 반환..
이벤트 루프에 대한 설명 전 자바스크립트의 특징을 알아보자면, 자바스크립트는 싱글 스레드 기반의 언어로 한 번에 하나의 작업만 처리할 수 있다. 이벤트 루프는 이러한 자바스크립트의 특징으로 한 번에 한 가지 일만 처리할 수 있어서 비동기적으로 처리하기 위한 방법이라고 할 수 있다. 이벤트가 발생시 호출되는 콜백 함수들을 콜백 큐에 전달하고 콜백 큐에 담겨있는 콜백 함수들을 콜스택으로 넘겨준다. 나눠서 얘기하면, 1. 이벤트 발생! 2. setTimeout같은 콜백함수를 다시 날려주는 함수들의 이벤트 실행 시 콜백 큐로 넘겨줌. 3. 콜백 큐를 콜스택으로 다시넘겨주는 역할을 하는 게 바로 이벤트 루프. 위와 같은 과정을 통해서 싱글스레드 언어인 자바스크립트가 비동기처럼 작동할 수 있게 된다.
