Jieunny의 블로그

📣 자주 사용하는 UI를 Styled Component로 구현해보자 1️⃣ Modal ✔️ 조건 ✓ Modal 창을 띄워 줄 Open Modal 버튼이 있어야 합니다. (24 ms) ✓ 버튼을 클릭하면 Modal 컴포넌트 내부에 Modal배경, Modal창 div 엘리먼트가 렌더링되어야 합니다. (162 ms) ✓ Modal창이 렌더링 된 상태에서 버튼을 다시 클릭하면 Modal배경, Modal창 div 엘리먼트가 사라집니다. (84 ms) ✓ Modal 창 밖을 클릭하면, Modal배경, Modal창 div 엘리먼트가 사라집니다. (46 ms) ✔️ 구현 코드 import { useState, useRef, useEffect } from 'react'; import styled from 'styled-..

📌 문제 효진이는 멀리 뛰기를 연습하고 있습니다. 효진이는 한번에 1칸, 또는 2칸을 뛸 수 있습니다. 칸이 총 4개 있을 때, 효진이는 (1칸, 1칸, 1칸, 1칸) (1칸, 2칸, 1칸) (1칸, 1칸, 2칸) (2칸, 1칸, 1칸) (2칸, 2칸) 의 5가지 방법으로 맨 끝 칸에 도달할 수 있습니다. 멀리뛰기에 사용될 칸의 수 n이 주어질 때, 효진이가 끝에 도달하는 방법이 몇 가지인지 알아내, 여기에 1234567를 나눈 나머지를 리턴하는 함수, solution을 완성하세요. 예를 들어 4가 입력된다면, 5를 return하면 됩니다. 제한 사항 n은 1 이상, 2000 이하인 정수입니다. 💡 아이디어 n이 1일 때부터 하나하나 구해보니 1, 2 ,3, 5, 8, 13 이어서 피보나치 수열이라는 것..

📌 문제 OO 연구소는 한 번에 K 칸을 앞으로 점프하거나, (현재까지 온 거리) x 2 에 해당하는 위치로 순간이동을 할 수 있는 특수한 기능을 가진 아이언 슈트를 개발하여 판매하고 있습니다. 이 아이언 슈트는 건전지로 작동되는데, 순간이동을 하면 건전지 사용량이 줄지 않지만, 앞으로 K 칸을 점프하면 K 만큼의 건전지 사용량이 듭니다. 그러므로 아이언 슈트를 착용하고 이동할 때는 순간 이동을 하는 것이 더 효율적입니다. 아이언 슈트 구매자는 아이언 슈트를 착용하고 거리가 N 만큼 떨어져 있는 장소로 가려고 합니다. 단, 건전지 사용량을 줄이기 위해 점프로 이동하는 것은 최소로 하려고 합니다. 아이언 슈트 구매자가 이동하려는 거리 N이 주어졌을 때, 사용해야 하는 건전지 사용량의 최솟값을 return하..

📣 강의 내용 정리 𝟭. 인터섹션 타입 (AND, OR이 아님!) ✔️ '&' : 두 가지 타입을 결합하는 방법(여러 개의 타입 정의를 하나로 합치기) type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; // 인터섹션 타입 const el: ElevatedEmployee = { name: 'Max', privileges: ['create-server'], startDate: new Date() } ➰ 인터페이스 상속과 관련이 있다. ➰ 위 코드에서 type을 interface로 바꾸고 Eleva..

📣 강의 내용 정리 𝟭. 클래스란 무엇인가 ✔️ 객체(클래스 내의 인스턴스) : 코드로 작업을 수행하면서 사용할 수 있는 구체적인 요소들 ➰ 데이터를 저장하고 메서드를 실행하기 위해 메서드를 저장하는 데 사용하는 데이터 구조 ✔️ 클래스 : 객체의 청사진 ➰ 클래스를 사용하여 객체의 형태, 포함해야 하는 데이터, 메소드를 정의할 수 있다. ➰ 동일한 구조, 동일한 기능을 하는 여러 객체를 빠르게 복사할 수 있다. class Department { name: string; constructor(n: string) {// 생성자 메서드 this.name = n; } } const accounting = new Department('Accounting'); // Department { name: "Accoun..

📣 CDD ✔️ Component-Driven Development(CDD) ➰ 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 ➰ 재사용할 수 있는 컴포넌트를 개발할 수 있다. 📣 CSS in JS ➰ 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었다. ➰ 이를 해결하기 위해 CSS 전처리기가 등장헀다. ✔️ CSS 전처리기 : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 ➰ CSS 전처리기 자체만으로는 웹 서버가 인지하기 못하기 때문에 각 전처리기에 맞는 컴파일러를 사용해야 하고, 컴파일을 하게 되면 실제 우리가 사용하는 CSS 문서로 변환이 된다. ✔️ SASS(Syntactically Awesome Style Sheets) ➰..