개발하고 싶은 초심자

✷ OOP 관련 링크(1) ✷ OOP 관련 링크(2) 1. How to create Classes in Typescript class Profile { constructor ( private firstName: string, private lastName: string, // private 필드 public age: number // public 필드 ) {} } // private keyword는 오직 TS가 보호해주기 위해 사용하는 것임. const kimcoding = new Profile("coding", "kim", 15); // 동작하지 않음 // Property 'firstName' is private and only accessible within class 'Profile'. // 'fi..

1. call signatures : 파라미터와 와 반환(return)값의 타입을 모두 type으로 미리 선언하는 것. 이전에 함수를 작성할 때는 아래와 같은 방식으로 타입을 항상 작성했었다. function multiply(a, b) { return a * b; // arguments인 a와 b의 타입을 체크해주지 않았기 때문에 코드가 동작하지 않음 } function multiply(a: number, b: number) { // function multiply(a: number, b: number): number return a * b; } const multiply = (a: number, b: number) => a * b; 하지만 이번에는 타입을 작성해주지 않고, 아래 코드와 같이 특정 함수에..

1. unknown : 변수의 타입을 미리 알지 못할 때 사용할 때마다 변수타입 지정을 요구한다. unknown타입은 모든 값을 나타낸다. let a: unknown; if(typeof a === 'number') { // a의 타입이 number임을 먼저 체크 let b = a + 1; // 코드 동작 }; if(typeof a === 'string') { // a의 타입이 string임을 먼저 체크 let b = a.toUpperCase(); // 코드 동작 }; ✅ any vs unknown ① any 모든 타입을 할당받을 수 있는 타입. 사용자로부터 받은 데이터 혹은 써드 파티 라이브러리 같은 동적인 컨텐츠로 오는 불특정한 값을 컴파일 검사를 하지 않고 사용하고자 할때 사용하며, 컴파일 중 타입검..

1. readonly 속성 타입에 추가하기 ✷ readonly : 말 그대로 요소들을 읽기 전용으로 만들 수 있는 속성. type Profile = { readonly name: string, age?: number } const profileList = (name: string) : Profile => ({name}); const kimcoding = profileList('kimcoding'); kimcoding.name = 'kim'; // 작동하지 않음 상기 코드처럼 name이라는 요소에 readonly 속성이 붙게 되면, name을 수정할 때 TS가 막아준다. const numbers: readonly numbers[] = [1, 2, 3, 4]; numbers.push(5); // 작동하지 않..

1. TS의 타입들 앞의 글에 작성한 대로, number, string, boolean 등 기본적인 타입들도 있지만 TS에서 쓰는 타입들에 대해 정리한다. // 기본 타입들 let a : number = 1; let b : string = '1'; let c : boolean = true; // number, string, boolean으로 된 array let a : number[] = [1]; let b : string[] = ['1']; let c : boolean[] = [true]; 2. 변수에 타입을 할당하는 방법 ① 선택적 변수(optional parameter) 지정하기 const profile = { name: 'kimcoding' } 상기 예시에서, profile 안에 name은 모두 ..

Link의 밑줄을 없애는 방법까지 알아냈는데, 똑같은 방법으로 NavLink를 넣었을 때는 제대로 동작하지 않았다. NavLink는 Link와 다르게 isActive라는 속성이 있어 삼항연산자를 활용하여 스타일을 지정해 줄 수 있는데, NavLink를 사용했을 때 밑줄이 나오지 않게 하면서 클릭했을 때 글씨 색깔도 바꿀 수 있는 방법이 없을까? 하다가 &(ampersand)를 활용하여 해결했다. import { NavLink } from "react-router-dom"; import styled from "styled-components"; const AllNavLink = styled(NavLink)` color: black; &:link { text-decoration: none; } &.activ..

리액트를 사용할 때, Link 혹은 NavLink를 활용하여 내가 이동하고자 하는 url을 링크할 수 있다. 이때, 밑줄이 그어져 있는 것이 기본이라 없애려고 많은 사람들이 text-decoration: none;을 활용하는데, 이상하게 내가 똑같이 하면 안 된다. 똑같은 상황이 생겼을 때 구글링이 아닌 내 블로그에서 찾아볼 수 있도록, 그리고 혹여 누군가가 구글링을 하다가 흘러들어오게 되었을 때 도움이 되길 바라면서 정리해두기로 했다. 우선, text-decoration 속성은 말 그대로 텍스트를 꾸며주는 속성이다. 기본값이 none이며, 다른 상황에서도 필요에 맞게 사용할 수 있다. 간단하게 text-decoration이 뭔지 설명했으니, 본론으로 들어가서 내가 하는 none 속성은 왜 동작하지 않을..

1. Typescript(TS) : 작성한 코드를 Javascript(JS)로 변환해 주는 strongly typed(강타입) programming language. → Node.js는 TS와 JS 모두 이해하지만, 브라우저는 TS가 아닌 JS를 이해한다. 2. TS를 사용하는 이유 : JS는 어떠한 코드를 실행할 때 런타임 에러 현상 해결을 도와주지 않지만, TS는 코드를 실행하기 전에 이러한 런타임 에러를 잡아줄 수 있음. ✷ 런타임 에러: 코드를 실행할 때 발생하는 에러 → 컴파일은 작성한 TS 코드를 JS로 바꿔준다. 하지만 TS 코드에 에러가 있으면 그 코드는 JS로 컴파일되지 않는다. ⇒ (이 과정은 유저가 코드를 실행하는 런타임에 발생하는 것이 아니며, 일반 유저들은 JS 코드만 사용한다) ..