COCO World

🪴 들어가기에 앞서 MVC, MVP, MVVM 패턴은 소프트웨어 개발에서 주로 사용되는 아키텍처 디자인 패턴이므로, 이정도는 숙지하고, 흐름이 어떻게 진행되는지 알아보고, 각각의 장단점을 파헤쳐 보자. 🪴 디자인 패턴이란 ? 소프트웨어 디자인에서 공통적인 문제를 해결하기 위해 재사용이 가능한 해결책이다. 이러한 패턴은 개발자들 사이에서 검증되고 테스트된 설계 아이디어와 방법론의 집합을 의미하는데, 디자인 패턴을 사용하면 소프트웨어 시스템을 구축하고 유지보수 하데 도움이 되는 구조화된 접근 방식을 제공한다. 1. 디자인 패턴의 세 가지 범주 생성(Creational) 패턴 : 객체의 인스턴스화 과정을 다루는 패턴이다. 이러한 패턴은 객체를 생성, 조립 및 표현하는 방법에 초점을 둔다. 대표적인 예로 싱글턴..

🍡 Redux에 대해 알아보자 개념 상태 관리를 하기 위한 라이브러리로서, 상태관리 로직을 컴포넌트 밖에서 처리하여 State를 보다 효율적으로 관리하기 위한 목적을 가지고 있다. 리덕스를 사용하는 이유는 상태 관리를 하는 이유부터 알아본다면 훨씬 이해하기 쉽다. 상태 관리를 하는 이유? 2023.06.11 - [Front-End/React] - [리액트/React] 상태 관리는 왜, 어떻게 하는가? 사용 이유 Redux를 사용하는 이유는 상태 관리를 State를 전역적(Global)으로 관리하기 위해 사용하는데 이는 위에 개념에서 아시다시피 컴포넌트 밖에서 처리하기 위한 이유와 동일하다. 전역에서 사용하는 목적은 방대하게 커지는 프로젝트 규모에 의하여 리액트 특유의 단방향 데이터흐름의 문제점인 Pr..

🐼 JSX의 의미 자바스크립트로 안에 있는 HTML 코드로서 자바스크립트 XML을 의미한다. HTML은 결국 XML이라고 할 수 있다. 화면 뒷단에서 실행되는 변환 과정이 이루어지는 파일이다. XML이란? 더보기 eXtensible Markup Language의 약어. W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. 마크업 언어는 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지이다. 가장 친숙하고 흔하게 접할 수 있는 마크업 언어로 HTML이 있다. JSX 특징 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다 JSX는 하나의 파일에 자바..

🧸 개요 렌더링이란? HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 말한다. 즉 브라우저가 서버로부터 요청받은 내용을 전달받아 ㅂ라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다. 이러한 브라우저 렌더링은 '서버사이드 렌더링(SSR)'과 '클라이언트사이드 렌더링(CSR)'로 나뉜다. 🧸 서버사이드 렌더링(Server-Side Rendering, SSR) 웹 어플리케이션 렌더링 방식 중 하나이다. 클라이언트와 서버 간의 협력적인 렌더링 방식으로, 서버에서 초기 HTML을 생성하고 클라이언트에게 전달하는 방식이다. 즉, 서버가 웹 페이지의 완전한 HTML을 생성하고 클라이언트에게 보여준다. 이렇게 하면 클라이언트는 초기 로딩 시에 완전한 페이지를 받아볼 ..

💙 들어가기에 앞서 쿠키와 세션은 백엔드와 프론트엔드 개발자 모두 접해야하는 필수 개념이고, 초반에 개념을 이해해놓지 않으면 헷갈리기 쉽다. 또한 두 가지 개념을 모두 알아야 구현에도 유용하다. 그러기 위해선 위의 쿠키와 세션의 적용 과정과 필요성을 알아보자. 💙 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키 또는 세션 한가지를 선택하여 적용합니다. 그렇다면 HTTP프로토콜의 어떤 특징 때문일까? 1. Connectionless 프로토콜 : 비연결지향 클라이언트가 서버에 요청(Request)을 했을때, 그 용청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다. HTTP 1.1 버전에서 연결을 유지하고, 재활용 하는 기능이 Default로 추가되었는..

🌵 REST란 무엇인가? ■ REST의 의미 REST(Representational State Transfer)의 약자로서 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미하는 소프트웨어 프로그램 아키텍처의 한 형식이다. 기술적으로 의미를 파악하자면, HTTP URI(Uniform Resource Identifier)을 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH )을 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. CRUD Operation이란? CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신..

리액트 개발환경에서 백엔드와 협업한 경험이 있다면 CORS 에러 한번쯤은 만나본 기억이 있을것이다. 그렇다면 CORS란 무엇인가? 🎈CORS란? : 직역하면 교차 출처 리소스 공유라고도 하며 Cross-Origin Resource Sharing(CORS) 라고 읽고 쓴다. 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. EX) https://eunbin.com의 프론트엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://ex.com/code.jso..

1. SPA와 MPA 렌더링이란? : 웹 애플리케이션 상에서 데이터를 표시하는 행위 🌻 SPA(Single Page Application) SPA는 한 개의 페이지로 구성된 애플케이션으로 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 읽음으로써 사용자와 소통하는 웹 앱이다. 이러한 방식은 연속되는 페이지가 렌더링하면서 주는 불편함을 줄여주기 때문에 사용자 경험의 간섭을 막아주고 더욱 자연스럽게 동작하도록 만들어준다. 🌻 SPA의 특징 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 받아온다 이후 새로운 데이터 요청이 있을 때 필요한 데이터만 전달받아서 페이지를 갱신하기 때문에 반응성이 좋다 때문에 SPA는 CSR(Client Side Rendering)방식으로 렌..