hahagarden의 블로그

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

배열 배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 요소별로 쉼표(,)로 구분하고 대괄호([])로 묶는다. 순서 정보(index, 인덱스)를 가지며 인덱스는 0부터 시작한다. 인덱스를 사용하여 존재하지 않는 요소에 접근하면 undefined를 반환한다. ❗️TIP❗️ 배열은 console.log가 아닌 console.table을 하면 보기가 더 편하다. let arr = ['a','b','c']; console.table(arr) 배열 생성 배열은 다음과 같은 방법으로 생성할 수 있다. ✔️ 배열 리터럴 let arr=['a','b','c']; // [ 'a', 'b', 'c' ] ✔️ Array() 생성자 함수 let arr1=new Array(2); // [ ] (2를 leng..

조건문 특정 조건에서만 코드를 실행하고 싶을 때 if 조건문을 사용한다. 조건문이 true일 때만 실행되며, false일 때 실행할 작업을 따로 작성하고 싶으면 else if 또는 else 구문을 이용한다. if(조건문1) { // 조건문1이 true일 때 실행할 코드 } else if(조건문2) { // 조건문1이 false이고 조건문2가 true일 때 실행할 코드 } else { // 조건문1, 조건문2가 모두 false일 때 실행할 코드 } 삼항조건연산자 조건 ? true일 때 실행할 코드 : false일 때 실행할 코드 if-else문을 위와 같이 삼항조건연산자를 이용해서 작성할 수 있다. 삼항조건연산자끼리 중첩도 가능하다. 한번에 작성할 수 있어서 편하고 가독성도 좋지만 코드가 간단할 때만 이용..

JavaScript 브라우저에서 실행하기 위해 만들어진 언어이다. 그래서 HTML과 JavaScript를 함께 실행해야 작동한다. 하지만 NodeJS라는 JavaScript런타임을 설치하면 브라우저가 아니어도 실행시킬 수 있다. 이를 통해 브라우저, 서버, 모바일 개발까지 가능한 멀티 패러다임 프로그래밍 언어가 되었다. 기계어: 1또는 0으로 이루어진, 컴퓨터가 이해할 수 있는 언어 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한(컴퓨터에게 명령하기 위한) 언어. 기계어로 변환되어 컴퓨터가 명령을 수행하는 것이다. 자연어: 인간이 쓰는 언어. 컴퓨터 공학에서 프로그래밍 언어와 구분하기 위해 따로 자연어라고 구분짓는다. JavaScript 엔진: JavaScript코드를 실행할 수 있는 프로그램. 브라..

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 합니다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있습니다. 하지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것입니다. Array.slice() 1단계 레벨까지 깊은 복사이고, 다음부터 얕은 복사가 된다. it("Array 메소드 slice를 확인합니다.", function () { const arr = ["peanut", "butter", "and", "jelly"]; expect(arr.slice(1)).to.deep.equal(["butter", "and", "jelly"]); expect(arr.slice(0..

와이어프레임과 목업 와이어프레임 웹 또는 어플리케이션의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 가장 큰 목적은 화면의 영역을 분할하여 구성을 나타내는 것이다. 이 와이어프레임을 보면 어떤 프로그램(POS기(상품 주문 시스템))을 계획하고 있는지 알 수 있다. 특정 목적을 잘 유추할 수 있는 성공적인 와이어프레임이다. 목업(Mock-up) 대부분의 산업에서 목업이란 실물크기의 모형을 뜻한다. 휴대폰 대리점에 가면 화면 이미지를 붙여놓고 겉모양은 실제 휴대폰과 같은데 내부가 비어있는 모델들이 있다. 휴대폰 목업이다. 이와 같이 웹과 앱의 목업도 실제로 작동하는 것과 같이 화면을 HTML로 하드코딩한다. 작성자:hahagarden 작성일시:2023-02-16 00:00 내용:개발은 재밌다 ! 위 코드처..

첫 페어 프로그래밍, 첫 개인 작품으로 계산기 목업을 만들었다. 아직 JavaScript를 배우지 않았기 때문에 HTML과 CSS만을 이용했다. 컨셉 좋아하는 바다를 배경으로 만들어 보았다. 시원한 바다나 푸르른 풀숲을 보면 기분이 좋아져서 종종 모니터 배경화면을 바꾸곤 한다. 배경이미지를 추가하고, CSS공부를 하던 중에 재미있는 셀렉터:target를 발견해서 사용해보고자 🏞이모지가 있는 버튼을 추가했다. 버튼 정렬 방법 이번 과정에서 배운 Flexbox를 사용했다. Mdn에 따르면 Flexbox는 일차원의 행 또는 열 형태로 항목 무리를 배치하는 것을 염두에 두고 설계된 레이아웃 메서드이고, grid는 행과 열 모두 염두에 둔 2차원적 레이아웃을 고려해서 설계되었다. 그래서 계산기와 같이 버튼들이 행..

클로저 클로저는 함수와 그 함수의 주변환경과의 조합이다. 함수와 그 함수의 주변환경과의 조합. 이 말에 따르면 모든 함수를 그 주변환경과 조합하면 되기 때문에 모든 함수에 대해 클로저라고 생각할 수 있겠다. 하지만 모든 함수에 대해 클로저라고 칭하지 않는다. 또한 렉시컬 스코프를 따르기 때문에 함수는 어디에서 호출했든 자신이 정의된 환경인 상위 스코프의 변수를 참조한다. ❓ 스코프에 대하여 다음 포스팅을 참고할 수 있다. https://hahagarden.tistory.com/94 JS 스코프, 그 규칙과 종류 스코프 스코프란 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는(접근할 수 있는) 유효범위가 결정된다. 스코프는 식별자 ha..

DOM이란 DOM은 Document Object Model 문서객체모델의 약자이다. 웹페이지의 구조를 나타낸 text일뿐인 HTML파일이 DOM을 통해 태그 하나하나 생명력을 얻는다. DOM은 연결다리이다. DOM은 HTML, XML문서의 프로그래밍 인터페이스이다. 글자뿐인 HTML에 프로그래밍 언어가 어울릴 수 있도록 연결하는 역할이다. 페이지의 콘텐츠는 DOM에 저장되고 자바스크립트가 DOM에 접근하여 조작할 수 있다. DOM은 문서를 구조화하는데, HTML문서를 트리구조로 만든다. DOM트리라고도 부른다. DOM은 프로그래밍 언어가 아니다. DOM은 API이다. DOM은 HTML(또는 XML)과 상호작용하고 표현하는 API이다. DOM은 document의 모든 노드에 접근하고 사용할 수 있도록 브라..