최근 회사의 랜딩 홈페이지를 제작하는 중인데 한 글자씩 나타나는 애니메이션이 포함되어 있다. 안타깝게도 음절 단위가 아닌 음소 단위로 변경되는 것이 보여야 하는 것으로 보인다. 처음에는 …
Next 필자는 Nextjs를 자주 애용하는데 리액트의 개발 환경을 매우 간단하게 구축할 수 있고 간단한 것에 비해 상당히 합리적인 개발환경을 가지고 있다고 생각하기 때문이다. 또한 SSR까지 …
React Native에선 Flexbox라는 형식으로 레이아웃 개발을 진행한다. 최신 웹 브라우저에서도 이 레이아웃이 작동하여 CSS 최신 방법론으로 알려져 있다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 적용할 …
들어가며 난 무언가를 시작하기전에 이게 왜 필요한지 어디에 활용되는지 반드시 파악하고 진행하는 편이다. 몇몇 자료를 찾아봤지만 아래의 글에서 무엇인가 깊고 진한 전문가의 향기가 났다. 여하지간 …
일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 …
이전에 노트에 기록했던 내용을 블로그로 옮겨놓으려고 한다. 매우 기본적인 문법만 들어있다. 1. 변수 자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var 이라는 가변형 변수만 존재하여 초기화 …
Hello, React React로 Hello World를 출력해보자. 기본적인 설치 방법과 사용 방법을 기록하기 위해서 작성한다. How to install npm install -g create-react-app How to make application …
기초 폼 React.DOM.render { <h1>Hello, World!</h1> document.getElementById('root') } render는 react의 정수이다. 위에 코드를 살펴보면 H1태그를 작성하였고 root이라는 ID를 가진 element를 불러왔다. react는 h1태그와 같은 html을 …
IIFE js에서 자주사용되는 코딩패턴 중 하나이다. JS에서의 함수 function foo() { alert("Hello World"); } foo(); IIFE를 적용하지 않은 코드 foo 라는 함수를 1-3째 줄에 선언하고 …
하노이의 탑 풀어보았다. 소스코드 function Hanoi(plate, departure, dropBy, destination) { if (plate === 1) { document.getElementById('responseDiv').innerHTML = `${plate}을 ${departure}에서 ${destination}로 이동` } else if
글에 앞서 본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다. ES6 JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다. const, let …
모듈 패턴 var newScope = (function () { 구문 }) (); 함수를 선언하자마자 실행시키는 패턴. IIFE라고도 함. 싱글턴 패턴 var singleton = (function() { var …
실행 컨텍스트 자바스크립트가 왜 그렇게 동작하는지를 알려줌 처음 코드를 생성하는 순간 전역컨텍스트가 생김 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다. 컨택스트 생성 시 컨텍스트 안에 …
window 객체 : window 객체는 Document의 상위객체이다. 주요 객체 : screen, location, history, document 주요 메소드 : parseInt, isNaN 전역객체이기에 생략이 가능하다 예) window.parseInt() => …
객체지향 클래스는 객체지향 프로그래밍이 기반인 언어에서 필수적인 역할을 한다. 클래스는 코드의 재사용성을 높여주고, 가독성을 올려준다. 필자는 저번주 내내 BlackJack 구현에 메달렸었다. 제일 자신있는 언어인 Java로 …
