웹 애플리케이션 아키텍처의 구성과 흐름

웹 브라우저의 주소창에 URL을 입력하고 사용자가 원하는 페이지를 보기까지 여러 단계의 통신이 이루어진다.이러한 동작에 필요한 각 요소와 그 사이의 상호 작용을 정의해 놓은 것을 웹 애플리케이션 아키텍쳐라고 부른다. 위 그림은 웹 애플리케이션 아키텍쳐를 도식화한 것이다.다양한 웹 애플리케이션 아키텍쳐가 존재하며, 각 요소의 역할과 상호작용을 이해해 웹의 규모와 목적에 따라 적절한 웹 애플리케이션 아키텍처를 설계할 수 있다.적합한 아키텍처를 통해 실제 웹 구현 단계에서 발생할 수 있는 위험을 줄이고 안정적으로 웹을 운영할 수 있게 된다! 아키텍처를 구성하는 대표적인 요소들을 정리해보자  웹 애플리케이션 아키텍쳐웹 클라이언트웹 클라이언트는 사용자의 요청(Request)을 서버로 보내고, 서버의 응답(Resp..

• format_list_bulleted 네트워크
• · 2025. 1. 30.
• textsms

새 프로젝트 시작!

드디어 업무가 조금 안정이 돼서.. 해보고싶었던 프로젝트를 시작했다!!아마 띄엄띄엄 제작하게 될 것 같은데 차근차근 기록하면서 진행해보자 프로젝트 세팅설치 완료next.js 14 (app router)tailiwndzustandtanstack-query 세팅 전supabase (만약 스프레드시트로 충분하다면 사용X)prettier구글 스프레드시트 apimvp 목표와 그 이후 디벨롭시킬 기능 분리하기1차 목표랜딩페이지 -> 메인 페이지로 이어지게하기스프레드시트에서 데이터 불러오기데이터 -> 컴포넌트에 넣어서 화면에 띄워주기 (우선은 그리드 형태) 컴포넌트 상호작용은 위 세가지 세팅 이후에 시작하고 세가지 먼저 빠르게 완성해보자그 전에 다른 거 작업하지 않기!디자인 이상한 건 우선은.. 신경쓰지 않기!!!!

• format_list_bulleted 개인 프로젝트/뿌셔뿌셔 (개인)
• · 2025. 1. 25.
• textsms

Colab + python 시작하기

Colab온라인에서 파이썬 데이터분석을 할 수 있는 환경https://colab.research.google.com/notebooks/welcome.ipynb Welcome To ColabRun, share, and edit Python notebookscolab.research.google.com 실행 단축키: Cmd + Enter (Ctrl + Enter)  pythonlist: 순서(인덱스)가 있는 데이터들의 모음집 선언과 할당a_list = [1, 2, 3, 4, 5]b_list = [1, 2, "10", [3]] # 다양한 자료형이 하나의 리스트에 할당될 수 있다  dictionary: key-value 쌍으로 이루어진 데이터 모음집 선언과 할당김철수 = {'height': 183, 'weig..

• format_list_bulleted 데이터분석
• · 2024. 12. 23.
• textsms

피마 인디언 당뇨병 분석

분석할 내용- 애리조나 사막지역 원지민인 피마 인디언이 세계에서 당뇨병 발생률이 가장 많은 종족으로 조사됨.- 피마 인디언은 사막지대에 살다보니, 조금만 먹어도 잘 생존할 수 있도록, 음식을 축적해놓으려는 유전자를 가지게 됨.- 하지만 식생활이 서구화되며 비만을 초래해 각종 성인병을 유발한 것으로 예측 => 당뇨병 발병에 가장 큰 영향을 미치는 요소는 글루코스(혈당) 수치라고 가설을 세움  시각화 결과글루코스 수치가 가장 관련이 높은 것 확인

• format_list_bulleted 데이터분석
• · 2024. 12. 20.
• textsms

데이터 분석의 기본 구조

타이타닉 생존자 지불 요금과 생존률 간 상관관계 파악하기 예제로 추가설명 1. 문제 정의 및 가설 설정하기- 생존자 중 부유한 인물이 그렇지 않은 인물보다 많았음- 가설 1: 요금은 생존과 상관이 있을 것이다- 가설 2: 탑승 등급이 생존과 상관이 있을 것이다 2. 데이터 분석 기본 세팅하기- 분석할 데이터에 빈 값이 있어 필터링하는 등의 전처리 과정- 분석에 활용할 도구 세팅하기 3. 데이터 분석하기 4. 분석 결과 시각화하기- 그래프 등 분석 결과를 파악하기 쉬운 방식으로 시각화, 데이터 라벨링 등 5. 최종 결론 내리기

• format_list_bulleted 데이터분석
• · 2024. 12. 18.
• textsms

[Next.js / Tanstack Query] 내 prefetchQuery가 작동하지 않는 이유

청첩장 제작 프로젝트를 진행하며 메인 웨딩사진을 꾸밀 수 있는 스티커 기능을 담당했습니다. 이 때 스티커 에셋을 데이터베이스에서 받아오는 데 약 2초의 시간이 소요되었고, 이를 개선하기 위해 Tanstack Query의 prefetchQuery를 사용해 청첩장 제작 페이지 접속 전 데이터를 미리 가져오는 방식을 도입했습니다. 하지만 예상과 달리 prefetch를 위한 설정을 모두 끝내고 다시 스티커 목록을 확인해도 여전히 오랜 기다림이 필요했습니다. 이 글에서는 문제를 해결하기위한 과정과 방법을 소개하고자 합니다. 문제 상황 - 프리패치 적용 후에도 긴 로딩이 해결되지 않음const queryClient = new QueryClient({ defaultOptions: { queries: { ..

• format_list_bulleted Next.js
• · 2024. 11. 19.
• textsms