코딩일기

2023-06-29(목) 이해도 자가 점검 리스트 Chapter1. TCP/IP 패킷교환 방식의 이점에 대해 이해한다. IP의 비순서성, 비신뢰성에 대해 이해한다. TCP의 3 way handshake 및 그와 비교되는 UDP에 대해 이해한다. Chapter2. 네트워크 계층 모델 네트워크 통신을 계층별로 나눈 이유에 대해 이해한다. 통신 과정에서 일어나는 데이터 캡슐화에 대해 이해한다. Chapter3. HTTP HTTP 메시지 구조를 이해한다. HTTP의 무상태성과 비연결성에 대해 이해한다. HTTP 헤더 중 바디를 설명하는 헤더인 표현헤더에 대해 이해한다. HTTP 헤더 중 요청과 응답에서 주로 사용되는 헤더에 대해 이해한다. HTTP 헤더 중 서버에 요청하는 콘텐츠를 협상할 수 있는 협상헤더에 대..

2023-06-26(월) Chapter1-1. 웹 표준의 개념 웹 표준이 무엇인지, 왜 알아야 하는지 알아보기 전에 '웹'이란 무엇인지 알아보겠습니다.웹이라고 하면 인터넷을 떠올리거나 웹페이지를 생각하는 분들이 많을텐데 그렇다면 아래에 내용은 정답일까요? 🤔 인터넷은 웹 기반으로 작동한다. ( O / X ) 정답은 X입니다. 인터넷이 웹보다 좀 더 포괄적인 개념이기 때문입니다.인터넷은 '전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미하며, 웹 뿐만 아니라 온라인 게임, 모바일 앱,이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함합니다. 그렇다면 웹은 무엇일까요? 여러 가지로 표현할 수 있겠지만, 두 글자로 정의한다면 '공간'으로 정의할 수 있습니다. 문서, 이미지, 영상 등 다양한 ..

2023-06-22(목) 이 전까지 Props Drilling을 배우고 직접 상태를 내려 다루기 위해 컴포넌트 안에서 변경 로직이 복잡하게 얽혀있는 경우가 많았습니다. 그러나 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트를 만들 수 있게 됩니다. 이번 유닛을 통해 Redux가 무엇인지, 왜 생겨났는지, 구조는 어떤지에 대해 알아봅시다. 또한 Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리라는 대표적인 오해가 있는데, 전혀 아닙니다. Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리임을 알아둡시다. Redux 아래 사진과 같은 구조의 React 애플리케이션이 있다고 생각해 봅시다. 이 애플리케이션은 컴포넌트3, 컴포넌트6에서만 사용되는..

2023-06-21(수) 프론트엔드 개발에서의 상태 관리 상태란 무엇일까요? -> 상태는 변하는 데이터입니다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터" 입니다. 위의 쇼핑몰 홈페이지에서 상태는 어떤것들이 있을까요? 장바구니 담기 , 금액 , 선택한 수량 , 선택 여부, 현재 선택한 탭 등이 있을 수 있죠 여기서 사용자의 선택에 따라 상태가 변경되는 곳과, 변경의 영향을 받는 곳 2가지로 나누어 볼 수 있습니다. 변경되는 곳은 어디일까요? -> 선택 여부, 수량등이 있습니다. 영향을 받는 곳은 어디일까요? -> 금액, 개수 등이 있을겁니다. 전에 학습했던 Side Effect를 다시 알아봅시다. 상태를 다룰 때에 Side Effect는 주요 고려 대상입니다. 먼저 Side Effec..

2023-06-16(금) Component-Driven Development (CDD) 기획자로부터 하나의 기획이 들어온 상황에서, 디자이너와 개발자가 협력하여 개발진행이 된 후 페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획이, 이전에 요청받았던 버튼을 똑같이 사용하도록 요청하는 기획자에 요청에 디자이너와 개발자는 이 부분을 새로 만들어야 할까요? 이러한 상황에선, 여러 프로젝트 혹은 여러 팀 간에 같은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 됩니다. 하지만 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있습니다. 이러한 고민을 해결하기 위한 개발 방법이 Component-Driven Develop..

2023-06-13(화) UI( User Interface ) 사용자 인터페이스 즉, 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽뿐만 아니라, 마우스 키보드 등의 물리적인 요소들도 UI시스템이라 볼 수 있습니다. 요즘에는 스마트폰과 컴퓨터뿐만 아니라, 스마트워치, 키오스크 등 화면과의 상호 작용을 통해 사용하는 기기들이 많은데 이처럼 현대 사회에서는 그래픽 UI, 즉 GUI가 굉장히 중요한 역할을 하게 되었습니다. GUI ( Graphical User Interface ) 그래픽 사용자 인터페이스 즉, 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말합니다. GUI는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리..

2023-06-09(금) 학습 전 - 자바스크립트 기초 문법 활용할 수 있어야 합니다. - 조건문, 반복문을 숙지하고 있어야 합니다. Chapter 1 . 재귀의 이해 - 재귀란 무엇일까요? 바로 원래 있던 곳으로 다시 돌아온다는 의미를 가지고 있습니다. 우리 컴퓨터 프로그래밍 측면에서 보면 자기 자신을 호출하는 것이라고 볼 수 있습니다. 재귀 함수는 그렇다면 자기 자신을 호출하는 함수를 뜻하는 것입니다. 그런데 왜 재귀가 무엇인지, 알았다면 어떻게 사용해야 하는 것인지, 언제 사용하면 좋은지를 알아봅시다. function recursion () { console.log("This is") console.log("recursion!") recursion() } 이런 코드가 있습니다. 해당 코드를 실행해보..