전체 글

[ 1단계 ] K번째 수

🔴 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 🟠 제한 사항 array의 길이는 1 이상 100 이하입..

[ 1단계 ] 완주하지 못한 선수

🔴 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 🟠 제한 사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 🟡 입출력 예 participant completion return ["leo..

[ React ] styled-components

🔴 styled() : 스타일 확장 import styled from "styled-components"; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; function App() { return ( ); } export default App; 🟠 as : 같은 스타일 HTML 태그 변경 import styled from "styled-components"; const Btn = styled.button` color: white; background-color: tomato; ..

[ TS ] Classes and Interfaces

🔴 Classes ⚪ 타입스크립트의 기본적인 클래스 형태 class Player { constructor( private firstName: string, private lastName: string, public nickname: string ) {} } const ryong = new Player("ryong", "jeong", "Ryong"); ryong.nickname; ⚪ 자바스크립트와는 다르게 접근 지정자를 선언할 수 있다. ⚪ 생성자 파라미터에 있는 변수들을 자동으로 클래스의 this 변수에 할당한다. ⚪ 추상 클래스는 다른 클래스에서 상속받을 수만 있는 클래스이며, 새로운 인스턴스를 만들 수 없다. ⚪ 추상 메소드는 추상 클래스를 상속받는 클래스에서 구현해야 하는 메소드를 의미한다. // ..

[ TS ] Functions

🔴 Call Signatures // 함수를 작성할 때, argument의 타입을 지정하고, // return 값은 유추시키는 방식을 사용했으나 const add = (a: number, b: number) => a + b; // 미리 타입을 지정하면 type Add = (a: number, b: number) => number; // argument에 직접 타입을 적어주지 않아도 된다. const add: Add = (a, b) => a + b; 🟠 Overloading ⚪ 오버로딩은 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생한다. type Add = { (a: number, b: number) : number (a: number, b: string) : numbe..

[ React ] Props

⚪ 컴포넌트에 추가한 argument들은 컴포넌트에 Object로 전달되며, 이를 Destructing 하여 원하는 속성만 적을 수 있다. ⚪ 부모 컴포넌트의 어떠한 state 변화가 생기면 자식 컴포넌트들은 모두 리렌더링된다. ⚪ 따라서, props가 변하지 않는 컴포넌트까지 모두 리렌더링되며, 이는 성능 저하의 원인이 될 수 있다. ⚪ 이를 방지하기 위하여 memo를 사용하여 리렌더링 할 필요가 없는 컴포넌트들을 최적화시킬 수 있다. ⚪ 리액트 js는 컴포넌트 타입에 대해 오류를 출력하지 않는다. 따라서, prop-types 라이브러리를 통해서 타입과 필요성을 명시할 수 있다. const Btn = ({ text, fontSize }) => { return ( {text} ); } const Memo..

[ CSS ] Grid

🔴 Why Grid? ⚪ 격자 무늬로 동일한 상하좌우 간격을 두고 아이템을 배치하고 싶을 때, flex를 사용하면 개별적으로 설정해줘야 하는 요소들이 너무 많으며, 아이템을 추가할 때마다 css를 추가해줘야 하는 번거로움이 있다. 🟠 CSS Grid Basic Concepts .father { display: grid; grid-template-columns: 250px 250px 250px; grid-template-rows: 100px 50px 300px; column-gap: 5px; row-gap: 10px; } 🟡 Grid Template Areas .grid { display: grid; grid-template-columns: auto 200px; grid-template-rows: 100p..

[ CSS ] Flexbox

🔴 Wrapper 속성 display: flex; flex-direction: row | column | row-reverse | column-reverse; justify-content: flex-start; align-items: flex-start; /* 한 줄인 아이템의 수직 정렬 */ align-content: flex-start; /* 두 줄 이상인 아이템의 수직 정렬 */ /* flex는 기본적으로 아이템을 한 줄에 배치시킨다. */ /* 아이템들이 한 줄에 들어가기 어려우면 크기를 변경시킨다. */ flex-wrap: nowrap | wrap; /* wrap 속성 적용 시, 아이템의 크기를 유지한다. */ 🟠 Child 속성 /* 수직 방향으로 하나의 child만 가운데 정렬 */ alig..

[ TS ] What is TypeScript?

🔴 Why not JavaScript // 이상해!! [1, 2, 3, 4] + false // '1, 2, 3, 4false' // 이상해!! function divide(a, b) { return a / b; } divide("xxxxx"); // NaN => 왜 Error를 출력하지 않지? 🟠 Implicit Types vs Explicit Types let a = "hello" let b : boolean = false // But, TypeScript가 추론하도록 하는게 낫다. 🟡 Types of TS part One type Name = string; type Age = number; type Player = { name: Name, age?: Age // 선택적 타입 } const playe..