gggimmin 개발 블로그 gggimmin 개발 블로그

✅ readonly 속성 // readonly 속성 사용 type Person = { readonly name : string age? : number } const personMaker = (name : string): Person => ({name}) const jude = personMaker("jude") jude.name = "erling" // error : readonly 속성의 name 값을 변경 불가 // readonly 속성 사용 const numbers : readonly number[] = [1, 2, 3, 4] numbers.push(5) //error : readonly 속성의 numbers 에 새로운 number 추가 불가능 readonly 속성이 있으면 최초 선언 이후 수정이..

TypeScript 는 JavaScript 에 추가적으로 구문을 더해서 에디터와 단단한 통합을 지원한다. 런타임 에러가 아닌 에디터에서 초기 오류를 잡기가 가능하다. TypeScript 코드는 JavaScript 가 실행되는 모든 곳에서 작성한 TypeScript 의 코드가 JavaScript 로 변환된다. ( 컴파일 시 TypeScript 코드 → JavaScript 코드 로 변환 ) 또한, TypeScript 는 JavaScript 를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공한다. ✅ 명시적 정의 (변수 선언 시 타입 정의) const a : boolean = "x" // error : boolean 타입에 string 타입 할당 불가 알림 위는..

왜 사람들은 자바스크립트에서 타입스크립트로 넘어와 타입스크립트를 많이 사용하는 것일까? 그 이유는 바로 타입 안정성 때문이다. 타입 안정성으로 인해 코드에 버그가 엄청 많이 줄어들게 된다. 자바스크립트는 매우 유연한 언어이다. 그래서 최대한 에러를 안내고 개발자를 이해하려한다. // console [1, 2, 3, 4] + false // '1,2,3,4false' 예를 들자면 위의 사례를 볼 수 있다. 배열과 불리언 타입의 false를 더했더니, 배열이 완전히 사라져버리고 불리언 타입의 false는 스트링이 되어버렸다. 전혀 허용할 수 없는 코드이지만, 자바스크립트는 유연한(?) 계산을 보여준다. 이것이 자바스크립트의 문제점이다. 다른 문제점을 하나 더 보자면, function divide(a, b) ..

이제 타입 스크립트를 배우게 되어 타입 스크립트 사용을 위한 패키지를 설치해야 하는데 나는 CRA (create-react-app) 방식이 아닌, vite를 사용한 react+ts 방법을 사용했다. vite의 자세한 설치 방법과 장점은 아래 글에서 확인할 수 있다. https://gggimmin-development-technology.tistory.com/39 [ React ] 빠른 Frontend 개발을 위한 툴, Vite ! Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기 gggimmin-development-technology.ti..

📌 프로젝트 소개 프로젝트 명 : Kidnapped (너 납치된 거야) 배포 도메인 : https://kidnapped.vercel.app 개발 기간 : 2024.02.23 ~ 2024.02.28 (6일) 프로젝트 소개 : Kidnapped - "너납치된거야" 웹 서비스는 전국의 방탈출 카페를 지도를 통해 보여주는 서비스입니다. 프로젝트 목표 : 특정 지역명 검색을 통해 그 지역에 어떤 방탈출 카페가 있는지 보여주며, 단순하게 카페 리스트만 보여주는것이 아닌, 상세 페이지를 통해 해당 방탈출 카페의 별점과 생생한 리뷰를 볼 수 있습니다. 🚦 Project Rules - Stacks - Code convention - Github rules 🚀 내가 맡은 역할 - 로그인, 회원 가입 기능 구현 🚀 1. 기..

import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); const onChangeBodyHandler = (e) => { setBody(e.target.value); }; return ( ); }; ..

프로젝트를 진행하던 도중 validateDOMNesting(...): cannot appear as a descendant of . 라는 에러 문구를 만났다. 경고창이 의미하는 것은 태그안에 태그가 존재한다는 경고문인 것 같았다. Home const StHomeLink = styled.a` font-size: 25px; color: white; &:hover { border-bottom: 5px solid #8b8b8b; } `; 원인은 Home 글씨를 클릭 시 홈으로 이동하게 만들기 위해 작성한 에서 발생했다. react - router- dom 의 Link 컴포넌트는 렌더링하면서 태그 요소로 변환된다. 그렇기에 상위 컴포넌트인 역시 태그로 스타일 된 컴포넌트이고, 하위 컴포넌트인 역시 렌더링되며 태그..

❗에러 상황 const StLayoutImage = styled.div` background-image: url('/assets/backgroundimg.png'); ` 로그인 페이지에 background-image를 넣기 위해 styled-components에 background-image를 알맞은 경로로 넣어도 컴포넌트 백그라운드에 어떠한 사진도 뜨지 않는다. import backgroundimg from "assets/backgroundimg.png" return ( //로그인 로직 ); assets 폴더에 있는 backgroundimg를 import 해와 직접 컴포넌트에 이미지를 넣어도 뜨지 않았다. 💡해결 방법 // 이미지 임포트 해주기 import backgroundimg from 'asset..