COCO World

⛄ Sass (Syntactically Awesome Stylesheets)란? : 스타일 시트를 생성하기 위한 확장된 CSS 프리프로세서로, CSS의 한계를 극복하고 코드의 재사용성과 유지보수성을 향상시키기 위해 만들어졌다. 주로 웹 개발에서 스타일링을 더 효과적으로 관리하고 구조화하기 위해 사용한다. 그치만 장점이 곧 단점이 되기도 하기 때문에 프로젝트의 목적성을 고려하여 투자해야한다. 장점 중첩을 지원하여 코드의 가독성을 향상시키고, 중첩 구조는 HTML 요소의 계층 구조와 비슷하게 코드를 작성할 수 있도록 도와준다 변수를 사용하여 스타일에서 사용되는 값을 중앙에서 관리할 수 있어 유지보수성이 향상되고, 재사용이 가능하다. 여러 개의 파일로 스타일을 나누고, '@import'를 통해 불러와 사용하기..

🪴 들어가기에 앞서 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는 하나의 파일에 자바..

🍉 개요 SQL과 noSQL은 데이터베이스를 선택할 때 고려해야하는 사항으로서 데이터 구조이며, 프로그래밍 언어이다. SQL을 알아야하는 이유는 대량의 데이터를 효율적으로 다루기 위해선 어떻게 관리하고, 데이터를 가공하고 구조화하는 방법을 위해서이다. 스키마란? 더보기 Schema는 데이터베이스의 구조와 제약조건에 관해 전반적인 명세를 기술한 것이다. 개체의 특징을 나타내는 속성(Attribute), 속성들의 집합으로 이루어진 개체(Entity), 개체 간 존재하는 관계(Relationship)에 대한 정의와 이들이 유지해야할 제약조건들을 기술한 것이다. 🍉 SQL(Structured Query Language) : 관계형 데이터베이스 관계형 데이터베이스 관리 시스템(RDBMS)에서 데이터를 조작하며 쿼..

🍙 들어가기에 앞서 HTTP와 HTTPS는 둘다 인터넷을 통해 데이터를 전송하기 위한 프로토콜이지만 데이터 전송의 보안과 관련하여 중요한 차이점을 가지고 있다. 2014년 구글에서는 HTTP를 HTTPS로 바꾸라고 권고한다. HTTPS를 사용하는 웹 사이트에 대해서 검색 순위 결과에 약간의 가산점을 주겠다고 발표했는데 이는 사실상 HTTP를 사용하는 웹 사이트에게 벌점을 주는 것과 마찬가지였다. HTTP에서 HTTPS로의 전환은 좀 더 번거롭고, 보안측면에서 더 우수한 특징을 가지고 있다. 이제 두 가지의 차이점을 살펴보자. 🍙 HTTP (Hypertext Transfer Protocol) 인터넷에서 웹 페이지, 이미지, 동영상 등의 리소스를 전송하기 위해 사용되는 프로토콜이다. HTTP는 클라이언트와 ..

💙 들어가기에 앞서 쿠키와 세션은 백엔드와 프론트엔드 개발자 모두 접해야하는 필수 개념이고, 초반에 개념을 이해해놓지 않으면 헷갈리기 쉽다. 또한 두 가지 개념을 모두 알아야 구현에도 유용하다. 그러기 위해선 위의 쿠키와 세션의 적용 과정과 필요성을 알아보자. 💙 쿠키와 세션을 사용하는 이유 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(갱신..