분류 전체보기 검색 결과

해당 글 442건

[AWS] 내도메인 한국 만료일 연장하기

이번 글에서는 내도메인 한국에서 도메인 만료일을 연장하는 방법에 대해 포스팅하려고 합니다. 내도메인 한국이라는 사이트를 아시나요? [내도메인 한국]한국 내에서 도메인 등록 및 관리를 지원하는 웹사이트로, 개인 또는 기업이 자신만의 고유한 웹사이트 주소를 등록할 수 있도록 돕는 플랫폼입니다. 도메인은 디지털 공간에서 나만의 주소를 의미하며, 내도메인 한국에서는 .kr, .com 등 다양한 도메인 확장자를 선택해 등록할 수 있고, 도메인을 한국어로도 지원해 줍니다. 이 외 다른 플랫폼으로는 카페24, 가비아를 예로들 수 있습니다. 저는 내도메인 한국이 무료이기 때문에 내도메인 한국을 선택했습니다. 내도메인 한국의 주요 특징간편한 도메인 등록: 사용자가 원하는 도메인을 빠르고 쉽게 검색하고 등록할 수 있는 간..
1. 웹개발/1_2_1 AWS 2024. 9. 21. 10:57

[에러 해결] Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

이번 글에서는 아래 에러에 대해서 다루어 보겠습니다.Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.  [에러 원인]위 에러 메시지는 React 컴포넌트의 타입이 잘못되었음을 의미합니다. 즉, React는 문자열(내장 컴포넌트)이나 클래스/함수(사용자 정의 컴포..
1. 웹개발/1_1_8 Error Handling 2024. 9. 1. 11:50

[에러 해결] Prop `className` did not match ~ in Next Js

Next.js로 토이프로젝트를 진행하던 도중에 아래와 같은 오류가 발생하였습니다.warning: Prop `className` did not match. Server: "MuiFormControl-root sc-iKTcqh gwSKiw css-1nrlq1o-MuiFormControl-root" Client: "MuiFormControl-root sc-gJhJTp gehcyX css-1nrlq1o-MuiFormControl-root"  [발생 원인]저는 Next.js로 styled-components와 Material-UI를 사용하고 있었습니다. 그런데 왜 이런 경고가 발생했을까요?이 경고는 서버에서 렌더링된 클래스 이름과 클라이언트에서 렌더링된 클래스 이름이 일치하지 않아서 발생합니다. 주로 SSR환경에..
1. 웹개발/1_1_8 Error Handling 2024. 8. 24. 11:55

[AWS] [조치 필요] Amazon RDS and Amazon Aurora SSL/TLS 인증서 업데이트 방법

AWS에서 RDS로 데이터베이스를 운영하고 있다면, 아래와 같은 메일을 받으셨을 겁니다. "[조치 필요] 2024년 8월 22일까지 Amazon RDS and Amazon Aurora SSL/TLS 인증서를 업데이트하세요."  이 메일을 받은 이유는 메일 본문에 적혀져 있듯이, SSL/TLS CA 인증 만료에 대한 알림으로 만료되는 인증서가 있기 때문에 갱신하라는 이유입니다. 이번 글에서는 인증서를 어떻게 갱신하는지에 대해 알아보겠습니다.  1. 인증서 다운로드아래 링크에서 해당하는 리전의 번들 .pem을 다운받으시면 됩니다. 저의 경우 ap-northeast-2-bundle.pem 전이여서 빨간 박스의 .pem을 다운로드 하였습니다. https://docs.aws.amazon.com/ko_kr/Amaz..
1. 웹개발/1_2_1 AWS 2024. 8. 17. 11:37

ESLint와 Prettier로 코드 자동 정렬 설정 with Airbnb

코드를 저장할 때 자동으로 정렬하거나 포맷팅해주는 기능을 적용하려면 ESLint와 Prettier를 함께 사용해야 합니다. 이번 글에서는 Next.js와 TypeScript 프로젝트에 ESLint와 Prettier를 설정하는 방법을 기록하겠습니다. 1. ESLint 및 Prettier 설치먼저 필요한 패키지들을 설치합니다.npm info "eslint-config-airbnb@latest" peerDependencies; 2. Prettier 설정 파일 생성프로젝트 루트에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다.{ "endOfLine": "lf", "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": ..
1. 웹개발/1_1_6 Next JS 2024. 8. 10. 20:01

Turborepo와 pnpm을 사용하여 Monorepo 구축

세팅 방법pnpm dlx create-turbo@latest  디렉토리 구조 설치 완료되면 디렉토리는 apps, node_modules, packages로 구성이 되어있습니다.apps는 Next.js(+Typescript)로 레포가 형성되어 있습니다.packages는 공유되는 라이브러리나 컴포넌트 등이 형성되어있습니다. 더 나아가서 packages 폴더에 ui 부분을 확인해보겠습니다. 위의 있는 버튼 컴포넌트를 서로 다른 레포에서 쉽게 접근해 사용이 가능합니다.`apps/docs/package.json`에서 `dependencies`를 보시면 알 수 있듯이, docs 프로젝트가 `./packages/ui` 패키지를 의존하고 있는 것을 확인할 수 있습니다.  References모노레포란? (with Tur..
1. 웹개발/1_1_6 Next JS 2024. 8. 3. 18:09

[IT 상식] 버전 표기법 (1.0.0)

소프트웨어 개발의 세계에서 버전 번호는 단순한 숫자 이상의 의미를 담고 있습니다. 우리는 매일 사용하는 애플리케이션과 도구에서 다양한 버전 번호를 접하게 됩니다. 하지만 이 숫자들이 실제로 어떤 의미를 지니고 있으며, 왜 중요한지에 대해 깊이 생각해본 적이 있나요? 버전 표기법은 소프트웨어의 변경 사항과 발전 과정을 체계적으로 표현하는 중요한 수단입니다. 이를 통해 개발자와 사용자 모두가 소프트웨어의 상태와 호환성을 쉽게 이해할 수 있습니다.  위의 20.15.0 으로 표기한 버전 표기법을 보통  Semantic versioning이라고 부릅니다. 각각 20(메이저).15(마이너).0(패치) 형식으로 구성되며, 각 숫자는 특정한 의미를 지닙니다.   Major 버전하위 버전과 호환되지 않는 변화가 생겼을..
1. 웹개발/1_3_2 IT 상식 2024. 7. 27. 11:14

[IT 상식] PoC란?

PoC(Proof of Concept)란? 특정 개념이나 아이디어가 실현 가능하고 유용하다는 것을 증명하기 위해 만들어진 프로토타입이나 시제품을 의미합니다. 주로 소프트웨어 개발, 제품 개발, 연구 프로젝트 등 다양한 분야에서 사용됩니다. PoC는 아이디어가 실제로 작동하는지 검증하고, 이를 통해 추가 개발 여부를 결정하기 위한 중요한 단계입니다. PoC의 주요 목적은 아이디어나 개념이 실제로 구현 가능한지, 기술적 장벽이 없는지를 검토하는 것 입니다.PoC는 프로젝트의 초기 단계에서 큰 비용과 시간을 들이지 않고 아이디어의 실현 가능성을 확인할 수 있는 중요한 도구입니다. 이를 통해 불필요한 리스크를 줄이고, 효율적인 자원 배분을 할 수 있습니다. 또한, PoC는 프로젝트 이해관계자들을 설득하는 데 효..
1. 웹개발/1_3_2 IT 상식 2024. 7. 20. 11:02

[React] Compound Pattern 파헤치기

이번 글에서는 Compound Pattern에 대해 알아보겠습니다. 그러기 위해선 먼저 Compound(합성)에 대해 알아볼 필요가 있습니다. 합성에 대해 익숙하지 않은 분은 아래의 포스팅을 보시고 돌아와서 다시 글을 읽는 것을 권장드립니다. [React] 컴포넌트 합성이란? Compund Pattern이란?Compund(합성) 컴포넌트 패턴은 컴포넌트 합성의 장점을 활용하기 위해서 구안된 패턴입니다. 즉, “하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 방식” 이라고 볼 수 있습니다. 저희가 즐겨 쓰는 select 컴포넌트가 바로 합성 컴포넌트 패턴의 형태를 잘 띈 대표적인 예시라고 볼 수 있습니다. select 컴포넌트는 변경에 대한 관심사를 ..
1. 웹개발/1_1_5 React JS 2024. 7. 13. 12:15

[React] 컴포넌트 합성이란?

모던 웹 개발에서 컴포넌트 기반 아키텍처는 빠르게 표준이 되었습니다. 특히 React와 같은 라이브러리를 사용하면 UI를 작은, 재사용 가능한 컴포넌트로 분리하여 개발하는 것이 일반적입니다. 하지만 이 과정에서 단순히 컴포넌트를 나누는 것만으로는 부족합니다. 여기서 중요한 개념이 바로 컴포넌트 합성입니다. 컴포넌트 합성은 여러 개의 작은 컴포넌트를 조합하여 더 큰 기능을 수행하는 컴포넌트를 만드는 방법을 의미합니다. 이 접근 방식은 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 복잡한 UI를 관리하는 데 매우 유용합니다. 따라서 컴포넌트 합성은 단순히 좋은 습관이 아니라, 효율적이고 확장 가능한 애플리케이션을 개발하는 데 필수적인 기술입니다. 이번 글에서는 컴포넌트 합성이 왜 중요한지, 어떻게 적용할..
1. 웹개발/1_1_5 React JS 2024. 7. 6. 11:49

[IT 상식] 모노레포란? (with Turborepo)

모노레포는 '하나의 저장소'를 의미하는 'Monolithic Repository'의 줄임말로, 많은 프로젝트를 단일 저장소에서 관리하는 방식을 말합니다. 즉, 여러 개의 소규모 레포지토리(다중 레포지토리, 또는 멀티레포) 대신 하나의 거대한 리포지토리를 사용하는 것을 의미합니다. 모노레포는 언제 사용해야 효율적일까? 유사한 서비스들을 만들 때 한 서비스의 모바일 페이지, PC 페이지를 만들어야 할 경우 공통 기능들이 존재할 수 있는데, 이 때 사용하면 효율성 증가 여러 프로젝트를 한 눈에 파악해야 할 때 하나의 저장소에 여러 프로젝트를 구성 가능 동일한 개발자 경험을 느껴야 할 때 하나의 저장소에서 동일한 린트, 프리티어를 설정해 동일한 개발자 경험 제공 모노레포의 배포 방식모노레포는 많은 장점이 있지만..
1. 웹개발/1_3_2 IT 상식 2024. 6. 30. 18:48