WEB

WEB

[Architecture] 모놀리식 아키텍쳐 vs 마이크로서비스

🤔 모놀리식 아키텍쳐란 ?  개념모놀리식 아키텍처는 하나의 코드 베이스를 사용하여 여러 비즈니스 기능을 수행하는 전통적인 소프트웨어 개발 모델입니다. 모든 기능이 하나의 프로젝트 내에서 tightly coupled(강하게 결합)되어 있으며, 하나의 애플리케이션으로 배포됩니다.예를 들어 Java로 작업할 때, 전체 애플리케이션은 단일 코드로 작성되어 단일 데이터베이스에 연결됩니다. 그래서 모놀리식으로 개발한 애플리케이션은 마이크로서비스 아키텍처보다 구현이 쉽고, 덜 복잡하다는 장점이 있습니다. 모놀리식 아키텍쳐의 장점 ✅ 간단한 개발 및 배포모든 코드가 단일 코드 베이스에 있습니다. 변경 사항이 발생할 경우 필요한 모든 코드가 한곳에 존재한다는 의미로.,애플리케이션을 로컬에서 실행해야 할 경우 단일 애플..

WEB

[Next.js] Vite 프로젝트 Next.js 로 마이그레이션

해당 글은 Vite 프로젝트를 Next.js 로 마이그레이션 하기 위해 거쳐야 할 단계를 소개합니다.제가 겪었던 오류도 포함하여 구성이 되어 있습니다.SOPT 35기 앱잼에서 만든  Cocos 프로젝트에 적용하는 내용을 생생하게 담은 글입니다. Upgrading: Migrating from Vite | Next.jsLearn how to migrate your existing React application from Vite to Next.js.nextjs.org넥스트 공식 페이지 내용을 가져왔습니다.  우선 궁금할 수 있는 내용부터 소개해보자면,🤔  왜 잘 구현된 React 프로젝트를  Next.js 로 전환할까? 기존 cocos 프로젝트는 react 용 기본 Vite 로 빌드하고 있습니다. 순전히 ..

WEB

[WebApp] Dart package 오류

📌 개발 환경Vacgom 프로젝트는 Web App 플랫폼이고, 저는 Web 을 담당하여 개발하고 있습니다.App 은 Flutter 로 개발하고 있으며, Web 에서는 bridge 로 연결하여 연동작업 이어가고 있습니다.로그인(카카오) - App약관동의 - Web회원가입 플로우 - Web회원가입 완료 후 홈 이동 - App이렇게 플로우가 진행이 되기 때문에, 회원가입 테스트를 위해서는 App 에서 화면을 띄워서 테스트가 필요했습니다.-> 카카오 로그인 후 나오는 registerToken 이 회원가입 완료 api 연동시 필요하기 때문. registerToken 은 다음과 같이 앱에서 가져오고 있습니다. const bridge = useVacBridge(); const registerToken = bri..

WEB

[WEB] CSR vs SSR 차이 및 특징 ( + SPA, MPA )

두가지를 비교하기 전에!먼저 SPA/MPA 의 차이점을 톺아보자 우리는 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발합니다.  🍀 SPA(Single Page Application) 여기서 SPA 란? SPA는 단일 페이지 애플리케이션으로, 하나의 HTML 페이지에서 모든 콘텐츠를 로드하고 페이지 간 이동 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하는 방식입니다.초기 로딩 시 필요한 리소스를 한 번에 가져오며, 이후에는 JavaScript를 사용해 페이지를 동적으로 변경합니다.  🍀 MPA(Multi Page Application) MPA 란?MPA는 다중 페이지 애플리케이션으로, 각 페이지마다..

WEB

[WEB] React-Query Mutation, invalidateQueries

SOPT WEB YB 35기를 진행하면서 웹 심화 스터디에서 작성한 아티클입니다.React-Query 를 좀 더 자세하게, 다양한 기능까지 알아보고 실습까지 발표를 맡았습니다.작성했던 아티클 첨부합니다!내용은 다음과 같습니다.Mutation 의 구체적인 사용법, Mutation 의 상태값, invalidateQueries를 사용한 데이터 무효화와 갱신, Pagination 및 inFinite Scroll ,병렬 요청과 staleTime/cacheTime    https://vi-olet.notion.site/1415981b4f458059a387d1ad251df5e4?pvs=4 리액트 쿼리 심화 | Notion안녕하세요! YB 김민정입니다 .. 🥺vi-olet.notion.site

WEB

[WEB] ♻️ 데이터 페칭 SSR

https://vi-olet.notion.site/SSR-15c5981b4f4580789dece81f199a64e5 데이터패칭 SSR | Notion안녕하세요 ! 웹 YB 김민정 입니다!vi-olet.notion.site 작성했던 노션 첨부합니다 :)