지도 기능을 구현하기 위해서 데이터베이스에 위도, 경도 좌표 저장이 필요했다.효율적으로 좌표를 저장하기 위해서 "공간데이터" 타입을 설정해줄 수 있다.공간데이터를 적용하기 전에, 공간데이터 타입의 종류와 데이터베이스에 따른 차이점 등을 알아보자.R-tree 자료구조 기

에어비엔비에서 아무런 검색값 없이 검색하게 되면 내 근처의 숙소 리스트를 보여줍니다.그런데 저는 로그인을 하지 않았고, 위치 허용 여부를 선택한 적 없습니다.그런데 어떻게 내 근처의 숙소 리스트를 보여줄까요?에어비엔비의 경우 URL 파라미터의 값으로 상태관리를 주로 하

리액트에서의 상태는 시간이 지나면서 변할 수 있는 동적 데이터이며, 값이 변경될 때마다 컴포넌트의 렌더링 결과물에 영향을 준다. 리액트 앱 내의 상태는 지역 상태 / 전역 상태 / 서버 상태로 구분할 수 있다.리액트 내부 API만을 사용해서 상태를 관리할 수 있지만 성

리액트에 훅이 추가(리액트 16.8 버전)되기 이전에는 클래스 컴포넌트에서만 상태를 가질 수 있었다. componentDidMount, componentDidUpdate와 같이 하나의 생명주기 함수에서만 상태 업데이트에 따른 로직을 실행시킬 수 있었다.리액트 훅이 추가

디바운스는 짧은 시간 동안 동일한 이벤트가 연속적으로 발생할 때, 마지막 이벤트만 실행되도록 하는 기법으로 성능 최적화에 자주 사용된다.많은 이벤트가 발생하는 상황에서 불필요한 함수 호출을 줄이고, 최종 입력이나 동작만 반영하고 싶을 때 활용된다.1) 검색 자동완성사용

학습목표: OSI 7계층에서 각각 어떤 역할을 하는지 명확하게 파악한다. > - 각 계층의 데이터 전송 단위 / 목적지 식별 방법 / 물리적 하드웨어에 대해 이해한다. 이전까지 OSI 7 계층 중에서 응용계층을 중점적으로 학습하고 구현했었다. 웹 개발을 하다보면 사용

학습 목표: 민감한 정보를 담은 쿠키를 안전하게 보호하기 위해 브라우저 레벨부터 서버 속성까지 다양한 방법을 학습한다.쿠키를 저장하는 공간을 전통적으로 쿠키 통(COOKIE_JAR)라고 부른다.브라우저는 헤더로 Set-Cookie를 받으면 COOKIE_JAR를 업데이트

학습 목적: WS 와 WAS 를 명확하게 책임/역할 별로 구분하는 것학습 목적을 달성하기 위해 정적 컨텐츠는 Web Server, 동적 컨텐츠는 WAS가 담당하도록 했습니다. 쉽게 말해, WAS 앞단에 Web Server를 하나 둬서 효율적으로 서버 트래픽을 관리하는

단순 HTML <form> 전송 방식과 fetch API 전송 방식은 기능적으로는 "서버로 HTTP 요청을 보낸다"는 점에서 같지만, 네트워크 계층 동작 방식과 브라우저 처리 관점에서 중요한 차이가 있다.핵심 차이점 ◦ 요청 생성 주체: 브라우저 자동 생성

목차 Node.js는 서버가 아니다. 그럼 어떻게 서버를 만들 수 있는걸까? net 모듈 - 웹 서버 만드는 도구 서버 객체 생성하기 HTTP 응답 형식 직접 작성해보기 HTTP 요청 구조에서 method, url 추출 결론 및 향후 목표 1. Node.js는 서버가

코드 일관성 유지: 코드 스타일 가이드를 준수하여 일관성 있는 코드 작성 가능버그 및 오류 방지: 잠재적인 버그나 오류를 사전에 찾아내고 수정할 수 있다.팀 협업 강화: 팀원 간에 코드 품질을 통일시켜 협열 효율을 높일 수 있다.eslintrc는 더 이상 사용되지 않는

ERD(Entity Relationship Diagram)란? ER 다이어그램은 실세계에 존재하는 물건을 여러 가지 속성을 가진 엔티티로 파악하고 엔티티(entity) 사이의 상호 관계를 관계(relationship)로 표현한 그림이다. ER 다이어그램의 속성은 데이터

이벤트와 핸들러의 기본 개념 "이벤트"는 우리가 웹 페이지에서 마우스를 클릭하거나 키보드를 누르는 것과 같은 사용자 행동, 또는 인풋 창에 포커스가 맞춰지거나 문서 로드가 완료되는 것과 같이 특정 시점에 발생하는 모든 행동을 의미한다. 이러한 이벤트가 발생했을 때 특정

로그인 기능을 구현할 때, 서버는 각 요청이 들어올 때마다 사용자가 로그인 인증 과정을 거쳤는지 확인(인증)하고, 로그인이 필요한 기능의 허용 여부를 결정(인가)해야 한다.우리가 사용하는 브라우저는 HTTP 통신을 통해 클라이언트와 서버가 통신을 한다. 그런데 이 HT

다중 페이지로 이뤄져있어 변경사항이 있을 때마다 서버로 페이지를 요청해서 새로 렌더링 한다. 웹 애플리케이션의 역사를 보자면, 초창기 웹은 텍스트 중심의 단순 문서였다. 따라서 MPA(Multi-Page Application) 방식으로 구현되었다. MPA는 페이지 변경

html에서 이미지를 업로드하기 위해서는 input 태그의 type="file"을 사용하면 된다.그리고 addEventListener로 이벤트 변경이 일어나는걸 감지해서 img 태그의 profileImage.src에 해당 파일을 삽입한다.그럼 이미지 파일을 선택하고 업

EJS는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다.일반 html 파일은 무조건 <script> 태그를 사용해서 분리시켜야하지만, EJS는 지정된 태그를 통해 스트립트 내용을 하나의 요소처럼 사용될 수 있게 한다.또한, 서버에서 보낸 변수를 가져와 사

elements가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 레이아웃 작업이라고도 하며, 렌더링 과정이라고도 한다. 엘리먼트는 위에서 아래로 순서대로 블록을 이루며 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하기 때문에, 이를 다양한

HTML 문서의 기본 구조는 다음과 같다. 이렇게 작성하는 건 '웹 콘텐츠를 작성할 준비가 되어있는 상태'로 만드는 작업이다.HTML 코드를 보면 계층적이다.브라우저는 HTML 정보를 tree 구조로 보관하고 있다.HTML은 적절한 tag를 사용해서 구조를 만든다.ht