CDD (Component-Driven Development) 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 재사용할 수 있는 UI 컴포넌트를 미리 디자인 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식(상향식) 부품단위로 UI 컴포넌트를 만들어 나가는 개발 구조적인 CSS 작성 방법의 발전 인터넷이 만들어진 이후 기술 발달로 개발자의 CSS 작성 방식도 꾸준히 진화해 오고 있다. 프로젝트의 규모나 복잡도가 점점 커지고 팀원 수도 많아지면서 일관된 패턴의 중요성 인식 다양한 디바이스 등장으로 다양한 디스플레이를 커버해야 하기 떄문에 CSS는 더 복잡해짐 이에 따라 구조화된 CSS의 필요성이 대두 - CSS 전처리기(CSS Preprocessor) 개념 등장 CSS 전처..

UI User Interface, 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템 그래픽 요소 외에 키보드, 마우스도 컴퓨터와 상호작용하기 때문에 UI로 볼 수 있음 GUI : 그래픽 사용자 인터페이스, 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다. UI 디자인 패턴 모달 : 기존에 이용하던 화면 위에 오버레이 되는 창 모달을 닫기 전에는 기존 화면과 상호작용 할 수 없음. 토글 : On/Off를 설정할 때 사용하는 스위치 버튼. On/Off 뿐만 아니라 여러 개의 옵션이 있을 때도 토글을 사용할 수 있음. 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴. 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨..

재귀 원래의 자리로 되돌아가거나 되돌아옴 자기 자신을 호출하는 함수 반복적인 작업을 해야하는 문제를 좀 더 간결한 코드로 풀어낼 수 있다. 가장 작은 단위로 문제를 쪼개 뒤 문제를 푼다. 중첩된 반복문이 많거나 반복문의 중첩 홋수를 예측하기 어려운 경우 사용한다. 입출력 값을 먼저 정의 해준다. base case : 더 이상 쪼갤 수 없는 경우 return 값 recursive case : 계속 쪼갤 수 있는 경우 return 값 JSON JavaSciprt Object Notation의 줄임말, 데이터 교환을 위해 만들어진 객체 형태의 포맷 message.toString()이나 String(message)를 쓰면 [object object)라는 결과를 리턴한다. 이를 해결하기 방법은 JSON 형태로 변..

SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다. 같은 출처의 리소스만 공유한다. 출처는 프로토콜, 호스트, 포트의 조합으로 되어 있다. 하나라도 다르면 동일한 출처로 보지 않는다. 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. CORS CORS는 Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유를 뜻한다. 추가 HTTP 헤더를 사용해 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. CORS 동작 방식 프리플라이트 요청(Preflight Request) 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 ..

React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 앱을 만들 때는 상향식으로 만드는 것이 테스트가 쉽고 확장성이 좋다. 하지만, 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다. 데이터를 전달하는 주체는 부모 컴포넌트가 되는데, 이는 데이터 흐름이 하향식임을 의미한다. React는 단방향 데이터 흐름을 따르기 때문에 공통으로 전달하고자 하는 내용이 있다면 부모 컴포넌트에 원하는 내용을 만들고 props를 통해 전달해야 한다. 하지만, 자식 컴포넌트를 이용해 부모의 상태를 변화시켜야 할 때가 있다. 대표적인 예가 새로운 트..

REST API REST는 “Representational State Transfer”의 약자로, 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식이다. 클라이언트와 서버사이에 요청과 응답을 해야하고 이를 위한 메뉴판이 필요하다. 메뉴판은 알아보기 쉽고 잘 작성돼야 하는데, 이 역할을 API가 수행한다. REST API를 디자인하는 방법 REST 성숙도 모델은 4단계로 구성되어 있는데, 3단계까지 해야 REST API로 부를 수 있다고 주장했는데, 3단계까지 지키기 굉장히 ..

뭔가 되게 길게 배워야 할 것들을 하루만에 배운 느낌이다. 이해도 뭔가 되다 만듯한.. 어렵다 어려워 ... 차라리 알고리즘 풀고싶어 ... 클라이언트 - 서버 아키텍쳐(2티어 아키텍쳐) 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버" 3티어 아키텍쳐 리소스를 저장하는 공간을 별도로 마련해 두는데 이 공간을 "데이터베이스"라고 부른다. 데이터베이스는 창고와 같은 역할을 한다. 이처럼 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부른다. 클라이언트 - 리소스에 접근하려는 앱, 카페 손님 , 요청 서버 -..

Props 컴포넌트의 속성 외부로부터 전달받은 값, 변하지 않는 값 (태어난 곳, 성별) 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값. props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체다. Props를 사용하는 방법 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달한다. 전달받은 prop..