한 개발자의 공부 이야기

[모든 개발자를 위한 HTTP 웹 기본 지식] 02. URI와 웹 브라우저 요청 흐름

2022. 6. 16. 12:33 Network/모든 개발자를 위한 HTTP 웹 기본 지식

본 문서는 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 보고 제 주관대로 정리한 글입니다. URI(Uniform Resource Identifier) URI? URL? URN? "URI는 로케이터(Locator), 이름(Name) 또는 둘 다 추가로 분류될 수 있다. https://www.ietf.org/rfc/rfc3986.txt - 1.1.3. URI, URL, and URN URI는 URL과 URN을 포함하는 개념이라 할 수 있다. URI Uniform: 리소스를 식별하는 통일된 방식 Resource: 자원, URI로 식별할 수 있는 모든 것 Identifier: 다른 항목과 구분하는 데 필요한 정보 URL, URN URL - Locator: 리소스가 있는 위치를 지정한다. URN - Name..

[모든 개발자를 위한 HTTP 웹 기본 지식] 01. 인터넷 네트워크

2022. 6. 16. 12:25 Network/모든 개발자를 위한 HTTP 웹 기본 지식

본 문서는 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 보고 제 주관대로 정리한 글입니다. 인터넷에서 컴퓨터들은 어떻게 통신할까? IP(Internet Protocol) - 인터넷 프로토콜 IP의 역할 지정한 IP 주소(IP Address)에 데이터를 전달한다. 데이터를 전달할 때는 패킷(Packet)이라는 통신 단위를 사용하는데 다음과 같은 정보를 포함한다. 출발지 IP 주소 목적지 IP 주소 전달할 데이터, 기타 등 패킷(Packet)은 패키지(Package)와 버킷(Bucket)의 합성어 IP의 한계 비연결성: 대상 서버가 패킷을 받을 수 있는 상황인지 모르기 때문에 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송한다. 비신뢰성: 중간에 패킷이 사라지거나 패킷이 순서대로 도착하지 ..

TIL - 20220615

2022. 6. 16. 00:20 TIL

Git 어제에 이어서 오늘도 Git을 공부했다. checkout의 기능이 너무 많아서 분리했다는 switch와 restore가 Git 2.23부터 추가됐다는 것을 알게 됐다. 오늘은 원래 자주 썼던 commit과 GUI 툴에서만 가끔 사용하던 merge, rebase에 대해 공부했다. 특히 rebase는 평소에 거의 쓸 일이 없어 항상 헷갈렸는데 이번에 확실히 그 개념을 알게 됐다. 평소 사용하던 Git 명령어가 제한적이라 공부해도 얼마 지나지 않아 까먹기 일쑤였는데 이번엔 블로그 포스팅이라는 인출을 통해 확실히 내 것으로 만들어볼 생각이다. JavaScript JavaScript가 어떻게 동작하는지, 왜 Single Thread로 동작하는지, Event Loop는 어떻게 동작하는지, 실행 컨텍스트란 뭔..

2022. 6. 15. 21:10 Web Front-end/HTML

브라우저는 기본적으로 html을 파싱하다가 이 방법은 첫 번째 방법의 두 문제점을 해결한 것처럼 보이지만 html을 모두 파싱한 후에, 스크립트를 다운받고 실행하기 때문에 스크립트에 의존적인 웹사이트라면 웹사이트가 정상적으로 동작하기까지 오랜 시간이 소요될 수 있다. async 속성 ... async 속성을 이용하면 html 파싱과 병렬적으로 스크립트를 다운받고, 다운받은 순서에 따라 스크립트를 실행한다. 이때, 스크립트를 실행하는 순서는 보장되지 않으며, html 파싱이 진행 중이라면, 파싱을 중단하고 스크립트를 실행한다. 웹 사이트가 정상적으로 동작하기까지의 시간이 앞의 두 방법보다는 단축되지만, html을 파싱하는 도중에 파싱을 중단하고 스크립트가 실행될 수 있기 때문에 DOM 요소를 사용하는 코드..

BEM(Block Element Modifier) 방법론이란?

2022. 6. 15. 12:25 Web Front-end

BEM은 Block, Element, Modifier의 앞글자만 딴 용어로 프론트엔드 개발에서 클래스 명을 정하는 네이밍 컨벤션이다. Block__Element--Modifier 형식으로 작성한다. Block 어딘가에 종속적이지 않고 그 자체로서 의미가 있어야 하며, 일반적으로 Element의 컨테이너 역할을 한다. header, container, menu 같이 무언가를 담을 수 있는 것뿐만 아니라 button, checkbox, input 같이 무언가를 담지 않더라도 그 자체로서 의미를 가진다면 Block이 될 수 있다. Element Block을 구성하는 요소다. Block에 의존적이며, 자신이 속한 Block 내에서만 의미를 가진다. header title, menu item, checkbox c..

TIL - 20220614

2022. 6. 15. 00:12 TIL

최근 들어 가장 공부를 많이 한 날이 아닌가 싶다. 코드숨 아침에 일어나자마자 코드숨 2주 차 강의 들었다. React의 탄생 배경과 핵심 개념, ReactDOM, Components 등을 배웠는데 React는 어느 정도 알고 있어서 대부분 익숙했지만 별로 신경 쓰지 않았던 탄생 배경이나 그냥 되는 줄 알았던 React.render()에 대한 설명은 꽤나 흥미로웠다. 그 후, 과제인 Counter 앱 만들고 파일 분리하기를 진행했는데 기능은 별 무리 없이 만들었지만, 코드 품질적인 부분에서는 놓친 게 많았나 보다. 때문에 코드 리뷰에서 변수명이나 재사용성 같은 부분에서 여러 피드백이 들어왔는데 앞으로 좀 더 신경 써야겠다. 두 번째 과제와 관련된 React의 리스트와 Key도 미리 봤는데 key 역시 어..

[CSS] 사용자 지정 속성, 변수, Variables 사용하기

2022. 6. 14. 11:20 Web Front-end/CSS

CSS에서 자주 사용하는 값은 변수에 저장해놓고 사용하자. 기본적인 문법 div { --default-font-color: red; } p { color: var(--default-font-color); } div에서 변수를 선언하고, p에서 변수를 사용한다. 이때, 변수의 범위는 변수를 선언한 그 자신과 하위 요소로 제한된다. 첫 번째 단락 두 번째 단락 즉 이러한 문서가 있을 때, 첫 번째 단락은 변수가 적용되어 빨간색으로 나오지만, 두 번째 단락은 변수가 적용되지 않아 기본 색상으로 표시된다. p { color: var(--default-font-color, blue); } 변수가 적용되지 않을 것을 대비해 대체 값을 지정할 수도 있다. 사용법 :root { --default-font-color: ..

[CSS] Box Model(박스 모델)

2022. 6. 14. 11:07 Web Front-end/CSS

Box Model(박스 모델)이란? 문서의 레이아웃을 계산할 때, 하나의 박스는 위 사진과 같이 네 부분으로 이루어진다. 컨텐츠 영역(Content Area) 패딩 영역(Padding Area) 테두리 영역(Border Area) 마진 영역(Margin Area) CSS에서 box-sizing 속성이 기본값인 content-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border, margin을 제외한 컨텐츠 영역의 크기만을 지정하는 것이다. box-sizing 속성이 border-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border를 포함하고, margin은 제외하는 테두리 영역의 크기를 지정하는 것이다. 사이즈 계산..

[Flutter] SliverAppBar with Dynamic Height(동적 높이)

2022. 6. 14. 00:08 Flutter

Flutter로 UI를 만들면서 많은 시행착오를 겪었던 동적인 높이를 가진 SliverAppBar를 구현하는 방법을 정리했다. UI 설명 기본 화면 스크롤 됐을 때 구현하고자 하는 UI는 기본적으로 Header, TabBar, TabBarView가 모두 보이다가 아래로 스크롤 하면 Header가 사라지고, 다시 위로 스크롤 하면 Header가 나타나는 구조다. 기본적인 방법 Widget build(BuildContext context) { return NestedScrollView( headerSliverBuilder: (_, __) => [ SliverAppBar(title: _Header()), _TabBar(), // SliverPersistentHeader를 이용하여 pinned를 true로 세팅..

[코드숨] 리액트 1주 차 회고

2022. 6. 13. 23:45 교육/코드숨

시작 6월 6일부터 코드숨의 소프트웨어 개발의 지혜 9기 과정을 시작했다. JavaScript, React, TDD, 좋은 설계, Git & 코드 리뷰를 통한 협업 등 이 과정을 통해 최대한 많은 것을 얻어 갈 수 있었으면 한다. 무엇을 배웠나? 개발 환경 구축을 위한 Node.js, NPM, Webpack, Webpack Dev Server, Babel, ESLint 등의 기본적인 사용 방법과 DOM 및 ES6+에서 추가된 Array, Object 관련 문법을 공부했다. 과제 총 2개의 과제가 있었는데, 첫 번째 과제인 let을 제거해보자는 나름 간단하게 해결했지만, 두 번째 과제인 간단한 사칙 연산 계산기 구현은 많은 생각을 요구하는 과제였다. 과제를 진행하면서 RORO 패턴, if ~ return ..

티스토리툴바