본문 바로가기

Web Development50

[Design Patterns] 생성 패턴(Creational Patterns) | 싱글톤(Singleton) 패턴 생성 패턴(Creational Patterns) | 싱글톤(Singleton) 패턴 [index] 1. 싱글톤(Singleton) 패턴이란? 2. 싱글톤 패턴의 장점 3. 싱글톤 패턴의 단점 4. 싱글톤 패턴 적용 예시 5. 마무리 + 디자인 패턴이 무엇인지 모른다면? https://reveur1996.tistory.com/149 [디자인 패턴] 디자인 패턴이란? 디자인 패턴이란? 1. 디자인 패턴이란? 2. 디자인 패턴 구조 3. 왜 디자인 패턴을 알아야할까? 4. 디자인 패턴에 대한 부정적인 시각 5. 디자인 패턴의 분류 6.마무리 1. 디자인 패턴이란? 패턴은 알 reveur1996.tistory.com 1. 싱글톤(Singleton) 패턴이란? 싱글톤(Singleton) 패턴은 하나의 클래스에 대.. 2023. 12. 11.
[디자인 패턴] 디자인 패턴이란? 디자인 패턴이란? [index] 1. 디자인 패턴이란? 2. 디자인 패턴 구조 3. 왜 디자인 패턴을 알아야할까? 4. 디자인 패턴에 대한 부정적인 시각 5. 디자인 패턴의 분류 6.마무리 1. 디자인 패턴이란? 패턴은 알고리즘과 자주 혼동됩니다. 왜냐하면 두 개념 모두 알려진 문제에 대한 일반적인 해결책을 설명하기 때문입니다. 알고리즘은 요리법에 비유할 수 있지만 패턴은 요리법이 아닌 청사진에 더 가깝습니다. 알고리즘과 요리법 둘 다 목표를 달성하기 위한 명확한 단계들이 제시되어 있습니다. 반면에 청사진은 결과와 기능들은 제시하나 구현 단계 및 순서는 사용자가 결정합니다. - 출처 : https://refactoring.guru/ko/design-patterns/what-is-pattern 디자인 패턴.. 2023. 12. 10.
TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과 실제 프로젝트에서의 경험 공유 TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과 실제 프로젝트에서의 경험 공유 TNT 스택(Tailwind CSS + Next.js + TypeScript)란? 각각의 이점 2-1 Next.js: 강력한 React 프레임워크 2-2. TypeScript: 정적 타입 지원 및 개발 생산성 2-3. Tailwind CSS: 빠르고 효율적인 UI 개발 및 유지보수 결합을 통한 이점 3-1 Next.js와 TypeScript 3-2. Next.js와 Tailwind CSS 3-3. TypeScript와 Tailwind CSS 실제 프로젝트에서의 경험 공유 4-1. 프로젝트 적용 사례 4-2. 팀 협업에서의 이점 4-3. 배운 점과 느낀점 마무리 1. TNT 스택(T.. 2023. 12. 9.
[Next.js] Next.js | 기술적 분석 + 사용해보며 느낀점 Next.js 기술적 분석 + 사용해보며 느낀점 [index] 1. Next.js란? 2. Next.js의 주요 기능 및 이점 3. Next.js의 단점 4. 프론트 개발자의 입장에서 보는 Next.js의 이점 5. React와 비교해보기 6. 사용해보며 느낀점 1. Next.js란? Next.js는 Vercel이라는 회사에서 개발된 React 기반의 웹 프레임워크입니다. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)과 같은 기능을 사용할 수 있도록 하여 신속하게 대규모 및 기업용 애플리케이션을 개발하고 배포할 수 있도록 지원합니다. 특히 사용자 친화적이며 매우 빠른 정적 사이트를 구축할 수 있습니다. 또한 Automatic Static Optimi.. 2023. 12. 9.
[FE] 상태관리란? 상태관리란? [index] 1. 상태관리란? 2. 상태관리의 역사 3. 상태관리 라이브러리의 종류 1. 상태관리란? State Management 상태 관리는 모던 프론트엔드의 핵심 역량 중 하나로 여겨지며, 효과적인 상태 관리는 개발자의 핵심 역량이 되었습니다. 프론트엔드 개발에서 상태 관리는 다양한 컴포넌트 간 데이터 전달과 이벤트 통신을 효과적으로 관리하는 것이 목표입니다. 상태의 정의 프론트엔드에서 상태는 주로 유저 정보나 UI에 영향을 미치는 동적으로 변화하는 데이터를 말합니다. 또한 프론트엔드에서 상태는 눈에 보이는 UI 요소 뿐만 아니라 서버와의 통신을 통해 변하는 데이터를 포함합니다. 이를 관리하기 위해서는 예측 가능한 변화를 유지하고 상태의 일관성을 유지해야 합니다. React에서는 상태.. 2023. 11. 28.
[카카오맵 API] Kakao maps & Naver maps API 비교 및 카카오맵으로 지도 기능 구현하기 카카오맵 & 네이버맵 API 비교 및 카카오맵으로 지도 기능 구현하기 [Index] 1. 카카오맵 API와 네이버지도 API 비교 2. 카카오맵을 선택한 이유 3. 카카오맵으로 지도 기능을 구현하는 과정 하나의 글에서 관련된 모든 내용을 다루려고 하니 가독성이 떨어져 기존에 작성했던 반응형으로 지도 구현하기 (with Kakao Map) 에서 map API 기능 분석 및 지도 구현 과정을 분리해 다시 작성된 글입니다. [ 최종적으로 구현한 모습 ] 1. 카카오맵 API와 네이버지도 API 비교 우선 구글맵은 국내 데이터가 카카오맵이나 네이버지도보다 부족해 정확도가 떨어지는 경우가 발생하여 제외했습니다. 카카오맵 API 특징 사용하기 쉽고 직관적인 JavaScript API를 제공합니다. 지도 SDK를 통.. 2023. 11. 20.
Date Picker Library 비교 분석 Date Picker Library 비교 분석 들어가며... 프로젝트에서 장소 예약을 위해 날짜와 시간을 선택할 수 있도록 하는 기능을 개발하게 되었습니다. 이 부분을 더 효율적으로 개발하기 위해 라이브러리를 사용하기로 했고, 여러 후보군 중 프로젝트에 가장 적합한 라이브러리가 무엇인지 비교해보고 결정하기로 했습니다. 이번에 라이브러리들을 찾아 비교해보면서 느낀 것은 각각의 라이브러리들 모두 기본적으로 필요한 기능들을 갖추고 있으며 대체로 비슷한 수준이었습니다. 따라서 구현하고자 하는 기능에 따라 적합하다의 기준이 달라질 수 있습니다. 아래의 내용들은 주관적인 견해임을 감안해 참고만 하시기를 바랍니다. 구현하고자 하는 기능 날짜 선택 특정 범위 한정으로 날짜 선택 제한 시간 선택 예약 가능 시간에 한하여.. 2023. 11. 15.
SPA(Single Page Application)란? SPA(Single Page Application)란? [INDEX] 1. SPA란 무엇인가 2. SPA 장점 3. SPA 단점 + SPA의 단점인 SEO 문제를 보완할 수 있는 여러가지 방법들 1. SPA란 무엇인가 SPA란 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 초기 페이지 로드 후 서버가 더 이상 HTML을 보내지 않습니다. 처음부터 HTML을 모두 다운로드하면 됩니다. 서버는 쉘 페이지를 보내고 브라우저는 사용자 인터페이스(UI)를 렌더링합니다. 그런 다음 클릭하면 SPA가 데이터 및 마크업에 대한 요청을 다시 보냅니다. 서버는 필요한 원시 자료를 다시 전송하고 브라우저는 이를 받아 업데이트된 UI를 렌더링하여 전체 페이지를 새로 .. 2023. 10. 10.
WEB/네트워크/ HTTPS (Hypertext Transfer Protocol Secure) HTTPS | Hypertext Transfer Protocol Secure [INDEX] 1. HTTPS란? 2. HTTP와 HTTPS의 차이점 3. HTTPS의 장점 (HTTP와 비교) 4. HTTPS 통신 흐름 1. HTTPS란? HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전입니다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정합니다. HTTP는 암호화되지 않은 데이터를 전송합니다. 즉, 브라우저에서 전송된 정보를 제3자가 가로채고 읽을 수 있습니다. 이는 이상적인 프로세스가 아니었기 때문에, 통신에 또 다른 보안 계층을 추가하기 위해 HTTPS로 확장되었습니다. HTTPS는 HTTP .. 2023. 9. 18.

티스토리툴바