본문 바로가기

코드스테이츠부트캠프

 (70)
Section3 Unit4 [React] 상태 관리 Section3 Unit4 [React] 상태 관리 📌 Chapter1. 상태 관리 • 상태란, UI에 동적으로 표현될 데이터 • 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태로 보통 컴포넌트 내에서만 영향을 끼친다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태로 input box, select box 등과 같이 입력값을 받는 경우가 이에 해당한다. • 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태로 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만약 사본이 있다면, 두 데이터는 서로 동기화 되어야 하는데 이는 문제를 어렵게 만든다. 따라서 한 곳에서만 상태를 저장하고 접근하는 것이 중요하다. → 전역..
Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Advanced Challenge) Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Advanced Challenge) ⭐️ 과제. React Custom Component 지난 Bare Minimum 구현에 이어 이번에는 Advanced 구현을 완료했다. Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) ⭐️ 과제. React Custom Component 🔥 학습목표 React, Styled-Component, Stor..
Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) ⭐️ 과제. React Custom Component 🔥 학습목표 React, Styled-Component, Storybook을 활용해 UI 컴포넌트 개발 • Styled Components를 활용해 다양한 기능의 커스텀 컴포넌트를 구현할 수 있다. • Storybook을 사용해 컴포넌트들을 관리할 수 있다. 🏷️ Bare Minimum Requirement: Modal, Toggle, Tab, Tag ✏️ 구현 과정 & 코드 → 몰랐거나 헷갈렸던 부분 위주로 ✨메모 1. Modal Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이..
Section3 Unit3 [React] Custom Component Section3 Unit3 [React] Custom Component 📌 Chapter1. Component Driven Development • Component Driven Development(CDD, 컴포넌트 주도 개발)는 컴포넌트부터 시작하여 마지막 화면에 이르기까지 상향적(bottom-up)으로 UI를 개발하는 과정으로, UI를 구축할 때 직면하게 되는 규모의 복잡성을 해결하는 데 도움을 준다. 6월 원티드 프리온보딩에서 들었던 상향식 컴포넌트 개발과 하향식 컴포넌트 개발. 이번달 강의가 우연히도 부트캠프 수업 내용과 맞아서 컴포넌트 주도 개발과 Storybook에 대한 강의였다. 현업에서 일하는 비교적 연차가 낮은(?) 개발자들의 눈높이에 맞춘 듯해서 아직은 어려운 내용이 많지만, 뭔가 ..
Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 스카이스캐너 클론하기 Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 스카이스캐너 클론하기 ⭐️ 과제. Figma 클론 피그마로 웹이나 앱의 디자인을 클론하고 프로토타입을 적용시키는 과제였다. 기본적인 요구 조건으로는 최소 Lo-Fi 수준의 프로토타입 구현이었으며 페이지 이동, 스크롤 이벤트, 최소 1개의 마스터 컴포넌트와 인스턴스를 포함한 프로토타입 제작이었다. 페어와 함께 복잡한 웹 말고 앱으로 하자고 했고, 앱 중에서도 심플한 디자인의 스카이스캐너를 선택했다 :) 컴포넌트를 만들거나 구성을 짜는 것 정도는 재미있었는데 디자인을 하나하나 구현하는 건 너무 노가다였다... 하지만 우린 해냈다.. 간단한 UI의 어플이라 페이지 3개도 거뜬히.. 😊✨👀🐱☀️ 피그마 과제 끝! 🌙 오늘의 회고 오늘도 페..
Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 컴포넌트 구현 Section3 Unit2 [사용자 친화 웹] UI/UX - Figma로 컴포넌트 구현 📌 Chapter6. Figma Figma 특징 실시간 협업 기능 (한 화면에서 여러 명의 사람이 동시에 작업할 수 있음) 다양한 환경 지원 (웹 브라우저 기반이기 때문에 프로그램 설치가 필요없고, 어떤 환경에서든 사용 가능) 자동 저장 및 버전 관리 (히스토리 기능이 있어 버전 관리에 유리) 다양한 무료 폰트 지원 오토 레이아웃 기능 (오토 레이아웃 기능을 사용하면 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고, 이 요소들의 크기가 변하더라도 부여한 규칙에 맞게 간격과 정렬 유지 가능) 프로토타이핑 (간단한 Lo-Fi 수준의 프로토타입부터 실제 화면과 거의 흡사한 Hi-Fi 수준의 프로토타입까지 제작 가능) ✏..
Section3 Unit2 [사용자 친화 웹] UI/UX Section3 Unit2 [사용자 친화 웹] UI/UX 📌 Chapter1. UI/UX 개념 • UI (User Interface, 사용자 인터페이스) • UX (User Experience, 사용자 경험) → 이전 섹션에서도 언급되었지만, 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다. 📌 Chapter2. UI 디자인 • UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기가 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM 과의 의사소통도 원활해져 협업 효율도 높아진다. → 모달, 토글, 탭, 드..
Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI ⭐️ 과제 1. JSON.stringify ✏️ 이번 과제는 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하는 과제였다. 재귀함수를 구현하는것에 어려움을 느껴서 그런지 이번 과제는 쉽지 않았다. 테스트에 그냥 통화하고 싶다면 const stringifyJSON = JSON.stringify; 이렇게 구현하면 된다. (너무나 손쉽게 해결~) 하지만 이 과제는 재귀를 공부하기 위한 것이니, 하나씩 구현해보자. ✨ 구현과정 & 코드 1. 처음에는 감이 잡히지 않아서 한참을 헤매고, 시작을 못하고 있었다... 😭 2. 배열과 객체를 제외하고는, 단순히 "" 이렇게 따옴표가 추가되..
반응형

티스토리툴바