전체 글

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..

9주 5일차 - JSON

9주 5일차 - JSON 1. 배운 것 JSON ↔ 객체 2. 내용 정리 코플릿 14번 복습 재귀 호출의 결과가 true일 경우에만 리턴을 주어야 이차원 배열이 있는 일차원 배열의 다음 요소로 넘어간다. 코플릿 15번 복습 for문 안에서 이차원 배열과 이차원 배열이 아닌 경우를 front, mid, end 세 변수에 나눠서 담고 1차원 배열로 합친다. 과정도 [1, 2, [3, 4], 5] 인 경우 [1, 2] [3, 4] [5] 로 만들고 […[1, 2], …[3, 4], …[5]] concat 또는 spread로 하나의 배열로 합친다. [1, 2, 3, 4, 5] function flattenArr(arr) { for (let i = 0; i < arr.length; i++) { if (Array...

9주 4일차 - 재귀, dp

9주 4일차 - 재귀, dp 1. 배운 것 데일리코딩 1번 내장함수 sort 사용하여 오름차순/내림차순 정렬하기 Math.max() 코플릿 재귀 재귀로 배열 관련 문제에서 head, tail 활용 arr.slice(1) : 맨 앞 요소 하나 빠진 나머지를 리턴. Object.keys(obj).length === 0 이면 빈 객체. dp - 별도 포스팅으로 정리. 2. 내용 정리 데일리코딩 1번 브루트 포스 방법으로 푸신 분들도 있었다. 아직 안배워서 난 모름 오름차순으로 기존 배열 정렬. 3개의 요소를 곱해야 하므로 오름차순 정렬 시 왼쪽 끝에서부터는 음수 쪽 최댓값, 오른쪽 끝에서 역순으로는 양수 쪽 최댓값 이므로 양수 쪽 최댓값은 오른쪽 끝부터 3개를 곱하고 음수 쪽 최댓값은 왼쪽끝부터 2개 곱하고 ..

DP(동적 프로그래밍) 자바스크립트 구현/ 작성중

동적 프로그래밍 Colt Steele 저자의 유데미 Javascript 자료구조 & 알고리즘 강의를 바탕으로 공부 내용을 정리합니다. 1. 정의 동적 프로그래밍은 복잡한 문제를 더 간단한 하위 문제들의 모음으로 분해하여 각각의 하위 문제들을 풀고 그 답을 저장하는 방식으로 문제를 푸는 방법이다. 모든 문제들에 적용 가능한 방식은 아니지만 동적 프로그래밍을 적용할 수 있는 문제의 경우엔 코드의 성능에서 큰 이점을 가진다. DP 요구조건 1 - 중첩되는 하위 문제가 있어야 한다. 대표 유형: 피보나치 수열 문제 문제 내에서 어떤 방식으로든 반복되는 하위 문제들이 있어야 한다. 즉, 하나의 커다란 문제를 더 작은 문제들로 나눌수 있으며 그 나뉜 작은 문제들을 재사용 가능해야 한다. 피보나치 수열은 모든 숫자가..