COCO World

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

코드 구조 const Page = () => { const onChanged = useCallback((e) => { e.target.value = e.target.value.trim() const value = e.target.value; onChange(e); },[onChange]); return ( ) } onChange의 역할 : 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공 단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있다. 따라서, onChange 메서드 값의 변경이 있을 때에만 onChanged의 함수가 실행될 수 있도록 useCallback을 통해 onChange를 의존성 배열에 넣어두었고, input의 입..

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

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

🌱 리액트에서의 State(상태) 의미 State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위하여 사용한다 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다 State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다 State는 컴포넌트에 대한 데이터 또는 정보를 포함하는데 쓰이는 리액트 내장 객체이다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있는데 변경될 때마다 컴포넌트는 다시 렌더링해야 사용자에게 변경된 상태값을 보여줄 수 있다. State 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다. 3가지의..

🐼 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)에서 데이터를 조작하며 쿼..

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