자바스크립트
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
당신의 클론 코딩은 왜 실패하는가?
당신의 클론 코딩은 왜 실패하는가?
2019.12.21👋 들어가며 웹 개발 관련 다양한 강의들이 있지만 가장 매력적인 강의는 누가 뭐래도 클론 코딩 강의가 아닐까싶다. 내가 즐겨 쓰는 서비스를 내 손으로 만들어 볼 수 있다는 점은 강의에 대한 흥미를 돋우기 충분하다. 하지만 그 흥미에 비해 결과물인 클론 코딩을 제대로 활용하는 사람은 많지 않은 것 같다. 나름 클론 코딩 강의도 많이 듣고, 시행착오도 많이 겪으면서 결국에는 많은 도움이 되었던 경험을 바탕으로 글을 써보고자 한다. 🤷♂️ 클론 코딩이란? 말 그대로 클론하는 코딩으로, 주로 웹 개발에서 쓰이는 용어이며 인스타그램, 카카오톡, 에어비앤비, 유튜브, 넷플릭스 등 우리가 자주 사용하는 서비스나 웹사이트를 밑바닥부터 만들어가는 강의를 의미한다. 이후 이야기하는 클론 코딩은 클론 코딩 강의를 의미한다..
[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..
[JavaScript] ES6, ES8, ES2017, ECMAScript 이게 다 뭐시여...?
[JavaScript] ES6, ES8, ES2017, ECMAScript 이게 다 뭐시여...?
2019.05.30JavaScript와 ECMAScript의 역사와 명명 규칙을 빠르게 알아봅시다. 이 글은 "JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?"를 번역한 글입니다. 잘못된 부분이 있다면 댓글 달아주세요. 몇몇 이유로 JavaScirpt를 배우는 것은 혼란스러울 수 있습니다. 이러한 머리글자가 더이상 당신을 혼란스럽게 만들지 마세요. JavaScript 빠르게 박살내기에서 ES 약어에 대해 하나하나 알아봅시다. ECMAScript는 뭐여? 여기 아주 옛날에 벌어진 일이 있습니다. JavaScript는 원래 JAVA의 성공에 물타기하기 위해 명명된 이름이었습니다. 넷스케이프가 그 후 표준화를 위해 JavaScript를 ECMA 국제화기구에 제안했습니다. 그 결과로..
[JavaScript] 변수의 범위(variable scope)
[JavaScript] 변수의 범위(variable scope)
2019.02.11변수 범위(Variable Scope) 변수 범위는 특정 변수가 존재하는 영역입니다. 이를 통해 어디서 변수를 접근할 수 있는 지 알 수 있습니다. 변수(variable)은 지역 범위(local scope)와 전역 범위(global scope)를 둘 중 하나를 갖게 됩니다. 지역 범위(local scope, function-level) C 혹은 C++이나 JAVA같은 프로그래밍 언어와는 달리, JavaScript는 블록 수준(block-level)의 범위를 가지고 있지 않습니다. 대신 JavaScript는 함수 수준(function-level)의 범위를 가집니다. 함수 안에서 정의된 변수는 지역 범위(local scope)를 가지며, 해당 함수와 그 내부 함수에서만 접근 가능합니다. 내부 함수에서의 외부..
[Node.js] 🤷♂️ Node.js란 무엇인가?
[Node.js] 🤷♂️ Node.js란 무엇인가?
2019.02.10Node.js란 무엇인가? Node.js는 구글 크롬의 자바 크롬의 JavaScript 엔진(V8 Engine)으로 빌드 된 JavaScript 런타임입니다. 👉 JavaScript 엔진과 JavaScript 런타임의 차이? JavaScript는 일반적으로 크롬(Chrome)과 같은 브라우저에 내장되어있습니다. 그래서 그 동안 JavaScript는 브라우저에 종속되어 있었습니다. 이는 콘솔에서 JavaScript 명령어를 쳐보시면 확인 할 수 있습니다. JavaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것이 바로 Node.js입니다. Node.js를 이용하면 Python과 같이 내 컴퓨터에서 File Syst..
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
2019.02.10🤳 Day6 - JavaScript로 정규표현식을 이용한 검색창 구현하기JavaScript 30의 여섯 번째 프로젝트는 정규표현식을 이용하여 검색창을 구현하는 프로젝트입니다.😃 HTML 코드12345678910111213141516171819 Type Ahead 👀 Filter for a city or a state Colored by Color Scriptercs 😃 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677html { box-sizing: border-box; backgrou..