Hitzi's Farm

null과 undefined가 뭘까? null도 값이 없고 undefined도 값이 없다. 뭐야 그럼 같은거 아닌가? 하겠지만 다르다. 콘솔이 같다는데요? 값이 없다는 특성은 같긴 하지만 엄연히 다르다. 대체 어디가 다르냐고? 자료형부터 다르다. undefined는 그 이름 그대로 자료형마저 정의되지 않은 상태라서 값이 없는 것이다. null은 값이 없다는 상태로 정의된 것이다. 비유적인 이야기로 설명해보자. undefined는 아직 신검을 받지 않은 사람이고 null은 병역 판정 5급, 즉 면제를 받은 사람이라고 보면 되겠다. 군대 경험이 없다는건 공통점이지만 신검 급수가 뭔지 알아보면 undefined는 아직 신검을 안 받아서 값이 없는 것이고 null은 5급 이라고 나오는 것이다. 자, 이제 비유적..

프로젝트를 진행하다보면 프레임워크와 라이브러리라는 고마운 친구들이 도와주곤 한다. 내가 구현하고자 하는 기능을 순식간에 뚝딱 만들 수 있게 해주고, 심지어 뛰어난 프로그래머들이 모여서 만들어낸 것이기 때문에(오픈소스의 경우) 에러나 버그 걱정도 크게 없고, 해당 기능에 들였어야할 노력과 시간을 아껴 다른 파트에 투자할 수 있도록 해줘 프로젝트 자체의 질을 높여주기도 하기 때문이다. 그런데 여기서 프레임워크와 라이브러리의 차이는 무엇일까? 고마운 친구들인 것은 분명하지만 정체도 제대로 모르는 친구들에게 계속 도움을 받는 것도 실례인 듯 하니 한 번 알아보도록 하자. 내가 알고 있던 프레임워크와 라이브러리의 개념에 처음 혼동을 준 범인은 React JS다. 사실 React JS의 공식 홈페이지에서 라이브러리..

🙄 AJAX가 뭐야? Asynchronous Javascript And Xml의 약자다. 비동기 자바스크립트와 XML이라는 뜻이며, 동적 웹페이지를 만들기 위한 정보 전달 방법중 하나다. 이름에 XML이 들어가있긴 하지만 XML뿐만 아니라 JSON, 텍스트 파일 등 다른 데이터도 취급할 수 있다. 🧱 AJAX의 원리 기존 웹 브라우저의 동작 원리와 비교해보도록 하자. 요청받은 페이지를 그대로 응답으로 전달하는 기존 웹 동작과는 다르게, AJAX 방식은 자바스크립트를 이용하여 XHR객체를 사용하여 서버로 요청을 보내 해당 이벤트가 발생한 부분에 필요한 데이터만을 응답으로 받아 그 부분만을 갱신하여 로딩하는 식으로 진행된다. 💬 AJAX의 장점 및 한계 💖 장점 웹 페이지 전체가 아닌 일부분만 갱신이 가능하..

이번엔 듣기만 많이 들어봤던 ajax를 직접 활용해보는 챌린지다. 주어진 json내에서 내가 찾고싶은 도시, 주, 그리고 해당 구역의 인구수를 보여주는 간단한 검색 기능이 구현돼있다. 👌완성된 모습 직접 보기 Type Ahead 👀 taehwan920.github.io 하던대로 코드를 먼저 뜯어보도록 하자. 📃 HTML 📃 1 2 3 4 5 6 7 Filter for a city or a state Colored by Color Scripter 언제나 그렇듯 HTML구조는 간단했다. form 태그 안에 검색어를 입력할 input 태그와 검색 결과를 담을 ul태그가 들어있는 구성이다. 🎨 CSS 🎨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ..

이번 챌린지는 css의 flexbox를 주로 활용되었다. 👌 완성된 모습 웹 페이지 day5 taehwan920.github.io 이번 챌린지의 목표는 css의 flex 속성에 대해 잘 이해하고 있어야 한다. 먼저 코드 구성을 뜯어본 뒤 flex속성에 대해 알아보자. 📃 HTML 📃 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion HTML은 panels 클래스 div의 자식 요소로 클래스명이 panel, panel인 div가 들어있고, 각 panel클래스 div의..

이번 챌린지는 웹페이지를 만드는게 아니라 자바스크립트의 Array 관련 함수들을 연습해보는 챌린지다. Cardio는 심장 강화 운동이라는 뜻인데, Array의 핵심적인 내장 메소드들을 연습해보는 개념이라고 생각하면 될 것 같다. 일단 초기코드들을 보도록 하자. 💻 JavaScript 💻 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 // Get your shorts on - this is an array workout! // ## Array Cardio Day 1 // Some data..

세번째 챌린지인 CSS와 JS 가지고 놀기를 해보자. 웹페이지 Scoped CSS Variables and JS taehwan920.github.io 🐶Day3 Playing with CSS & JS🐶 이번 챌린지엔 딱히 덧붙일 요소가 떠오르지 않았기 때문에 구현된 코드를 좀 더 자세히 뜯어보도록 하자. 📃 HTML 📃 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Update CSS Variables with JS Spacing: Blur: Base Color Colored by Color Scripter range타입 input태그를 이용해 각 spacing, blur의 정도를 조정할 수 있게 한다. color타입 input태그로 베이스 컬러를 조정할 수 있도록 했다. range타입 in..

Drum Kit에 이어 두번째 챌린지인 CSS+JS Clock을 만들어보겠다. 먼저 완성 웹페이지부터 보도록 하자. 웹페이지 CSS + JS Clock taehwan920.github.io ⏰ Day 2 - CSS + JS Clock ⏰ 본 챌린지는 아래에 숫자로 써있는 시계는 없고, 그냥 가운데 하얀 시계만 돌아가는 식이었다. 이번엔 HTML / CSS / JS 코드를 같이 보도록 하겠다. 📃 📃 1 2 3 4 5 6 7 🌈 🌈 1 2 3 4 5 6 7 8 9 10 .hand { width:50%; height: 6px; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s;..