부동산 시장 배경 지식

부동산 시장 알아두면 좋은 배경 지식

Like system (polymorphic association and alternatives)

Deploying Apps Using Docker, Kubernetes

Database Modeling

Database Modeling

SSL and TLS

SSL, TLS, HTTP, HTTPS

Overloading, Overwriting and Polymorphism

Polymorphism, Overloading and Overwriting

Identifying relationship and non-identifying relationship

Deploying Apps Using Docker, Kubernetes

프로세트 스케쥴링

Deploying Apps Using Docker, Kubernetes

Node JS

Node js concept

Understanding database

Understanding database

Java Programming

Java Programming Fundamentals

Container Orchestration System

Deploying Apps Using Docker, Kubernetes

Field Specification

It has long been an axiom of mine that the little things are infinitely the most important.

Establishing Table Structure

테이블 구조 설정

Analyzing Current Database

1st draft

감정 해소하기

…

Database Design Overview

1st draft

SQL and Data Modeling

데이터베이스 설계 작업 관련 포스팅 전 관계형 데이터베이스에 대한 이해

SQL, Postgres and Data Modeling

SQL, PostgreSQL, Relational Database, Migration, Data Modeling에 대해 알아봅니다.

배포 과정

Configure aws auto scaling group with load balancer

Configuring Linux Web Server

Configuring Linux Web Server

Server Architecture

Server architecture basic

AWS 다중 서버 환경 구성

Configure aws auto scaling group with load balancer

Oauth

Oauth

Spring Security

Node js concept

컴퓨터 내부 데이터 표현

Mathemetics

Intro to Cloud Computing

Intro to Cloud Computing

Identity and Access Management

Authentication

How Does Streaming Media Work?

스트리밍

Server Side Rendering

Server Side Rendring (Authentication, Error Handling, SEO.. )

Networking Fundamentals

네트워트 기초

SQL and Data Modeling

SQL, Relational Database, Migration, Data Modeling에 대해 알아보고 CRUD App을 만들어 봅니다.

Typescript

Typescript를 배워보아요~! :)

Vim Command List

Vim 명령어 정리해 놓기

소프트웨어 구축 / 프로그래밍 스타일

소프트웨어 구축 / 프로그래밍 스타일

Linux 구조 (OS와 하드웨어 기초)

OS(운영 체제)의 구성 방식 및 하드웨어 기초에 대해 알아보아요.

Web Performance

회사에서 페이지 일부를 개편하는 작업을 맡고 있는데, 필요한 기능을 구현하며 플랫폼별 성능 이슈를 효율적으로 해결해야 하는 과제가 생겼습니다.

Smart TV Navigation [번역]

최근 Smart TV 관련 앱 작업을 하고 있는데, TV 리모콘으로 입력을 받기 때문에 일반 컴퓨터 브라우저에서와는 다른 처리가 필요했습니다. 회사 기존 코드 베이스의 이해를 돕기 위해 검색을 하다가 Smart TV Navigation 글을 찾아서 번역해 보았습니다. Link Norigin에서 TV Streaming 관련 작업을 다양한 스크린 사이즈 제품을 대상으로 하고 있습니다. 최근 저희가 작업한 일부 컴포넌트가 TV…

Getting Closure on React Hooks

싱가폴에서 열린 2019 JSConf Asia에서 가장 인상 깊었던 세션에 대해 정리해 보았습니다.

Hooks in Depth

React v.16.8에 도입된 Hooks는 함수형 컴포넌트에서도 기존 클래스 컴포넌트에서 사용할 수 있었던 Component 내 local state, life cycle 메소드의 기능을 사용할 수 있게 해줍니다.

Making Sense of React Hooks [번역]

MobX는 많은 프로젝트에서 사용된 검증된 라이브러리로, functional reactive programming을 적용해 앱의 상태 관리를 쉽고 확장이 용이하게 도와줍니다.

Webpack

Contents History of Web Performance and Javascript Why webpack? What is Webpack? Problems with Script Loading IIFE History of Modules History of Modules Configuration Webpack Bundle Walkthrough Loaders Babel Loader CSS Loader Handling Images Using…

Advanced State Management

Contents MobX Computed Property (getter, setters) Decorator MobX Computed Property (getter, setters) Computed property는 엄밀히 따지면 ES5에 포함된 문법입니다. 하지만 ES6의 Computed property를 사용하면 좀 더 간편하게 사용할 수 있습니다. Computed property를 사용하면 아래 예시의 Person class…

Vaco moving party

웹 개발 일을 하기로 마음먹고 든 생각들 정리해 보았습니다.

Linux Command Line

이번 주 Stream에 관해 공부하려 계획했지만, stream을 찾아보니 서버와 클라이언트 통신, 네트워크에 대한 지식이 더 있었으면 좋겠다고 생각했고, 네트워크를 찾아보니 Linux 기본기를 배우고 오라고 했습니다. 그래서 시간이 조금 더 걸리더라도 linux에 대한 기본기를 같이 공부하기로 했습니다.

Why do we write super(props)? [번역]

우리는 왜 super를 호출할까요? 혹시 호출을 안 하면 안될까요? 만약, 꼭 호출을 해야한다면 props를 인자로 넘겨주지 않으면 어떻게 될까요?

Data Visualization and D3

Data Visualization은 색, 크키, 모양 등을 이용해 정보를 전달하는 것이라고 합니다. 또, 의미있는 데이터 또는 이야기를 도출해 그것을 시각화 하고, 이해하기 쉽고 심미적으로도 좋게 정보를 전달하는 것이라고도 생각합니다.

Manage State in React Apps with MobX

MobX는 많은 프로젝트에서 사용된 검증된 라이브러리로, functional reactive programming을 적용해 앱의 상태 관리를 쉽고 확장이 용이하게 도와줍니다.

MobX introduction [번역]

MobX는 많은 프로젝트에서 사용된 검증된 라이브러리로, functional reactive programming을 적용해 앱의 상태 관리를 쉽고 확장이 용이하게 도와줍니다.

Observer Pattern

Observer Pattern은 클라이언트 측 자바스크립트 프로그래밍에서 널리 사용되는 패턴이며, Observable을 사용하면 일련의 작업들을 모델링 할 수 있습니다.

Server setup - Authentication

웹 애플리케이션의 로그인 절차를 잘 구현하고, 보안 및 UX를 증진시키기 위해서는 User Authentication에 대해 이해하는 것이 중요합니다.

Client side auth

웹 애플리케이션의 로그인 절차를 잘 구현하고, 보안 및 UX를 증진시키기 위해서는 User Authentication에 대해 이해하는 것이 중요합니다.

(번역) 5 easy steps to understanding JSON web token

Medium의 글 5 easy steps to understanding JSON web token 번역해 보았습니다. Article Link 이 글을 통해서 JSON Web Token(JWT)의 기본 개념과 왜 사용되는지에 대해서 설명하고자 합니다. JWT는 우리의 애플리케이션의 신뢰와 보안에 있어서 중요한 역할을 합니다. JWT는 유저에 대한 정보를 안전한 방법으로 관리할 수 있도록 합니다. 더 자세한 설명을 하기 전, JWT…

Traverse NAT and firewalls in a WebRTC app

Contents After signaling What is NAT? What is ICE? STUN? How about TURN? Deploying STUN and TURN server Reference After signaling Node.js로 Signaling server를 구축하는 방법과 기본적인 WebRTC API에 대해서 이전 포스팅에서 살펴봤습니다. Link: Simple video chat with WebRTC Signaling…

Simple video chat with WebRTC

Contents Introduction to WebRTC What I will learn from this post How WebRTC works in the browser Stream video from your webcam Stream video with RTCPeerConnection RTCDataChannel to exchange data Create signaling server Limitation Reference…

You're Missing the Point of Promises [번역]

You're Missing the Point of Promises Contents Thenables and CommonJS Promises/A What Is the Point of Promises? That Second Paragraph So What? The Way Forward What Is the Point of Promises? 사실, 프로미스는 callback…

Normalizing State Shape

Normalizing State Shape Normalizing State Shape 대부분 웹 application…

(번역) So what’s this GraphQL thing I keep hearing about?

So what’s this GraphQL thing I keep hearing about? 만약 여러분이 저와 비슷하다면, 새로운 기술에 대한 소식을 들었을 때 아래의 세 단게를 겪을실 겁니다. 1. 무시단계 자바스크립트 라이브러리? jQuery면 됐지! 2. 관심 계속 소식을 듣게 되는데 한번 살펴봐야겠군 3. 공황상태 더 늦어지기 전에 당장 이 라이브러리를 배워야 해! 지금과 같이 빠르게 움직이는 시기에 평정심을 유지하는 방법은, 위의…

Middlewares with Redux

Contents Introduction to Middlewares How Async Middlewares Work Middleware Syntax Waiting for Promise Resolution State Validation Middleware JSON Schema Introduction to Middlewares Redux Middleware는 action creator로 생성한 action이 거쳐가는 함수입니다. How Async…

Higher Order Component

Contents Introduction Connect, Higher Order Component File Structure Overview for Building a HOC Introduction Higher Order Component는 React 컴포넌트이며, 앱 제작 시 재사용되는 코드를 줄일 수 있습니다. 만약 여러분이 리액트 앱을 제작하다, 컴포넌트 간 코드를 복사 / 붙여넣기 하는 경우 Higher Order Component…

Testing React, Redux App

Contents Introduction Installing Dependencies File Structure What to Test? Unit Test Test with JSDOM in Create React App Limiting Test Knowledge Test widh Enzyme Introduction…

Callback Hell

Callback Hell Article 번역해 보았습니다. http://callbackhell.com/ 자바스크립트 비동기 프로그래밍 가이드 What is callback hell? 비동기 프로그래밍 또는 자바스크립트에서 callback을 사용하는 경우, 코드를 직관적으로 읽기가 쉽지 않습니다. callback을 많이 사용하는 경우 아래와 같은 모양을 띄는 경우가 많습니다. 위의 코드와 같은 callback안에 callback…

Vuex for Oauth Flow

Image of Vuex 차례 Introduction File Structure General Oauth Flow Overview Connecting Vuex to Vue Auth Module State and Getters Initial Auth Module Design Updating and Mutating State Values Separate API Helper Wiring in the Auth Module Oauth Request…

Vue Basic

차례 - How to define a component template    - Single file component    - Using string    - Without template How to define a component template Vue에서 어떤 특정한 작업을 할 때, 코드는 다르지만 같은 결과를 얻을 수 있는 여러 방법이 있습니다. 이 중 template을 정의하는 몇가지 방법에 대해 알아보도록 하겠습니다. vue…

(번역) React, Vue로 동일한 앱 만들기

저는 React 문서를 읽고 튜토리얼 비디오도 보았습니다. React가 좋아 보였지만, 저는 실제 React와 Vue가 어떠한 차이점이 있는지 알고 싶었습니다. 저는 두 도구가 Virtual DOM을 사용하거나, 어떻게 렌더를 하는지에 대한 것보다, 누군가 두 툴의 코드에 대해 설명을 해줬으면 했습니다. 그래서 Vue, React…

Dynamic Programming Introduction

포스팅 작성을 위한 학습 및 자료 정리 중.. 아래는 위키피디아에 나와있는 Dynamic Programming 정의 중 일부를 발췌한 것입니다. 차례 - Dynamic Programming Dynamic Programming Dynamic Programming은 최적화와 연관이 있어, 'Dynamic Optimization'으로 불리기도 합니다. 그러면, Dynamic Programming…

알고리즘, 자료구조, 문제해결능력 향상 학습 계획

…

Pure Component & Functional Component

리액트(React)에서 컴포넌트를 생성하는 방법은 Class 기반으로 React.Component 또는 React.PureComponent를 extends하는 방법과, Functional Stateless Component로 생성하는 방법이 있습니다. 이 글에서는 React의 각 Component에 대한 개념과 차이점을 학습해 보도록 하겠습니다. Pure Component Pure Component에 대한 React…

REST API

What is API? API는 Application programming interface의 약자입니다. 우리가 데이터를 요청하고 받는 다양한 상호작용을 API를 이용해 할 수 있습니다. 이러한 데이터 상호 작용을 위해 클라이언트와 서버가 요청을 주고 받는 사이클이 만들어 지는데 이를 HTTP Request라고 합니다. 유효한 HTTP request가 되기 위해서 URL, METHOD, LIST OF HEADERS, BODY…

자료구조 [자바스크립트]

Contents Stack Queue Tree Interface Depth first Breadth first Check Tree width and depth Set Linked List Constructor Insert a node in the middle Delete a node Linked List function insertHead & removeHead forEach & print addMiddle & removeMiddle…

객체 지향 자바스크립트

OOP는 우리가 사물을 인식하는 자연스러운 방식을 반영해, 데이터와 기능을 논리적으로 묶어놓은 프로그래밍 방식입니다. 만약 자동차가 객체라면 그 데이터에는 제조사, 모델 등이 있을 것입니다. 그리고 기능으로는 전진, 후진 등이 있을 수 있습니다. OOP는 사물에 관해 추상적으로(어떠한 자동차인지), 혹은 구체적으로(특정 자동차) 생각하며 프로그래밍을 할 수 있게 합니다. Contents Prototype Property Lookup &…

Algorithm - All about palindrome

먼저 심플하게 함수를 구현해 보면 아래와 같이 array method를 사용할 수 있습니다. reverse method 또는 array method를 사용하지 않고 for 문으로는 아래와 같이 구현할 수 있습니다. 위와 같이 가장 직접적인 방법으로 문제를 풀 수 있습니다. 또 다른 방법으로도 접근할 수 있는데 every method를 활용해서 풀 수 있습니다. 위의 기본 풀이 방법을 인지하고, codewars에서 palindrome…

(번역) Webpack 4 Tutorial from 0 Conf to Production Mode

Webpack 4 Tutorial: from 0 Conf to Production Mode 가장 인기있는 모듈 번들러인 Webpack이 대대적인 업데이트를 진행했습니다. what’s new? 성능 향상, 무설정, 강력한 default 기능 목차 webpack 4 as a zero configuration module bundler webpack 4: getting started with zero conf webpack 4: production…

Big-O

Big-O Big O는 우리가 짠 알고리즘이 input size에 비례해 시간 및 공간 복잡도가 증가하는지 나타내는 표기법입니다. Big O는 worst case를 기준으로 하며 알고리즘의 실행 시간 및 공간 활용을 나타냅니다. 코드의 실행 시간은 데이터의 크기, 실행 환경, 컴파일러, 사용언어 등 여러 변수에 따라 달라집니다. 따라서, Big-O…

String ends with?

String ends with? Complete the solution so that it returns true if the first argument(string) passed in ends with the 2nd argument (also a string). Examples: 첫 번째 인자가 두 번째 인자 'string'으로 끝나면 true, 그렇지 않으면 false를 반환하는 문제입니다. 7kyu…

Sum of intervals

Sum of intervals Write a function called sumIntervals that accepts an array of intervals, and returns the sum of all the interval lengths. Overlapping intervals should only be counted once. Intervals Intervals are represented by a pair of integers in…

Ramda 라이브러리 구현해 보기

ramda 최근에 자바스크립트의 async 라이브러리 중 일부 메소드를 구현해 보는 연습과 함께, 함수형 라이브러리인 ramda.js의 일부 메소드를 구현해 보는 연습을 했습니다. 아직 함수형 프로그래밍에 대한 개념이 잘 잡히질 않았고 익숙해 지려면 많은 시간과 노력이 필요하겠지만, 함수형 프로그래밍이 대략 어떠한 식으로 작동하는지 감을 잡기에 좋은 시간이었습니다. 아래는 제가 연습했던 ramda.js…

Async 라이브러리 구현해 보기

async 이전에 Underscore 라이브러리의 메소드를 구현해 보는 연습을 했습니다. 이번에는 async 라이브러리 중 몇가지 메소드를 구현해 보는 연습을 하겠습니다. (async 라이브러리 : http://caolan.github.io/async/index.html) 라이브러리의 함수를 만드는 것은 이전의 그것과 비슷하지만, async…

Functional Programiing

차례 Functional Programming Imperative vs Declarative Abstraction Pure Functions and Side Effects Purifying Functions Functional Programming function이라는 keyword…

TwoSum

For the purposes of this kata, some tests may have multiple answers; any valid solutions will be accepted. The input will always be valid (numbers will be an array of length 2 or greater, and all of the items will be numbers; target will always be…

Rethinking-Asynchronous-Javascript

이번에는 한 가지 문제를 여러 비동기 프로그래밍 패턴을 사용해 해결하는 연습을 하고자 합니다. 한 가지 방법이 모든 면에서 좋다면 그 한가지 방법만 공부하면 되겠지만, 실상은 그렇지가 않습니다. 제네레이터를 비동기적으로 사용하려면 프로미스나 특수한 콜백과 함께 사용해야 합니다. 프라미스는 콜백에 의존합니다. 따라서 여러 비동기적 방법에 대해 익히고 장단점에 대해서도 파악해 보는것이 좋겠습니다. 차례 Async vs Parallel…

Valid Parentheses

문제 Write a function called that takes a string of parentheses, and determines if the order of the parentheses is valid. The function should return true if the string is valid, and false if it's invalid. Argument로 받는 괄호의 짝이 맞는지 아닌지 Boolean…

ES2015 a.k.a "ES6"

목차 - var, let and const - Arrow function var, let and const var는 함수 단위로 스코프가 형성이 되고, ES6의 let과 const는 block 단위로 스코프가 형성됩니다. let과 const역시 var와 같이 hoisting이 되지만, temporal deadzone이 생겨서 var와는 다르게 값이 변수에 할당되기 전까지 사용할 수는 없습니다. let let 변수는 var…

(번역) Recursive Descent Parser for JSON

정렬알고리즘 & 시각화 (Sorting Algorithms)

목차 정렬알고리즘 소개 버블정렬(Buble Sort) Stability-Adaptability 선택정렬(Selection Sort) 삽입정렬(Insertion-Sort) 병합정렬(Merge-Sort) 퀵정렬(Quick-Sort) 정렬알고리즘 소개 정렬 알고리즘을 사용하면 아래와 같은 여러 작업을 할 때 도움이 될 수 있습니다. 어떠한 리스트를 정렬할 때 중간값을 찾아야 할 때 중복값을 찾을 때 Database에서 Binary Search…

Recursion Intro

Recursion은 Function이 자신을 함수 내부에서 호출하게 함으로써 문제를 해결하는 방법입니다. Recursion을 사용하면 소량의 처리만 완료하고 나머지 작업을 재귀 호출한 함수에 위임할 수 있으며, 코드도 좀 더 직관적으로 작성할 수 있습니다. 일반적으로 Recurtion에는 Base condition이 존재하고, 이 base 덕분에 함수가 무한으로 호출되는 것을 막습니다. Wrapper 함수 안에서 recursion…

(번역) 자바스크립트 자료구조

목차 Introduction Stack Queue Linked List Tree Introduction 웹개발에 있어 주요 로직이 벡엔드에서 프론트로 넘어오면서, 프론트엔드에 대한 전문 지식의 중요성이 점차 커지고 있습니다. 프론트엔트 개발자는 생산성 향상을 위해서 React와 같은 화면 구성을 위한 뷰 라이브러리를 사용합니다. 뷰 라이브러리는는 자료 관리를 위한 Redux와 같은 state 라이브러리에 의존합니다. React와 Redux…

Sort odd and even numbers in different order

Note that zero is even number. If you have an empty array, you need to return it. Example sortArray(5, 3, 2, 8, 1, 4) == 1, 3, 8, 4, 5, 2 배열의 홀수는 오름차순으로, 짝수는 내림차순으로 배열을 정리하는 문제입니다. 홀수와 짝수의 자리는(index) 그대로 지켜야 합니다. 저의 풀이과정은 아래와 같습니다.  - loop…

Find the odd int

There will always be only one integer that appears an odd number of times. 배열이 주어지면, 배열 내 홀수 갯수 만큼 있는 요소를 반환하는 문제입니다. iteration을 한 번 돌면서 배열의 요소 갯수를 카운트했습니다. 이후 for in…

Fetch API [번역]

웹의 AJAX와 관련된 불편한 진실 중 한가지는 XMLHttpRequest이 사실은 우리가 사용하고 있는 용도로 고안된 것이 아니라는 점이니다. 지금까지 우리는 XHR을 이용해 훌륭한 API를 만들었지만, 이제는 Fetch API를 사용할 수 있습니다. 그런면 windonw.fetch method의 기본적인 내용에 대해서 살펴보겠습니다. Basic fetch Usage fetch funtion은 global(window) scope…

Javascript Promise(프로미스) 만들기

"A Promise is an object representing the eventual completion or failure of an asynchronous operation." Promise는 비동기 프로그래밍에서 미래의 어느 시점에 실행할 코드를 나타내는 객체입니다. 현실에서 비유를 하자면 은행 업무를 위해 번호표를 뽑고 기다리는 것과 비슷합니다. 번호표가 Promise이고 창구로 가서 도움을 받는 행위를 callback…

Babel 설치

npm을 이용해 babel을 설치할 수 있습니다. babel-core는 babel compiler의 핵심 기능을 하는 Webpack의 loader는 여러 종류의 파일을 불러와 전처리를 해줍니다. 예를들어, Sass 코드를 css로, ES6를 ES5로 변경해줍니다. 그리고 여기서 ES6를 ES5로 변환하기 위해서 babel-loader가 필요합니다. ES6에서 ES5로 변환할 수 없는 것들이 있습니다. 예로 Promises나 Array.from…

Ajax with Fetch

XMLHttpRequest 링크 jQuery.ajax 링크 목차 - Fetch Request 보내기 - HTTP Method 변경하기 - Response 처리하기 - Error 처리하기 Fetch Request 보내기 XMLHttpReqeust로 서버에 요청하기 위해서, XHR 객체를 생성하고 open, send 메서드르 이용해야 합니다. 절차가 다소 복잡하고 또한 코드도 장황하게 느껴집니다. Fetch…

Ajax with jQuery

XMLHttpRequest를 포스트와 연관된 내용이니 아래 링크를 참고해 주세요. https://chanwhekim.github.io/2018/09/26/ajaxwithxhr/ 차례 - XHR을 jQuery Ajax로 변경하기 - jQuery Ajax 소스코드 살펴보기 - jQuery의 다른 Async Method 살펴보기 다른 포스트에서 XMLHttpRequest…

Ajax with XHR (사진/기사 검색 Web app 만들기)

Ajax with XHR (사진/기사 검색 Web app 만들기) 목차 - Before Ajax - API란? - XHR Object - APIs and JSON - Unsplash / NYT API를 이용한 웹애플리케이션 만들기 90년대 후반 마이크로소프트에서 XMLHTTP를 웹버전 outlook에 추가했고, 이것이 다른 브라우저에서 XMLHttpRequest로 적용되었습니다. 이것은 Javascript로 HTTP request…

XMLHttpRequest

XMLHttpRequest 차례 - XMLHttpRequest란? - 기본적인 처리 흐름 - 서버와의 통신 시 사용할 처리 방법 등록 - XMLHttpRequest 객체의 이벤트 - XMLHttpRequest.open( ) 메서드 - XMLHttpRequest.send( ) 메서드 XMLHttpRequest란? 지금은 JSON을 대부분 이용하지만, Ajax란 Asynchronous Javascript + XML…

Requests & Responses

Requests & Responses 목차 - HTTP란? (HyperText Transaction Protocol) - 서버란? - URI (Uniform Resource Identifier) - Hostnames - Ports - HTTP GET requests - HTTP responses HTTP란? (HyperText Transaction Protocol) HTTP(HyperText Transaction Protocol…

DOM Rendering Performance

Contents 요소 추가 위한 For loop 사용 코드 performance 테스트 Document Fragment 이용하기 Reflow & Reprint Virtual DOM Event Loop 요소 추가하기 위한 For loop 사용 지난 DOM 관련 포스팅에서 웹페이지에 요소를 추가하기 위해 아래와 같이 for loop을 사용했습니다. 지난 포스팅 링크 위의 코드는 paragraph…

웹브라우저 이벤트 다루기

웹브라우저 이벤트 다루기 Contents Event Interface and addEventListener Remove an Event Listener Event Phases Event Object Event Delegation 이벤트 위임 중 Node Type 확인하기 다른 포스트에서 Node Interface와 Element Interface에 대해서 간단히 살펴봤습니다. Interface 관련 포스트 Link Event Interface…

Creating Content with Javascript

Creating Content with Javascript Javascript와 DOM을 이용해 웹브라우저 상의 HTML과 text content를 변경하는 법을 알아보겠습니다. querySelector 또는 getElementById 등으로 요소를 선택해 변수에 할당하면, 해당 요소에 접근하기 위해 그 요소를 할당한 변수를 사용할 수 있습니다. 목차 - HTML 요소 내부의 HTML - HTML 요소 내부의 text content…

Roman Numerals Helper

Roman Numerals Helper Create a RomanNumerals helper that can convert a roman numeral to and from an integer value. It should follow the API demonstrated in the examples below. Multiple roman numeral values will be tested for each helper method…

the Document Object Model

Contents DOM-이란? DOM-형성과정 DOM-Element-선택하기 Node란? Element-Interface DOM-이란? D.O.M.(Document Object Model)이란 HTML의 컨텐츠 및 속성을 트리 구조화 한 객체 모델입니다. 우리는 자바스크립트와 DOM을 이용해 여러 작업을 할 수 있습니다. 웹페이지에 요소를 추가하거나, 배경 사진을 바꾸고, 요소의 속성을 변경할 수도 있습니다. DOM-형성과정 dom…

Nesting Structure Comparison

Nesting Structure Comparison Complete the method to return true when its argument is an array that has the same nesting structure as the first array. For your convenience, there is already a function 'isArray(o)' declared and defined that returns…

Title Case

Title Case A string is considered to be in title case if each word in the string is either (a) capitalised (that is, only the first letter of the word is in upper case) or (b) considered to be an exception and put entirely into lower case unless it…

Josephus Permutation

Josephus Permutation This problem takes its name by arguably the most important event in the life of the ancient historian Josephus: according to his tale, he and his 40 soldiers were trapped in a cave by the Romans during a siege. Refusing to…

Sum of pairs

Sum of pairs (자바스크립트) 문제 Given a list of integers and a single sum value, return the first two values (parse from the left please) in order of appearance that add up to form the sum. Negative numbers and duplicate numbers can and will appear. NOTE…

Sort the odd

Sort the odd 문제 You have an array of numbers. Your task is to sort ascending odd numbers but even numbers must be on their places. Zero isn't an odd number and you don't need to move it. If you have an empty array, you need to return it…

(번역) Adding Extremely Large Numbers and Extra Long Factorials.

번역 Adding Extremely Large Numbers and Extra Long Factorials. 원문 Link 자바스크립트에서 우리는 53 bits까지만 숫자를 저장할 수 있습니다. 바꿔 말하면, 가장 안전하게 저장 가능한 큰 수는 9007199254740991입니다. Number.MAXSAFEINTEGER 참고 이러한 자바스크립트의 성질은 매우 큰 숫자를 연산하거나 factorial…

Sum Strings as Numbers

Sum Strings as Numbers Given the string representations of two integers, return the string representation of the sum of those integers. A string representation of an integer will contain no characters besides the ten numerals "0" to "…

Product of consecutive Fib numbers

Product of consecutive Fib numbers 이번 문제는 피보나치 수와 관련된 문제입니다. 문제를 먼저 살펴보겠습니다. 목차 - 문제확인 - 피보나치 개념 - 나의풀이 Fibonacci-문제 Given a number, say prod (for product), we search two Fibonacci numbers F(n) and F(n+1) verifying Your function productFib takes an…

Caesar Cipher Helper

Caesar Cipher Helper Write a class that, when given a string, will return an uppercase string with each letter shifted forward in the alphabet by however many spots the cipher was initialized to. For example: If something in the string is not in the…

Function Cache

Function Cache If you are calculating complex things or execute time-consuming API calls, you sometimes want to cache the results. In this case we want you to create a function wrapper, which takes a function and caches its results depending on the…

Calculating with functions

Calculating with functions This time we want to write calculations using functions and get the results. Let's have a look at some examples: Examples: Requirements: There must be a function for each number from 0 ("zero") to 9 ("nine") There must be a…

Find the missing letter

Find the missing letter Write a method that takes an array of consecutive (increasing) letters as input and that returns the missing letter in the array. You will always get an valid array. And it will be always exactly one letter be missing. The…

Format a string of names like 'Bart, Lisa & Maggie'.

Format a string of names like 'Bart, Lisa & Maggie'. Given: an array containing hashes of names Return: a string formatted as a list of names separated by commas except for the last two names, which should be separated by an ampersand. Example list…

Count the smiley faces!

Count the smiley faces! Description: - Given an array (arr) as an argument complete the function countSmileys that should return the total number of smiling faces. Rules for a smiling face: Each smiley face must contain a valid pair of eyes. Eyes can…

onetwothreecountry

최대공약수 최소공배수 구하기

두 수를 받으면 최대공약수와 최소공배수를 배열로 리턴하는 함수를 짜는 문제입니다. ex ) 2, 5 --> 1, 10 우선 최대공약수와 최소공배수의 개념과 의미에 대해 간단히 되짚고 풀이를 살펴보겠습니다. :)

Sass 설치 (npm 이용)

안녕하세요. 이번 포스팅에서는, Sass를 설치법에 대해 알아보겠습니다. Sass를 설치하는 방법은 여러 가지가 있지만, 저는 제가 이용하는 방법인 npm(Node Package Manager)를 이용해 설치하는 방법을 정리해 보고자 합니다. NPM은 심플한 command line 프로그램이며, npm…

같은 숫자는 싫어 [자바스크립트]

배열에서 동일한 숫자가 연속적으로 반복할 때, 한 개만 남기고 나머지는 삭제하는 방법에 대해 정리하겠습니다. 1,1,3,3,0,1,1 => 1,3,0,1을 출력 4,4,4,3,3 => 4,3을 출력 위의 문제는 filter method를 사용해 조건에 부합하는 요소만 취해 새로운 배열을 반환하게 하면 쉽게 풀 수 있습니다. 배열의 각 요소와 그 다음 요소를 비교해, 값이 같으면 넘어가고(false) 다르면 true…

특정 월, 특정 일의 요일 확인하기

안녕하세요. 이번 포스팅에서는 특정 월과 특정 일이 주어졌을 때 2018년도의 요일을 반환하는 간단한 함수에 대해 정리하겠습니다. 함수의 인자로 1, 25일이 전달되면, 'THU'의 반환값이 나오게 함수를 작성하면 됩니다. 요일은 'SUN', 'MON'..'SAT' 형식으로 반환합니다. 간단한 함수이지만, Date object관련 익히기에 좋은 것 같습니다. new Date()를 이용해 주어진 날짜를 기준으로 객체를 생성합니다.  - Date…

숫자 n까지의 소수 찾기 (자바스크립트)

이전에 특정 수의 가장 큰 소인수를 찾는 방법을 포스팅했었습니다. 이번에는 주어진 수 n까지 소수의 개수 찾는 방법에 대해 알아보도록 하겠습니다. Contents 소수란? (Prime factor) 주어진 수가 소수인지 확인하는 방법 소수의 개수 구하는 방법 에라토스테네스의 체 추가 최적화 방법 소수란?(Prime factor) 소수란 약수로 1과 자기 자신만을 가지는 수입니다. 0과 1은 소수가 아닙니다. 따라서,…

Underscore.js 직접 라이브러리 만들어 보기

직접 라이브러리 만들어 보기(Underscore.js) 안녕하세요. Underscores.js의 기능들을 underscore.js라이브러리를 사용하지 않고 직접 자바스크립트 코드로 구현해보는 연습을 하고 있습니다. 동일한 기능의 함수이지만, 작성하는 사람에 따라 코드가 정말 천차만별인것을 느끼고 있습니다. 아직 어떠한 코드가 더 좋은 코드인지 확실하게 느껴지지 않지만, 이 능력을 연습을 통해 게속 늘려야겠다고 생각했습니다. underscore…

Underscore.js 1부 - 둘러보기

Underscore.js 1부 - 둘러보기 목차 - Underscore.js 란? - Collections    1 ) .identity    2 ) _.first]    3 ) _.last    4 ) _.each    5 ) _.filter    6 ) _.reject    7 ) _.uniq    8 ) _.map    9 ) _.pluck    10 ) _.reduce    11 ) _.contains    12 ) _.every…

Must Know - CSS Grid (CSS 그리드)

Must Know - CSS Grid (CSS 그리드) 목차 - CSS GRID란? - CSS GRID 기본 구성도 - CSS GRID 용어 정리 - 기본 CSS GRID 만들어 보기 - fr 단위 및 repeat 속성 - GRID ITEM 배치하기 CSS GRID란? 기존의 웹페이지에서 화면의 레이아웃을 구성하기 위해서는 html 요소의 display 속성을 inline으로 변경 후 float 속성을 추가해서 화면을 구성했습니다. float…

자바스크립트 실행문맥(Execution context) 이해하기

Contents 우리가 쓴 코드가 읽히는 방식 자바스크립트 실행문맥의 이해하기 Execution stack Global execution context 실행문맥에 담기는 것들 실행문맥의 생성 및 코드 실행 실행문맥 vs Scope 우리가 쓴 코드가 읽히는 방식 자바스크립트의 호스팅 환경이 웹브라우저라고 할 때, 웹브라우저의 자바스크립트 엔진이 우리가 쓴 코드를 실행시켜 줍니다. 자바스크립트의 대표적인 엔진으로는 Google의 V…

자바스크립트 클로져(Javascript Closure)

클로져란 함수가 그 함수의 Lexical Scope를 벗어난 다른 곳에서 호출이 되어도, Lexical Scope를 기억하고 있는 자바스크립트 함수의 특성을 말합니다. 바꿔말하면, 클로져란 함수를 다른 곳에 전달하거나 혹은 return을 하든지 상관하지 않고, 함수가 참조하고 있는 lexical scope의 변수를 기억하고 접근할 수 있는 기능을 말합니다. 내부함수를 callback으로 전달한 경우 아래의 코드는 foo함수의 내부함수 baz…

자바스크립트 Scope와 Hoisting 개념 이해

안녕하세요. 오늘은 자바스크립트 초급자를 벗어나기 위해 필수적으로 이해가 필요한 Scope와 Hoisting에 대해 정리해 보고자 합니다. :) 목차 Contents What is Scope? Lexical Scope Execution Context Scope Chaining 호이스팅 What is Scope? A scope is the part of a program where a binding between a variable and…

(자바스크립트) 조건에 따른 임의의 숫자 만들기

(자바스크립트) 조건에 따른 임의의 숫자 만들기 안녕하세요. 오늘은 학습한 내용 중 자바스크립트로 임의의 숫자를 만드는 방법을 정리해 보고자 합니다.   목차 - 한 자리의 임의의 자연수 만들기 - 주어진 범위 내에서의 임의의 수 만들기   - 한 자리의 임의의 자연수 만들기 먼저, 한 자릿수의 숫자를 임의를 만들기 위해서 자바스크립트의 내장 객체인 Math의 radom메소드를 사용할 수 있습니다. Math.random() 메소드는…

세자리 수의 곱으로 이루어진 가장 큰 회문(palindrome) 찾기

세자리 수의 곱으로 이루어진 가장 큰 회문(palindrome) 찾기 회문(palindrome)이란 앞으로 읽으나 뒤집어 읽으나 똑같은 문자열을 말합니다. 이번 포스팅에서는 세 자리 숫자의 곱으로 이루어진 수 중, 가장 큰 회문을 이루는 숫자를 찾는 방법에 대해 학습해 보고자 합니다. 저는 아래와 같은 방법으로 상기 문제를 해결해 보고자 합니다. - 우선 주어진 숫자가 회문인지 아닌지 확인하는 function…

가장 큰 소인수 구하기 (Javascript)

가장 큰 소인수 구하기 (Javascript) 차례 - 소수란? (Prime factor) - 소수 구하는 방법? - 문제해결방법 소수란?(Prime factor) - 소수란 약수로 1과 자기 자신만을 가지는 수이다. 소수를 구하는 방법 - 주어진 수보다 작은 수로 나누어 떨어지면 소수가 아니다. - 별도로 소수를 구하는 공식은 현재는 없는 것 같다...; 문제해결방법 - 특정 수의 가장 큰 소인수 구하기 - 위의 코드를 보면,…

flexitembasic

플렉스 박스 개념 이해하기 (Flexbox Basic)

자바스크립트의 this keyword (Javascript)

자바스크립트의 this keyword (Javascript) 오늘은 'this' 키워드에 대해 정리해 보고, 그동안 'this'에 대해 온전히 이해하지 못 한 부분을 해소하고자 합니다. 'this'의 값은 코드가 쓰여진 위치를 보고 판단할 수 있는 lexical scope와는 다르게, 기록된 코드만 보고는 그 값을 알 수 없습니다. 다시 말하면, 'this'의 값은 binding이 어떻게 되는지에 따라 달라집니다. 그래서, 'this…

자주 사용하는 Array Methods - 1

자주 사용하는 Array Methods - 1 안녕하세요. 이번 포스팅에서는 Array에서 보편적으로 많이 사용하고 기본적인 method에 대해서 간단히 정리하고자 합니다. 보시면 아시겠지만, 꾸준히 사용하는 method들이라 포스팅을 생략할까 하다가 자주 사용한다는 것은 그만큼 중요하다는 뜻이기 때문에 마음을 고쳐먹었습니다. 그리고 무엇보다 저는 아직 초심자이니 아무것도 알지 못한다는 마음으로 배워야 할 것 같습니다. Array methods…

플렉스 박스 이해하기 및 실습 (Flex-Box Basic)

플렉스 박스 개념 이해하기 (Flexbox Basic) 주요 목차 - 플렉스박스 기본 개념 - 플렉스박스(flexbox) 주요 속성 - 플렉스박스(flexbox) 주요 속성 실습 플렉스박스(Flex-box)란 플렉스 박스를 아직 마음껏 사용해 보진 않았지만, 향후 작업 시 시간도 절약할 수 있고 좀 더 쉽게 웹페이지 제작을 할 수 있을 것 같습니다. 그동안 사용했던 grid.css파일은 sass로 각 grid별 width…

Javascript 기본기 정리하고 넘어가기 - 5

Javascript 기본기 정리하고 넘어가기 - 5 7. Parameters and Arguments 저는 공구 제조업에서 근무를 했던 경험이 있었는데, function을 공작기계에 비유한다면 이해가 좀 더 쉬울 것 같습니다. 공작기계는 가공하고자 하는 원자재(예로 알루미늄, 티타늄, 주철 등..;;)를 넣으면 사용자가 원하는 모양으로 가공해 결과물을 반환합니다. 마찬가지로, 우리는 function에 어떠한 원자재를 전달해서, function…

Javascript 기본기 정리하고 넘어가기 - 4

Javascript 기본기 정리하고 넘어가기 - 4 6. Function 'Function도 객체이다'는 무슨뜻일까요? Javascript를 배우기 시작한지 얼마 되지는 않았지만, 저는 이 말을 많이 들었습니다. 하지만, Object에 property를 부여하듯, 실제로 function에도 property를 부여하고 그 값을 다시 불러올 수 있는지 몰랐습니다. function은 다른 object와 동일한 기능을 가지고 있습니다. function…

Javascript 기본기 정리하고 넘어가기 - 3

Javascript 기본기 정리하고 넘어가기 - 3 5. Array 배열은 Object와 동일하게 property를 가지며, 접근방법도 Object와 동일하게 접근할 수 있습니다. 하지만, 배열은 순차적으로 나열된 데이터를 순차적인 숫자로 된 key값으로 정렬해서 담기에 좋다고 생각합니다. 주로 배열의 장점을 살리기 위해 문자열로 된 key 값을 많이 사용하지는 않지만, object와 마찬가지로 숫자 index 대신 문자열로 된 key…

Javascript 기본기 정리하고 넘어가기 - 2

Javascript 기본기 정리하고 넘어가기 - 2 4. Objects & Properties Javacript에서 Object는 여러 종류의 정보를 담기에 좋은 수단입니다. 배열이 데이터를 인덱스로 식별한다면, Object는 임의의 문자인 key와 value로 데이터를 관리할 수 있습니다. key와 value pair를 가리겨 property라고 합니다. key 값을 이용해 property의 value…

Javascript 기본기 정리하고 넘어가기 - 1

Javascript 기본기 정리하고 넘어가기 - 1 ' You've got to get the fundamentals down because otherwise the fancy stuff insn't goint to work. - Last Lecture by Randy Pausch ' 이번 포스팅에는 Javascript를 더 깊이 이해하기 위해, 다시 한 번 초석을 다진다는 개념으로 Javascript…

자주 사용하는 Array Methods - 2

자주 사용하는 Array Methods - 2 안녕하세요. 현재 Array methods를 학습하고 있는데, 몇몇 method가 비슷한 부분도 있고 헷갈리기도 해서 한 번 정리하고 넘어가고자 합니다. 이번 포스팅에서는 아래의 Array methods에 관해서 요점만 간략히 정리하고자 합니다. sort method는 헷갈려서 조금 더 자세히 살펴 보았습니다. Array methods concat every / some fill reverse…

filter method로 조건에 부합하지 않는 배열 요소 걸러내기

filter method로 조건에 부합하지 않는 배열 요소 걸러내기 이번에는 배열의 filter method에 대해서 알아 보도록 하겠습니다. 저는 아직 초심자이지만 filter이름만 봐도 어떤 역할을 해 줄 녀석인지 대충 감을 잡을 수 있을 것 같습니다. filter를 사용하면 callback 함수 내에 명시된 조건에 부합하는 배열의 요소만 걸러내어 새로운 배열을 만들 수 있습니다. (immutable) Summary - Array…

주어진 단어 중 가장 짧은 단어 찾기

주어진 단어 중 가장 짧은 단어 찾기 이번 포스팅에서는 세 개의 단어가 함수에 인자로 주어졌을 때 글자수가 가장 짧은 단어를 찾는 방법에 대해 정리해 보았습니다. 먼저 for문으로 구하는 법에 대해 정리해 보았습니다. 다음은 배열의 reduce() method를 사용해 해결하는 방법에 대해 정리해 보았습니다. reduce method는 각 배열의 요소마다 callback함수를 적용해 반환된 값(accumulator…

Object의 속성 개수 세기

한 객체가 몇 개의 Property를 가지고 있는지 알 수 있는 방법에 대해 알아보겠습니다. 먼저, for loop로 propery의 개수 만큼 반복문을 만들고, 반복문이 한 번씩 실행될 때마다 카운트를 할 수 있습니다. 또는 배열에는 length 속성이 있지만, Object에는 length가 없습니다. 대신 Object.keys() method 사용할 수 있습니다. Object.keys()는 key…

Object에 다른 Object의 Property 추가하기

Object에 다른 Object의 Property 추가하기 한 객체가 지닌 Property는 그대로 유지하면서, 자신에게 없는 다른 객체의 Property만 추가하려면 어떠한 방법이 있을까요? 제가 지금 알고있는 한도에서 짜본 코드는 아래와 같습니다. ! operator를 이용해 조금 더 간결하게 쓸 수는 있지만, '!'을 쓰면 뭔가 코드 가독성이 떨어지는 것 같습니다. 주의할 점은 for -- in 구문에서 객체의 key 값으로 오는 name…

문자열에 포함된 특정 문자 수 세기

문자열에 포함된 특정 문자 수 세기 Javascript로 어떠한 문자열에 몇 개의 특정 문자가 포함되었는지 확인하는 방법에 대해 배워보았습니다. 제가 먼저 생각해 낸 방법은 for문으로 문자열에서 특수 문자를 찾을때마다 1씩 카운팅 하는 방법이였습니다. 문자열 함수 좀 더 간결한 방법이 있을 것 같아, stackoverflow에서 아래와 같은 방법을 확인할 수 있었습니다. Split Method 사용하기 str.split(char…

String 길이 알아내기(w/o length property)

String의 Length 속성을 사용하면 쉽게 string의 길이를 알 수 있습니다. 하지만, length 속성을 사용하지 않고 어떻게 알아낼 수 있을까요? 바로, String의 slice() 메소드를 사용할 수 있습니다. String.slice() Method는 String의 일부 또는 전체 문자를 추출하여 새로운 문자열을 생성합니다. Parameter로는 문자를 추출할 시작 index값, 두 번째 Parameter로는 end index…

Javascript Factorial 함수

Factorial이란, 1에서 n까지의 모든 자연수의 곱을 n에 대하여 이르는 것으로 n!로 표기합니다. 아래는 팩토리얼 문제입니다. Factorial of n: The factorial of n is the product of all the integers preceding n, starting with 1 그리고 다음은 제가 고민해서 짠 함수입니다. 코드를 풀어서 보면, 아래와 같이 진행되는 걸 확인할 수 있습니다.   cur값  i…

Javascript로 HTML 태그 생성하기 - 1

Javascript로 웹에 요소 추가하기 - 1 (Preview) Javasscript를 배우기 시작한지 한 달이 조금 넘은 것 같습니다. 아직 배운지 얼마 되지 않았지만 Javascript…