🧐 Redux 란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리고, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다. 리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수 밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흠을 추적하기 쉽게하고, 결과적으로 컴포넌트를 구성..
DOM 이란? 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리구조로 구성한 것이 DOM이다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 한 마디로 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델을 DOM이라 한다. DOM에는 node 와 element 개념이 ..
Figma 클론 여기서 클론이란 Figma를 사용해서 기존 운영 중인 서비스의 화면의 디자인을 따라서 만들어 보는 것을 의미한다. Bare Minimum Requirements Figma로 프로토타입을 제작해 봅니다. 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다. 페이지 이동이 가능해야 합니다. 스크롤 이벤트가 있어야 합니다. 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들어야 합니다. Figma 클론 결과물을 제출해 주세요. Figma 클론 구현하기! 이번에 페어와 어떤 사이트를 해볼지 정하다 블로그 사이트인 velog의 디자인을 따라서 만들어보기로 했다. 시간이 6시간을 주었지만 직접 디자인을 해보니 시간이 너무 빨리 지나가 구체적으로 완성을 하지못하였고, 아직 실력이 많이 부족해 구현을 하..
이번주는 새로운 section에 들어가 한 주동안 재귀,UI/UX, Figma 를 학습하였다. 어제는 Figma 를 공부했는데 튜토리얼 해보고 할만하다고 생각했는데 페어분이랑 과제를 하면서 멘붕이 왔다.... 어떤 부분이 부족한지 찾아보고 개념을 정리하면서 Figma랑 좀 더 친해져야될 것 같다. 🔥 Figma란? Figma는 2016년 9월에 출시된 UI 디자인 & 프로토타이밍 툴로, 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이 되었다. Figma 는 웹 기반 UI 도구 피그마의 가장 큰 특징(장점이기도 함)이라고 불리는 부분은 윈도우, 맥, 웹 브라우저 어디서에서 접근이 가능하다는 점이다. 웹 기반 프로그램으로 별도 앱 설치를 하지 않아도 되기 때문에 활용 ..
UI, UX는 무엇을 의미하는가? UI(사용자 인터페이스, User Interface)란? 사용자가 컴퓨터와 상호작용하는 모든 시스템을 포함하고, 넓게 보면 컴퓨터 화면과 그 주변기기까지 포함된다. 좁은 의미로만 보자면, 그래픽 즉 GUI 를 의미한다. 프론트엔드 개발에 있어서 UI란 주로 이 GUI를 의미한다. GUI(Graphical User Interface, 그래픽 사용자 인터페이스 GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 말한다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있습니다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미합니다 UX(사용자 경험, User Experience)란? 즉 사용자가 제품..
페이로드(Payload)란 무엇일까? 페이로드(payload)는 전송되는 데이터를 의미한다. 데이터를 전송할 때, 헤더와 메타 데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높이게 된다. 이 때, 보내고자 하는 데이터 자체를 의미하는 것이 바로 페이로드이다. 우리가 택배 배송을 보내고 받을 때, 택배 물건이 페이로드이고, 송장이나 박스, 뽁뽁이와 같은 완충재 등은 부가적인 것이기 때문에 페이로드가 아니다. 페이로드라는 용어는 큰 데이터 덩어리 중에 '흥미 있는' 데이터를 구별하는데 사용된다. 페이로드(payload)라는 단어는 운송업에서 비롯하였는데, 지급(pay)해야 하는 적화물(load)을 의미한다. 예를 들어, 유조선 트럭이 20톤의 기름을 운반한다..
API는 무엇인가? 웹 상에서 데이터를 주고 받기 위해 HTTP 프로토콜(규약)을 사용한다. 그리고 HTTP를 사용해서 원활하게 소통하기 위해서 API라는 것을 만들고 활용한다. API는 간략하게 설명하면 , 프로그램끼리 서로 소통할 수 있는 매개체이다 예를 들면, 카페에서 음료를 주문하고 주문 받기 위해서 '메뉴판'을 활용하는 것처럼, 웹의 세계 - 클라이언트와 서버간에도 이런 메뉴판 같은 역할을 해주는 매개체가 필요하다. 이를 API 라고 할 수 있다. REST API가 무엇인가? REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. HTTP 를 잘 활용하기 위해 고안된 아키텍처 - 방식이라고 ..
서버 아키텍처 웹 브라우저를 통해 웹 컨텐츠를 볼 때 다음과 같이 일이 일어난다. 웹 브라우저(클라이언트) 가 웹 서버에 컨텐츠를 요청하고, 요청을 받은 서버는 해당 컨텐츠를 클라이언트로 전송해준다. 전 세계의 모든 웹 브라우저, 서버, 애플리케이션은 HTTP 라는 프로토콜을 통해서 서로 대화한다. 인터넷 세상의 공용어인 셈이다. 클라이언트 - 서버로 이루어진 통신 구조를 클라이언트 서버 아키텍쳐, 2티어 아키텍쳐라고 부르며, 여기에 데이터를 저장할 수 있는 DB를 포함해 3티어 아키텍쳐라고 하기도 한다. 서버 - 서버는 무엇을 하느냐에 따라 종류가 달라진다. 파일 서버는 파일을 제공하는 앱 등 데이터베이스도 데이터 제공자로서 일하므로 일종의 서버라고 볼 수 있다. 서버통신과 API 클라이언트와 서버 간..
SPA 란? 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA(Single-Page Application)이다. SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웬애플리케이션이나 웹 사이트를 말합니다. 정리하면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹 사이트를 SPA라고 한다. SPA의 단점 첫 화면의 로딩 시간이 길다는 단점이 있다. 첫 화면 로딩 시 읽어..
JSX 란? JSX(Java Script XML)는 Javascript가 확장된 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환시켜줘야 한다. 왜 JSX를 써야할까? - 한 눈에 볼 수 있는 기능과 디자인 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 할 수 있다. React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성 할 수 있다. JSX를 사용함으로써 코드를 이해하기 쉬워지며, Babel이 알아서 JSX 코드를 변환해 주니 가독성이 높고 작성하기 쉽다. 💡 JSX 규칙 1. 반드시 부모 요소 하나가 감싸는 형태여..
