◆ 11. Using Typesnumberstring: ' ', " ", ` `(템플릿 리터럴)booleanapp.tsfunction add(n1: number, n2: number) { return n1 + n2;}const number1 = 5;const number2 = 2.8;const result = add(number1, number2);console.log(result); // 7.8함수의 매개변수에 타입을 지정하여 컴파일 시 오류를 예방할 수 있습니다.예를 들어 `number1`에 문자열이 넘어가면 타입 오류가 발생합니다. 이는 개발 중에만 확인이 가능하고, 컴파일된 JS에서는 오류가 발생하지 않습니다. ◆ 12. TypeScript 타입 vs. JavaScript 타입JavaScript..

이번 주부터 유데미 'Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS' 강의 스터디를 진행하게 되었습니다. 스터디는 총 4주간 진행되며, 각 주차마다 강의 섹션별로 학습 내용을 나누어 계획을 세웠습니다. 매주 공부한 내용을 포스팅으로 정리하면서 복습할 예정입니다.◆ TypeScript란? TypeScript는 자바스크립트의 수퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하면서, 타입 시스템과 클래스, 인터페이스 등 고급 기능이 추가된 프로그래밍 언어입니다. 하지만 타입스크립트 코드는 브라우저에서 바로 실행되지 않습니다. 브라우저가 타입스크립트를 이해할 수 없으므로, 먼저 자바스크립트 코드로 컴파일한 후에 실행해야 합니다. 타입스크립트는 컴파일러 역할을 ..

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 tailwind css부터 적용해야 할 것이 너무 많아서 다시 할까 조금 고민 중인데..일단 할 수 있는 만큼 고쳐서 진행해 보는 것으로.. :)🌿 Eslint 설정설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/eslint-plugin @typescript-eslint/parser초기화 및 설정 파일 생성(.eslintrc.json)npx eslint --init패키지 설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/e..

🌿 메인 화면특별한 기능은 없지만 생각보다 시간을 많이 소요했던 메인 화면입니다.우선 사이트의 테마 컬러를 확정하는데 많은 시행착오가 있었고 좋아하는 파란색을 포기할 수 없어 포인트 색상으로 결정했습니다. 메뉴는 이력서에 있는 항목을 참고하여 확정하게 되었습니다.첫 진입 시에 보이는 화면이라 효과를 주고 싶었는데 타이핑 효과와 스크롤 유도 정도가 적당해 보여서 적용했습니다. 🌿 It's ME아직 프로필 이미지는 추가하지 않았지만, 원형에 마우스 호버 시 저에 대한 간단한 정보를 보이게 했습니다.그리고 우측에는 GitHub, 블로그, 링크드인을 연결하여 클릭 시 이동되도록 처리했습니다.프로필 하단에는 이력서 PDF를 다운로드할 수 있는 버튼을 추가했습니다. 🌿 Skills다양한 프로젝트들을 진행하며 ..

🌿 Supabase 프로젝트 생성🌿 TableEditor에서 테이블 생성ColumnTypeDetault ValueNOT NULLDescriptioniduuid oPKcreated_attimestampnow()o emailvarchar o중복체크sns_typevarchar xNaver / Kakao / Google / Applenicknamevarchar o profile_imgvarchar x updated_attimestamp x sns_keyvarchar x  id와 created_at은 기본적으로 생성되는 컬럼입니다. 회원 가입 시 필요한 항목들을 추가했다. id의 경우 기존에 int8로 설정되어 있던 것을 uuid로 변경했다. 밑에서 다시 언급될 내용이지만, Supabase에서 제공하는 회원 ..

지금까지 리액트 프로젝트는 2번 정도 진행 했었는데 상태 관리 라이브러리를 적용해 본 경험이 없어서이번 프로젝트에서는 zustand를 활용하여 상태관리를 해보고자 한다. Zustand란?React 상태 관리 라이브러리hook를 기반으로 한 간결하고 직관적인 API를 제공하며, 전역 상태 관리를 간단하게 구현할 수 있게 해준다.Persist와 같이 사용하기Zustand의 미들웨어 중 하나로, 상태를 브라우저의 저장소에 저장할 수 있게 해준다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 상태가 유지되도록 할 수 있다. Zustand 설치npm install zustand src/store/authStore.ts 파일 생성zustand import인터페이스 정의 : 스토어의 상태와 액션 타..

사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.사이드 프로젝트 GitNext.js 프로젝트 생성npx create-next-app@latest [프로젝트명]cd [프로젝트명]npm run dev 우선 프로젝트가 실행되는 것을 확인했습니다.Next.js의 특징서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..