본문 바로가기

프로그래밍446

[React] Cmarket Redux 과제 아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지로 간단하게 구성 Store의 initial state에는 전체 아이템 목록(items), 장바구니 목록(cartItems)으로 구성 각 ItemListContainer, ShoppingCart 페이지 컴포넌트 및 components 폴더의 여러 컴포넌트들에서 Store(state)에 접근 학습목표 Redux의 주요 개념인 Action, Dispatch, Reducer, Store를 작성하고 연결하여 사용할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 Store를 업데이트할 수 있다. 코드 index.js // action types export .. 2022. 7. 6.
Redux 정의 리액트 없이도 사용할 수 있는 상태 관리 라이브러리 Redux는 컴포넌트와 상태를 분리하는 패턴 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 단순한 함수 컴포넌트로 만들 수 있게 함 순서 상태 관리 Action → Dispatch → Reducer → Store 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면, React는 화면을 다시 렌더링 //Action // payload가 .. 2022. 7. 6.
React Custom Component modal.js Modal 컴포넌트는 아래와 같은 state가 존재합니다. 필요에 따라서 state를 더 만들 수도 있습니다. isOpen state는 모달 창의 열고 닫힘 여부를 확인할 수 있습니다. ModalBtn 컴포넌트는 모달 창 제어를 위해 핸들러 함수 openModalHandler를 작성합니다. openModalHandler 함수는 ModalBtn 클릭 시 발생되는 change 이벤트 핸들러입니다. 클릭할 때마다 상태가 Boolean 값으로 변경됩니다. ModalView 컴포넌트를 작성하고 isOpen 상태가 true 일 경우에만 렌더링합니다. ModalBackdrop 컴포넌트를 작성하고 isOpen 상태가 true 일 경우에만 렌더링합니다. import { useState } from 're.. 2022. 7. 4.
[React] Custom Component Component Driven Development(CDD) - 이전에 요청한 작업(예: 버튼)을 똑같이 사용할 때 사용 - 재사용할 수 있는 UI 컴포넌트를 위해 개발 - 부품 단위로 UI 컴포넌트를 만들어가는 개발을 진행 CSS-in-JS - 프로젝트의 규모나 복잡도가 커짐에 따라 CSS 를 작성하는 일관된 패턴의 필요성 대두 - 모바일, 태블릿을 비롯한 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 함 - 이러한 문제점을 해결하기 위해 'CSS 전처리기'라는 개념 등장 - CSS 전처리기(css preprocessor)란 css가 구조적으로 작성될 수 있게 도움을 주는 도구 - 예시로 sass는 syntactically awesome style sheets의 약자, css를 .. 2022. 7. 4.
[UI UX] UI와 UX의 차이점 UI UI(User interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호작용하는 시스템을 의미 화면상의 그래픽 요소 외에도 키보드, 마우스 등 물리적인 요소도 포함 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미 UI 디자인 패턴 모달(modal): 기존에 이용하던 화면 위에 오버레이 되는 창 토글(toggle): on/off를 설정할 떄 사용하는 스위치 버튼 탭(tab): 콘텐츠를 분리해서 보여줄 때 사용하는 디자인 패턴 태그(tag): 콘텐츠를 설명하는 키워드를 사용하여 라벨을 붙이는 역할 자동완성(Autocomplete): 사용자가 내용을 입력 .. 2022. 6. 27.
JSON.stringify 이전 콘텐츠에서 JSON.stringify는 객체를 JSON으로 변환하는 메서드인 것을 확인했습니다. 이 메서드를 함수의 형태로 직접 구현하기 위해서, 재귀를 사용하세요. 자바스크립트 객체와 JSON은 대표적인 트리 구조를 가지고 있으므로, 전형적인 재귀 탐색이 가능한 구조(객체의 값으로 객체를 포함하는 구조)이기 때문에 재귀 사용을 적극 권장합니다. 어떻게 풀어야 할지 방향이 잘 정해지지 않는다면, 연습문제에서 재귀 문제를 풀었던 방법을 다시 상기하세요. 부모와 자식의 구조가 같은 트리 구조를 어떤 조건에서 재귀 호출하면 좋을지 고민해 보세요. src/stringifyJSON.js에서 stringifyJSON 함수를 직접 구현해 보고 spec 테스트를 통과시키세요. function stringifyJS.. 2022. 6. 24.
재귀함수 알고리즘 문제 풀이(js) 1. 수(num)를 입력받아 1부터 num까지의 합을 리턴해야 합니다. function sumTo(num) { if (num size){ return findMatryoshka(matryoshka.matryoshka, size) } return false; } 14. 선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아 조건에 맞는 선물이 있는지 여부를 리턴해야 합니다. function unpackGiftbox(giftBox, wish) { // TODO: 여기에 코드를 작성합니다. if(giftBox.length === 0 || wish === ''){ return false; } for (let i = 0; i < giftBox.length; i++) { if (giftBox[i] === wish).. 2022. 6. 23.
JavaScript React HTTP/네트워크 기술면접 준비 JavaScript Promise.all()의 기능과 필요한 이유에 대해서 설명해주세요. Promise.all()메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환 여러 프로미스의 결과를 집계할 때 유용하게 사용 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 동일한 입력에 대해 항상 동일한 출력을 반환하는 함수 외부의 상태를 변경하거나 영향을 받지 않는 함수 외부 상태의 변화를 최소함으로 유지하고, 함수 실행 결과 예측을 용이하게 하여 버그 발생 가능성을 줄이는 것에 목적 React React의 state와 props에 대해서 설명해주세요. Props(Properties)는 부모 컴포넌트에서 자식 컴포.. 2022. 6. 22.
블록체인(Blockchain)과 디지털 경제 거래 내역을 암호화 하는 데 해시 함수(Hash function) 블록체인 개념 스마트 계약이 이더리움 플랫폼 안에서 동작할 수 있도록 만든 어플리케이션을 DApp(Decentralized application)이라 한다. 다양한 DApp을 이더리움 플랫폼 안에서 생성할 수 있다는 측면에서 부테린은 이더 리움을 스마트폰 안의 플랫폼, 즉 앱스토어나 구글플레이에 비유한 바 있다 블록체인의 유형별 특징 블록체인 기업 현황 2022. 6. 21.

티스토리툴바