Hitzi's Farm

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;..

📖 30 JavaScript란? 📖 Wes Bos라는 캐나다에 사는 프로그래머가 약 3년전에 만든 30일 자바스크립트 챌린지 코스. 매일 매일 바닐라 자바스크립트로 간단한 기능들을 구현함으로써 자연스럽게 익숙해지도록 유도해주는 코스다. 클론 코딩도 그렇고 내가 혼자 진행해보려던 프로젝트도 그렇고 처음부터 복잡한걸 하려니 호흡도 길고 어려워서 손도 잘 안가고 잘 진행되지도 않게 되어 가벼운거라도 하나하나 차근차근하며 자바스크립트라는 언어라도 좀 더 익숙해져 보는것이 좋겠다 싶어서 시작하게 되었다. 이 챌린지를 할 때 일단 보고 따라치는 걸로 끝내는게 아니라 간단한 부가 기능을 반드시 추가하는 걸로 좀 더 학습 효과를 높여보고자 한다. Wes Bos의 30 JavaScript 코스 페이지(무료) Course..

1. 이게 무슨소리여? 리액트 JS를 공부하다보니 this.props.blahblah 를 접할일이 많았다. 근데 이 this란 놈이 정확하게 뭘 가리키고 있는건지 이해가 잘 안되고, 이해가 잘 안되니 코드 흐름도 알쏭달쏭하여 공부도 할 겸 한번 짚고 넘어가보도록 하겠다. 2. this 이것. 일반적으로 자바스크립트에서 this라는 친구가 정확히 뭘 가리키고 있는지부터 알아보자. 얘는 상황에 따라 조금씩 다른 것을 가리키고 있다고 하니 예시를 통해 살펴보자. 1) 객체 메소드 호출시 : 객체(OOP의 그 객체 아님)의 프로퍼티가 함수일 경우, 그 함수가 메소드. let thisIsObject = { name: 'hitzi', whoAreYou: function ( ) { console.log(this.na..

매개변수와 인자(혹은 전달인자)는 혼동하기 쉬워보이나 명료한 차이가 있다. 실제 값의 유무가 그 차이다. 1. 매개변수의 파이썬 코드 예시 def this_is_parameter(num_x, num_y): return num_x + num_y 예시의 num_x, num_y와 같은 변수가 매개변수라고 할 수 있겠다. 함수를 정의할 때 변수를 지정할 수 있도록, 가리킬 수 있도록 변수의 형태로 넣은 것을 말한다. 값은 부여돼있지 않고, '이 자리에 인자를 가지고 오겠습니다~' 하고 전달 인자가 들어올 자리를 미리 잡아주는 친구라고 생각해도 되겠다. 이렇게 전달인자가 들어올 자리를 미리 보여주는데 활용함으로써 함수 정의를 용이하게 해준다. 2. 전달인자의 파이썬 코드 예시 def this_is_argument..

1. 여는 글 다음주에 있는 ReactJS 강의형 스터디를 대비하여 예습삼아 튜토리얼을 따라 게임을 만들어 보았다. 튜토리얼은 틱택토라는 빙고 비슷한 게임을 만드는 것이다. 진행 방식은 초기 코드를 튜토리얼에 미리 준비를 해놓고, 코드를 수정하며 게임을 만들어 나가는 식이다. 이 포스팅은 복습을 위해 필자가 이해한 사고 과정을 정리하며 진행하도록 하겠다. 리액트 튜토리얼 링크 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 2. 튜토리얼 ReactJS는 컴포넌트라고 하는 코드의 파편들을 이용하여 그걸 조립해서 복잡한 UI를 만들어가는 자바스크립트 라이브러리다. 이 컴포넌트는 props라는 매개변..

파이썬은 C언어나 기타 저급 언어에 비해서 느리다는 소리를 많이 들었다. 예전에 왜 그런걸까 궁금해서 검색해보았더니, 한 질답 사이트에서 파이썬은 인터프리터 언어고, 저급언어는 컴파일 언어라서 그렇다는 답변을 보았다. 인터프리터 방식은 코드를 한 줄 한 줄 그 때 그 때 바꿔주는 통역과 같은 것이고 컴파일 방식은 코드 전체를 쫙 기계어로 번역을 한 뒤 실행을 하는 번역과 같은 것이라는 비유도 같이 첨언돼있었다. 왜 인터프리터가 컴파일보다 느리다는 건지도 모르겠고 통역도 번역도 해봤던 나로서는 비유마저 전혀 이해가 되지 않았다. 실제로 통번역을 해보면 통역 쪽이 일처리가 훨씬 빨랐기 때문이다. 그렇다면 왜 그런 비유를 든걸까? 컴퓨터 세계에서는 번역이 더 빠른것일까? 구체적으로 좀 더 알아보기로 했다. h..

ReactJS에 관해 알아보던 중, XML(eXtensible Markup Language)이란 걸 발견했다. XML을 검색해보니 HTML과 똑 닮은 녀석이 나왔다. HTML이 있는데 XML은 왜 있는걸까? 하는 의문이 들었지만, 차이점을 알아보니 둘은 생김새만 비슷했지 전혀 다른 언어였다. 차이점 1. 목적 HTML : 데이터를 표시/표현하는 것이 목적. XML : 데이터를 옮기고 저장하는 등, 데이터를 다루는 것이 목적. (어플리케이션 DB간 데이터 이동 등) 차이점 2. 태그 설정 여부 및 대소문자 구분 HTML : HTML은 , 등 미리 정해진(predefined) 태그를 사용한다. 그래서인지는 모르겠지만 대소문자 구분을 하지않는다. (case insensitive) 예를 들어, 안녕! 이라고 입..

if var: 의 의미 보통 비교연산자, 논리연산자등이 쓰여서 조건문을 만드는 if문을 변수 이름만을 넣어서 if var: 라고 쓰는경우, 이는 "var의 값이 null(파이썬에선 None)이 아닐경우" 라는 뜻이된다. 풀어쓰면 if var is not None: 이 되겠다.