키다리 개발자

React Native로 개발을 하려면 크게 2가지 방법이 있습니다. 하나는 컴퓨터 내 에뮬레이터를 이용하여 가상의 핸드폰으로 개발을 하는 것과 두 번째는 Expo라는 앱을 이용한 (실제) 핸드폰으로 연결하는 방법이 있습니다. Expo는 개발자의 생산성을 높이는 장점이 있고 간편하여 저는 이 방법을 택하였습니다. 여기서는 부가적인 설명없이 환경설정 단계만 간단하게 설명하였으니, 이렇게만 하시면 환경설정 하는데에는 문제없이 설치할 수 있습니다. 1. Node.js 10 LTS 이상의 버전 및 npm 6이상의 버전 설치 node -v 와 npm -v 명령어를 입력하여 버전을 확인한다. 2. cmd 창에서 실시 (GIt Bash로 설치를 여러 번 했으나, 명령어 인식이 안되어서 cmd 창에서 해결 완료) 3...

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 1. 파일 전체의 코드를 모두 읽습니다. 2. 파일 전체에서 함수와 변수를 전부 추출합니다. 3. 함수와 변수를 최상단으로 올려서 실행시킵니다. > 여기서 우선순위는 변수가 최상단, 함수가 그 밑입니다.. 실질적으로 코드의 위치를 바꾸는게 아닙니다. 메모리 상에서, 코드를 전부 읽어서 메모리 상의 위치를 바꾸는것 입니다. 결과값 : 100 변수를 최상단에 올려도 결과값은 100이 출력이 됩니다.

apply와 call 메서드 Function 객체의 메서드에는 apply와 call이 있습니다. this 값과 함수의 인수를 사용하여 함수를 실행하는 메서드입니다. apply와 call의 동작은 본질적으로는 같습니다. 차이점은 함수에 인수를 넘기는 방법 뿐인데, apply의 인수는 배열이고 call의 인수는 쉼표로 구분한 값의 목록입니다. 이처럼 apply와 call 메서드의 첫 번째 인수는 함수의 this 값 입니다. apply 메서드의 두번째 인수는 함수의 인수를 순서대로 담은 배열이며, 실제 배열 객체 대신 유사 배열 객체를 넘겨도 동작합니다. 예를 들어 현재 실행 중인 함수의 arguments를 apply 메서드에 넘겨도 실행할 수 있습니다. call 메서드의 두 번째 이후 인수는 함수의 인수 목..

자바스크립트는 프로토타입 기반 객체 지향 언어라고 표현한다. 그렇다면 대체 프로토타입은 무엇을 의미하는걸까? 프로토타입은 함수가 만들어지면 생성되는 객체 원형(원본)을 보존하기 위한 객체 prototype = 원형(원본) 가장 중요한 부분은 원형을 유지한다. 자바스크립트는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다. 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. function person() { person.prototype.stature = 172; person.prototype.weight = 70; person.prototype.name = "anonymous"..

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이는 모든 사용자가 신체적, 환경적 조건과 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 뜻한다. 여기서 신체적 조건이란 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하고 환경적 조건이란 다양한 기기(PC, mobile, PDA 등), OS(운영체제), 웹 브라우저 (Internet Explorer, FireFox, Safari, Chrome, Opera 등)를 의미한다. 웹 접근성 접근성..

시맨틱 웹이란? 시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. - Wiki 백과 웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다. 우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다. 이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했습니다. (한국인 아닙니다 ^^ 영국사람) 시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한..

반응협 웹 디자인은 화면에 크기에 따라서 웹 각 페이지의 요소들이 반응해서 동작하게 되는걸 말합니다. 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다. 반응형 웹은 성능을 많이 먹는 대신, 최저한의 코딩으로 쉽게 디바이스 지원을 할 수 있는 매리트가 있습니다. @media 이러한 작업을 할 수 있게 해주는 것이 @media 쿼리입니다. div { color: black; } @media ( max-width: 700px ) { // 700px..

CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있습니다. CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했습니다. 하지만 CSS3에서는 이러한 애니메이션 효과를 손쉽게 적용할 수 있게 되었습니다. CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다. @keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것입니다. 애니메이션 ..