profile
개발 공부를 위한 블로그

5. Flex Panels Image Gallery

image.png 개요 사용자 입력을 받아 분할된 div 에 변화를 주어보자. 배운 점 CSS : flex layout flex layout 은 Items 과 이를 감싸고 있는 Container 로 구성되어 있습니다. Itmes 비율을 조절하기 위해 flex: 증가너비 감소너비 기본너비 문구를 사용할 수 있습니다. 각 너비에 들어가는 값은 % 를 이...

2019년 11월 29일
·
0개의 댓글

twittler

image.png 개요 username, message 를 입력받아 시간의 역순으로 트윗을 기록합니다. 트윗의 username 을 클릭하면 해당 user 의 트윗을 보여줍니다. 주요 로직 소개 새로운 tweet 을 올리는 로직으로 'insertBeforeTweet' 을 호출합니다. username 을 클릭하면 해당 user 의 트윗만을 보여주는 기...

2019년 11월 28일
·
0개의 댓글

4. Array Cardio Day

개요 Array 의 prototype function 을 사용해보자. foreach, sort, reduce, map 배운 점 Array 의 prototype function 인 foreach, sort, reduce, map 의 사용법을 실습해 보았습니다. 추가적으로 찾아볼 것 Array 의 prototype function 추가 확인. 반복적으로 ...

2019년 11월 22일
·
0개의 댓글

3. Playing with CSS Variables and JS

image.png 개요 range, color input 태그에 이벤트 리스너를 달아보자. 배운 점 CSS 내에서의 변수 값 사용 :root 문서의 최상위 단계에 정의되는 요소. -- 키워드를 통해 CSS 에서 변수를 사용할 수 있습니다. 여러 종류의 CSS 단위에 대응하기 위해 태그에 dataset 을 활용할 수 있습니다. 추가적으로 찾아볼 ...

2019년 11월 21일
·
0개의 댓글

[toy1] 작업기록 2

image.png 주요 작업 내용 1.API 문서를 기반으로 metadata 를 만들고 JSON parse 를 이용해서 response 값 분석과 metadata 의 값을 맞추었습니다. 삽질 & 후기 DB 를 사용하면 간단하게 될 것 같은 metadata 관리를 js 내에서만 하려니 너무 힘들었습니다. DEFINE 과 같은 개념이 있는지 찾아보았지만 ...

2019년 11월 20일
·
0개의 댓글

[toy1] 작업기록 1

주요 작업 내용 기상청 '동네예보정보조회서비스' API 가져오기 D+3 일의 일기 예보를 가져올 수 있는 API 를 찾았습니다. key 발급도 쉽고 바로 활용할 수 있었습니다. get 방식만을 지원하며 XMLHttpRequest 를 통해 값을 가져왔습니다. API 문서를 기반으로 metadata 를 만들고 JSON parse 를 이용해서 사용자가 읽을 수 ...

2019년 11월 19일
·
0개의 댓글

[toy1] toy1 을 시작하면서..

공부를 하는 것과 별개로 목표를 잡고 ToyProject 를 만들어보기로 했습니다. 기획을 고려할 단계는 아니기 때문에 내가 아는 기술들로 구현이 가능한 범위부터 단계적으로 만들 수 있는 것과 가능하면 내가 정말로 사용할 만한 것을 생각해 보았습니다. 우선 순위나 실제 구현 가능 여부를 판단하기 보다는 머리속에 있는 것을 적어보고 실제로 구현해가면서 업데...

2019년 11월 19일
·
0개의 댓글

2. CSS + JS Clock

image.png 개요 현재 시간에 대응하여 움직이는 아날로그 시계를 만들어보자. 배운 점 CSS property 사용 transition: 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다. transform-origin: 변화의 중심을 지정합니다. (X축, Y축) javascript 를 통한 CSS property 조작 &...

2019년 11월 18일
·
0개의 댓글

1. JavaScript Drum Kit

image.png 개요 키보드 이벤트에 반응하는 div 와 audio 태그를 만들어보자. 배운 점 Array.prototype.forEach() 의 사용 Array 객체에서만 사용할 수 있으며 CallBack 함수를 매개변수로 받아 Array 의 모든 요소에 대해 CallBack 함수를 수행합니다. ES6 의 화살표 함수 익명 함수에서만 사용할 수 ...

2019년 11월 16일
·
0개의 댓글

0. JavaScript30 을 시작하며..

image.png 개발자 부트캠프를 기다리면서 목표가 흐릿한 공부를 하는 것보다는 무엇이라도 만들면서 하는 것이 좋다고 생각되어 검색을 하던 중 30일간 진행되는 Vanilla JavaScript 챌린지를 찾았다. 이미 어느 정도 문법이 익숙한 것을 전제로 한 강의여서 그런지 첫번째 부터 시간이 걸렸지만 답안도 공개되어 있고 이미 여러 블로그에서 풀이...

2019년 11월 16일
·
0개의 댓글

CSS

CSS 란? HTML 이 정보를 표현한다면 CSS 는 HTML 을 시각적으로 꾸며주는 역할을 합니다. HTML 에서 디자인을 구현하기 위하여 초기에는 추가적인 tag 를 사용 하였습니다. (ex. font) 하지만 그런 경우 유지보수의 어려움이 있고 정보와 디자인이 분리되지 않아 HTML 처리가 오래 걸렸지만, CSS 를 분리함으로서 HTML 은 정보만을...

2019년 10월 23일
·
0개의 댓글

참고용 링크

Visual Studio Code 단축키

2019년 10월 18일
·
0개의 댓글

Javascript 자료구조

Array 배열 선언 후 map 을 사용 시에는 먼저 할당을 하여야 한다. 빈 배열에 map 을 하여도 에러는 발생하지 않지만 NAN 이나 undefined 도 나오지 않아 위험성이 있다.

2019년 10월 16일
·
0개의 댓글

testbuilder (2)

STEP FOUR class CardInfo getCardInfo() CardInfo 에는 여러개의 prefix 와 length 가 들어갈 수 있습니다. 이 메서드를 통해서 조합 되는 모든 경우의 구분자를 리턴 받습니다. class AllCardInfo checkCardName(cardNumber) cardNumber 에 해당하...

2019년 10월 16일
·
0개의 댓글

testbuilder (1)

image.png Koans 과제가 web 으로 결과를 보며 피드백을 하는 형태라면, testbuilder 과제는 console 에서 시작했다. 구현 내용은 CARD BIN 을 통해 카드의 종류를 확인하는 로직으로 파악하고 시작했다. (CARD BIN 체크는 이전의 주업무 중 하나였는데 이렇게 문제로 보니까 신기했다..) STEP ONE 입력된 문자열...

2019년 10월 16일
·
0개의 댓글

JavaScriptKoans

과거 JAVA 개발 당시 try-catch 문의 단위 테스트, 유닛 테스트의 개념은 알고 있었지만 범위가 작고 혼자 개발했었기에 큰 활용을 하지 않았던 기억이 있다. 그리고 개념적으로만 TDD 를 들어본 나에게 jasmin 을 활용한 Koans 과제는 매우 흥미로웠다. 비록 jasmin 을 처음 알고 api 를 찾아보면서 package.json 과 expe...

2019년 10월 16일
·
0개의 댓글

코드스테이츠 Pre Course 를 시작하며..

개발자 부트캠프를 알아보면서 제일 눈에 띄는 곳은 코드스쿼드와 코드스테이츠였다. 하지만 두 곳 모두 2020 년 초에야 전문가 과정이 오픈하기 때문에 시간이 뜰 수 밖에 없었고 먼저 기초를 다지자는 생각으로 온라인 교육을 듣기로 했다. 코드스쿼드는 수강이 끝났고 코드스테이츠는 2주차를 지나 심화 문제를 풀어가는 지금, 과정의 만족도는 코드스테이츠가 압도적...

2019년 10월 16일
·
0개의 댓글

Javascript 기본

논리값 Falsy 값 거짓 같은 값 (Falsy) 은 불리언 문맥에서 false 로 평가되는 값입니다. 논리 연산자의 결과 논리 연산자의 결과에 Boolean 이 아닌 값이 들어갈 수 있습니다. OR 연산자는 truthy 한 값을 만나면 그 값을 출력합니다. (그 이후로는 평가하지 않습니다) 둘다 falsy 한 경우, 뒤에 있는 값을 출력합니다. A...

2019년 10월 15일
·
0개의 댓글

Javascript Style Guide

Indentation – 들여쓰기 논리적으로 종속되어 있는 코드를 쓸 때, 종속된 code block는 주인 code block보다 두 칸 들여쓰기 합니다. 들여쓰기를 할 때 탭이 아닌 스페이스를 사용하세요. 탭은 안됩니다. Naming – 이름 짓기 1. Boolean names – Boolean 이름 Boolean에 관한 변수의 이름은 전형적인 형...

2019년 10월 15일
·
0개의 댓글

TIL [19.10.13 ~ 19.10.22]

코드스테이츠 Pre 과정 Level 2, 3 학습 협업 툴을 통한 프로그래밍 github : fork, clone 사용법 심화 문제 풀이 자스민 사용법 익히기 코드스테이츠 심화 과제 블로깅 JavaScriptKoans testbuilder

2019년 10월 14일
·
0개의 댓글