COCO World

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

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

🍓 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 ..

🍓 문제 설명 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변수로 주어질 때, 실패율이 높은 스테이지부터 내림차순으로 스테이지의 번호가 담겨있는 배열..

🍓 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함..

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

개요 React 라이브러리로 개발된 애플리케이션을 웹페이지에서 처음 로드할때 index.js와 index.html로 인하여 처음 실행된다. 어떻게 진행되는지 간단히 알아보자. src폴더의 index.js 다른 곳에서는 보이지 않지만 웹 페이지가 로드되면 제일 처음 실행되는 파일이다. 작성된 코드가 그대로 실행되는 것이 아니라 코드의 변형된 버전이 실행된다. 프로젝트 설정에서는 스크립트를 통해 코드를 변형 및 최적화하는데 그 작업이 실행되고 있는 것이다. 프로젝트 설정이란? 더보기 예를 들어, import './index.css'; 라는 선언으로 CSS파일을 가져오는 명령어를 실행하였지만 일반적인 자바스크립트 파일에서는 적용되지 않는 명령어임에도 실행되게 해주는 프로젝트 설정이다. 역할 react-dom으..

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