Today I Learned

Presentational & Container 디자인 패턴 Presental & Container 디자인 패턴이란, 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴을 의미한다. 이 패턴이 가지는 특징은 아래와 같다. 앱의 기능과 UI에 대한 구분이 쉬워진다. 같은 state를 다른 container에게 props로 내려 상태를 공유할 수 있다. 로직 수행, 마크업을 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어나다. (특히 마크업 변경에 매우 유연하다) 동일한 마크업, 컨테이너 레이아웃(header, footer)는 반복해서 작성하지 않아도 this.props.children 으로 구현할 수 있다. Presental 컴포넌트 사용자가 직접 보고, 조작하..

초창기 웹 렌더링 방식과 Ajax의 등장 모든 웹페이지는 정적인 페이지였다. 변화가 있을 때마다 서버로부터 새로운 HTML을 전송받아 다시 렌더링을 해야 했고, 이는 성능적 문제와 부정적인 사용자 경험의 이슈가 있었다. 그 후, 자바스크립트를 통해 비동기적으로 데이터를 주고 받는 Ajax가 등장했고, 전체 페이지를 리렌더링하지 않고 필요한 부분의 데이터만 불러와 웹 사이트 화면을 동적으로 변경할 수 있게 되었다. 기존에 서버에서만 이루어지던 다야한 로직 처리나 HTML 생성을 상당수 클라이언트(브라우저)에서 처리할 수 있게 되었다. 현재는 React, Angular, Vue 등의 다양한 프레임워크 사용으로 웹을 보다 쉽게 구축할 수 있게 되었다. CSR(Client Side Rendering) React..

Ajax란? Asyncrhronous JavaScript And Xml(비동기식 자바스크립트와 XML)의 약자로, 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 방식의 하나이다. 먼저 브라우저와 서버의 통신 방식을 살펴보면, 서버는 요청받은 페이지(HTML)를 반환하고, 이때 HTML에서 로드하는 CSS, JavaScript도 함께 반환된다. 클라이언트(브라우저) 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트는 이를 렌더링하여 화면에 표시하는 것이다. Ajax는 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환하여 통신할 수 있도록 해준다. 쉽게 말해, 기존의 웹 페..

HTTP 메소드란? HTTP 메소드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 말한다. 쉽게 말하면, 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다. HTTP 메소드는 9가지 종류로 구성되어 있다. GET : 리소스 취득. URL(URI) 형식으로 웹서버측 리소스(데이터)를 요청 HEAD : 메세지 헤더(문서 정보) 취득. GET과 비슷하나, 실제 문서를 요청하는 것이 아니라 문서 정보를 요청. 이에 따라 HTTP 응답 메세지에 본문(Body) 없이 HTTP 헤더 정보만을 보냄 POST : 내용 전송(파일 전송도 가능). 클라이언트에서 서버로 어떤 정보를 제출하면, 요청 데이터의 ..

브라우저란? 우리가 거의 매일 사용하고 있는 소프트웨어, 인터넷 익스플로러, 파어어폭스, 사파리, 크롬, 오페라, 등과 같은 소프트웨어가 브라우저이다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시한다. 여기서 말하는 자원은 보통 HTML 문서이지만, PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resourse Identifier)에 의해 정해진다. 브라우저의 핵심 기능은 사용자가 참고하고자 하는 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다. 브라우저 기본 구조 브라우저의 기본 구조를 다시 살펴보자. 사용자 인터페이스(User ..

Git 브랜치 전략 Git 브랜치 전략은 프로젝트의 git 브랜치를 효과적으로 관리하기 위한 워크플로우를 의미한다. 직접 브랜치 전략을 수립해도 되지만, 이미 많은 모범 사례들이 존재한다. 그 모범사례 중 유명한 Git Flow에 대해 알아보자. Git Flow Git Flow는 Vincent Driessen이 2010년에 올린 'A successful Git branching model'이란 블로그 글이 인기를 끌며 대중화된 브랜치 전략이라고 한다. Git Flow는 크게 Main / Develop / Supporting 브랜치로 구분하여 브랜치를 관리한다. 이때 Supporting 브랜치는 다시 Feature / Release / Hotfix 브랜치로 나뉜다. Main 브랜치와 Develop 브랜치는..