분류 전체보기 (9) 썸네일형 리스트형 타입스크립트 타입스크립트(TypeScript)란? 정의 및 개요: 타입스크립트는 마이크로소프트에서 개발한 자바스크립트의 슈퍼셋으로, 정적 타입 검사 기능을 추가한 프로그래밍 언어입니다. 주요 목적: 코드의 신뢰성과 확장성을 높이며, 큰 규모의 프로젝트에서도 자바스크립트의 유연성을 유지하면서 개발을 용이하게 합니다. 타입스크립트의 핵심 특징 정적 타입 지정: 변수, 함수의 매개변수, 객체 속성 등에 타입을 지정할 수 있어 오류를 사전에 방지하고 코드의 가독성을 향상시킵니다. 클래스 및 인터페이스: 객체 지향 프로그래밍을 쉽게 구현할 수 있도록 클래스와 인터페이스를 제공합니다. 모듈 지원: 타입스크립트는 ES6 모듈을 지원하여 코드를 모듈 단위로 분리하고 재사용할 수 있습니다. 제네릭: 타입을 파라미터화하여 보다 유연하.. React 18, TypeScript, 그리고 Styled Components를 사용해서 게시판 만들기 예시 코드 React 18, TypeScript, 그리고 Styled Components를 사용해서 게시판의 글 상세 페이지를 구현하는 예제 코드를 작성해드릴게요. 이 예제에서는 게시글의 내용을 보여주고, 게시글 작성자에게는 수정 버튼을 제공하여 게시글 수정 페이지로 이동할 수 있도록 할 것입니다. 또한, 사용자들이 댓글을 달 수 있는 기능도 포함하겠습니다. 먼저, React와 TypeScript, Styled Components를 설치해야 합니다. 이 예제는 해당 라이브러리들이 이미 설치되어 있다고 가정합니다. 1. **PostDetailPage.tsx** - 글 상세 페이지 컴포넌트 2. **CommentsSection.tsx** - 댓글 섹션 컴포넌트 3. **styled.ts** - 스타일 컴포넌.. 리액트 커스텀훅 사용자 정의 훅이란 무엇인가요? 사용자 정의 훅은 React의 기본 훅을 사용하여 재사용 가능한 상태 관리 로직을 캡슐화하는 JavaScript 함수입니다. 이는 특정 동작을 캡슐화하기 위해 useState, useEffect, useContext와 같은 기본 훅을 사용할 수 있음을 의미합니다. 왜 사용자 정의 훅을 사용하나요? 재사용성: 한 번 작성한 로직을 여러 컴포넌트에서 재사용할 수 있습니다. 간결성: 복잡한 로직을 사용자 정의 훅으로 추상화함으로써 컴포넌트를 더 간단하고 읽기 쉽게 만듭니다. 관심사의 분리: 사용자 정의 훅을 통해 로직을 UI로부터 분리하여 코드를 더 모듈화하고 유지 보수하기 쉽게 만듭니다. 사용자 정의 훅 만들기 사용자 정의 훅을 만드는 것은 일반적인 JavaScript 함수를.. 동시에 재고 감소 요청이 들어왔을 때의 문제와 해결 방법 문제 상황 가정: 재고가 100개 있는데 재고를 1개씩 줄이는 요청이 100개가 동시에 들어옴. 기대 결과: 모든 요청이 처리되어 재고가 0이 되어야 하지만, race condition으로 인해 0이 되지 않을 수 있음. Race Condition Race condition은 여러 스레드나 프로세스가 공유 자원에 동시에 접근하려고 할 때 발생하는 문제. 스레드 간 경합으로 인해 예상치 못한 결과가 발생할 수 있음. 예시: 동시에 재고 100개를 1씩 줄이는 요청이 들어오면 각각의 스레드가 100을 가져가서 재고 1개를 줄이는 작업을 수행하면 결과는 99가 됨. 해결 방법 Lock 사용 공유 자원에 대한 접근을 하나의 스레드만 허용하는 방법. Java에서는 synchronized 키워드를 사용하여 구현 가.. nestjs 맛보기 그리고 spring boot 내일 면접 보는 회사가 nestjs를 사용한다고 해서 https://nomadcoders.co/nestjs-fundamentals 이 강의를 통해 어떤 프레임워크인지 한 번 맛보았습니다. 강의를 들으면서 nestjs가 spring boot와 구조가 매우 흡사하다고 느꼈습니다. 이렇게 흡사한 패턴을 가진다면 spring boot 를 사용하는게 더 안정적이지 않은가? 라는 의문점이 들면서 nestjs 는 왜 사용하는지 그리고 이 두개의 프레임워크의 차이점을 정리해보겠습니다. 언어와 생태계 NestJS: TypeScript 기반으로 개발되어 JavaScript의 강력한 타입 시스템과 모듈 시스템을 활용할 수 있습니다. Node.js의 생태계와 함께 사용될 수 있으며, JavaScript 생태계에 비해 상대적으.. github action + s3 + code deploy + docker + nginx 사용해서 배포하기 cd git 특정 브랜치에 PR 이 머지 되었을 경우 github action으로 특정 서버에 자동으로 배포합니다. develop 브랜치에 머지됐을 경우 개발 전용 서버에 변경사항들이 배포되고, main 브랜치에 머지가 되면 production 전용 서버에 배포됩니다. 자동화 배포에 사용된 기술은 github action, code deploy, docker, ec2, s3 입니다. 과정 변경 사항 PR이 develop 브랜치에 머지됨. github action 동작 프로젝트 빌드 후 배포에 필요한 파일들을 모아서 하나의 파일로 압축. 압축파일을 s3로 업로드 code deploy 명령어 실행. code deploy 동작 appspec.yml 에 설정되어 있는 flow 실행 ApplicationStart.. 예외처리를 구조적이고 한 눈에 파악할 수 있게끔 커스텀 스프링 부트에서 예외 처리를 구조적이고 에러 메시지를 한 눈에 파악할 수 있게끔 에러 처리를 부분을 커스텀해보자. 통일된 Error Response 객체 에러 발생시 에러 코드 및 메시지를 API로 응답 받습니다. 이 때 일관된 구조 속에서 에러 정보들이 담겨져 있길 바라기 때문에 모든 에러는 하나의 ErrorResponse 객체에 담겨서 응답을 합니다. @Getter @NoArgsConstructor(access = AccessLevel.PRIVATE) public class ErrorResponse { private String message; private String code; //에러에 할당되는 유니크한 코드값입니다. @JsonInclude(JsonInclude.Include.NON_NULL) .. Spring Boot gradle Spring Boot와 빌드 도구가 각각 존재하는 이유가 무엇일까? 빌드 도구를 사용하지 않고 빌드하려면 라이브러리를 다운 받고 컴파일하고 테스트하고 실행파일로 만들고 여러가지 일을 수동으로 해야한다고 합니다. 그래서 프로젝트를 빌드하기 까지의 일련의 과정을 자동화 해주는 도구를 사용하는 것입니다. 그리고 빌드 도구와 프레임워크는 서로 다른 책임과 목적을 가지기 때문입니다. 개발자는 Spring Boot를 사용하여 개발을 진행하고, 빌드 도구는 이를 더욱 효율적으로 빌드하고 관리하는 역할을 담당합니다. 이러한 역할 분담으로 인해 개발과 배포를 더욱 효율적으로 수행할 수 있게 됩니다. gradle의 역할 1. 빌드 자동화 Gradle은 빌드를 자동화하여 개발자가 수동으로 반복적인 빌드 작업을 수행할 필요 .. 이전 1 2 다음
