DNS : ip 주소를 외우지 않아도 되는 이유

지인에게 전화를 걸 때, 가까운 사이거나 자주 통화하는 경우라면 번호를 외워서 걸 수도 있다.하지만 대부분은 연락처 목록에서 통화할 사람의 이름을 검색한 뒤, 통화 버튼을 누르는 방식을 사용한다. 그런데 만약 전화번호 저장 기능이 없어서 매번 번호를 직접 입력해야만 전화를 걸 수 있다고 상상해 보자.지인이 10명 정도라면 그나마 번호를 외울 수 있을지도 모르지만,지인의 수가 더 많아진다면 모든 번호를 기억하기 어려울 것이다. 수많은 웹사이트의 IP 주소 역시 모두 외울 수 없기 때문에우리가 쉽게 웹사이트에 접근할 수 있도록 도와주는 시스템이 있는데 그것을 DNS라고 한다.  DNS란?DNS는 Domain Name System의 약자로 도메인과 ip 주소를 관리하는 시스템을 의미한다.그래서 DNS에서는 도..

• format_list_bulleted CS/Web
• · 2024. 12. 4.
• textsms

CORS 에러 : CORS 에러요? 코스요리는 좋아합니다만?

응애 시절 개발자일 때는 코드 한 줄 한 줄 쳐 내려갈 때마다,그에 따라 내가 작성한 코드가 화면에 잘 나오는 게 너무 좋았는데,그러다 시뻘건 글자로 갑자기 공포감을 조성하는 에러 메시지를 볼 때마다 상당히 두려운 마음이 앞섰다. 혹자는 개발을 하다가 에러를 마주하면 오히려 즐겁다라고 하는 변태적인 성향을 드러냈었는데최근에 나 역시 조금씩 에러가 좋아지고 있는걸 보면, 개발자는 다 그런가 보다. 아무튼 이번에 얘기해 볼 에러는 주니어 개발자 시절이라면 한 번쯤 겪어봤을 그 에러CORS에러에 대해서 알아보려고 한다.  CORS란?CORS는 Cross-Origin Resource Sharing 이라는 단어로 이루어진 축약어다.단어를 풀이해 보자면 '교차 출처 리소스 공유 정책'이라고 해석할 수 있다.여기서 ..

• format_list_bulleted CS/Web
• · 2024. 12. 2.
• textsms

브라우저의 동작 방법 : 주소창에 구글 주소를 입력 했을 때

크롬을 키고 주소창에 구글의 주소를 치면 구글이 나온다.이 당연한 이치에 대해서 궁금해 하는 사람이 얼마나 될까?하지만 당신이 개발자라면 왜? 라는 생각이 안들어도 왜? 라고 물어봐야 한다 이번에는 개발자 면접 질문 중에서도 사골 of 사골이라고 할 수 있는 이 질문에 대해서 접근해 보자.  간단하지만 복잡한 브라우저실제 사용할 때는 간단하게 주소창에 특정 웹 사이트 주소를 입력하면 해당 사이트로 이동하는데입력 후 엔터를 친 순간부터 해당 사이트가 화면에 뜰때까지 브라우저 뒤에서는 복잡한 구조로 동작이 이루어진다. 우리는 개발자기에 그 뒤를 알아보려고 한다.해당 과정은 다음과 같이 이루어진다.1. 브라우저에 구글을 입력하면 먼저 DNS서버에게 이 도메인의 IP 주소를 요청한다.2. DNS가 일련의 과정을..

• format_list_bulleted CS/Web
• · 2024. 11. 16.
• textsms

스택과 큐 : 상하차와 컨베이어 벨트

개발자가 되기 전 다양한 알바와 다양한 일들을 해봤는데 그 중 우체국 배송 보조 알바를 했던 경험이 떠오른다. 아침에는 도착한 우편물을 지역에 맞게 분류하는 작업을 하고 해당 물품을 트럭에 싣는 작업을 하고,오후에는 계약된 업체를 방문해서 우편물을 받아오고, 받아온 우편물을 다시 우체국에 두는 작업을 했다.이 때부터 난 온몸으로 스택과 큐에 대해서 경험하고 있었던게 아닐까? 이번에는 자료구조 중 선형 자료구조의 스택과 큐에 대해서 알아보자.   스택 (Stack)스택은 마치 상하차처럼 바닥부터 데이터를 쌓아가고, 데이터를 꺼낼 때는 위에서부터 꺼내는 후입선출 (LIFO, Last In, First Out) 방식으로 데이터를 처리하는 자료구조다. 스택의 데이터 삽입과 삭제 모두 한쪽 끝에서 이루어지는 방식..

• format_list_bulleted CS/Data Structures
• · 2024. 11. 13.
• textsms

자료구조 : 데이터를 관리하는 여러가지 방법

파스칼을 개발한 스위스의 컴퓨터 과학자 니클라우스 비르트는 이런 말을 남겼다.알고리즘 + 자료구조 = 프로그램그만큼 프로그램에서 중요한 두 가지 중 하나가 자료구조라는 점인데,사실 개발을 배우는 단계에서는 자료구조에 대해서 전혀 신경을 쓰지 않았다. 더군다나 프론트엔드 개발자는 그냥 서버에서 데이터 받아와서 잘 뿌려주면 되는거 아닌가?같은 이따위 생각을 하고 있었다가 최근 프론트엔드 개발자 채용에도 코테가 접목 되는 부분도 그렇고,최적화나 복잡해지는 기능에 대해서 접근 할 때, 자료구조에 대한 이해가 있어야 해당 상황에가장 적합한 자료구조를 적용할 수 있기에 이젠 꼭 알아야 하는 개념이 되겠다.  자료구조(Data Structures)란?자료구조는 컴퓨터가 데이터를 효율적으로 관리할 수 있도록 도와주는 ..

• format_list_bulleted CS/Data Structures
• · 2024. 11. 12.
• textsms

HTTP method : CRUD가 이거였어?

HTTP는 클라이언트와 서버간의 통신 규약이라고 했다.사람이 대화 할 때도 다양한 규칙이 있는 것 처럼 HTTP에도 여러 규칙들이 있는데그 중에서 HTTP method라는 규칙을 활용해 클라이언트와 서버가 어떻게 데이터를 주고 받는지 알아보자.  HTTP method위의 사진은 HTTP에서 클라이언트가 서버에 데이터를 요청할 때 보내는 메시지 구조다.각 부분에 대해서 더 자세한 내용이 궁금 하다면 맨 아래 링크를 통해 참고해보자. 이번에는 메시지 중 Start Line에 있는 HTTP method에 대해서 알아보고자 한다. 여기 적혀있는 바로는 요청이 의도한 액션을 정의 한다고 적혀있는데,좀 더 쉽게 풀어보자면 통신에서 CRUD라는 말을 들어봤을 것이다.CRUD는 Create, Read, Update, ..

• format_list_bulleted CS/Network
• · 2024. 11. 11.
• textsms

HTTP와 HTTPS : 우리 이렇게 얘기하기로 약속~

사람이 대화하는 언어에는 그만의 규칙이 있다.한국어를 예로 들어보면 '나는 밥을 먹는다'와 같이 주어 + 목적어 + 동사의 구조로 이루어진 문장을 사용하거나자음과 모음의 조합을 통해 단어를 만든다던가 하는 여러 규칙이 있다. 클라이언트와 서버 간에도 이러한 규칙이 존재하는데 그중 하나인 HTTP와 HTTPS에 대해서 알아보자.  HTTP는?우선 HTTP에 대한 이야기를 해보자.간단하게 단어부터 풀이하면 Hypertext Transfer Protocol 문자 그대로 해석하면 문서에서 다른 문서로 접근할 때 발생하는 통신간의 약속이라는 의미가 될 것 같다. 다시 정리해 보면, HTTP는 클라이언트와 서버 간에 데이터를 주고받을 때 사용하는 통신 규약인데이 친구가 가지고 있는 몇 가지 특징이 있다. 1. 요청..

• format_list_bulleted CS/Network
• · 2024. 11. 11.
• textsms

RESTful API

예전에 RESTful API에 대한 글을 작성했던 글을 보고, 다시 내용도 정리할 겸 블로그 이전 작업도 할겸 해서 다시 한번 해당 내용에 대해서 정리해 보고자 한다. 개념 우선 단어에 대해서 하나하나 뜯어보도록 하자. 프론트엔드 개발자가 아무리 기깔난 화면을 구성했다고 하더라도, 사용자와의 상호작용을 처리하지 못하면 그냥 이쁜 쓰레기일지도 모른다. (물론 아닌 경우도 있지만) 그래서 서버와의 지속적인 통신을 통해 사용자의 상호작용에 대한 데이터를 전달하고 응답을 통해 사용자에게 보여줘야 하는데 이를 가능하게 하는 것이 API다. 좀 더 쉽게 예시를 들어보자면 우리가 맥날을 가서 캐셔에게 '베토디 세트 하나 주세요' 하면 캐셔가 주문서를 누르게 되면 주방에 전달이 돼서 베토디가 만들어져서 나오고, 우리가..

• format_list_bulleted CS/Network
• · 2023. 8. 17.
• textsms

JWT

최근 계속 통신과 관련된 내용에 대해서 다루고 있는 것 같은데, 개발을 오래 하진 않았지만, 이 통신 과정에서 발생하는 문제나 이슈가 가장 많았던 것 같아서 그냥 얼레벌레 개발을 하는 것 보다 확실하게 다시 내 생각으로 정리를 하는 것이 중요한 것 같아서 계속 정리를 진행해 보려 한다. 개념 🙋🏻‍♂️ : JWT? 그 최근에 놀면뭐하니에서 하던거 아닌가? ??? : 하... (진심으로 이렇게 얘기한 사람 있을듯.. 암튼 아님.. 진짜 아님) JWT는 Json Web Token의 약자로 클라이언트와 서버간의 정보를 전달할 때 사용하는 인증 방식이다. 보통 통신을 하게 되면 클라이언트의 요청에 의해 서버에 데이터를 전달해 주는 형태로 진행이 되는데 서버 입장에서는 이 클라이언트가 인증된 유저인지를 확인하는 ..

• format_list_bulleted CS/Network
• · 2023. 7. 27.
• textsms

CSR vs SSR (feat. NEXT.js의 등장)

우선 각 단어의 뜻을 풀어보자면 SSR (Server-Side-Rendering) 이고, CSR (Client-Side-Rendering)이다. 두 단어에서 공통적으로 들어간 단어를 본다면 렌더링(Rendering)이라는 단어가 있다. 그렇다면 이 단어 부터 알아보는게 맞겠다. 렌더링이란? 렌더링은 어떤 상황에서 쓰이느냐에 따라 의미가 달라지긴 하겠지만, 간단하게 말하면 브라우저가 서버로부터 요청해 받은 내용을 화면에 표시해 주는 것을 뜻한다. 예를들어, 우리가 주소창에 네이버 주소를 입력해서 엔터를 누르면 네이버 페이지로 이동하게 되는데 주소를 입력해서 엔터를 누르는 이 상황에 서버에 요청을 하는 것이고, 응답을 통해 받은 파일들을 화면에 그려주는 것이 렌더링이라고 생각하면 좋을 것 같다. 이러한 렌더..

• format_list_bulleted CS/Web
• · 2023. 7. 7.
• textsms