훨~~씬 많지만 너무 유명한건 제쳐두고 사람들이 잘 모를만한것. 하지만 없으면 너무 귀찮아지는 것들을 소개해보려고합니다. 1. Better Comments 코드에 컬러 주석을 추가하여 가독성을 높여주는 확장 기능입니다. 중요한 부분을 쉽게 구분할 수 있게 해줍니다. 2. Bracket Pair Colorizer 2 괄호를 색상으로 구분하여 보여주는 확장 기능으로, 코드의 구조 파악을 돕습니다. 3. File Tree Generator 프로젝트의 구조를 트리 형태로 생성하여 문서화에 도움을 주는 확장 기능입니다. README 파일 작성에 유용합니다. 4. Reactjs Code Snippets React 개발 시 자주 사용하는 코드 스니펫을 제공하여 빠른 코드 작성을 도와주는 확장 기능입니다. 5. SVG..
웹소켓이지!! 실시간 통신하면 웹소켓이 가장 먼저 떠오른다. 그렇지만 한정된 자원, 특정 상황에서는 대안으로 http long polling기법을 사용할 수 있다. 회사에서 새로 시작한 프로젝트에서 동시성 이슈가 발생했다. 그래서 그에 대한 해결로 웹소켓에 관한 이야기가 나왔고 적용예정이다. 하지만 이번 동시성 이슈가 발생한 페이지는 일반적인 페이지가 아니고 특정 사용자만 접근이 가능한 페이지이다. 특정 사용자들끼리 동시에 접속하는 경우도 특별한데 데이터 요청도 빈번한 편은 아니다. 그래서 대안으로 생각해 놓은 게 http long polling이다. 웹소켓을 구축해 놓으면 물론 동시성이슈에 대해 거의 모든 부분을 커버할 수 있지만 초기 개발에 대한 개발자의 리소스가 너무 많이 들어가고 일정이 더 늘어난..
웹에서 애니메이션은 사용자 경험을 향상하고, 사용자의 관심을 끌며, 사용자에게 시각적 피드백을 제공하는 데 사용됩니다. 이런 애니메이션을 생성하는 데는 크게 두 가지 접근 방법이 있다: CSS 애니메이션과 JavaScript 애니메이션이다. 이 두 가지 방법은 각각 장점과 단점이 있으며, 프로젝트 정책에 따라 다른 방법이 더 적합할 수 있다. 그렇다면 두 방법의 차이는 무엇이고 어떤 경우에 어떤 방법을 선택해야 하는지, 그리고 이 모든 것을 이해하기 위해 브라우저의 렌더링 원리부터 간단하게 알아보자. 브라우저 렌더링 원리: Reflow와 Repaint 브라우저가 웹페이지를 렌더링하는 과정은 크게 Layout, Paint, Composite 세 단계로 이루어진다. Layout(Reflow): 브라우저가 요..
TCP와 UDP: 인터넷의 중추, 전송 프로토콜 이해하기 인터넷은 복잡한 시스템이며, 데이터는 우리가 웹 브라우저를 사용해 웹 페이지를 요청하거나 이메일을 보내는 등의 작업을 수행할 때 수많은 네트워크와 장비를 거쳐 이동합니다. 이 과정에서 TCP와 UDP라는 두 가지 주요 전송 프로토콜이 핵심적인 역할을 합니다. 이 글에서는 TCP와 UDP가 무엇인지, 어떻게 작동하는지에 대해 알아보겠습니다. TCP란 무엇인가? TCP(Transmission Control Protocol)는 인터넷 프로토콜 스위트(IP)의 핵심 프로토콜 중 하나로, 데이터를 패킷으로 나누어 인터넷을 통해 전송하고 수신 측에서 이 패킷을 원래의 데이터로 재조립하는 역할을 합니다. TCP는 신뢰성 있는 데이터 전송을 보장하는 프로토콜로,..
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..
