LazyWon Story

* 프로토콜 : 디바이스 간에 데이터를 교환하기 위한 통신 규약 FTP (21 포트) FTP(File Transfer Protocol)는 파일을 전송하는 통신 규약이다. 기본 포트는 21이지만 설정에서 변경해서 사용하는 경우도 있다. 명령어를 전달하는 21 포트와 데이터를 전달하는 20(혹은 랜덤) 포트가 있다. 그래서 21번 포트로 접속되더라도 사용 모드에 따라 서버의 20번 포터 혹은 클라이언트 방화벽 정책에 따라서 접속만 되고 실제 파일은 받거나 올리지 못하는 일이 발생할 수 있다. FTP는 보안이 좋지 않아 실무에서 사용하지는 않는다. 명령어 방식으로 커맨드 창으로 이용이 가능하며, 파일질라와 같은 gui 프로그램으로도 이용이 가능하다. FTPS FTPS(File Transfer Protocol ..

목차 들어가며.. 일반적인 script 태그 script 태그의 async, defer 들어가며.. HTML에 그 다음으로 많이 사용하는 방법으로, body 안에 마지막 줄에 script를 추가하는 방법이다. 이 방식을 이용하면 브라우저가 html 파일을 다운받아 파싱해서 페이지가 준비된 다음, 서버에서 자바스크립트 파일을 다운 받아 실행하게 된다. 즉, 렌더링 엔진이 script 태그를 파싱할 때는 이미 렌더링 엔진이 HTML 요소를 모두 파싱하여 DOM 생성이 완료된 이후가 된다. 따라서 DOM 이 완성되지 않은 상태에서 DOM을 조작하는 에러가 발생할 우려가 없다. 또한 자바스크립트 파일이 실행되기 전에 DOM 생성이 완료되어 렌더링 되므로, 페이지 로딩 시간이 단축된다는 이점이 있다. 하지만, 이..

목차 테스트 기본 이해하기 의존성을 대체하는 테스트 더블 TDD 기본 개념 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용 + 따로 검색하여 공부한 내용입니다. 테스트 기본 이해하기 💡 테스트, 테스트 코드란 무엇인가? 소프트웨어를 테스트하는 작업이다. 숨겨진 버그는 없는지, 여러 명이 동시에 이용할 때에도 잘 견디는지 등 문제를 점검하는 일이다. 제품 혹은 서비스 품질을 확인하는 용도 SW의 버그 찾는 용도 제품(함수, 특정 기능, UI, 성능, API 스펙)이 예상하는 대로 동작하는지 확인 및 검증을 하는 것이다. 보통 우리가 local 환경에서 테스트를 하는데, 백엔드는 postman을 이용하여 api 테스트를 하고, 프론트엔드는 로컬에서 브라우저에 접속하여 테스트..

목차 상황별 Git 다루기 실전 충돌(Conflict) 다루기 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용입니다. 상황별 Git 다루기 🟦 [log & reflog] 이전 commit 내역들과 변경사항 확인하기 git log commit 내역을 확인하는 가장 일반적인 방법 # 로그 간략하게 보기 $ git --oneline commit의 개수가 많을 경우 -n을 활용하여 최근 n개 commit만 볼 수 있다. $ git log -n 10 시각적인 그래프 형태로 merge 된 것까지의 git commit history를 보려면 다음과 같이 입력한다. $ git log --oneline --decorate --graph git show 가장 최신 commit 정보 확인 ..

목차 Git 기본적인 Git 명령어 Git 작업 공간 정리 브랜치 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용입니다. Git Git은 분산 버전 관리 도구로, 작업 내역을 저장할 수 있고 여러 사람들과 협업할 때 필수적으로 사용된다. 📁 Git의 4가지 작업 공간 Workspace - git을 쓰기 이전 처음 상태로, 우리가 작업하는 일반적인 공간이며, git add 명령어 이전 변경 사항들이 기록된다. Index - 변경되는 모든 파일/폴더 추적하는 공간으로, git add 명령어로 workspace에 있는 작업을 이 공간으로 보낼 수 있다. - 이 공간을 Staging Area 라고도 하며, 최종 커밋하고자 하는 작업물을 이 공간으로 둔다. - 한 번 index에..

목차 Promise의 등장 이유 Promise 객체 생성 Promise Chaining 막연하게만 알고 있던 Promise가 대체 무엇이고, 왜 등장하게 되었는지, 어떤 방식으로 사용할 수 있는지 ! Lazywon 게을러지기 전에 제대로 한번 공부해보자 ! 😂 🦄 들어가기 앞서.. Promise의 등장 이유!? 자바스크립트에서 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬(Callback Hell)로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는데 한계가 있다는 단점이 존재한다. 잠깐, Callback Hell 이 뭔데? ..을 알아보기 전에 먼저 동기식 처리 모델과 비동기식 처리 모델에 대..

목차 쿠키와 세션 사용자 인증 (Authentication) 더 공부하면 좋은 내용들 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용입니다. 사용자가 있는 서비스의 필수 기능인 인증에 대해 알아보자! 쿠키와 세션 HTTP 프로토콜의 특징으로 비연결성(Connectionless)와 무상 태성(Stateless)이 있다. 비연결성은 한 번의 HTTP 통신으로 요청과 응답이 오간 이후에 통신을 끊는다는 것이며, 이로 인해 통신과 관련된 상태는 남지 않는다(Stateless). 예를 들어, 사용자가 로그인 요청을 한 뒤 응답을 받았다고 하더라도, 다음 요청에 이렇게 로그인된 정보는 통신 어디에도 남지 않는다. 따라서 서버 입장에서는 네트워크 요청이 왔을 때 이 요청이 어떤 사용..

목차 네트워크 통신이 일어나는 과정 그래서 OSI 7 계층 모델이 뭔데? TCP/IP 4 계층 모델이란? 정리 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용입니다. 네트워크 통신이 일어나는 과정 크롬 브라우저를 열어 네이버 웹사이트를 접속한다고 하면 아래와 같은 흐름으로 통신이 이뤄진다. 1. 크롬 브라우저 검색창에서 https://www.naver.com 을 입력한다. 2. 크롬 브라우저는 이를 네트워크에서 통신 가능한 형태로 만든다. (보통 패킷이라고 부른다) 3. 이 패킷을 네트워크에 흘려보낸다. 4. 네트워크 중간에 있는 기기(라우터)들이 이 패킷을 읽고 네이버 서버로 전달한다. 5. 네이버 서버는 이 패킷을 다시 풀어, 웹서버가 읽을 수 있는 형태로 만들고 웹..

목차 프로세스와 스레드 동시성과 병렬성 멀티 스레드와 멀티 프로세스 동기와 비동기, 블락과 논블락 인프런 "모든 개발자의 실무를 위한 필수 기본기 클래스" 강의를 듣고 정리한 내용입니다. 프로세스와 스레드 프로세스 운영체제에 의해 연속적으로 실행되고 있는 프로그램 프로그램을 실행했다면 프로세스는 메모리 위에 올라가 있게 되며 운영체제에 의해 CPU, 메모리 자원을 할당받게 된다. 프로세스는 독립된 메모리 영역으로 Code, Data, Stack, Heap을 할당받는다. Code 개발자가 작성한 코드 Data 전역변수, 정적변수, 배열, 구조체 등 프로그램이 실행되면서 생기는 정적인 데이터들이 저장된다. Stack 함수 호출과 관련된 정보(실행정보, 지역변수, 파라미터 등)이 저장된다. 일반적으로 컴파일 ..

목차 브라우저 렌더링 동작 과정 렌더링 최적화 ⭐️ 브라우저 렌더링 동작 과정 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 이를 웹 페이지 빌드 과정(Critical Rendering Path, CRP)이라고 한다. 그 전에 렌더링 엔진이 무엇인지 알아야 한다. 렌더링 엔진에 대하여.. 브라우저의 기본 구조는 다음과 같다. 렌더링 엔진은 URI를 통해 요청 받은 내용을 브라우저 화면에 표시하는 역할을 한다. 대표적으로 사파리와 크롬은 Webkit 이라는 렌더링 엔진을 사용한다. 렌더링 엔진이 하는 일 1. Dom tree 구축 2. Render tree 구축 3. Render tree 배치 4. Render tree 그리기 * DOM tree가 완벽하게..