서버 사이드 렌더링(SSR) 이해하기

서론 웹 개발 분야에서 서버 사이드 렌더링(SSR)은 요즘 화두가 되고 있는 중요한 주제다. 흔히들 SSR은 웹 페이지의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상하는 데에 큰 도움을 준다고만 알고 있지만 세세히 알아보지 않는다. 때문에 본 포스팅에서는 SSR이 무엇인지, 어떻게 작동하는지, 그리고 어떤 장점이 있는지 알아보자. SSR의 기본 개념 SSR(서버 사이드 렌더링, 이하 SSR)은 서버에서 웹 페이지의 전체 HTML을 생성하여 브라우저로 보내는 방식이다. 이 과정에서 서버는 데이터를 가져오고, HTML을 완성하며, 필요한 모든 자바스크립트와 CSS를 포함한 완전한 페이지를 클라이언트에게 전달한다. 더 간략하게 말하면, SSR은 클라이언트(브라우저)에 전달되기 전에 서버에서 ..

• format_list_bulleted Language/JavaScript
• · 2023. 11. 23.
• textsms

웹 애플리케이션의 꽃 - 비동기(asynchronous) 쉽게 이해하기

서론 여태껏 당연하게 사용해 왔던 '비동기' 혹은 '비동기 통신'. 문득 스스로 '비동기가 뭐야?'라고 질문했다. 명쾌히 대답이 나오지 않았다. 부끄러움은 뒤로 한 채, 그 의미를 다시 한번 알아보고 여태껏 사용해 왔던 비동기 방식에 대해 학습해 보기로 한다. 비동기(Asynchronous) vs 동기(Synchronous) 비동기(asynchronous)는 컴퓨터 프로그래밍에서 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다. 즉, 작업의 완료와 상관없이 프로그램의 흐름이 계속 진행되는 것을 뜻한다. 이는 동기(synchronous) 방식과 대비되는 개념이다. 동기(Synchronous) : 동기 방식에서는 한 작업이 완료될 때까지 기다렸다가 그 다음 작업을 실행한다. 즉..

• format_list_bulleted Language/JavaScript
• · 2023. 11. 20.
• textsms

[JavaScript] Form태그 하위 Input을 Post전송하는 JsFormController 만들어보기

최근 진행한 프로젝트에서 Javascript로 Form태그 하위의 Input 요소들이 유동적으로 추가 및 삭제되는 기획이 많아서, Javascript로 어떻게 하면 유동적으로 첨삭되는 Input태그들과 Form을 손쉽게 POST 전송하여 데이터를 첨삭할 수 있을까 고민하다 JsFormController라는 Class를 만들어보며 나름 뜻깊었고, 본인과 같은 고민을 하시는 분들께 약소하게나마 도움이 되고자 포스팅합니다. javascript를 사용하여 form 태그 하위 요소들을 핸들링하여 fetch 함수로 비동기 post 전송을 실행해보자. 본 예제는 Insert 부분까지만 다루며 update, destory 등은 스스로 해보면서 학습하길 권장합니다. 1. JsFormController.js 이름의 Cla..

• format_list_bulleted Language/JavaScript
• · 2022. 10. 6.
• textsms

[프로그래머스 코딩테스트] Summer/Winter Coding(~2018) - 소수 만들기

Java Script [프로그래머스 코딩테스트] Summer/Winter Coding(~2018) - 소수 만들기 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > Summer/Winter Coding(~2018) > 소수 만들기 문제 설명 및 제한사항 👉 문제 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요.제한사항 👉 제한사항 nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다. nums의 각 원소는 1 이상 ..

• format_list_bulleted Language/JavaScript
• · 2022. 4. 7.
• textsms

[프로그래머스 코딩테스트] 완전탐색 - 모의고사

Java Script [프로그래머스 코딩테스트] 완전탐색 - 모의고사 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 완전탐색 > 모의고사 문제 설명 및 제한사항 👉 문제 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4,..

• format_list_bulleted Language/JavaScript
• · 2022. 3. 31.
• textsms

[프로그래머스 코딩테스트] 찾아라 프로그래밍 마에스터 - 폰켓몬

[프로그래머스 코딩테스트] 찾아라 프로그래밍 마에스터 - 폰켓몬 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 찾아라 프로그래밍 마에스터 > 폰켓몬 문제 설명 및 제한사항 👉 문제 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리,..

• format_list_bulleted Language/JavaScript
• · 2022. 3. 28.
• textsms