hahagarden의 블로그

2021년부터 일상 블로그로 티스토리를 이용하고 있다가 잠시 블로그 관리를 안했다. 그리고 개발 블로그를 시작하려고 깃허브블로그를 개설해보고, 벨로그를 이용해보고, 다시 티스토리로 돌아왔다. 그 이유는 다음과 같다. 티스토리로 이전한 이유를 작성하므로 타 블로그에서 불편했던 점 위주로 서술하겠다. 1. 깃허브 블로그 ✔ Jekyll테마를 사용하였는데 괜찮은 테마를 찾기에 시간이 걸리고 적응되지 않는다면 포스팅말고 Jekyll 다루는 것을 익히는데 시간 투자를 많이 해야 한다. ✔ 작성시간 등 전부 마크다운을 입력해서 깃허브 레포지토리에 푸쉬하는 것이므로 포스팅하고 수정하기에 번거롭고 커밋기록이 다 남는다. ✔ 비주얼스튜디오에서 작성하고 커밋하고 퍼블리쉬하는 등 작은 과정이더라도 여럿 있기 때문에 개인적으..

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

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트리를 만드는 과정..

CLI(Command Line Interface) CLI(Command Line Interface)는 입력하는 글자와 출력하는 글자로 컴퓨터와 소통하는 것이다. 보통 우리는 일상생활에서 CLI보다는 GUI를 사용한다. 컴퓨터에게 원하는 작업을 시키려면 명령을 해야 한다. 우리가 컴퓨터를 킬 때부터 버튼을 클릭하는 과정의 연속이다. 본체의 스위치를 누르고(Hardware Interface) 바탕화면에서 인터넷 아이콘, 폴더 아이콘을 찾아서 더블클릭하고, 마우스 오른쪽을 클릭하여 새 폴더를 만들 수 있고, 텍스트문서를 만들 수 있고, 파일을 드래그하여 옮길 수 있다(GUI, Graphic User Interface). 컴퓨터를 처음 보는 사람도 보면 따라할 수 있을 정도로 직관적이고 편하다. 그러나 대부분의..

수도코드(pseudo code) 작성하기 지난 포스팅에서 수도코드(의사코드)에 대해 학습했다. 오늘 페어프로그래밍에서 수도코드 작성하는 것을 중점적으로 연습했는데 주관적으로 작성하는 것이라서 조금 어려웠다. 여러가지 작성법을 찾아보았는데 그 중에서 코드를 어떻게 표현할지 말고, 하고 싶은 이야기가 무엇인지(일상적인 문장으로) 작성하는 연습을 해보려고 한다. 예제1 function makeDigits(num) { // 결과변수에 빈 문자열을 초기화하고 let result = ""; // 1부터 num까지 한자리씩 반복하면서 for (let i = 1; i