◻ 전체 글 수 :

[ReactJS] 관심사의 분리와 Custom Hook

관심사의 분리 각각의 관심사에 따라 코드를 분리하는 기법 코드가 하나의 관심사만 신경쓰도록 분리하는 것 관심사의 분리의 특징 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다. 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다. 코드의 기능 테스트 또한 쉬워진다. 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다. 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다. 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다. KISS 원칙 Keep It Simple, Stup..

[Python] 변수 Scope (전역 변수와 지역 변수) 에 대한 이해

예시 1 _list = [1, 2, 3, 4] def sum_all(): sum_val = 0 for elem in _list: sum_val += elem return sum_val total_sum = sum_all() print(total_sum) print(sum_val) 10 NameError: name 'sum_val' is not defined 전역 변수는 굳이 인자로 넘기지 않아도 함수 내에서 잘 작동한다. 즉, 전역 변수는 어디에서나 쓸 수 있다. 지역 변수는 내부 Scope를 벗어나면 증발하여 더 이상 접근할 수 없다. 즉, 지역 변수는 어디에서나 쓸 수 없다. 예시 2 코드 1. _list = [1, 2, 3, 4] def modify(): _list[0] = 10 modify() f..

[ReactJS] Dynamic Routing & Query String

Dynamic Routing (동적 라우팅) 정적 Routing Routing을 설정하는 가장 기본적인 방식은 정적 Routing이다. 정적 라우팅은 Router 컴포넌트에서 미리 프로젝트에 사용할 경로들과 보여줄 컴포넌트들을 모두 정의해두는 방식이다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { return ( ) } export default Router; 하지만 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 Routing 방식만으론 처리하기 힘든 작업이 존재할 수 있다. (Route를 유연하게 정의할 수 없으므로) 동적 라우팅 ..

[ReactJS] Component의 분리와 재사용 (관심사의 분리)

컴포넌트 분리 관심사의 분리 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 말한다. 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인 원칙이다. 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다. 컴포넌트를 분리하는 이유 React에서 컴포넌트는 다양한 역할을 한다. 어떤 컴포넌트는 UI를 표현하고자 하고, 또 어떤 컴포넌트는 동작하는 로직을 담을 수 있다. 위의 두 역할을 모두 담는 컴포넌트 또한 존재하고, 하나도 담지 않는 컴포넌트도 존재할 수 있다. 이처럼 컴포넌트는 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 얼마든지 복잡해질 수 있다. 따라서 '관심사의 분리'..

[ReactJS] 상수 데이터 & Mock Data + fetch 매소드

상수 데이터란? 변하지 않는 데이터 React에서 데이터는 UI이다. 시간이 흐름에 따라 변하는 변수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아와야 한다. 반면 변하지 않는 상수 데이터로 UI를 만들 땐 백엔드 서버에서 데이터를 받아올 필요가 없다. 상수 데이터 활용하기 /* App.js */ import React from "react"; const MENU_LIST = [ { id: 1, menuName: "New Repository" }, { id: 2, menuName: "Import Repository" }, { id: 3, menuName: "New Gist" }, { id: 4, menuName: "New Organization" }, { id: 5, menuName: "New ..

[ReactJS] Side Effect와 useEffect

Side Effect란? Side Effect란 부작용이다. 부작용 === 부수효과 부수효과 : 주요한 효과에 따라서 발생하는 부수적인 효과 부작용이란 용어 자체는 부정적인 의미를 내포하지 않는다. 단지 부수적으로 발생하는 효과를 의미하는 단어이다. 프로그래밍에서 Side Effect (부작용) 란? 코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과 특히 프로그램을 구성하는 가장 작은 단위인 함수에서 자주 사용되는 용어 함수의 본질적인 역할 (주된 효과) Input을 받아서 Output을 산출하는 것 Input => Output 함수의 부작용 (Side Effect) Input을 받아서 Output을 산출하는 것 외의 모든 행위 함수에서 함수 외부의 값을 읽어오는 행위 함수에서 함수 외부의 값..

[ReactJS] Hook & State & Props

Hook이란? Hook은 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미한다. 미리 만들어 둔 함수를 가져와서 사용을 해 주는 것이기 때문에 Hook이라는 이름을 사용한다. Hook의 모음을 Hooks라 한다. Hook의 등장 배경 기존엔 클래스 컴포넌트만을 사용하여 컴포넌트를 생성하였는데, 함수 컴포넌트의 장점으로 인해 이를 사용하고자 하는 니즈가 점점 많아지게 되었다. 함수 컴포넌트의 장점 : 선언하기 편리함, 직관적, 메모리 자원을 덜 사용함 이로 인해 클래스 컴포넌트에서만 가능했던 기능을 함수 컴포넌트에서도 사용하고자 Hook이 등장하였다. Hook의 특징 함수 컴포넌트에서만 사용 가능하다. Hook의 이름..

[Unity] 유니티 (Unity) 소개 및 설치

유니티 소개 및 설치 요즘 국내 인디 게엠 혹은 3D 게임의 80프로 이상이 유니티를 쓴다. 유니티는 게임 외에도 여러 분야에서 활용된다. 유니티를 선택하는 이유 배우고 사용하기 쉬운 편이다. 소스가 차단되어 있고 별 기능이 보이지 않아 처음에 학습하기 쉽다. 가격이 저렴하다. 거의 모든 기능이 풀린 상태로 무료이다. 멀티플랫폼 지원이 제일 강력하다. 단, 결제 기능과 같은 다른 기능을 붙일 때는 플랫폼 별로 차이가 존재한다. 개발 속도가 빠르다. 바로 구현하고 바로 확인 가능하다. 그럼 유니티는 만능일까? 아니다. 잘 사용하지 못하면 효율을 내기 어렵다. 그리고 C#을 쓰기 때문에 느리다. 유니티를 쓰기 전에 기본기를 익혀야 한다. 수학, (물리), ... 즉, 프로그래머로서 기본 소양을 갖추고 유니티..

[컴퓨터 구조] 2진수 체계

디지털 시스템 디지털 시스템 : 0과 1을 조합해서 여러가지 정보를 얻어낼 수 있는 시스템 아날로그 시스템 (연속적) → 디지털 시스템 (이산적) 이산 정보 하나의 요소를 특정지을 수 있는 정보 유한개의 원소로 이루어진 모든 집합 ex) 10진 자리수, 알파벳 26개 문자, 체스판 64개의 칸, .. Signal 이산적인 요소를 물리적 양으로 표현한 것 ex) 전얍의 양, 전류의 양 이산 정보 요소를 2진 코드(0과 1)로 불리는 비트(bit)들의 그룹으로 표현 → 디지털 정보 비트(bit) : 데이터를 저장하는 물리적인 소자 2진수 (+ 8진수, 16진수) [10진수] 7392 = (7 * 10^3) + (3 * 10^2) + (9 * 10^1) + (2 * 10^0) [2진수] 11010.11(2) ..

[ReactJS] SPA & Routing

SPA & Routing SPA (Single Page Application) 의 개념 SPA는 페이지가 하나인 웹 어플리케이션을 의미한다. 여기서 페이지란 html 파일을 뜻하기 때문에, SPA는 웹 사이트 전체에 HTML 파일이 하나인 웹 어플리케이션이다. MPA와 달리, SPA는 html이 하나 뿐이므로 여러 페이지(UI)를 하나의 페이지에서 보여주기 위해 Routing 기능이 필요하다. Routing의 개념 SPA에서 경로에 따라 다른 페이지를 브라우저 화면에 보여주는 것을 Routing이라 한다. React 자체에는 Routing 기능이 없기 때문에, React-Router이라는 라이브러리를 설치해 사용해야 한다. React-Router 설치 명령어 : npm install react-route..