본문 바로가기

전체 글235

[HTTP] What happens when you type Google? 기술의 발달로 일반인들은 인터넷 웹페이지를 별다른 수고 없이 사용하고 있다. 하지만 그 내부에서는 수많은 일들이 처리되고 있다. 오늘은 웹상에 구글 페이지를 띄우기까지 어떤 일이 내부적으로 일어나고 있는지 알아보자. 관련해서 잘 쓰여진 블로그가 있어서 번역해 옮겨본다. 원본: https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a What happens when you type a URL in the browser and press enter? If you are in any technical profession, I am sure someone a.. 2022. 3. 21.
자바스크립트 파일을 브라우저에 한번에 로딩하면 어떻게 될까? 자바스크립트 파일을 브라우저에 한 번에 로딩하면 어떻게 될까? 답은 위의 짤이 잘 설명해주는 듯 하다. 정답은 "자바스크립트를 읽어들이느라 자바스크립트 아래의 HTML 파싱을 중단하게 되어 DOM구성을 차단당한다". 이렇게 되면 두 가지 문제가 발생한다. 1. 유저입장에서는 웹사이트가 반응을 하지 않으니 에러가 난 줄 알고 이탈을 한다. 2. 만약 자바스크립트가 아직 구성되지 않은 DOM을 이용해야 하는 경우이거나 아직 파싱 되지 않은 자바스크립트 코드에 의존적이라면 에러가 발생한다. 하지만...! 이런 상황을 해결하는데 도움이 되는 async와 defer 속성이 있다! async 위처럼 async 속성을 부여하면 스크립트를 읽어들이는읽어 들이는 동안 DOM 구성을 멈추지 않는다. 그리고 스크립트를 읽어.. 2022. 3. 19.
[JS] 특수문자를 거르는 정규식 표현 오늘 프로그래머스 코딩 테스트 연습문제를 풀면서 정규식을 사용해야 하는 문제가 있었다. 하... 정규식 너란 녀석... 어떻게 돌아서면 까먹는지... ㅋㅋㅋ 하지만 포기하지 말자. 언젠가는 외워지겠지... 일단 오늘 문제에서는 소문자 영어와 숫자 그리고 . - _ 이렇게 세 가지 문자를 제외한 모든 문자는 제외시켜야 하는 코드를 필요로 했다. 따라서 몇분간의 삽질 결과... 아래와 같은 정규식 표현을 만들었다. const allowedCharacters = /^[a-z0-9._-]/g; const notAllowedCharacters = /[^-_.a-z0-9]/g; const capitalLetters = /^[A-Z]/g 우선 [] 괄호 밖에 있는 ^ 이 문자의 뜻은 해당 괄호 안의 문자로 시작한다는.. 2022. 3. 15.
[NodeJS] NodeJs는 싱글스레드일까? nodejs는 과연 싱글 스레드일까? 구글링을 하면 다소 모호한 답변들이 많이 올라와 있다. 싱글 스레드이지만 멀티스레드와 같이 동작한다... 뭐야 이게... 내가 산 주식 가격이 오를 수도 있지만 떨어질 수도 있다는 말이랑 똑같잖아... 오늘은 왜 이런 기이한 말이 나왔는지 알아보자. nodeJS 동작 원리 nodej의 v8엔진은 자바스크립트를 기계어로 번역하는 일을 하는데, 웹에서와 마찬가지로 스택에 이벤트를 쌓고 상단의 이벤트를 우선 처리해 반환하는 방식으로 작동한다. 우리가 싱글 스레드 언어라고 부르는 이유다. 하지만 한 번에 처리하기 어려운 작업이나 비동기 처리의 경우 v8엔진은 이벤트를 잠시 큐에 옮겨놓고 해당 요청이 처리되면 이벤트 루프가 다시 스택에 옮겨놓는 방식으로 동작하는데, 웹의 경우.. 2022. 3. 14.
[NodeJS] 런타임이란 무엇일까? nodeJS란 무엇인가요?라고 물으면 항상 따라 나오는 답변이 있다. nodejs === javascript runtime environment 음... 그렇다면 런타임이란 무엇일까? 구글에는 아래와 같이 나와있다. What Does Runtime Environment (RTE) Mean? The runtime environment is the environment in which a program or application is executed. It's the hardware and software infrastructure that supports the running of a particular codebase in real time. 런타임 환경이란 무엇인가요? 런타임 환경이란 프로그램이나 어플.. 2022. 3. 14.
[JS] Hoisting이란? 자바스크립트 엔진은 코드를 실행할 때 함수와 변수 선언을 코드 상단으로 끌어올리는 호이스팅 작업을 실행한다. 왜 그럴까? 호이스팅를 통해 개발자는 변수 선언과 변수사용을 자유롭게 활용 가능하다. 즉 항상 상단에 변수 선언과 할당을 하지 않더라도 같은 스코프라면 언제든지 변수를 사용할 수 있게 되는 것이다. 하지만 함수의 경우 선언식인지 표현식인지에 따라 약간의 차이가 발생한다. 예를 들어 선언식의 경우 아래와 같이 작동을 한다. foo(); // "foo" function foo() { console.log('foo'); } 하지만 만약 표현식의 경우 변수 선언만이 호이스팅으로 이루어지기 때문에 아래와 같은 결과를 가지게 된다. foo(); // Uncaught TypeError: foo is not a.. 2022. 3. 13.
[JS] let, var, const의 차이점 오늘은 기술면접의 단골 질문이라 할 수 있는 const let var의 차이점과 호이스팅에 대해 알아보자. 자바스크립트에서 변수의 선언은 총 세가지 방법이 있는데, 위 짤에서 알 수 있듯... 우리 var 친구는 약간... 관심이 필요한 친구다... VAR ES6 이전에는 변수 선언과 할당을 위해서는 var키워드를 사용해야 했다. Scope of var 스코프란 간단하게 말해 변수들이 어디서 사용 가능한가를 나타낸다. var선언은 global 혹은 function/locally 스코프다. var변수가 만약 함수 밖에서 선언되었다면 var은 글로벌 스코프를 가진다. 그 말은 전 영역에서 사용 가능하다는 뜻. 만약 var변수가 함수안에서 선언된다면 함수 블록 안에서 접근 가능하다. Var variables .. 2022. 3. 13.
[Socket.io] socket.io 룸 생성과 메세지 전달 프로세스 오늘은 socket.io의 룸 생성과 메시지 전달 프로세스에 대해 알아보자. 무지 성으로 socket.io를 이용해 메시지 기능을 넣고 보니... 정말 오류가 난리도 아니다. 일단은 제일 난감한 오류는 한명이 메시지를 보내면 메시지와 상관없는 모오오든 유저들이 메시지를 받아버리는 기이한 현상이 있었다. 왜 그럴까? 원인은 바로 socket.io의 braodcast 기능 때문이었다. socket.io은 아래처럼 특정한 대상을 지칭하지 않으면 broadcast로 메세지를 전달한다. 용어에서 짐작할 수 있듯 소켓에 연결된 모든 유저에게 방송을 해버리는 것이다. socket.emit("send-message", {message}) 그래서 특정사람에게만 메시지를 보내고 싶다면 그 사람의 socket id를 추가하.. 2022. 3. 11.
[Socket.io] Socket.io란 무엇인가? 이번 프로젝트에서 메시지 기능을 추가하기로 했는데, 이것저것 살펴보니 양방향 통신을 위해서는 http 프로토콜이 아닌 WebSocket이라는 통신 프로토콜을 이용해야 한다고 한다. http 통신의 특징 중 하나가 stateless 이기 때문에 클라이언트가 서버에게 데이터를 요청을 하기 이전에 서버가 클라이언트에게 데이터를 주는 게 다소 어렵기 때문이다. WebSocket은 미완의 기술? 그래서 WebSocket에 대해 이것저것 살펴봤는데 naver D2 블로그에서 흥미로운 글을 읽었다. 바로 WebSocket이 미완의 기술이라는 점! 지금은 많은 개발자들의 요청으로 대부분의 웹 브라우저에서 WebSocket 통신이 가능하게 해두고 있지만 (무려 97%라고 한다) 이전에는 웹 브라우저에서 WebSocket.. 2022. 3. 5.
[JS] 스크린 맨 아래 이동하기 웹 페이지에서 스크롤을 가장 하단으로 내리고 싶다면 어떻게 하면 될까? 코드는 아주 간단하다. window.scrollTo(0, document.body.scrollHeight); scrollTo 메서드는 첫번째 인자로는 x좌표 두 번째 인자로 y좌표를 받는다. document.body.scrollHeight 프로퍼티는 현재 창의 최대 높이값을 뜻한다. 만약 window.scrollTo(0,0)은 y좌표의 0 즉 최상단을 뜻하게 된다. 2022. 3. 5.
Axios 요청과 fetch 요청의 차이 현재 작업 중인 프로젝트에서 우리 팀은 클라이언트 서버 간 요청 방식을 axios로 통일하기로 합의하였다. 그러다 문제를 겪고있던 기능을 stack overflow에서 친절하게 설명한 글을 읽게 되었다. 해당 코드를 사용하면 모든 것이 해결되는 것이었으나... 문제는 fetch함수를 사용해 설명을 했기 때문에 작업 중인 어플에서 사용하려면 axios로 변경을 해줘야 하는 상황이었다. 사실 그냥 fetch로 사용해버릴까... 하다가 fetch를 axios로 변경하는 방법을 몰라서 fetch를 사용한다면 자존심이 용납을 못하는 것이기에 이번 기회에 한번 fetch와 axios의 차이점과 변환 방법을 알아보았다. fetch 예시 const upload = await fetch (url, { method:"PU.. 2022. 3. 5.
[React] 현재 스크롤 위치 얻기 오늘은 React에서 현재 스크롤의 위치를 얻는 방법에 대해 알아보자. 필자는 작업 중이던 애플리케이션에서 숫자가 1에서 350으로 점차 증가하는 애니메이션을 추가했는데 문제는 해당 컴포넌트가 페이지의 맨 아래에 위치했기 때문에 유저가 스크롤을 다 내렸을 때에는 이미 애니메이션이 모두 끝난 이후였다. 따라서 현재 스크롤의 위치를 파악하여 특정 위치에 도달하면 애니메이션을 시행하는 로직이 필요했다. 코딩 초보에게 스크롤의 위치파악이란 다소 어렵게 느껴질 수 있다. 하지만 겁먹지 말자. 웹 어플을 만드신 천상계 개발자 분들이 이미 window 객체 안에 관련 데이터를 얻을 수 있도록 여러 가지 객체를 담아놓았다. (감사합니다 ㅠㅠ) 아래 코드는 현재 Y축 스크롤 위치를 알려주는 착한 프로퍼티인데, windo.. 2022. 3. 5.

티스토리툴바