기록의 힘

1) Readonly(읽기전용) 속성클래스, 인터페이스 등 오브젝트로 구현된  컴포넌트의 (property) 속성을  "읽기 전용"으로 선언하는 제어자.타입스크립트에서 **readonly**는 클래스의 속성이나 변수가 한 번 초기화되면 변경되지 않아야 함을 나타내는 접근 제한자이다.readonly로 생성된 속성은 생성과 초기화를 동시에 해줄 필요는 없다. 하지만 첫 번째 초기화 이후엔 값을 변경할 수 없다.type Name = string;type Age = number;type Student = { readonly name : Name, age? : Age }function jsArrowFunc = (name:string) : Student => ({name}) const jun = Student..

챌린지 1일차 ! 먼저, 명시적 타입 선언 방법들에 대해 알아보겠습니다.TS 변수 선언 방식1. 명시적 변수 선언const (ValueName) : (Type) = (Value)2. 암묵적 변수 선언const (ValueName) = (Value)  명시적 타입 선언 방법타입 시스템자바스크립트는 변수를 생성 하기만 하면 되고 그 변수가 어떤 타입인지 지정해주지 않아도 됨.하지만 자바나 C#, 타입스크립트는 모든 것의 타입을 지정해줘야한다.let a = "hello"a = "bye" // a가 string이라는 것을 알고 있음.a = 1 //error👉 자바스크립트는 가능let a = "hello"let b : boolean = "x" //errorlet b : boolean = false 👉 타입스..

타입스크립트를 사용하는 이유는?타입 안정성은 타입스크립트가 제공하는 가장 큰 장점이다.타입스크립트는 자바스크립트로 컴파일되는 언어이다.자바스크립트로 변환되기전에 타입을 체크하기 때문에 에러가 있으면 그 코드는 자바스크립트로 변환되지 않기 때문에 개발자가 실수하지 않도록 도와준다. 📍TS와 다른 자바스크립트 성격 자바스크립트는 타입 안정성이 없는 언어이다.자바스크립트는 이상한 코드를 작성해도 에러가 없음! 개발자에 대한 이해심이 많은 언어이다.[1,2,3,] + false=> '1,2,3false'function divide(a, b) { return a / b}=> undefineddivide("xxxxx")=> NaN 위 코드의 divide 함수는 두개의 아규먼트가 필요한데, 한개만 입력해도 NaN이..

최근 리액트 프로젝트를 진행하면서 많이 사용한 Promise객체와 async/await에 대해 알아보았다.비동기 프로그래밍(Asynchronous)CallbackPromisesasync & await  Callback 함수란?다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말합니다.  영어의 의미로 Call(호출) back(뒤에)의 개념으로 이해하면 쉽습니다.다시 말해 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해 놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수입니다.파라미터로 함수를 전달받아, 함수의 내부에서 실행됩니다. 콜백 함수(Callback Function) 사용 유형익명 함수 사용콜백 함수는 이름 없..

온라인 코딩 선생님 노마드코더와 함께 타입스크립트 시작! 진도에 맞춰 강의를 듣는건 조금 빡세니까 3일 전에 미리 진도 나가기~챌린지에 성공하지 못하더라고 끝까지 들어서 학습한 내용을 정리할 예정이다.

프로젝트를 끝내면 회고록을 작성하는 것이 지난 행동을 돌아보면서 개선할 점을 찾고 앞으로 프로젝트를 진행할 때 개선점을 보완해서 더 완성도를 높일 수 있기 때문에 회고록을 잘 작성해두는 것이 중요하다! 그래서 앞으로 있을 프로젝트 회고록을 작성하기 위해 어떻게 써야 하는지 작성 방법을 찾아보았다. 개인회고를 위한 Keep/ Problem/ Try]Keep: 프로젝트 완료 후에도 간직하고 싶은 잘했던 것 / 좋았던 것*ex) "~기술 적용을 했더니 효율적으로 ~를 할 수 있었다."Problem: 프로젝트 중 겪었던 어려움(기술, 소통, 협업, 에러 등 프로젝트 진행 관련된 그 어느것이든) / 프로젝트 완료 후에도 아쉬움으로 남는 것*ex) "~기능 적용 중 ~이슈가 발생하였다."Try: Problem 중 ..

프로젝트에서 다국어 지원 모바일 웹 사이트를 만들면서 번역 기능은 필수였다. 팀원이 맡아 구현했던 기능이지만 생각보다 간단하고 나중에 개인 프로젝트에도 적용해보고 싶어서 기록해보려고 한다.json 방식으로 직접 보관하는 방법을 사용. 단계 1: 패키지 설치$ npm i react-i18next i18next 단계 2: i18n.js설정import i18n from "i18next";import { initReactI18next } from "react-i18next";import translationEN from "locales/en/translation.json";import translationKO from "locales/ko/translation.json";import translationJP f..

주소 경로를 구분하기 위해 사용한 endswith메서드에 대해 정리해본다. const cleanedPathname = pathname.endsWith("/") ? pathname.slice(0, -1) : pathname; 1. endsWith()문자열.endsWith() str.endsWith(searchString[, length])String 값의 endsWith() 메서드는 문자열이 이 문자열의 문자로 끝나는지 여부를 결정하여 적절하게 true 또는 false를 반환합니다.문자열 인스턴스의 끝 부분과 지정한 문자열이 일치하는지를 확인합니다.  예제)  endsWith() 사용하기const str = "To be, or not to be, that is the question.";console...

이번 프로젝트에서 경로 주소별로 헤더에 메뉴 이름을 다르게 주기 위해 사용했다. Exec 함수RegExp.prototype.exec() 메서드란?인자로 받은 문자열 (str) 에서 match 를 찾아내고 result array 혹은 null 을 반환한다.자바스크립트 정규표현식을 다룰 때 쓴다.  const pathMatch = /^\/tour\/[^\/]+\/([^\/]+)$/.exec(pathname); if (pathMatch) { const [, contentTypeId] = pathMatch; return getTourTitle(contentTypeId); } // :contentTypeId에 따라 제목을 반환하는 함수export const get..

CSS의 뷰포트 단위(svh, lvh, dvh)로 UI 표시에 맞춘 스타일을 적응시킨다.기존의 브라우저 크기에 맞춘 단위로 vh와 vw를 사용해왔지만 실제로 iOS에서 확인했을 때 화면이 덜컹거리고 스크롤이 생기는 등 UI가 어긋나는 현상이 발생했다.  이를 방지할 수 있는 방법이 있는데,  CSS Values ​​and Units Module Level 4 (6.1.2.1. The Large, Small, and Dynamic Viewport Sizes) 에서 추가된 새로운 단위 'sv*/lv*/dv*'를 사용하여 UI의 표시에 근거한 스타일 의 지정을 할 수 있다고 한다. 1. sv*: Small Viewport(소형 뷰포트)UI(툴바, 주소 바 등)가 표시되었을 때의 viewport의 크기.2. l..