hahagarden의 블로그

배열 배열은 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의 모든 노드에 접근하고 사용할 수 있도록 브라..

CSS 웹의 스타일링을 하는 언어이다. 더 나은 사용자 경험(UX, user experience)를 제공하기 위해 직관적이고 쉬운 사용자 인터페이스(UI, user interface)를 만드는 것이 프론트엔드의 역할이다. HTML로 구조가 짜인 웹 페이지를 CSS를 통해 더욱 사용하기 쉽고 보기 편리도록 스타일링할 수 있다. 절대단위와 상대단위 절대단위(px, pt 등) 센티미터(cm)처럼 1px은 절대적인 값이다. 옛날에는 절대단위인 px을 많이 사용했지만 상대단위를 쓰도록 해야 한다. 고해상도의 모니터의 한 점보다도 1px이 더 크기 때문에 정교한 스타일링을 못하고, 절대값이기 때문에 스마트 기기의 화면, 노트북 등등 다양한 크기의 브라우저에 알맞게 변화하지 못한다. 상대단위(%, em, rem, c..

웹 개발 HTML, CSS, 그리고 JavaScript 그림과 같이 웹은 HTML, CSS, JavaScript로 이루어져 있다. HTML: 웹의 구조를 만드는 언어(집의 뼈대를 잡는다.) CSS: 웹에 스타일링을 더하는 언어(집을 꾸민다.) JavaScript: 사용자와 상호작용하며 웹에 생명을 불어넣는 언어(밤이 되면 집의 조명을 켤 수 있는 기능을 추가한다.) HTML 웹 페이지가 어떻게 구조화되어있는지 브라우저로 하여금 알게 하는 마크업 언어이다. 마크업 언어는 태그로 감싸져 있고 데이터나 문서의 구조를 명기한다. 다른 기능보다는 데이터를 기술하는 용도로만 쓰이기 때문에 프로그래밍 언어와 구별된다. 태그 tag HTML은 Element로 이루어져 있고, Element는 태그와 내용으로 이루어져 있..

메타인지(metacognition), 자기주도적 학습의 열쇠 자기주도적 학습은 중요하다. 왜? 프로그래밍의 세계는 계속 발전하고 영역이 넓고 공부할 것이 무궁무진하다. 누군가 '이제 이걸 공부해', '이 문제가 있을 땐 이렇게 하면 돼'라고 친절하게 대답해주지 않는다. 끊임없이 공부하고 내 것으로 만들고 스스로 문제를 해결해야 하는데 지치지 않으려면 자기주도적 학습의 습관을 들여야 한다. 자기주도적 학습 능력을 키우는데 메타인지가 중요한 열쇠가 될 수 있다. 메타인지의 세계적인 권위자 중 한명인 리사 손(콜롬비아 대학 심리학과 교수)의 세상을 바꾸는 시간 15분 강연에 따르면 메타인지는 다음의 3가지로 설명할 수 있다. - 자기 자신을 보는 거울 - 스스로를 믿는 능력 - 나의 완벽하지 않은 모습을 인정..

주소: 강원 홍천군 홍천읍 양지말길 17-4 영업시간: 주문: 평일 11:00 ~ 20:00 / 주말 10:00 ~ 20:30, 식사 22:00까지 주차장: 있음 강원도 홍천에서 유명한 양지말화로구이에 왔다 언제나 사람이 많고 가게가 굉장히 넓은데 가끔 웨이팅도 있다 1층에 300석, 2층에 120석이 있다 단체로 이용해도 좋을 듯 싶다 사람이 굉장히 많고 테이블이 조금 붙어있는 편 하지만 직원분들이 곳곳에 안내요원처럼 서계셔서 자리 안내나 주문은 수월하다 양지말화로구이니까 화로 입장! 강원도 왔으니까 막국수를 먹어줘야 한다. 메뉴는 고추장불고기~~ 들깨가루와 함께 고소하고 짭짤한 너무 맛있는 파무침 된장찌개가 아니라 된장국이었다. 맛은 있었다! 하지만 개인적으로 찌개류를 더 좋아해서 아쉬웠당 주인공이신..