sy의 코딩 개발일지

function power(base, exponent) { if (exponent === 0) return 1; const half = parseInt(exponent / 2); const temp = power(base, half); const result = (temp * temp) % 94906249; if (exponent % 2 === 1) return (base * result) % 94906249; else return result; } power(2,9) 함수를 호출하면 다음과 같이 작동한다. power(2, 9) 함수가 호출되면, exponent 값인 9가 0이 아니므로 2단계로 이동한다. exponent를 2로 나눈 몫인 4이 half 변수에 저장된다. 그리고 power(2, 4) 함수..

실습 codestates codestates codestates codestates

action -> dispatch -> reducers -> store 순으로 간다. actions폴더 .index.js export const removeFromCart = (itemId) => { return { //TODO type: REMOVE_FROM_CART, payload: { itemId, }, } } //removeFromCart 함수는 itemId를 인자로 받아 액션 객체를 반환 //반환된 액션 객체는 type 속성이 REMOVE_FROM_CART로 설정 //payload 속성은 { itemId }로 설정 export const setQuantity = (itemId, quantity) => { return { //TODO type: SET_QUANTITY, payload: { item..

Redux 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 상태는 동적으로 표현되는 데이터이다. Side Effect 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청, API 호출 Presentation 컴포넌트 어떤 데이터가 들어오는지 상관하지 않고, 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중 상태를 구분 로컬 상태, 전역 상태 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태입 ex)input box, select box ..

import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; //드롭다운 메뉴에서 선택 가능한 검색어 목록 /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1rem 1rem 0 0'; const inactiveBorderRadius = '1rem 1r..

Modal.js import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display:flex; align-items:center; justify-content:center; //가운데 정렬 하지만 높이가 가운데가 되지 않았다. 이유는 부모가 높이가 없었다. height:950px; //그래서 부모에게 높이를 주었다. `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. d..

https://www.figma.com/file/2OY16LH29KTqrS6T7EAXZJ/Untitled?node-id=0%3A1&t=MuijSr7mcdZMpnsL-1 Figma Created with Figma www.figma.com 처음으로 인스타를 클론을 해봤다. 아쉬운점은 알아보기 쉽지 않게 카테고리를 막 만든것 같다. 알아보기 쉽게 이름을 정했다면 더 만들기 수월했을 것같다. 다음에 시간을 내서 과제1에서 만든 것을 응용하여 기능을 더 추가시켜서 만들어봐야겠다.

https://www.figma.com/file/HQmmEyQA9YNNzhSVRFZmFn/Untitled?node-id=0%3A1&t=FyzqhdX6xHX5F5kJ-1 Figma Created with Figma www.figma.com Bare Minimum Requirements GNB (Global Navigation Bar) Modal Toggle Tab Accordion Advanced Challenge Drop Down Auto Complete 을 만들어봤다. 처음에는 복잡하게 만들었다. 계속 만들다보니 모르는 부분이 나왔는데 유튜브를 참고해가면서 만들어보니 간단하게 컴포넌트를 구현하여 복붙하여 클릭에 따라 움직임을 만들었다. 이런식으로 만드니 보기도 쉽고 이해하기도 수월했다. Auto Com..