Til

11주 4일차 - Cmarket Redux 2

11주 4일차 - Cmarket Redux 2 1. 배운 것 배열 메소드 콜백함수 축약 Array.prototype.fill() 2. 내용 정리 2.1 Cmarket Redux 과제 복습 reducer 함수는 항상 새로운 state를 반환해야 한다. 따라서 초기값이 원시값이면 그냥 복사본을 만들어서 복사본으로 값의 변경을 다루면 되고 객체일 경우 깊은복사한 복사본으로 값의 변경을 다룬다. 타입 값 으로 쓸 문자열을 변수화 해두는게 재사용성이 좋다. 할당을 안하고 useDispatch로는 사용 불가. 상태도 useState() 해줘야 쓸 수 있는 것처럼 디스패치도 가져와야 한다. Action src > actions > index.js : action 객체를 생성하는 함수를 정의한다. 프로퍼티의 key와 ..

11주 3일차 - Cmarket Redux 1

11주 3일차 - Cmarket Redux 1 1. 배운 것 2. 내용 정리 Redux 사용시 리액트 앱 파일 구조 src > store > index.js src 폴더의 하위 폴더로 리덕스 관련 코드 파일을 저장할 store 폴더를 생성하고 index.js 파일을 생성하여 리덕스 관련 로직들을 관리한다. index.js에서 store 생성, reducer 함수 정의. (참고 강의와 다르게 과제 코드는 reducer와 store 별도 폴더로 분리됨. 미들웨어 사용 때문인지?) Store 제공하기 src > index.js render함수 안에서 App 컴포넌트를 Provider 컴포넌트로 감싼다. (전역 상태를 관리하기 위해 App 컴포넌트를 감싼다.) 이 때 Provider 컴포넌트의 속성으로 반드시 ..

11주 1일차 - react custom components 리팩토링, BFS

11주 1일차 - react custom components 리팩토링, BFS 1. 배운 것 css - transition onFocus, onBlur 데일리코딩 8번 - BFS 트리 순회 종합 퀴즈 7번 - styled component 재사용 2. 내용 정리 onFucus: 포커싱 된 경우 이벤트 설정 onBlur: 포커싱 해제된 경우 이벤트 설정 데일리코딩 8번 - BFS 트리 순회 let bfs = function (node) { let queue = [node]; // root(시작 노드)를 배열에 넣은 상태로 큐를 선언, 초기화. const visitedNodeValues = []; // 방문한 노드의 정보를 담을 배열 선언. while (queue.length > 0) { // 큐에 요소가 ..

10주차 일요일 - Flex 복습, 과제 리팩토링

10주차 일요일 - Flex 복습, 과제 리팩토링 1. 배운 것 flex 복습 linear-gradient 과제 css 구현 2. 내용 정리 CSS/ Flex 부모 안의 자식 요소들을 flex 레이아웃으로 정렬하려면 부모에게 display: flex 사용. 이 때 부모 요소의 높이(height)가 지정되어 있는 경우 기본값은 자식들의 높이도 부모의 높이만큼을 가진다. → align-items의 기본값. CSS/ Flex - Axis, flex-direction Flex 정렬 시 2가지의 축을 기준으로 위치를 정렬한다. main axis (메인축) : 아이템이 배치된 방향의 축. cross axis (교차축) : 메인축과 수직을 이루는 축. Flex 속성은 Container에 적용하는 Container 속..

10주차 토요일 - 과제 리팩토링, new Map();

10주차 토요일 - 과제 리팩토링, new Map(); 1. 배운 것 과제 베어미니멈 파트 복습 css flex 복습 2. 내용 정리 과제 복습 - Modal Component 동작이 거꾸로 작동. 모달창 외부 클릭시 아무 변화 없고 모달창을 클릭 시 모달창이 닫힘. stopPropagation 이해도 부족. css 문제: 모달창 요소가 모달창 배경 좌상단 끝에서 안움직임. 과제 복습 - Toggle Component // 조건부 스타일링: 조건에 따라 클래스 추가 className={`toggle-container ${isOn ? 'toggle--checked' : null}`} CSS: 토글버튼 좌우로 움직이게 + 그라디언트 구현해야 함. 과제 복습 - Tab Component CSS: 탭 메뉴와 선..

10주 5일차 - react custom component 과제

10주 5일차 - react custom component 과제 1. 배운 것 flex 사용 시 요소 중앙정렬 시키는 방법 css- position 속성 복습 css 선택자 - 자식 결합자 styled-components의 attrs 메서드 event.key 이벤트 버블링 e.target.value false 조건 2. 내용 정리 flex 사용 시 요소 중앙정렬 시키는 방법 container { display: flex; justify-content: center; align-items: center; height: 100%; position: relative; } CSS - position 속성 복습 요소의 위치를 지정하기 위한 속성으로 5가지(static, relative, absolute, fixe..

10주 4일차 - [React] Custom Component

10주 4일차 - [React] Custom Component 1. 배운 것 styled-component 기초, props 사용법 storybook 사용법 useRef 사용법, 필요한 상황 css - transition 2. 내용 정리 1. Styled Components 기본 사용법 jsx 문법을 사용하지 않으므로 import React from ‘react’; 는 필요 없음. 개발자 도구로 styled-components로 생성한 컴포넌트의 클래스명을 보면 랜덤한 문자들의 나열로 된 걸 볼 수 있다. 따라서 클래스명이 겹칠 일이 없으므로 전역 css지만 스타일이 중첩될 일이 없다. 가상 클래스는 &:hover {css 스타일링 작성} 이런 식으로 작성함. 중첩되는 요소도 & 요소 {css 스타일링}..

10주 3일차 - 피그마 2/ 알고리즘

10주 3일차 - 피그마 2/ 알고리즘 1. 배운 것 데일리 코딩 5번 풀이 - DP 메모이제이션 복습 데일리 코딩 4번 리팩토링 - new Set 사용 new Set(); new Map(); 2. 내용 정리 데일리 코딩 5번 - DP 메모이제이션 let tiling = function (n, memo = [undefined, 1, 2]) { // dp - memoization 사용 // 처음 1개의 타일은 1가지 경우, 2개의 타일은 2가지 경우 // 그 외 n개의 타일의 경우의 수 = n-1개의 경우의 수 + n - 2 개의 경우의 수. // 즉 피보나치 수열 공식과 동일함. // 풀이 // 1. 하위 문제의 답을 저장할 memo 배열 선언 -> 매개변수에서 바로 // 2. if n === 1 ret..

10주 2일차 - 피그마

10주 2일차 - 피그마 1. 배운 것 피그마로 프로토타입 제작 2. 내용 정리 overflow된 항목은 프레임으로 묶여 있어야 prototype 탭에서 효과 적용 가능. → 우클릭 해서 frame selection. 프레임 크기 조정 시 내부 요소가 fixed 되어 있어야 내부 요소가 움직이지 않음. → 좌측의 layers 탭에서 해당 프레임 안의 요소들 선택 후 우측 design 탭에서 constraints 항목에서 고정 방향 지정. 예제는 좌측, 상단 2개 방향 지정. 캐러셀 카드 아이템 스크롤 효과 개선을 위해: 사각형 도형을 그린다. 도형을 해당 프레임 안에 넣고 우클릭: send to back 하여 한 레이어 내린다. 도형의 배경색을 Design 탭에서 기존 화면의 색과 일치하게 흰색으로 바꿔..

10주 1일차 - 휴가 사용(알고리즘 보충학습)

10주 1일차 - 휴가 사용(알고리즘 보충학습) 1. 배운 것 해시 테이블 - 별도 문서로 정리. https://github.com/ryan-kim-dev/data-structures-and-algorithms/blob/master/dataStructures/hash.md 버블 정렬 백준 1920번 프로그래머스 완주하지 못한 선수 2. 내용 정리 데일리 코딩 3번 - 버블 정렬 // 외부 for문: 배열 전체 순회 // 내부 for문: 요소 2개끼리 비교 & 정렬 완료된 뒷부분 반복에서 제외시키기 위해 -1 -i // noSwap: 정렬이 일어나지 않으면 break시켜 불필요한 연산 스킵 const bubbleSort = function (arr) { let noSwap; for (let i = 0; i..