JadeCode

네트워크의 시작 회선교환방식 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결하는 방식. 내가 연결하고 싶은 상대가 다른 상대와 연결중이라면, 그 연결이 끊어지고 나서야 나와 연결할 수 있다. 매우 비효율적이다. 패킷교환방식 패킷교환 방식은 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식. 각 패킷에는 출발지와 목적지 정보가 있고, 이에 따라 패킷이 목적지로 향해 가장 효율적인 방식으로 이동할 수 있음. 그래서 인터넷 프로토콜(IP)는 출발지와 목적지의 정보를 IP주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송하게 되었다. IP 와 IP Packet IP는 지정한 IP 주소 (IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달을 한다. 패킷은..

웹표준: W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 웹 표준 등장 이전에는 구조, 표현, 동작이 뒤섞인 코드가 많았지만, 각 영역이 분리되면서 오히려 코드가 경량화되었다. 웹 표준 장점 유지 보수의 용이성 웹 호환성 확보 검색 효율성 증대 웹 접근성 향상 Semantic HTML 웹 표준에서는 HTML을 시맨틱하게 작성하는것의 중요성을 강조한다. 와 요소는 해당 요소에 어떤 내용이 들어갈지 요소의 이름만으로는 알 수 없다. 따라서 시맨틱 HTML을 구성하고자 할 때에는 적합하지 않다. 시맨틱..

State 상태란? 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다. 리액트는 단방향으로 상태 전달이 가능하다. 하지만 전역으로 상태를 다루어야 할 일이 있다. 그럴 때 전역상태라이브러리를 사용한다. 또한 Props drilling을 해결해 주기도 한다. props drilling이란 계속해서 자식 컴포넌트에 props를 넘겨주는 것을 말한다. 코드의 가독성이 매우 나빠지게 되고, 코드의 유지보수 또한 힘들어지게 된다. state변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생하여 웹 성능에 악영향을 줄 수 있다. 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단..

CDD (Component Driven Development) 디자인과 개발 단계에서부터 재사용할 수 있는 UI컴포넌트를 미리 디자인하고 개발할 수 있다. 예를들어 버튼의 경우 여러 페이지에서 같은 디자인으로 필요하다고 할 때 버튼을 컴포넌트화하면 재사용 할 수 있다. CDD개발방법을 사용하여 부붐 단위로 UI컴포넌트를 만들어가는 개발을 진행하는 방향(상향식)이 좋다. CSS-in-JS CSS 전처리기란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다. 가장 유명한 SASS는 Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어이다. 즉 CSS를 만들어주는 언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 사용할 수 있게..

UI UI(User Interface,사용자 인터페이스): 사람들이 컴퓨터와 상호 작용하는 시스템 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소이지만 그 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. GUI GUI(Graphical User Interface, 그래픽 사용자 인터페이스): 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 GUI의 예시는 우리가 보는 운영체제의 화면, 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. UX UX(User Experience, 사용자 경험): 사용자가 어떤 시스템, 제품, 서비스를 직,간접적으로 이용하면서 느끼고 생각하는 총체적 경험 제품, ..

CORS를 알려면 SOP에 대해 알아야한다 SOP(Same-Origin Policy)의 줄임말로, 동일 출처 정책을 뜻한다. '같은 출처의 리소스만 공유가 가능하다', 여기서 '출처(Origin)'은 프로토콜,호스트,포트의 조합으로 되어있다. SOP가 생겨난 이유는, 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. SOP은 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다. 이런 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고 있는 정책이다. 하지만 다른 출처의 리소스를 사용하게 될 일이 너무나도 많다. 당장 로컬 환경에서 개발을 할 때에도 클라이언트와 서버를 따로 개발하게 된..

React 데이터 흐름 - 리액트의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 먼저 만들고 페이지를 만드는 상향식(bottom-up) 방식으로 앱을 만든다. - 하나의 컴포넌트는 한 가지 일만 하는 단일 책임 원칙에 따라 만드는 것이 좋다 - 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성처럼 전달받을 수 있다. 데이터를 전달하는 주체는 부모 컴포넌트가 되고 데이터 흐름이 하향식(top-down)임을 의미한다. - 단방향 데이터 흐름(one-way data flow)를 따른다. - 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 state를 위치해야 한다. State끌어올리기 - 하위 컴포넌트에서의 이벤..

REST API REST API (Representational State Transfer Application Programming Interface) 웹의 장점을 최대한 활용할 수 있는 아키텍쳐 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 모든 단계를 충족해야 REST API라고 부를 수 있다고 주장하지만 엄밀히 말해서 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이며, 이런 경우를 HTTP API라고 부른다 REST 성숙도 모델 - 0단계 REST 성숙도 모델에 따르면, 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 된다. 이 경우의 해당 API를 REST API라고 할 수는 ..