hahagarden의 블로그

Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 사용하거나 컴포넌트 안에서 상태 변경 로직이 구현되어 코드가 복잡할 때가 있다. Redux는 상태 또한 컴포넌트처럼, React 컴포넌트로부터 분리하여 다룬다. Redux에는 세 가지 원칙이 있다. 1. Single Source of Truth 동일한 데이터는 항상 같은 곳에서 가져와야 한다. Redux의 Store가 단 한개만 존재한다는 것과 관련있는 것이다. 2. State is read-only React의 상태는 상태변경함수를 통해서만 변경..

URL과 URI 브라우저의 주소창에 입력한 URL은 인터넷에서 웹페이지, 이미지, 비디오 등 리소스가 존재하는 위치를 나타낸 문자열이다. URL는 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분한다. scheme은 통신방식(프로토콜)을 결정하고 hosts는 웹 서버의 이름이나 도메인, IP 등의 주소가 온다. url-path는 CLI에서 파일에 접근하는 것처럼 웹 서버에서 지정한 루트 디렉토리부터 시작하여 파일의 경로와 파일명을 나타낸다. URI는 Uniform Resource Identifier의 줄임말로, URL의 기본 요소에 더해 query와 frag..

프로그래밍 패러다임 건물을 지을 때에 다양한 건축공법이 있다. 프로그래밍에도 어떻게 프로그램을 작성할 것인지 방법들이 여러 가지 있는데, 프로그래밍 패러다임이라고 부른다. 프로그래밍 패러다임에는 함수형 프로그래밍, 절차 지향 프로그래밍, 객체 지향 프로그래밍 등이 있다. 오늘은 객체 지향 프로그래밍에 대해서 알아보자. 객체 지향 프로그래밍 객체 지향 프로그래밍은 하나의 청사진을 만들고 그 청사진으로 객체를 만드는 방법이다. 이 때, 이 청사진을 클래스, 청사진으로 만든 객체들을 인스턴스객체 또는 인스턴스라고 부른다. function Monster(name, hp, att, xp) { this.name = name, this.hp = hp, this.att = att, this.xp = xp; } Mons..

Git과 Github 몇 년 전까지만 해도, 한글이나 엑셀 큰 파일을 작업하다가 중간에 컴퓨터가 멈추거나 꺼지면 바로 좌절이었다. 다 날라갔기 때문이다. 또는 다른이름으로 저장을 해야하는데 실수로 저장을 눌러서 이전 데이터가 날아가 버린 적도 있다. 이럴 때 중간중간 저장이 가능하고 기록할 수 있고 과거의 시점에서 이전 데이터를 사용할 수 있도록 버전을 관리해주는 것이 git이다. Git은 프로젝트의 버전을 관리할 수 있게 하는 시스템이고, github는 버전관리를 한 프로젝트들을 관리하게 해주는 호스팅 서비스이다. Git은 버전관리시스템 중 하나로, 버전관리시스템은 Perforce, Apache Subversion, Plastic SCM 등이 있다. Git은 리눅스 커널을 개발한 리누즈 토발즈가 만든 ..

var, let, const 이전에는 var을 이용해서 변수를 선언하였는데 ES6에서 let과 const가 추가되었다. 다음의 var 문제점들로 인해 let과 const의 사용이 권장된다. var의 문제점 재선언이 가능하다. var greeting = "Nice to meet you."; var greeting = "I'm back."; var greeting = "Goodbye."; console.log(greeting); // Goodbye. let greeting = "Nice to meet you."; let greeting = "I'm back."; let greeting = "Goodbye."; console.log(greeting); // SyntaxError: Identifier 'gree..

Presenters스터디 시간에 DOM을 발표하며 HTML의 script태그에 대한 이야기를 했다. script태그로 자바스크립트를 import할 때에는 DOM조작을 위해 body태그 내부의 하단에 삽입해야 한다는 주제였다. 어떤 스터디원 한 분이 테일윈드나 폰트 등을 사용할 때에도 script 태그를 사용하는데 그 때에는 head에 넣어도 된다고 이야기를 하셨다. 그렇다. script태그는 자바스크립트파일 뿐만 아니라 다른 경우에도 썼는데 조금 더 알아보니 CDN이라는 개념이 나왔다. (script는 '각본, 대본'이라는 뜻과 같이 컴퓨터가 수행할 명령들의 집합이다.) CDN 사용 사례 처음에는 Fontawesome같은 아이콘을 임포트하는 방식인 줄 알았다. 그런데 React에도 CDN이 있었다. CD..

스코프 스코프란 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는(접근할 수 있는) 유효범위가 결정된다. 스코프는 식별자가 유효한 범위이다. 위 그림은 같은 이름의 서로 다른 test.txt 파일이다. 서로 다른 폴더에 있기 때문에 같은 같은 이름을 가질 수 있다. 만약 한 폴더 내에서 새로운 파일을 만들어 중복된 이름을 사용한다면 덮어쓰기가 될 것이다. testFolder1의 test.txt의 유효범위는 testFolder1이다. 자신의 유효범위 내에서 같은 이름으로 새로운 파일을 저장하려고 한다면 대체가 될 것이고 자신의 유효범위가 아닌 다른 곳에서 같은 이름을 쓰면 영향을 받지 않을 것이다. 변수도 이처럼 영향력이 있는 유효범위,..

얕은 복사는 메모리 주소값을 복사하는 개념이고, 깊은 복사는 새로운 메모리 공간을 확보해 완전히 복사하는 개념이다. 얕은 복사와 깊은 복사는 데이터 저장 방식과 깊은 관련이 있다. 데이터 저장 방식 let A = 컵; let C = 우산; let D = 우산; let B = 컵 + 우산; 변수 선언이 일어나면 컴퓨터의 메모리에서 비어있는 공간 하나를 확보한다. 그 공간에 이름을 지정하고, 데이터를 또 다른 공간에 저장한 후, 데이터가 담긴 공간 정보를 저장한다. 다소 복잡해보이는데 왜 이렇게 할까? 데이터 변환을 자유롭게 메모리 관리를 더욱 효율적으로 하기 위해서 다음과 같이 사물함에 물건을 저장하는 그림에 비유해보았다. (실제 변수저장 메커니즘은 변수영역과 데이터영역, 메모리주소, 식별자와 값 등의 개..

계산기 목업 프로그램을 자바스크립트로 작성하면서 Number와 parseInt와 parseFloat를 사용하게 됐는데 내용을 정리해보려고 한다. 공통점은 세가지 모두 숫자로 이루어진 문자열을 숫자로 형변환할 수 있다. 그러나 각 함수별로 예외가 있다. 아래의 코드로 테스트를 해보았다. const strs = ["10.12345", "100.0", "9.9", "-9.9", "-33", "2023년", "총3만원"]; for (const str of strs) { console.log(``); console.log("String", str); console.log("Number", Number(str)); console.log("parseInt", parseInt(str)); console.log("par..

패키지 리눅스 운영체제의 패키지와 패키지매니저는 상자 또는 압축파일과 같다. 압축파일에 프로그램, 프로그램 설치파일, 프로그램 설명서, 프로그램에 대한 정보를 담은 파일이 들어있다. 예를 들어 내가 A라는 프로그램을 설치하려고 하는데, A의 프로그램에 대한 정보를 담은 파일에 'B라는 파일도 설치되어 있어야 한다'라는 정보가 있으면 B도 같이 설치한다. 패키지매니저 패키지를 편리하게 사용하기 위해서 패키지매니저를 사용한다. 패키지매니저는 휴대폰의 앱스토어와 같다. 앱스토어를 들어가면 우리가 필요한 프로그램들을 '설치'버튼으로 동일한 방식으로 설치할 수 있다. 앱스토어가 없다면 인터넷에 필요한 프로그램을 검색해서 해당 사이트에서 내려받고, 버전이 업데이트되면 다시 접속해서 수동으로 해줘야 할 것이다. 또한..

grid Flexbox와 마찬가지로 가장 많이 쓰이는 CSS 레이아웃 방법이다. Flexbox는 1차원의 행 또는 열의 레이아웃에 주로 쓰이고, grid는 행x열 2차원의 레이아웃을 배치하는데 적절하다. !codepen[hahagarden/embed/vYzNyyb?default-tab=css%2Cresult&theme-id=light"] container와 item 부모요소를 grid container라고 하고 grid의 영향을 받는 전체 공간이다. 자식요소를 grid item이라고 하며 설정된 속성에 따라서 아이템들이 배치된다. 그리드 형태 정의 container에 정의 열, 행 분할: grid-template-columns, grid-template-rows 셀 간격 지정: row-gap, colum..

DOM이란? https://hahagarden.tistory.com/76 DOM과 브라우저 동작원리 DOM이란 DOM은 Document Object Model 문서객체모델의 약자이다. 웹페이지의 구조를 나타낸 text일뿐인 HTML파일이 DOM을 통해 태그 하나하나 생명력을 얻는다. DOM은 연결다리이다. DOM은 HTML, XML문서의 프로 hahagarden.tistory.com 브라우저의 렌더링 서버에서 HTML, CSS, JavaScript, 이미지파일 등을 응답을 보내주면 브라우저의 렌더링 엔진이 DOM트리와 CSSOM트리를 만들고 렌더트리로 병합한다. 그리고 그 후에 position이나 size 등 CSS가 계산되고 화면의 좌표에 맞춰서 배치가 되고 색칠되고 그려진다. DOM트리를 만드는 과정..