본문 바로가기

전체 글437

면접대비 질문 정리: 자바스크립트, 타입스크립트 보호되어 있는 글 입니다. 2024. 4. 29.
면접대비 질문 정리: 리액트 보호되어 있는 글 입니다. 2024. 4. 29.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 7(타입 폴더 구조 및 타입명 변경, 마이그레이션 완료 소감) 타입스크립트 마이그레이션이 완료됐지만 구현할 때 타입명이나 폴더 구조를 신경 쓰지 않고 진행했기에 코드가 엉망진창이었다. 따라서 오늘은 폴더 구조도 변경하고 타입 이름도 조금 더 명시적으로 바꾸어주었다. 폴더 구조 타입스크립트로 프로젝트를 진행하는 건 처음이라 타입을 어떤 식으로 폴더에 정리해야 할지 고민을 많이 했다. 그 과정에서 다른 개발자 분들의 프로젝트도 많이 찾아봤는데, 딱히 어떻게 하면 좋다 그런 건 없는 것 같고 각자 규정한 컨벤션에 따르는 듯하다. 나는 `src > types` 폴더 아래에 각 기능 별로 타입과 인터페이스를 묶어 정리했다. `index.ts` 파일에서는 정의해 둔 타입 모듈을 모두 export 해 주었다. // index.ts export * from "./user"; ex.. 2024. 4. 17.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 6(index, 리덕스 코드) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) JavaScript → TypeScript 마이그레이션 5(Auth: Test 계정 Auto Fill 구현, Community: paginat.. 2024. 4. 17.
[한 입 크기로 잘라먹는 TypeScript] CH3. 타입스크립트 이해하기 1(1. 타입은 집합이다, 2. 타입 계층도와 함께 기본타입 살펴보기) chapter 3. 타입스크립트 이해하기 0. 타입스크립트를 이해한다는 것은? 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들 간 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사하는지 그 원리와 동작 방식을 이해하는 것. 1. 타입은 집합이다 타입스크립트의 '타입'은 여러 개의 값을 포함하는 '집합'이다. 집합: 동일한 속성을 갖는 요소들을 하나의 그룹으로 묶은 단위 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 포함되는 관계를 갖는다. 이런 관계에서 다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입)이라 부르며, 반대는 서브 타입(자식 타입)이라고 한다. 타입 간의 이러한 계층 관계를 어떻게 이용할 수 있는지 살펴보는 것이 중요하다. ✅ 타입 호환성 A와 B .. 2024. 4. 15.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 5(Auth: Test 계정 Auto Fill 구현, Community: pagination 마이그레이션) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) 🔐 Auth 페이지 Form 태그 내부 데이터 수정 및 submit //수정 const onEditChange = (e: ChangeEvent.. 2024. 4. 14.
면접대비 질문 정리: 웹, HTML, CSS 면접질문 참고https://nomadcoders.co/community/thread/3979[diary] 프론트엔드 신입 면접 준비하기[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)프론트엔드 면접질문 중요도별 정리[Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성) 1. 브라우저 작동 원리 (주소창에 google.com을 입력하면 일어나는 일)(사용자가 브라우저에 주소를 입력한 후에 서버로부터 전송된 데이터가 화면에 보이기까지 그 일련의 과정을 설명할 수 있어야 합니다.) ✅ 답변브라우저에 도메인을 입력하면, 브라우저는 해당 IP 주소를 얻기 위해 DNS(Domain Name System) 서버에 요청을 보내 IP주소를 받아옵니다. IP 주소를.. 2024. 4. 11.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 3(6.any와 unknown, 7.void와 never) chapter 2. 타입스크립트 기본 6. any와 unknown ✅ any 타입 타입스크립트에서만 제공되는 특별한 타입 타입검사를 받지 않은 특수 타입 let anyVar: any = 10; anyVar = "hello"; anyVar = true; anyVar = {}; anyVar.toUpperCase(); anyVar.toFixed(); anyVar.a; 어떠한 타입 검사도 받지 않으므로 아무 타입의 값이나 범용적으로 담아 사용 가능하며 다양한 타입의 메서드를 마음대로 호출해도 문제가 되지 않는다. any 타입은 모든 타입스크립트의 문법과 규칙으로부터 자유롭지만, 타입 검사가 이뤄지지 않기 때문에 코드 오류가 발생할 여지가 크다. 따라서 *특수한 경우를 제외하고는 any 타입 사용은 권장되지 않는.. 2024. 4. 11.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 2(3.객체, 4.타입 별칭과 인덱스 시그니쳐, 5.열거형 타입) chapter 2. 타입스크립트 기본 3. 객체 ✅ 객체 타입을 정의하는 방법 1️⃣ object로 정의하기 let user: object = { id: 1, name: "kim", }; user.id; //오류 발생 객체 생성과 타입 정의를 잘해주었는데도 `user.id`를 이용해 객체의 프로퍼티에 접근하려 하면 오류가 발생한다. 👉 원인: 타입스크립트의 object 타입은 객체의 프로퍼티에 대한 어떤 정보도 가지고 있지 않기 때문 🤔 변수 user에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야 할까? 2️⃣ 객체 리터럴 타입 중괄호를 열고 객체가 갖는 프로퍼티를 직접 내열해 만드는 타입 let user: { id: number; name: string; } = { id: 1, name:.. 2024. 4. 10.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 저번 포스팅에 이어 이번에도 가계부 관련 페이지 코드를 TypeScript로 변경해 볼 예정이다. 기존 코드 확장자를 jsx → tsx로 변경한 뒤 오류가 생기는 부분이나 흰 점선이 나타나며 타입 지정하라고 지정해 주는 부분 위주로 변경해 보겠다. 변경 전 코드는 아래와 같.. 2024. 4. 8.
[프론트 CI/CD 스터디 1주차] Github Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화(React CSR) 이론 CI/CD란 무엇인가? → [링크] GitHub Flow 전략에 대한 이해 → [링크] GitHub Action에 대한 이해 → [링크] 실습 CloudFront, S3 원클릭 배포하기 → [링크] GitHub Action 지속적 전달 구현하기 → [링크] 최근 프론트엔드 취업을 위해 공고를 살펴보다 보면 CI/CD와 AWS라는 키워드가 눈에 띈다. 공부해 보면 좋겠다는 생각은 했지만 솔직히 자바스크립트, 리액트, 타입스크립트 등 더 우선순위에 있는 공부할 거리들이 널려 있기에 엄두도 못 냈었다. 그러던 차에 마침 인프런에서 강의형 스터디를 진행한다고 해서 얼른 신청해 보았다. 사전 과제대로 가비아 도메인도 구매하고(.shop 도메인은 1년에 부가세 포함 550원... 개인 플젝 배포할 도메인도 그.. 2024. 4. 7.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 1(0. 기본타입의 정의, 1.원시타입과 리터럴타입, 2.배열과 튜플) chapter 2. 타입스크립트 기본 0. 기본 타입(Basic Types) 이란? TS가 자체적으로 제공하는 타입, 내장 타입 TS에서만 제공하는 타입: any, void, never, unknown 타입 계층도: TS가 제공하는 기본 타입들을 계층에 따라 분류한 그림 chapter 2. 실습 환경 설정 { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "include": ["./"] } tsc//컴파일 tsx index.ts//실행 1. 원시타입과 리터럴 타입 원시타입 동시에 한 개의 값만 저장할 수 있는 타입들 number,.. 2024. 4. 5.
반응형

티스토리툴바