본문 바로가기

개발 상식 🥕11

[WEB] CORS와 SOP의 개념 및 CORS 에러 해결방법 들어가기 전에 알아두어야 할 용어 1) 출처(Origin) 우리가 어떤 사이트를 접속할때 인터넷 주소창에 우리는 URL이라는 문자열을 통해 접근하게 된다. 이처럼 URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열 같지만, 사실은 위와 같이 여러개의 구성 요소로 이루어져 있다. Protocol(Scheme) : http, https Host : 사이트 도메인 Port : 포트 번호 Path : 사이트 내부 경로 Query string : 요청의 key와 value값 Fragment : 해시 태그 여기서 출처(Origin)란 ? Protocol + Host + Port 👉🏻 즉, 출처(Origin) 라는 것은 Protocol 과 Host 그리.. 2023. 8. 18.
빌드(Build) / 배포(Deploy) / 컴파일(Compile) / 링크(Link) 개념 및 차이점 서버에 기능을 추가하기 위해서는 개발자가 로컬 PC에서 개발을 하고 테스트까지 진행한 뒤에 문제가 없을 경우 사용자가 사용할 수 있도록 수정된 코드를 실서버에 반영해야 합니다. 서버에 반영을 하는 것을 "배포(Deploy)"라고 하고 배포하기 위한 과정을 "빌드(Build)"라고 합니다. 컴파일(Compile) 이란 ? 인간이 이해할 수 있는 고급 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환시키는 과정을 말하며, java의 경우 컴파일의 결과로 자바가상머신(JVM)에서 실행가능한 ".class" 파일이 생깁니다. 컴파일과 빌드와 같다고 생각하실 수 있지만, 컴파일은 빌드를 진행하는 과정의 일종의 하나인 Task 입니다. 즉, 소스코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업.. 2023. 8. 12.
클라이언트 사이드 렌더링(CSR) / 서버 사이드 렌더링(SSR) / 정적 사이트 생성(SSG) 비교 및 장단점 정리 Client-Side Rendering(CSR) 클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 사용자에게 보여주는 방식이다. CSR는 React, Vue, Angular 와 같은 single-page aplication (SPA) 에서 주로 사용되는 렌더링 방식인데, 즉 하나의 index.html 파일에 자바스크립트로 각 페이지를 렌더링한다. CSR 장점 초기에 웹사이트를 렌더링 후에 페이지간의 이동이 빠르다. 새로고침이나 화면 깜빡임 등과 같은 현상이 발생하지 않기 때문에 UX에 엄청난 이점을 준다. 서버가 클라이언트 뷰(View) 단에서 처리할 일을 신경쓰지 않아도 된다. CSR 단점 유저는 번들링이 완료된 JS 파일을 모두 다운로.. 2023. 8. 12.
클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SCR)의 차이 먼저 클라이언트-서버 간 통신에서 HTML을 반환하는 웹 서버의 대략적인 흐름은 다음과 같다. 정적 페이지(HTML/CSS/JS로 이루어진 웹 문서) 반환 👉🏻 DB 연동 및 API 요청 필요성 대두 👉🏻 동적 페이지(정적 페이지 + 서버에서의 비지니스 로직이 가미된 문서) 반환 정적 웹페이지(static web page) : 정적페이지란 항상 같은 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청하였을 때, 서버 안에 이미 만들어져 있는 HTML 문서를 사용자에게 보여주는 경우) 동적 웹페이지(dynamic web page) : 동적페이지란 요청에 대해서 각각 다른 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청했을 때, 서버는 사용자에 맞는 HT.. 2023. 4. 20.
프레임워크(Framework)와 라이브러리(Library)의 차이 1) 프레임워크란 ? 사용자가 기능 구현에 집중하여 개발할 수 있도록 '일정한 형태'와 '필요한 기능'을 갖추고 있는 골격 및 뼈대를 의미합니다. 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 뼈대(구조)를 제공하며, 사용자는 이러한 뼈대 뒤에서 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통적인 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 구현하면 됩니다. ex) Spring, Django, Flask, Android, Cocoa Touch, Angular, Vue.js 등 2) 라이브러리란 ? 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임으로 쉽게 말해 특정 기능을 .. 2023. 4. 19.