전체 글168 웹페이지가 사용자에게 보여지기까지 (브라우저 렌더링 과정) 우리가 주소창에 어떤 웹사이트의 주소를 입력하고 엔터키를 누르면 몇 초도 지나지 않아서 해당 사이트의 화면이 뜨게된다. 사실 굉장히 자주 하는 일이고, 당연한 일이지만 주소 입력만으로 화려한(?) 화면이 등장하기까지는 사실 생각보다 복잡한 과정들을 거쳐야 한다. 이번 글에서는 바로 이 복잡한 과정에 대해 알아보고자 한다. 미리 알아야할 개념들 파싱(parsing) 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 '토큰'으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다. 렌더링(rendering.. 2021. 6. 14. 효율성을 위한 메모리의 계층적 구조 (메모리 계층 구조) 앞선 글에서는 컴퓨터가 어떻게 우리가 프로그래밍 언어로 작성한 코드를 알아듣고 처리하는지 알아보았다. 메모리와 구조에 대해서도 잠시 언급했는데, 이번 글에서는 메모리에 정보들을 더 효율적으로 저장하고 가져오기 위해 어떤 방법들을 사용했는지에 대한 이야기를 해보려고 한다. 컴퓨터에 있는 메모리들의 종류는 생각보다 훨씬 다양한데, 이 메모리들은 아래 피라미드 그림처럼 계층적인 구조를 이루고 있다. 지금은 낯설게 보일 수 있지만, 이 글을 다 보고나면 각 계층이 무슨 역할을 하고, 왜 이런 구조로 이루어지는지 알게될 것이다. 하나씩 차근차근 알아보도록 하자. 프로세서(CPU)-메모리(RAM) 격차 CPU는 어떤 명령어가 주어지면 내부 자체 메모리 셀인 레지스터에 데이터를 저장하고, 그 데이터들을 가지고 연산을.. 2021. 6. 13. 블로킹(Blocking)/논블로킹(Non-Blocking), 동기(Sync)/비동기(Async) 구분하기 보통 동기 = 블로킹을 같은 개념으로, 비동기 = 논블로킹을 같은 개념으로 헷갈리는 경우가 많다. 하지만 두 개념은 각각을 구분짓는 기준이 전혀 다르다. 블로킹/논블로킹은 한 작업이 처리되는 동안 다른 작업도 처리될 수 있는지에 대한 이야기이고, 동기/비동기는 작업들이 시간을 맞춰서 실행되는지 아닌지에 대한 이야기이다. 이렇게만 들어서는 아직 무슨이야기인지 헷갈리는게 당연하다. 하나씩 무슨 말인지 예시와 함께 살펴보자! 1. 블로킹(blocking) vs 논블로킹(non-blocking) 우리가 어떤 프로그램을 만들었다고 해보자. 아마 어떤 코드를 작성해서 만들었을 것이고, 이 코드는 수많은 함수들이 순서대로 나열되어있는 모습일 것이다. 이렇게 한 프로그램은 여러개의 함수들로 이루어져 있다. 어떤 함수 .. 2021. 6. 10. 이벤트 루프 (setTimeout의 시간은 정확할까?) 이벤트 기반 프로그래밍 브라우저는 어떤 특정 이벤트가 발생하면 이를 감지해 미리 정해둔 작업을 수행한다. 예를들어 회원가입을 하는 상황을 생각해보자. 키보드로 아이디를 입력하면 화면에 입력한 글자가 쓰여지는 것, 제출 버튼을 클릭하면 회원가입이 완료되었다는 메시지가 뜨는 것 모두 어떤 이벤트(키보드 입력, 마우스 클릭)가 발생했을 때, 정해둔 작업(글자 보여주기, 메시지 띄우기)을 실행하는 것이다. 이런 방식을 이벤트 기반(event-driven) 이라고 한다. 이벤트 기반의 시스템에서는 어떤 이벤트가 발생할 때, 어떤 작업을 실행할지 미리 등록해 두어야 한다. 이걸 조금 어려운(?)말로 표현하면 '이벤트 리스너(event listener)에 콜백(callback)을 등록한다'고 한다. 이벤트 리스너에 .. 2021. 6. 7. 컴퓨터가 코드를 실행하기까지 (feat. 메모리, 프로세서, 컴파일러) 컴퓨터 컴퓨터는 한마디로 명령에 따라 데이터를 조작하는 기계이다. 조작을 위해서는 '프로세서'와 '메모리'의 역할이 중요하다. 메모리는 무슨 명령을 수행해야하는지, 명령을 수행하려면 어떤 데이터가 필요한 지를 적어두는 공간이고, 프로세서는 메모리에서 명령과 데이터를 꺼내와서 실제로 명령을 수행하는 부품이다. 메모리(RAM) = 수행할 명령들, 명령 수행을 위한 데이터들을 보관 프로세서(CPU) = 메모리에서 명령과 데이터를 꺼내와서 실제로 명령을 수행 메모리 메모리는 왜 필요할까? 예를들어 누군가 우리한테 500에서 600까지의 합을 구하라고 했다고 생각해보자. 500 + 501 를 먼저 계산하고 1001이라는 숫자를 어딘가 적어둘 것이다. 다음에는 1001에 다음 수인 502을 더해 적어두고... 이런.. 2021. 6. 6. 컴퓨터가 실수를 표현하는 방법 (고정소수점, 부동소수점, IEEE 754) 언어 언어는 여러 사람들이 편하게 의사를 전하기 위해 생긴 수단이다. 같은 언어를 사용하는 사람들이 서로의 말을 이해하기 위해서는 같은 기호를 사용했을 때, 같은 뜻으로 받아들여야 한다. 사람이 사용하는 언어든 컴퓨터가 사용하는 언어든 모든 언어는 각 언어만의 기호로 이루어진다. 컴퓨터의 언어 컴퓨터의 언어는 기본적으로 2진수라는 방법을 사용해서 모든 기호를 나타낸다. 2진수는 어떤 기호를 오직 0 과 1 이라는 두가지 종류의 숫자로만 나타내는 방식이다. 선택지가 0, 1 두 가지이기 때문에 2진수 혹은 비트(bit = binary + digit)라고 부른다. 우리는 보통 0~9의 10가지 숫자를 가지고 다른 숫자를 나타낸다. 이 경우에는 선택지가 열 가지나 되기 때문에 10진수라고 부른다. 2진수, 1.. 2021. 6. 3. 퀵 정렬(Quick Sort) 퀵 정렬은 이름처럼 굉장히 빠른 정렬 알고리즘이라고 알려져 있다. 이번 글에서는 이런 퀵 정렬을 어떻게 구현할 수 있는지, 항상 빠르게 작동하는지, 어떤 장단점이 있는지 알아보고자 한다. 퀵정렬? 퀵 정렬은 우선 한 원소를 무작위로 골라 기준으로 삼고, 배열을 분할한다. 그리고 고른 원소보다 작은 것들은 앞쪽으로, 큰 것들은 뒤로 보낸다. 이렇게 배열을 계속해서 분할하고 또 분할하면, 결국 배열은 정렬된 상태가 된다는 것이 퀵정렬의 기본적인 아이디어이다. 배열을 분할하는 기준값을 보통 pivot이라고 하는데, 이 pivot값이 무엇이냐에 따라 시간복잡도가 달라지기도 하기 때문에 이 값은 굉장히 중요하다. 보통은 첫번째 원소를 pivot값으로 설정하지만, 상황에 따라서는 중앙값이나 마지막값으로 두기도 하고.. 2021. 6. 1. 210406 - 210423 한 달간의 회고기록 ✍🏻 4월 한 달 동안은 프로젝트를 진행하면서, 팀원들과 매일 밤 11시마다 공동 노션에 각자 회고를 작성하고 공유하는 시간을 가졌다. 정말 눈 뜨자마자부터 눈 감기 직전까지 하루종일 컴퓨터 앞에 앉아있는 생활을 반복하다보니 오늘, 내일의 경계가 없어지는 느낌이었는데 다 같이 모여서 하는 회고 덕분에 잠깐이나마 배운것을 정리하고 느낌을 기록하고 되돌아볼 수 있었다. SR(기획)단계가 끝난 후부터 4F(Fact, Feeling, Finding, Future action) 방식으로 기록했는데, 내가 작성했던 부분만 다시 정리해보면서 며칠만에 사라지고 있는 기억을 되살려 보려고 한다. 210406 Fact (사실) 마일스톤 작성, 태스크 카드 생성 및 분배 Redux Setting Navbar 구현 Feeling .. 2021. 4. 30. MySurpin 프로젝트 회고 My Surpin 🏄🏻♀️🏄🏼♂️ 팀원이 결정되고 아이디어를 정할 때만해도 2주면 넉넉한 시간이니 여러 도전들을 해볼 수 있겠구나 하고 생각했는데 그냥 정말 훅 지나가버렸다. 이번 프로젝트 때 나는 팀장 역할을 맡게 되었고, 프론트엔드 쪽에 집중했다. 페어 프로그래밍은 많이 경험해봤지만, 4명이 함께하는 프로젝트는 처음이었다. 그래서인지 각자 작성했던 클라이언트, 서버 코드를 연결시켰는데 정상적으로 작동했을 때, 그리고 배포 후 팀원들과 우리의 도메인에서 만났을 때 뭔가 당연한 일지만 더 기쁘고 신기하게 와닿았던 것 같다. 팀원들 모두 어려운 점이 생기면 바로 공유하는 분위기이고, 배우려는 의지가 강한 분들로 구성되어 다행이었다. 덕분에 문제가 생겨도 빠르게 해결할 수 있었고, 서로 알려주고 배우면서.. 2021. 3. 28. 210325_TIL (First Project - Day11) 🍎 오늘 한 일 최종 배포테스트 최종적으로 서버, 클라이언트 모두 마지막 배포 테스트를 진행했다. 맨 처음에는 console.log() 지우는 걸 깜빡해서 켜자마자 콘솔창에 각자 확인용으로 찍어둔 수많은 이상한 문구들이 나왔고.. local 환경에서 테스트를 하다가 요청 주소를 변경하지 않은 부분도 있었다. 이 부분은 실수 방지와 테스트의 편의를 위해 .env 파일로 따로 생성을 해두기로 했다. 예상은 했지만 진짜진짜최종종종종_final 정도에서 끝난 것 같다. 사실 아직도 수정사항들이 남아있어서 내일 아침에도 다시 배포를 해야할것 같다 :). UX 개선 배포 후에 각자 서핀을 만들어보고, 기능들을 사용해보면서 불편한 점이 있는지 팀원분들의 다양한 의견을 들어보면서 개선해야 할 점들을 정리했다. 생각보다.. 2021. 3. 28. 210324_TIL (First Project - Day10) 🍎 오늘 한 일 썸네일 이미지 처리 기본적으로 사용자가 올린 썸네일 이미지는 우리 S3 버킷에 보관하도록 했다. 백엔드분이 버킷과 파일을 생성 및 삭제하는 코드를 구현해두셔서, 그 함수를 이용해 사용자가 올린 파일이 버킷으로 가도록 연결시키는 부분과 다시 받아온 s3버킷 파일 주소와 다른 정보들을 서버로 전달하는 부분을 작성했다. 썸네일을 지정하지 않았을 경우에는 default 이미지가 필요할 것 같아서, 몇몇 이미지들이 랜덤하게 들어가도록 해두었다. parallax scrolling 효과 추가 메인페이지를 좀 더 동적으로 보이도록 개선했다. 새로 올라온 리스트들을 보여주는 부분이 너무 심심해보여서(?) 서핑이라는 우리 컨셉에 맞게 좌우로 움직이도록 하고자 했는데, 이 부분은 css의 keyframe과 .. 2021. 3. 28. 210323_TIL (First Project - Day9) 🍎오늘 한 일 URL 파싱 기능 추가 URL 을 입력하면 해당 URL html의 부분을 가져오는 함수를 작성했다. axios로 해당 url의 html을 긁어온 후 title 부분만 매칭시키는 정규식을 적용해 서버의 controller에 추가했다. 클라이언트에서는 사용자가 url 이름을 입력하지 않으면 자동으로 요청을 보내 title을 가져오도록 구현해두었다. 원래 클라이언트에서 바로 요청을 보내게 하려고 했는데, 리액트 서버에서 바로 요청을 보내려면 프록시 설정을 따로 해줘야한다고해서, 우리 서버를 한번 거쳐 요청을 보내도록 계획을 수정했다. CSS 개선 뼈대만 있는 상태인 서핀 모달창의 레이아웃과 색상, 효과 등을 수정했다. 총 네가지 상태에서 같은 모달창을 이용하는데, 이 상태에 따라 형태가 변하게 .. 2021. 3. 28. 이전 1 2 3 4 ··· 14 다음 반응형
