hahagarden의 블로그

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

🙌 KPT 회고 1️⃣ 목표 현재 내가 학습을 통해 이루고자 하는 것은 무엇인가? 자바스크립트 기초를 다지고 싶다. 그리고 꾸준히 공부하고 기록하는 습관을 기르고 싶다. 또한 ‘나’를 표현할 수 있는 포트폴리오를 만들고 연봉 3600이상으로 커리어를 시작하고 싶다. 5년 안에 해외기업에 취직하여 글로벌 경험을 해보고 사용자들이 사용하고 싶어하고 사용하기 쉬운 서비스에 기여하고 싶다. 현재 바라는 목표를 모두 이루었다면 ‘나’는 어떻게 변해 있을까? 에러를 찾는 속도가 빨라지고 왜 에러가 발생했는지 이해하고 기억할 수 있을 것이다. 다른 사람의 코드를 보고 배우거나 피드백을 해줄 수 있을 것이다. 초보자시절 궁금했던 점들을 떠올리며 내가 아는 지식을 초보자에게 알려줄 수 있을 것이다. 그리고 회사에서 어떤..

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

Module not found: Error: Can't resolve ~ ReactJS프로젝트 중 Javascript에서 Typescript로 옮겨가던 중 VSCode에 빨간줄이 없는데도 npm start를 하면 컴파일 에러가 났다. 구글링을 해보니 많은 사람들이 node_modules 폴더 package-lock.json 삭제하고 npm install 실행하여 package.json대로 노드모듈을 다시 다운받고 npm start 하면 해결이 된다고 하는데 여전히 에러 발생. 해결방법 타입스크립트를 사용할 때 tsconfig.json은 필수 파일이다. 타입스크립트를 설치하는 과정에서 npx create-react-app react-masterclass --template typescript 대신 npm ..

react-table 라이브러리를 사용해서 recoil atom 데이터를 테이블로 만들려고 한다. useSortBy로 정렬기능과, useGlobalFilter로 검색기능을 구현하는데 에러가 생겼다. 타입스크립트를 사용해서 생기는 에러였다. getSortByToggleProps 에러메세지: Property 'getSortByToggleProps' does not exist on type 'HeaderGroup setGlobalFilter 에러메세지: Property 'setGlobalFilter' does not exist on type 'TableInstance 해결방법 두 에러는 모두 react-table-config.d.ts파일을 생성함으로써 해결할 수 있다. npm i --save-dev @type..

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

객체 자바스크립트를 이루고 있는 거의 모든 것들이 객체이다. 원시타입(Primitives)를 제외한 나머지 값들(함수, 배열, 정규표현식 등) 모두 객체이다. 이에 대해서는 나중에 더 학습하기로 하고, 우선 객체는 키(Key)와 값(Value)로 이루어진 속성(property)들의 집합이다. 배열과 마찬가지로 다양한 데이터를 한번에 다룰 수 있다. 객체 생성 객체 리터럴 const myself = { name: 'hahagarden', age: 28, }; 가장 일반적인 방식이다. 중괄호 안에 프로퍼티의 키와 값을 작성한다. 아무것도 작성하지 않으면 빈 객체({})가 된다. Object 생성자 함수 const myself = new Object(); myself.name = "hahagarden"; my..

계산기 목업 프로그램을 자바스크립트로 작성하면서 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도 같이 설치한다. 패키지매니저 패키지를 편리하게 사용하기 위해서 패키지매니저를 사용한다. 패키지매니저는 휴대폰의 앱스토어와 같다. 앱스토어를 들어가면 우리가 필요한 프로그램들을 '설치'버튼으로 동일한 방식으로 설치할 수 있다. 앱스토어가 없다면 인터넷에 필요한 프로그램을 검색해서 해당 사이트에서 내려받고, 버전이 업데이트되면 다시 접속해서 수동으로 해줘야 할 것이다. 또한..