Web
[⚛React] React Element, React Component 그리고 JSX
[⚛React] React Element, React Component 그리고 JSX
2020.01.19⚛ React Element type과 props를 가지는 React의 객체 React 라이브러리에 있는 React.createElement(...)를 이용하여 만들 수 있으며 type으로 HTML 태그 이름을 가지고 그 이외의 특징을 props로 관리하는 객체 형태로 정의된다. // createElement를 이용해서 React Element 만들기 React.createElement( 'div', { className: 'name' }, 'React' )// createElement를 이용해서 만들어진 React Element 객체 { type: 'div', props: { className: 'name', children: &#..
[Next.js] Next.js 시작하기
[Next.js] Next.js 시작하기
2020.01.15🤔 Next.js란? 단일 페이지의 자바스크립트 애플리케이션을 만드는 것이 꽤나 어려운 일이라는 것을 다들 알고 있을 것이다. 다행히도, 우리에게는 다양한 선택지의 프레임워크와 라이브러리가 있다. 그럼에도 불구하고 원하는 애플리케이션을 만들 수 있기까지는 상당한 러닝커브가 있다. 우리가 배워야 할 것들은 CSR(Client Side Rendering), 페이지 레이아웃, API 등이다. 그것만 있는가? 특정 페이지는 SSR(Server Side Rendering)이 필요할 수 있다. 따라서 우리는 더 간단하지만, 수정하기 쉬운 어떤 것이 필요하다. PHP를 이용했을 때, 웹 앱이 어떻게 만들어지는 지 생각해보자. 파일을 만들 것이고, PHP 코드를 작성하고, 간단하게 배포하면 된다. 라우팅에 대해서 그렇..
[HTML] 🤔 HTML이란?
[HTML] 🤔 HTML이란?
2020.01.11🤔 HTML이란? HTML은 웹페이지를 만들기 위한 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 다음과 같은 특징을 가지고 있다. HTML은 태그를 통해 웹 페이지의 구조를 알려준다. HTML은 다양한 요소들로 이루어져있다. HTML은 브라우저에게 어떤 것이 보여질 지를 알려준다. HTML은 태그를 통해 표현된다. HTML 태그는 머릿말, 문단, 표 같은 것들을 라벨링한다. 📄 간단한 HTML 문서 첫 머릿말 첫 문단 해당 문서의 의미는 다음과 같다. 라는 선언은 해당 문서가 HTML5라는 것이다. 요소는 HTML 페이지의 root 요소이다. 요소는 문서에 대한..
[JavaScript] {} + {}의 결과는 뭘까?
[JavaScript] {} + {}의 결과는 뭘까?
2019.12.14해당 글은 JavaScript values: not everything is an object를 번역한 글입니다. 질문 {} + {}의 결과는 뭘까? 자바스크립트에서 객체나 배열들을 더할 때 우리는 종종 예상치 못한 결과물을 얻곤한다. 이러한 결과물이 생긴 이유에 대해서 알아보자! 자바스크립트의 더하기 연산 법칙은 간단한다. 오직 숫자(number)나 문자열(string)만 더할 수 있다. 숫자와 문자열 이외의 다른 모든 값들은 더하기 연산을 만나면 이 둘 중 하나로 변하게 된다. 해당 변환이 어떻게 이루어지는 지 알기 위해서는, 몇 가지 사실에 대해서 이해해야한다. 자바스크립트는 원시값(primitives)과 객체(objects) 두 종류의 값으로 이루어져 있다. 원시값에는 undefined, null..
[JavaScript] Ajax
[JavaScript] Ajax
2019.12.11웹 어플리케이션의 사용성은 데스크톱 어플리케이션에 비해 현저히 떨어져있었다. 고전적인 웹 어플리케이션 유저가 폼 영역을 채우고 폼을 제출한다. 브라우저가 서버에게 보낼 요청을 생성한다. 서버가 브라우저가 렌더할 정확한 페이지를 포함한 응답을 생성하고 보낸다. 브라우저가 새로운 페이지를 로드하고, 잠시 브라우저의 윈도우가 깜빡거린다. 클라이언트는 서버의 답을 기다리고 전체 페이지를 새로운 데이터로 다시 로드한다 동기적인 요청이 서버에서 처리되는 동안, 유저는 클라이언트 웹 브라우저와 상호작용할 수 없다. 동기적 모델은 하이퍼텍스트 문서들의 웹을 위해 고안되었다. Ajax 웹 어플리케이션 Ajax 어플리케이션에서, 유저는 페이지와 상호작용한다. 클라이언트는 요청을 처리하기 위해 XMLHttpRequest라는..
[HTML] HTML DOM(Document Object Model)
[HTML] HTML DOM(Document Object Model)
2019.11.27HTML DOM(Document Object Model)이란? DOM은 W3C(World Wide Web Consortium) 표준으로 DOM은 문서를 접근하기 위한 표준을 정의합니다. W3C DOM은 프로그램들과 스크립트들이 콘텐츠나 구조, 문서의 스타일에 동적으로 접근하고 수정하기 위한 플렛폼이자 언어 중립적 인터페이스입니다. W3C DOM 표준은 3개로 나뉘어져 있습니다. Core DOM - 모든 문서 종류에 대한 표준 모델 XML DOM - XML 문서에 대한 표준 모델 HTML DOM - HTML 문서에 대한 표준 모델 DOM은 문서의 구조화된 표현 제공을 통해, 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조 및 스타일이나 내용등을 변경할 수 있게 합니다. 우리..
[JavaScript] 클로저(Closure)
[JavaScript] 클로저(Closure)
2019.11.24정의 함수와 그 함수가 정의된 렉시컬 환경의 조합이다. 렉시컬 환경? 렉시컬 환경의 의미는 어휘적 범위를 정해주는 렉시컬 스코프를 통해 지정된 사용 가능한 변수들을 포함한 환경을 의미한다. 즉 렉시컬 스코프 안에 있는 변수들을 접근할 수 있는 환경이다. 사용 예시 예시 1 일반적으로 클로져는 함수안의 함수 형태로 정의된다. let obj = function(){ let i = 0; return { setI(k){ i = k; }, getI(){ return i; } } // 호출시 얻는 함수들이 외부 함수의 변수인 i에 대한 메모리를 가지고 있는다. } let x = obj(); x.setI(2); console.log(x.getI()); // 2 x.setI(4); console.log(x.getI()..
[Vue.js] 🖖 Vue.js 기초 지식
[Vue.js] 🖖 Vue.js 기초 지식
2019.08.22[Vue.JS 2.0] 소개 및 시작하기 Vue는 다른 프레임워크나 라이브러리에 비해 신생언어 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다. 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다. 처음 시작하는 단계의 과정이 복잡하다. 한글화가 잘 되어있다. React보다 성능이 뛰어나다. React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.) 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다. SSR이 지원된다. HTML Hello, {{ name }} JS var app = new Vue({ el: '#app', data: { name: "geon" }, }); [Vue.JS 2.0] Dir..
🕵️♂️ 자동완성 모듈의 법칙
🕵️♂️ 자동완성 모듈의 법칙
2019.08.22자동완성 모듈의 법칙 글자를 알 수 있는 값으로 자동완성하는 모듈은 겉으로 보기에는 쉬워보인다. 그러나 많은 UI들이 이를 제대로 수행하지 못하고 있다. 이에 대해 개별적으로 불만을 제기하기 보다는, 주로 지켜지지 않는 몇 가지 법칙들을 적어보려한다. 이러한 법칙들이 최선이 아닌 경우가 있을 수도 있다. 그러나 이러한 법칙을 지키지 않는 경우에는 합당한 이유가 있어야한다. (예를 들어, 미국의 주의 리스트처럼 어떠한 법칙은 입력 영역이 고정된 집합 안에 있는 값으로 채워지지 않으면 적용하지 않는다.) 이러한 법칙들을 따른다면, 적어도 정상 수준의 경험을 줄 수 있을 것이다. 정확하게 일치하는 것들은 항상 먼저 배치한다. 만약 사용자가 찾으려는 대상을 정확하게 입력했다면, 다른 대상들은 항상 사용자가 입력..
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
2019.08.10Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Functional Programming 이전까지 가장 유명한 코딩 패러다임은 OOP(Object Oriented Programming)이었다. JavaScript에서 Function의 종류는 다음과 같다. Pure Functions 전역 변수를 건드리지 말아야한다, parameter는 reference로 넘어가기 때문에 mutate되지 않는다. High Order Functions reusability를 위해 쓰이는 함수로, 내가 parameter를 집어 넣었을 때 비로소 완성되는 함수이다. Callbacks and Higher Order Functions Higher-order funct..
[JavaScript] JavaScript의 기본 원리
[JavaScript] JavaScript의 기본 원리
2019.08.01Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Principles of JavaScript Global Execution Context ( 전역 실행 환경 ) const num = 3; function multiplyBy2 (inputNumber) { const result = inputNumber*2; return result; } const name = "Will" 해당 코드를 실행하면 어떤 일이 일어나는가? num이라는 변수 3을 저장한다. multiplyBy2라는 함수를 생성한다. ( 함수 안으로는 절대 들어가지 않는다 호출하지 않는 이상 ) name이라는 변수에 "Will"을 저장한다. JavaScript의 Thread Sing..
[HTML] WAI-ARIA란?
[HTML] WAI-ARIA란?
2019.07.30최근 Vue.js로 Auto Completion(혹은 Auto Suggestion)모듈을 만드는 과정에서 여러 라이브러리에서 WAI-ARIA 이라는 키워드가 계속 나와서 이를 정리해보았다. WAI-ARIA란? WAI-ARIA의 정의를 위키피디아에서 찾아보자. WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아 가장 중요한 키워드는 접근성(Accessibility, A11Y)이다. 과거 사이트를 조작하기 위..