전체 글 (60) 썸네일형 리스트형 [Web] CSR (Client-Side Rendering) 해당 포스팅은 ??? 의 하위 문서입니다. -->클라이언트 사이드 렌더링 (CSR)1. 개요이 문서는 CSR(Client-Side Rendering) 렌더링 방식을 학습한 내용을 바탕으로,해당 개념과 내용을 정리하고 복습하기 위한 목적으로 작성되었다.2. SSR 방식의 한계전통적인 SSR(Server-Side Rendering) 은 서버에서 완성된 HTML 을 생성하여 브라우저로 전송하는 방식이었기 때문에 빠른 초기 로딩과 SEO에 유리했지만, 웹 애플리케이션이 복잡해지고 사용자 경험에 대한 요구가 높아지면서 다음과 같은 한계점들이 드러났다.SSR 의 한계모든 사용자 행동마다 전체 페이지 새로고침: 링크 클릭, 폼 제출 등 페이지 전환이 있을 때마다 서버에서 새로운 HTML 을 만들어야 함서버 부하 증가.. [Web] SSR (Server-Side Rendering) 해당 포스팅은 ??? 의 하위 문서입니다. -->1. 개요이 문서는 전통적인 SSR(Server-Side Rendering) 렌더링 방식을 학습하며, 그 과정에서 헷갈렸던 내용을 정리하고 복습하기 위한 목적으로 작성되었다.1.1. 초창기 서버에서의 HTML 생성 방식초창기에는 서버에서 직접 HTML 문자열을 만들어 브라우저로 전송하곤 했다. 서버 코드 안에서 데이터와 HTML을 문자열로 이어붙여 조립하는 식이었다.프로젝트 구조:project/└── server.js// server.jsapp.get('/products', (req, res) => { const products = getProductsFromDatabase(); let html = ''; html += '상품 목록'; product.. [Review] 네이버 부스트캠프 웹・모바일 10기 챌린지 네이버 부스트캠프 웹・모바일 10기의 챌린지 과정을 수료하였습니다. 베이직 후기 에서는 정보 전달 목적으로 작성 하였다면, 챌린지 후기는 어떤 것을 배우고 느꼈는가에 더 중점을 두어 작성해보려고 합니다.정말 상상이상으로 배운 것이 많았던 경험이었습니다.진행 일정: 2025. 07. 14 - 08. 08 (4주)들어가기 앞서한달 간의 여정이 마무리 되었습니다.하루는 길었지만, 한 주 한 주 정말 빠르게 흘러갔다.제가 너무 공감되었던 다른 동료 캠퍼 분의 말입니다.왜 하루가 길다고 느껴졌을까요? 놀랍게도 그것은 실제로 길었기 때문입니다. 누구도 "잠을 줄여서라도 미션을 해결하라!" 라고 이야기하지 않았지만, 내 결과에 만족스럽지 못해서, 더 욕심이 들어서, 계속 계속 잠에 드는 시간을 늦추곤 하였습니다.하지.. [Review] 네이버 부스트캠프 웹・모바일 10기 베이직 네이버 부스트캠프 웹모바일 10기 베이직 과정에 참여 및 완수한 시점에서 작성하는 이 글이,이후의 기수에 도전하고자 하는 분들에게 도움이 되었으면 하는 바람입니다. 아래 기술된 내용 모든 내용은 네이버 부스트캠프에서 공식적으로 작성한 내용이 아니며, 사실과 다를 수 있기 때문에 참고용으로 봐주시길 바랍니다. 접수 기간: 2025. 05. 26 - 06. 09진행 일정: 2025. 06. 23 - 07. 04 (2주) 부스트캠프 웹・모바일 베이직은?베이직은 네이버 커넥트재단에서 진행하는 부스트캠프의 3단계 중 가장 먼저 2주간 진행하는 1단계 프로그램입니다.웹 풀스택(Javascript), 안드로이드(Kotlin), iOS(Swift) 의 세 가지 분야 중 1개를 선택해야 합니다. 저는 웹 풀스택(Java.. [Web] 다국어 웹(i18n Web) 개발하기 1. 개요웹 애플리케이션을 다국어로 제공하는 것은 글로벌 사용자 경험을 고려할 때 필수적인 요소다.이번 프로젝트에서는 i18next 라이브러리를 기반으로 React 앱에서 다국어 전환 기능을 구현하였다. 사용자가 명시적으로 언어를 선택하지 않아도 기본 언어를 자동 인식하고, 사용자가 클릭 한 번으로 언어를 즉시 전환할 수 있도록 useLanguage 라는 사용자 정의 훅(Custom Hook) 을 설계하였다.이 포스팅에서는 지난 포스팅에 이어 해당 사용자 정의 훅의 구조와 구현 방식, 그리고 실제로 어떻게 활용했는지에 대해 정리해보려고 한다.2. 사용자 정의 훅React에는 상태 관리와 생명주기 처리를 보다 선언적으로 구현할 수 있도록 도와주는 훅(Hook) 이라는 개념이 존재한다. useState, u.. [Web] Responsive Web (반응형 웹) 개발하기 1. 개요웹 프론트를 구현함에 있어 반응형 디자인은 다양한 디바이스 환경에서도 일관된 사용자 경험을 제공하기 위해 꼭 필요한 요소라고 할 수 있다. 진행 중인 웹 프로젝트에서 PC, 태블릿, 모바일 사용자 모두에게 최적화된 화면을 제공하고자 반응형 구현에 대해 많은 고민을 하게 되었다.단순히 CSS 미디어 쿼리만으로 해결할 수 있는 영역도 있지만, 때로는 자바스크립트 로직으로 화면 크기를 동적으로 처리해야 하는 상황도 발생한다. 이에 따라 useResponsive 라는 사용자 정의 훅(Custom Hook) 을 직접 만들어 화면 정보를 추적하고, 이를 기반으로 컴포넌트의 동작을 제어할 수 있도록 구성하였다.이 포스팅에서는 해당 사용자 정의 훅의 구조와 구현 방식, 그리고 실제로 어떻게 활용했는지에 대해 .. [Flutter] 한글 Utility 기능 1. 개요소프트웨어를 개발할 때 한글을 자유롭게 다룰 경우가 종종 있었고, 이에 대한 Utilty 기능을 개발하게 되어 이 포스팅에서 소개하고자 한다.Github2. 활용 문법2.1. extension[Dart] extension3. 구현3.1. runes문자열의 각 문자에 대해 기본단위인 유니코드 코드 포인트를 취하여 Iterable 형식으로 반환하는 함수이다. 즉,'안녕'.runes; // (50504, 45397)와 같이 '안' 과 '녕' 문자의 각 유니코드 코드 포인트를 알 수 있다.3.2. 한글 음절의 유니코드 색인유니코드 값이 가장 작은 한글 음절은 '가' 로 0xAC00 의 값을 가진다.int get _index => runes.last - 0xAC00;따라서 위와 같이 나타내면 한글 음절이.. [Baekjoon] 2579번 계단 오르기 S3 2579번 - 계단 오르기1. 문제계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. 과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점수를 얻게 된다.예를 들어 와 같이 시작점에서부터 첫 번째, 두 번째, 네 번째, 여섯 번째 계단을 밟아 도착점에 도달하면 총 점수는 $10 + 20 + 25 + 20 = 75$ 점이 된다.계단 오르는 데는 다음과 같은 규칙이 있다.첫째 줄에 $N (1 ≤ N ≤ 1,000,000,000)$ 이 주어진다.계단은 한 번에 한 계단씩 또는 두 계단씩 오를 수 있다. 즉, 한 계단을 밟으면서 이어서 다음 계단이나, 다음 다음 계단으로 오를 수 있다.연속된 세 개의 계단을 모두 밟아서는 안 된다. 단,.. 이전 1 2 3 4 ··· 8 다음
