styled-components를 공부하기 전에, CDD의 개념을 알고 넘어가는 것이 좋다. CDD (Component Driven Development) CDD 는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행하는 것을 말한다. 즉, CDD는 재사용 할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하는 것을 의미한다....

Figma란? Figma는 2016년 9월에 출시된 UI 디자인&프로타이밍 툴이다. 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이 되었다. Figma 특징 1. 실시간 협업 기능 Figma는 한 화면에서 여러 명의 사람이 동시에 작업할 수 있는 기능을 제공한다. 이러한 기능은 비대면...

UX를 디자인 한다는 말은 사용자들을 이해하고 배려하여 최상의 경험을 제공하고자 노력하는 것이다. 사용자 경험을 위함으로 UX에 디자인에 도움이 되는 피터 모빌(Peter Morville)의 벌집 모형과 user flow가 있다. 피터 모빌(Peter Morville)의 벌집 모형 피터 모빌(Peter Morville)의 벌집 모형은 UX를 위해서...

UI를 디자인할 때 필요한 개념인 UI 디자인 패턴과 UI 레이아웃 구성법을 알고있어야 한다. UI 디자인 패턴은 화면에 배치할 수 있는 자주 쓰이는 컴포넌트를 말하고, UI 레이아웃 구성법은 이 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 방법론이다. UI 디자인 패턴 UI 디자인 패턴 은 프로그래밍 시 자주 반복되어 나타나는 문제점...

UI란? UI(User Interface, 사용자 인터페이스) 는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. UI는 화면상 그래픽 요소 외에도 키보드, 마우스 등의 물리적인 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. 현대 사회에는 스마트폰, 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등...

JSON.stringfy()란? JSON.stringfy() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. JSON.stringfy 함수 구현 과제 Rule JSON.stringfy 함수는 input 값을 JSON 형식으로 반환한다. 단, undefined와 function은 JSON으로 생략되...

Section 2를 마치면서 이번에 섹션 2를 진행하면서 비동기와 React에 관련된 내용을 배우게 되었다. 아직도 fetch 를 잘 다루진 못하지만, 개념적인 내용과 베이스는 제대로 잡은 것 같다. 갈 길은 많이 남았지만 부트캠프를 시작하기 전과 비교하면 많이 성장한 느낌을 받는다. 기존에 봤었던 프론트엔드 로드맵을 다시 한번 보았다. ...

과제 Rule 이번 해커톤에서는 Section2에서 학습한 내용을 얼마나 적용 및 응용할 수 있는지 자기 자신의 개발 역량을 스스로 확인한다. 다음과 같이 과제가 주어졌고, 내가 직접 구현한 것만 체크하였다. Bare Minimum Requirement my-agora-states-server는 기본적인 테스트가 준비되어 있다. my-ago...

MERN 스택이란? MERN Stack 은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, NodeJS 을 사용하여 서버(백엔드), 웹(프론트)를 모두 만드는 기술을 의미한다. Express란? Express 는 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크다. ...

CORS에 무엇인지 알아보기 전, CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아본다. SOP란? SOP (Same-Origin Policy) 는 동일 출처 정책을 뜻한다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다‘라는 정책이다. 여기서 말하는 출처(Origin) 는 다음과 같다. 출처는 프로토콜, 호스트, ...