요즘 프로젝트를 개발하면서 api 호출하는 부분에 대해서 최적화할 수 있는 부분이 있다면 조금씩 리팩토링해보는 중이다.그 중에서도 똑같은 내용으로 api 를 호출했을 때, 다시 응답을 새롭게 기다려야하는 부분을 개선해보고 싶었다. 캐싱 이란?캐싱이란 어떤 데이터를 한번 응답으로 받으면, 임시로 데이터를 다른 곳에 저장해서 필요시에 더 빠르게 불러와서 사용할 수 있는 프로세스를 말한다. 즉, 똑같은 요청을 또 하는 불필요한 요청을 줄일 수 있다. 캐싱을 어디에하지?localStorage, sessionStorage 등 다양한 곳에 저장할 수 있다.나는 브라우저가 닫히면 캐시 데이터 또한 깔끔하게 삭제되길 원했기에 sessionStorage에 저장하는 방법을 택했다. * 영구적으로 저장하고 싶으면 local..
프로젝트에서 메뉴 기능을 개발하면서 useRef 기능을 이 참에 잘 이해하고 써보려고 했다. 햄버거 모양의 메뉴 버튼을 클릭하면 → 메뉴가 펼쳐진다 햄버거 모양의 메뉴 버튼을 다시 클릭하면 → 메뉴가 닫힌다 펼쳐진 메뉴를 제외한 화면의 다른 부분을 클릭하면 → 메뉴가 닫힌다 👉 이걸 구현하고자 함!! useState, useRef, useEffect 훅을 사용해서 메뉴의 열림/닫힘/메뉴 바깥 영역 클릭시 메뉴 닫힘 기능을 구현해보자. const [isMenuOpen, setIsMenuOpen] = useState(false); const menuRef = useRef(); // 드롭다운 메뉴에 대한 참조 먼저 useState 훅을 사용해서 메뉴의 열림/닫힘 상태를 나타내는 isMenuOpen 이라는 상..
TailwindCSS 에 폰트 적용하는 법을 정리해보려한다! 이전에 했었는데 생각이 안나서 다시 찾아봤다. 나중에 또 안 찾아보도록 ... 폰드 다운로드와 저장 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 위 사이트에서 폰트를 다운받는다 폰트 ttf 파일을 프로젝트에 넣어둔다. 나는 src > assets 폴더에 fonts 라는 폴더를 하나 만들어서 여기에 ttf 파일을 저장했다. font-face @font-face { font-family: "Roboto"; src: url("../src/..
keyof keyof 키워드는 object 타입의 모든 key 를 가져와서 유니온 타입으로 반환한다. 아래의 예시를 보자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; // "age" | "name" 위에서 PersonKeys 타입은 age와 name 중 하나의 문자열 값만 가질 수 있는 리터럴 타입이다. Mapped Types Mapped Types 를 이용하면, 기존의 타입을 새로운 타입으로 변환할 수 있다. object 의 각 속성에 대해 반복적으로 적용을 할 수 있어서 타입 변환 과정을 간결하게 만들어 준다. type TypeChanger = { [Key in keyof MyType]: NewType;..
interface와 implements 를 사용한 class 타입 확인 interface 는 object 의 타입을 지정할 때 사용할 수 있다. 그리고 또 다른 용도로, class 의 타입을 확인할 때에도 사용할 수 있다. 이 때, implements 키워드도 필요하다. 아래의 예시를 보자. class Car { model: string; price: number = 1000; constructor(a: string) { this.model = a; } } let 붕붕이 = new Car('morning'); 위의 Car 클래스에서 생성된 객체들은 model 과 price 속성을 가진다. 클래스가 특정 속성을 가지고 있는지 타입으로 확인하고 싶을 때, interface 와 implements 키워드를 사..
개념 d.ts 파일은 TS에서 타입 정의를 저장하는 파일이다. 여기서 'd' 는 Definition 의 약자이다. 이 파일들은 TS 컴파일 과정에서 JS로 변환되지 않으며, 타입 정보만 포함한다. 주로 2가지 용도로 사용된다. 1. 타입 정의 저장 : 타입 정보만을 분리하여 저장하고, 필요한 곳에서 import 해서 사용한다 2. 레퍼런스 용 : 프로젝트에서 사용하는 타입을 정리해놓은 문서로 활용할 수 있다. d.ts 파일에서 타입 정의하기 d.ts 파일 내에서는 주로 type 키워드, interface, 함수 타입 정의를 포함할 수 있다. 함수 본문을 정의할 수는 없고, 파라미터과 return 타입만 지정할 수 있다. export type Age = number; export type Multiply ..
JS 파일에 선언된 변수 TS 파일에서 사용하기 JS 파일에서 선언된 변수를 TS 파일에서 사용하고 싶을 때에는 declare 키워드를 사용한다. declare 키워드를 사용하면 TS 파일 내에서 JS 파일에 정의된 변수나 함수의 타입을 명시할 수 있다. declare let a: number; 위 예시처럼 TS 파일에 declare 를 선언하면 '변수 a 는 number 타입이며, 이미 어딘가에 정의되어 있다' 라고 TS 컴파일러에게 알리는 것이다. declare global 'declare global' 은 TS 모듈 내에서 전역 변수나 타입을 선언할 때 사용된다. 일반적으로 TS 파일은 자체 scope 를 가지고 있어, 파일 내에서 선언된 변수나 타입은 그 파일 내에서만 접근이 가능하다. 하지만 때..
Tuple type Tuple 은 타입스크립트에서 고정된 수의 요소를 가지면서, 각 요소의 타입이 명시적으로 지정된 배열의 타입이다. 각 요소의 타입은 다를 수 있고, 배열의 길이는 고정된다. 예를 들어 첫번째 요소가 문자열이고, 두번째 요소가 숫자인 배열을 정의하고 싶다면 다음과 같이 작성할 수 있다. let exampleTuple: [string, number] = ['hello', 42]; Tuple 응용 : Rest Parameters 함수의 매개변수로 '...' (rest 연산자)를 사용하면 인자를 배열로 받을 수 있다. 이 기능을 tuple 이랑 결합해보자. 예를 들어 첫번째 인자는 문자열이고, 두번째 인자는 숫자여야 하는 경우에 다음과 같이 작성할 수 있다. args 라는 배열에 string..
문제 Vite로 생성한 React 프로젝트를 개발하는 과정에서 나는 react-router-dom 라이브러리를 활용해서 라우팅을 진행했다. import { Route, Routes } from "react-router-dom"; import TreeBranchView from "./pages/TreeBranchView"; import MemberBranchView from "./pages/MemberBranchView"; function App() { return ( ); } export default App; 코드를 모두 작성하고 Vercel 로 배포한 후 배포된 주소로 접속하는데 분명 로컬에서는 잘 라우팅 되어 접속되었던 주소가, Vercel로 배포한 주소로 들어갔을 때에는 404: NOT_FOUNT..
React 프로젝트 생성 타입스크립트의 셋팅이 완료된 새로운 프로젝트를 생성하는 법이다 npx create-react-app 프로젝트명 --template typescript 만약 기존 프로젝트에 타입스크립트만 추가하고 싶다면 다음과 같이 터미널에 입력한다 npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript로 만든 React 프로젝트 일반 프로젝트와 다른 점은 컴포넌트 파일에 js 가 아닌 tsx 확장자를 사용해야한다는 것이다. 그러면 리액트 프로젝트에서 typescript 문법을 어디에 응용할 수 있을지 알아보자 JSX 타입지정 리액트에서는 변수나 자료에 를 담아서 쓸 수 있다. 리액트..
Generic function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 위와 같은 코드를 보자. unknown 타입의 array 자료를 입력하면, array의 맨 앞 첫번째의 요소를 리턴해주는 함수가 있다고 해보자. console.log 로 콘솔에 찍힌 a 의 타입은 뭘까? unknown 이다. 입력하는 array 도 unknown 타입이기 때문이다. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a + 1) 때문에 이런 경우에는 에러가 날 것이다. 왜냐하면 a 는 unknown 타입인데, 숫자인 1을 더하려고 했기 때문이다. 이런 문제를 해결..
type import export a.ts 파일에 있는 것을 b.ts에서 쓰고싶다면 다음과 같이 코드를 작성할 수 있다. (a.ts) export type Name = string | boolean; export type Age = (a :number) => number; (b.ts) import {Name, Age} from './a' let 이름 :Name = 'kim'; let 함수 :Age = (a) => { return a + 10 } namespace 과거에는 자바스크립트의 import export 문법이 없었다 그래서 코드를 써서 다른 파일들을 일종의 첨부처럼 했는데 이러면 파일이 많아질 수록 변수명이 겹치는 위험이 발생할 수 있었다. 그래서 외부파일에서 사용하지 않을 변수들은 함수로 감쌌었..
protected class 에 관련해서, extends 라는 문법을 쓰면 class 를 복사해서 사용할 수 있다. 근데 private 으로 선언한 것은 기존 class 안에서만 사용할 수 있다. extends 로 만든 class 에서 원본의 class 속성을 쓰고 싶다면 protected 로 선언하면 된다. private 이랑 같으면서도, extends 된 class 안에서도 사용가능하게 해준다. class User { protected x = 10; } class NewUser extends User { doThis(){ this.x = 20; } } NewUser class 는 User class 를 extends 한다. NewUser 에서 this.x 처럼 x 를 쓰려고 하면, 기존에 privat..
객체 지향 언어에서 제공하는 public, private, static, protected 와 같은 키워드들을 타입스크립트에서 사용가능하다. public 타입스크립트는 class 안에서 public 키워드를 사용가능하다 class User { public name: string; constructor(){ this.name = 'kim'; } } let user1 = new User(); user1.name = 'park'; 위 코드에서는 public 으로 선언된 name 이라는 속성이 있다. 이렇게 name 처럼 public 이 붙은 속성은 user1과 같은 자식 object 들이 마음대로 사용/수정이 가능하다. 만약 public 을 안 붙인 채로 만든다고 해도, 기본적으로 자동으로 아무것도 안붙인 경..
서비스 홍보 페이지를 만들면서 스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다. 라이브러리 선택 구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데, react-reveal 은 마지막 업데이트가 오래되기도 했고 npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다. framer motion 설치 npm install framer-motion 적용 방법 일단 제가 구현하려는 것은 다음과 같았습니다. 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것. 스크롤을 올려서 자식컴포넌트가 ..
문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.
관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..
ref : Flutter & Dart - The Complete Guide [2023 Edition] 23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다. Flutter 프로젝트 생성 터미널의 원하는 경로에서 다음을 입력 flutter create [프로젝트이름] 또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서 flutter new project 를 선택해도 됨 Understanding Types 다트는 type-safe 언어이다. 다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다. 여기서 타입 안전성이란? 프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념 Da..
never 타입을 굳이 쓸일은 없을 수 있지만 개발하다가 나오면 어떤 건지는 알기위해..! never 키워드에 대해서 배워보자 never 란 함수에 void 타입을 붙이듯 return type 으로 쓸 수 있다. 예를 들어 다음과 같다 function myFunc() :never{ } myFunc 이라는 함수는 다음을 만족한다 1. return 을 하면 안된다 2. 함수에 endpoint 가 없어야한다 (둘이 같은 얘기이기는 하다) 여기서 endpoint 가 없어야한다는 것은 함수실행이 끝나지 않는 것이다. while(true) 때문에 함수 실행이 끝나지 않는.. 그런 예시를 생각해보면 되겠다. function 함수() :never{ throw new Error('에러메세지') } 위의 예시를 보자면 t..
rest parameter 먼저 rest parameter 에 대해서 간단히 짚고 넘어가자 function PrintNumArr(...a){ console.log(a) } PrintNumArr(1,2,3,4,5) 위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면 그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다. [LOG]: [1, 2, 3, 4, 5] 그럼 rest parameter 의 타입지정은 어떻게 할까? rest parameter 의 타입지정 array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다. 아래와 같다 function PrintNumArr(...a:number[]){ console.log(a) } Pri..
이전에 type alias 를 이용해서 타입을 변수처럼 저장해 사용하는 방법을 배웠다. 추가로, object 에 타입을 지정할 때 interface 라는 키워드를 이용할 수도 있다. interface interface Student{ name: string } interface Teacher{ name: string, age: number } let 학생: Student = {name:'kim'} let 선생: Teacher = {name:'kim', age:20} interface 는 type 키워드 처럼 사용할 수 있는 키워드이다. interface 의 장점은 extends 를 할 수 있다는 것이다. 예를 들어 위의 코드를 아래와 같이 쓸 수도 있다. interface Student{ name: st..
필드값 타입지정 class 내부에는 object 가 사용할 수 있는 필드값을 만들 수 있다. class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 예를 들어 Person 이라는 class 에 0 값을 가지는 data 라는 걸 만들어놓으면 john 이나 kim 에서 이 data 라는 필드를 사용할 수 있다. 이 때 이 data 라는 필드에 타입을 지정해준다면 다음과 같다 class Person { data :number = 0; } 하지만 굳이 쓰지 않아도 자동으로 number 타입이된다. 타입스크립트는 자동으로 타입지정을 해주기 때문! co..
strictNullCheck 옵션 켜기 tsconfig.json 파일에 들어가서 strict 옵션을 true 로 켜준다. strictNullChecks 만 켜줘도 된다. (strict 안에 strictNullChecks 가 들어가 있다) 변수를 조작하면서 null 인지 체크할 때 유용하다 HTML 파일 script 태그에 변환된 index.js 를 적어서 연결해준다. HTML 찾아 변경하기 h4 제목을 다른 글자로 변경하려고 한다. 위 코드처럼 일단 '제목' 이라는 변수에 document.querySelector 를 통해 title 이라는 id 를 가진 object 를 가져온 후, narrowing 을 통해 null 이 아닌지 체크후에 null 이 아니라면 제목.innerHTML 을 '반갑소' 로 바꿔줬..
함수 type 을 저장하기 함수에 들어갈 파라미터와 return 값의 타입들도 지정할 수 있다고 배웠는데, 이 함수의 타입도 type alias 로 저장해서 사용할 수가 있다. type NumOut = (x : number, y : number ) => number ; 위는 예시이다 NumOut 이라는 타입을 만든건데, 이 타입은 함수를 위한 타입이다. number 타입의 x 와 number 타입의 y 를 파라미터로 받아야하고, return 값이 number 타입이어야한다는 의미이다. 그래서 이 NumOut 이라는 type alias 를 함수에 직접 사용해보는 예시는 아래와 같다 type NumOut = (x : number, y : number ) => number let ABC :NumOut = fu..
지금까지 어떤 변수에 타입을 지정하는 방법에 대해서 배워왔다. 그런데 어떤 변수에 '어떤 값' 이 들어가도록 아예 제한할 수도 있다. const 를 쓸 수도 있겠지만, 내가 어떤 변수에 들어갈 수 있는 값을 2~3개 지정할 수도 있는 것이다. 이럴 땐 Literal Type 을 선언하면된다. Literal Type string, number... 뿐 아니라 일반 값도 타입이 될 수 있다. let name :'홍길동'; 예를 들어서 위처럼 name 이라는 변수에는 '홍길동' 이라는 글자만 들어갈 수 있는 것이다. 이렇게 특정 값만 가질 수 있게 제한을 둘 수 있는 타입을 literal type 이라고 한다. 더 엄격하게 만드는 개념이다. 꼭 1개가 아니어도 된다. let name :'홍길동'|'서다원'; ..
Type Aliases 타입 정의가 너무 길면 타입을 변수에 담아서 쓸 수 있다. Type alias 라고 한다. 여기서 alias 는 '별명' 이라는 의미이다. let 동물 :string | number | undefined; 예를 들어서 위처럼 동물 이라는 타입이 복잡하면 이걸 따로 빼서 변수에 담아쓸 수 있다. type Animal = string | number | undefined; let 동물 :Animal; 이렇게 말이다. 타입을 변수처럼 만들어 쓰는 alias 문법이며, 대문자로 적는게 일반적이다. object 타입 저장하기 type 사람 = { name : string, age : number, } let teacher :사람 = { name : 'john', age : 20 } 위처럼 ..
function plusOne(x :number | string){ return x + 1 //에러남 } 위와 같은 함수가 있다고 보자 x 파라미터는 string | number 와 같은 union 타입인데 숫자 1 을 더하기에는 x 가 string 인지 number 인지 애매하기 때문에 에러를 내게 된다. 따라서 이럴 땐 타입을 하나로 narrowing 해주거나 assert 해주거나 하면 된다. narrowing 에 대해서 먼저 알아보자 typeof 를 이용한 Type Narrowing 타입 narrowing 이란 if 문으로 타입을 하나로 정하는 것을 말한다. function plusOne(x :number | string){ if (typeof x === 'number') { return x + 1..
참고로 수업 들으면서 아래 사이트의 ide 를 이용해 코드를 작성하고 실행시켜보면서 학습했습니다! https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 함수는 두 군데에 타입 지정이 가능하다. 파라미터 return 값 function 함수(x :number) :number { return x * 2; } 그래서 위처럼 x 라는 파라미터를 number 라는 타입으로 지..
이번 프로젝트 로그인 부분을 내가 담당하게 됐는데, 로그인 방식 중에서 카카오 로그인을 구현하게 됐다. 리액트 카카오 로그인에 관련해서 정리된 글들이 많아 개발할 때 참고하면서 진행할 수 있었다. 하지만 까먹지 않고자 한번 정리하려 포스팅해본다. 방식 프론트엔드와 백엔드가 협업하면서 카카오 로그인을 구현하는 방식이 다를 수 있다. 나는 이런 방식으로 했다- 라는 정도로 참고하시면 좋을 것 같다. 나는 프론트엔드 담당이어서 프론트엔드 입장에서 서술해보려고한다. 프론트엔드에서 카카오 로그인 요청 / 인가 코드 받기 요청을 한다 카카오에서 redirect url 로 인가코드를 프론트엔드로 보내준다. 받은 인가코드를 백엔드에게 보낸다. 백엔드는 이 인가코드를 받아 처리해서 AccessToken 을 응답으로 프론..
로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다. 나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고 그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다. 전체 코드부터 보자 ... import { userInfoState } from "./recoil/atoms/userState"; import { useRecoilState } from "recoil"; function App() { const [userInfo] = useRecoilState(userInfoState); const isLogin = userInfo.isLogin; return ( {isLogin ? ( ) : ..
