타입스크립트는 어떤 기준으로 타입을 정의하는가? 타입 스크립트는 어떤 기준으로 타입 간의 관계를 정의하는가? 타입 스크립트는 어떤 기준으로 타입의 오류를 검사하는가? 타입 스크립트 문법만 정리된 Cheat Sheets도 있지만 원리를 이해해야 정확히 사용할 수 있다. 타입은 집합이다 동일한 속성과 특징을 갖는 여러 개의 값들을 모아둔 집합 let num: 20 = 20; 의 20은 넘버 리터럴 타입이지만 동시에 넘버 타입에 속하기도 한다. 이와 같이 타입들끼리 어떤 계층을 갖게 된다. 타입 간의 호환성은 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것 넘버 리터럴 타입의 값인 20을 넘버 타입의 값으로 취급해도 되지만, 반대는 불가능하다. (ex. 직사각형과 정사각형의 관계) let num1:..
타입스크립트의 기본 타입 타입은 부모 자식 관계를 이루며 계층을 형성하게 된다. 원시 타입과 리터럴 타입 단 하나의 값만 저장할 수 있다. :number와 같이 타입을 정하는 부분을 타입 주석(type annotation)이라고 한다. // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = 'hi'; let str2: string = 'hi'; let str3: s..
개발자 도구를 켜서 보면 Link는 a 태그로 보여진다. styled.a`` 로 스타일링을 적용하려 하면 적용이 안된다. 당연함 Link는 react-router-dom의 React 컴포넌트다. 그래서 개발자 도구에서는 a 태그로 보이지만 일반적인 HTML a 태그와 다르다. 따라서 styled.a``가 아니라 styled(Link) 로 스타일링을 적용해야 한다. const StyledLink = styled(Link)` display: block; width: 100%; text-align: right; text-decoration: none; color: var(--main-color); padding-top: 10px; font-size: 14px; `; 참고 공식 문서: https://styled..
📌 문제 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요. 📌 제한사항 phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다. 📌 입출력 예 📌..
📌 문제 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가 ..
📌 문제 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지 지표로 성격 유형 점수를 판단합니다. 예를 들어, 어떤 한 질문에서 4번 지표로 아래 표처럼 점수를 매길 수 있습니다. 이때 검사자가 질문에서 약간 동의 선택지를 선택할 경우 어피치형(A)..
홍플릭스가 단순 과제 개념이라 선택사항이었다면 그 다음 프로젝트인 Web IDE는 필수였다. 그러니까 원래 팀끼리 하는 과제 1번이 SNS 클론, 2번이 넷플릭스 클론, 3번이 쇼핑몰, 4번이 Web IDE 였던 것 같은데, 커리큘럼이 바뀌면서 다음 코스였던 쇼핑몰은 빠지게 되고 (경쟁력 없는 포폴이라고 생각하신듯?) 4번이 필수 과제가 되었다. 우리 팀은 Web IDE에는 그다지 니즈가 없었어서... 내키지 않는 프로젝트라고 생각했다. 그런데 반드시 붙여야 하는 과제가 명확해서 나름대로 성과가 있었다. (비밀번호 재설정이나 채팅 기능이 필수였는데 이전에 프로필 수정 부분을 구현하고 싶었어서 잘됐다 싶었다.) 채팅이나 Web IDE 자체는 어떻게 구현해야 할지; 도무지 감이 잡히지 않아 난관이긴 했다. ..
콘텐츠 모달 지금 바로 보러 가기 클릭 시 로그인 & 구독 여부를 확인해 회차 정보 화면으로 이동 작품 DB에 등록된 작품 중 회차 정보도 등록된 작품이라면 에피소드 별 썸네일 노출, 클릭 시 영상 재생 작품 DB에 등록된 작품 중 회차 정보가 등록되지 않은 작품이라면 얼럿과 함께 뒤로 가기 작품 DB에 등록된 작품 중 회차 정보도 등록된 작품이라면 에피소드 별 썸네일 노출, 클릭 시 영상 재생 콘텐츠 모달은 어떤 콘텐츠를 눌러도 나와야 한다. 이걸 util로 빼거나 전역으로 관리했어야 했는데 그렇게 못 했다. 아무튼 모달에는 백 단과 미리 이야기해서 만들어 놓은 영화id, 썸네일 이미지, 타이틀, 장르, 생성일, 줄거리가 들어간다. 이 정보들은 어드민 페이지에서 미리 등록을 해놓은 것으로 외부 API를..
카테고리 화면 카테고리에는 로맨스, 판타지/SF, 일상 장르 3가지가 있다. 여기 있는 작품들은 다 외부 API가 아니라 내가 DB로 등록해둔 것을 가져왔다. 약간 노가다긴 했는데 아는 작품을 슬쩍슬쩍 끼워넣으면서 재미있었다. 🤤 이래서 관심 있는 분야로 개발하는 게 재밌다는 거군... 작품 DB에서 특정 장르 작품만 필터링 해서 캐러셀로 보여주기 이전 게시물과 똑같이 Slick 라이브러리를 사용했기 때문에 그냥 filter로 장르만 걸러주면 된다. 슬라이드, 슬라이드 안에 들어갈 이미지들, 양쪽 화살표, 슬라이드의 세팅을 만들어준다. 특히 슬라이드 안에 들어갈 이미지는 useState로 빈 배열을 만든 후 각 장르별로 번호를 붙여 넣어줬다. 아래와 같이 모든 영화를 요청해 데이터를 받아오고, 장르가 로..
📌 문제 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수를 return 하..
