분류 전체보기72 YOU DON'T KNOW JS! 매번 궁금한 것들을 인터넷으로 찾다보니 조금씩 다르게 말하는 것들이 있어 혼동이 많았다. 그래서 책을 사서 공부하기로 시작! 네이버 우상훈 개발책임 리더님께서 책을 통해 궁금한 것을 하나라도 해결한다면 그 책은 임무를 다한 것이라고 하셨다. 옆에 두고 꾸준히 읽으면서 기록으로 남겨야겠다. 2021. 7. 18. [Network] HTTP OSI 7계층의 7계층인 응용계층에서 HTTP, HTTPS 프로토콜을 통해 통신을 한다. 그렇다면 한번쯤은 들어봤을 이 프로토콜에 대해서 알아보자! HTTP 란? Hyper Text Transfer Protocol의 약자로, 웹 브라우저와 웹 서버가 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등등을 주고받기 위한 프로토콜(통신규약)이다. 즉, 서버/클라이언트 모델을 따른다. HTTP 통신 - 메시지 HTTP 메시지는 서버와 클라이언트 간에 통신 규약(HTTP)에 맞게 데이터가 교환되는 방식을 뜻한다. 메시지 타입은 두 가지가 있다. 요청(request)는 클라이언트가 서버에 요청 메시지를 보내는 것 응답(response)는 요청에 대한 서버의 답변 즉, 클라이언트가 서버에 요청 메시지를 보내고, .. 2021. 6. 22. [Network] 웹페이지가 사용자에게 보여지는 과정 (feat. Google) 이전 글에서 네트워크 통신에 대해 공부했었다. 그리고 TCP/IP 프로토콜을 기반으로 인터넷이 통신하는 것까지! 아래 사진은 우리가 브라우저(크롬)에서 들어가고 싶은 웹 사이트가 있을 때 검색해서 그 사이트가 눈 앞에 보이기까지의 과정을 간략하게 그림으로 나타낸 것이다. 과정에 대해서, 추가로 관련 용어와 개념까지 자세히 알아보자! URL 입력 브라우저(크롬 ,사파리 등) 주소표시줄에 URL을 입력하고 Enter를 클릭한다. 혹은 링크를 클릭하면 주소창에 입력된다. URL 처리 웹 브라우저가 URL을 해석한다. URL의 구조 https://www.example.com:80/path/to/myfile.html ?key1=value1&key2=value2#SomewhereInTheDocument https .. 2021. 6. 14. [Network] 네트워크 통신 컴퓨터를 이용하면서 네트워크란 말을 한 번도 들어본적이 없는 사람은 없을 것이다?! 우리는 이 네트워크를 통해 파일공유, 미디어 스트리밍, 게임 등 데이터를 주고 받는 다양한 것들을 할 수 있다. 모든 종류의 작업을 가능하게 하는 이러한 장점이 존재하는 반면 바이러스, 악성코드, 해킹과 같은 보안상의 문제라는 단점 또한 존재한다. 그렇기에 네트워크에 대해 좀 더 알아보는 시간을 가지려고 한다! 네트워크(Network)란? 분산되어 있는 컴퓨터들을 자원이나 정보를 공유하기 위하여 통신망으로 연결한 것을 의미 네트워크 정의에 대해 컴퓨터들을 연결한 것이라고 했는데, 컴퓨터 뿐만 아니라 휴대폰, IoT, 프린터 등 여러 기기들을 연결하여 사용하는 것도 네트워크다. 왜 연결하여 사용하는 것일까? 바로 통신 즉,.. 2021. 6. 14. [JS] 호이스팅과 TDZ (Temporal Dead Zone) - let도 호이스팅이 된다! 처음 자바스크립트를 공부하면서 호이스팅이란 개념을 들었을 때 '단순히 끌어올린다'라는 생각만 했었다. 맞는 말이지만, 실제로 아래 코드를 실행해보면 다음과 같은 결과가 일어난다. console.log(success); // undefined; console.log(fail); // ReferenceError var success = '성공!'; let fail = '실패 ㅠ' var을 사용한 경우는 문제가 없고, let을 사용한 경우는 에러가 발생한 것을 보니까 var은 호이스팅이 되고 let은 호이스팅 되지 않는 것일까? 근데 호이스팅이 되면 끌어올려지니까 let을 사용한 경우는 그렇다치고, var로 선언한 success는 접근할 수 있는데 왜 값은 undefined지? 의문점들이 막 생겨났다. 이러한.. 2021. 6. 9. [JS] 자바스크립트 Event Loop 자바스크립트에 대해 찾아보면 자바스크립트는 단일 스레드 기반의 언어라고 한다. 그런데 단일 스레드는 한번에 한가지 일만 처리할 수 있다. 그런데 평소에 코드를 작성하고 실행해보면서 서버에서 데이터를 가져오는 도중에 다른 일을 못해 멈추거나 이를 처리하는 데 멈추거나 한 기억은 없다. 즉, 순서대로 처리하는 동기적인 방식이 아니라 비동기적으로 구현이 가능했다. 어떻게 가능한 것일까? 우선 자바스크립트 엔진, 런타임 환경에 대해 알아보자. 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터를 뜻한다. 대표적으로 그 유명한 크롬의 V8 등이 있다. 아래 사진은 자바스크립트 엔진을 간략하게 나타낸 모습이다. (출처) Heap : 메모리 할당이 일어나는 곳 Ca.. 2021. 6. 7. [OS] 프로그램, 프로세스, 스레드 운영체제(OS)란? 이전에 운영체제가 하는 일을 잠시 알아봤다. 그 중 하나는 시스템 자원 관리를 하는 것이었는데, 이에 대해 알아보자. 우리는 컴퓨터를 사용하면서 프로그램을 실행시킨다고 한다. 이 프로그램은 사용자가 원하는 일을 처리할 수 있도록 미리 명령어(코드)와 데이터들을 종합해 놓은 묶음 즉, 실행파일이다. 이를 컴퓨터(보조기억장치 - 하드디스크,SSD)에 미리 저장해 놓는다. 예를 들면 파워포인트, 게임, 워드 등이 있다. 그렇다면 우리가 컴퓨터를 켰을 때 알아서 켜지고 작동하는가? 를 생각해보면 아니다. 우리는 실행시키기 위해 더블클릭을 한다. 우리가 더블 클릭을 하면 이때 운영체제가 클릭한 프로그램에 메모리, CPU를 할당해준다. 그러면 우리는 원하는 행동을 할 수 있다. ppt를 만들거나.. 2021. 6. 3. [OS] 운영체제(OS)란? 지금까지 컴퓨터를 사용하면서 어떻게 상호작용?이 일어났는지 한번도 생각해본 적이 없었던 것 같다. 그저 키보드를 입력하면 입력이 되었구나~, 더블클릭하면 파일이 열리겠구나~ 하고 넘어갔다. 그런데 앞으로 개발자라는 직업을 가지면서 컴퓨터에 대해 기초적인 지식들을 모른다면 내가 원하던 개발자 상?은 아닐거란 확신이 들게 되었다. 그래서 오늘부터 차근차근 공부를 해보려고 한다! 운영체제(OS)란 ? 일반적으로 하드웨어를 관리하고, 응용 프로그램과 하드웨어 사이에서 인터페이스 역할을 하며 시스템의 동작을 제어하는 시스템 소프트웨어로 정의할 수 있다. 즉, 운영체제는 시스템의 자원과 동작을 관리하는 소프트웨어다. * 인터페이스(interface) - 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템 쉽게 한.. 2021. 6. 3. [Algorithm] 반복문(iteration) vs 재귀(recursion) 지금까지 반복적인 작업이 필요한 알고리즘 문제들(거의 필연적인..?)을 풀면서 일반 반복문(while, for)이나 재귀함수를 번갈아가며 사용했었다. 하지만 코드나 접근방식에 오류가 생겼을 때, 발생하는 현상은 달랐다. 일반 반복문은 시간 초과(무한 루프), 재귀함수는 stack overflow가 발생했다. 재귀함수의 경우 stack이라는 메모리 공간을 계속 이용하기 때문에 메모리의 제한이 있는 한 stack overflow가 뜨면서 메모리가 터진다고 한다. 반복문의 경우에는 메모리를 이런식으로 사용하지 않아 단지, 프로그램이 종료되지 않을 뿐이다. 그렇다면 재귀함수의 경우 반복문에 비해 메모리를 많이 사용한다는 확연한 단점을 가지고 있는데 왜 자주 사용하게 될까? (사실 나 또한 while이 어색해서 .. 2021. 6. 1. 코드스테이츠 파이널 프로젝트 회고 배포 링크 깃헙 링크 소개 링크 마지막 프로젝트가 끝났다😭😭😭 2주 프로젝트보다 만족한 점들도 있지만, 또 아쉬웠던 점들도 많았다. 4주 간 진행하며 이번에도 많은 것들을 배울 수 있었으며 이를 정리하는 시간을 가져보려 한다!!! Scraplan(스크랩플랜)이란? 우리 팀의 프로젝트 주제는 지도를 기반으로 해당 장소의 다양한 즐길거리를 큐레이션 형식으로 제공하고, 해당 큐레이션을 이용해 나만의 일정을 편리하게 관리할 수 있는 서비스다. (plan을 scrap 하세요~!) 비회원은 다른 사람의 일정을 구경, 카카오톡으로 공유, 일정을 직접 만들어볼 수도 있다. 거의 대부분의 기능을 사용할 수 있다!! 하지만 저장을 하려면 회원가입을 하도록 유도했다. 후후.. 실제 프로젝트 결과들을 보자면 우선 메인페이지에.. 2021. 5. 1. 2주 프로젝트 회고, My Surpin 코드스테이츠에서 몇 달간의 이머시브 과정을 지나 드디어 첫 프로젝트를 완료했다. 첫 프로젝트인 만큼 아쉬운 부분, 힘든 일이 많았지만 좋은 팀원들 덕분에 2주라는 시간을 재밌게 보낼 수 있었다! 프로젝트에 대한 소개와 느꼈던 점을 정리하기 위해 회고글을 작성해보려 한다. 깃헙링크 (소개 글은 Github에 더욱 자세히 되어있습니닷!) 배포링크 My Surpin🏄♂️ 이란?! 당신만의 북마크를 만드세요! My Surpin는 웹 서핑(Surfing🏄♂️)을 하면서 마음에 드는 사이트를 핀( Pin📌)을 꽂아 고정한다는 뜻을 가지고 있다. 즉, My Surpin = My + Surfing🏄🏼♂️+ Pin📌의 합성어다!! 인터넷에는 정말 유용한 사이트들이 많다! 이런 사이트들을 기억하기 위해 우리는 보통 .. 2021. 4. 1. TIL_210322(First Project) 📝 오늘 한 일 / 배운 것 🖋 로그인 상태에 따른 UI 변화 구현 로그인 시 NavBar의 LOG IN / SIGN UP 버튼 ⇒ LOG OUT 및 리덕스 상태 변경 EditUserInfoChange 페이지 이동 ⇒ MainPage 이동 EditUserInfo 페이지 상태에서 NavBar의 상단 버튼 비 활성화 로그인 버튼 클릭 시 기본 상태 변경 SignUp 컴포넌트 Form On -> SignIn 컴포넌트 Form On 🖋 토큰 처리 서버에 요청을 보낼 때 Token이 필요한 컴포넌트에서 토큰 상태 확인 ⇒ 토큰 만료 시 재 로그인 권유 🖋 MainSection, Navbar 검색 함수 및 처리 방법 수정 기존 - 요청 처리 오류 및 페이지 이동 미 구현 => 수정 - 오류 수정 및 경로 수정 Se.. 2021. 3. 23. 이전 1 2 3 4 ··· 6 다음
