Kendrick's Blog

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container { display: grid; height: 100vh; grid-template-columns: 1fr 4fr 1fr; grid-gap: 10px 100px; margin: 10px;} .grid-item { background-color: rgb(74, 173, 228);}grid-template-columns를 보시면 1fr + 4fr + 1fr => 총 6개의 fragment로 나눕니다.데모를 보시면 바로 이해가 가실겁니다.하지만 특이한 점이 있는데 grid-gap이 위에서 나눈 fragmen..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. grid-column, grid-row를 이용하여 grid 나누기grid-column과 grid-row를 이용하여 레이아웃을 나누는 법을 알아보겠습니다.우선 기본적인 grid css를 적용해 줍시다.보기.container { display: grid; grid-gap: 20px; height: 100vh; grid-template-columns: 100px 200px auto auto;} .grid-item { background-color: rgb(74, 173, 228);}여기까지는 이전 예제와 별 차이가 없어 보이는군요 우선 현재 grid 설정을 봅시다grid-template-columns: 100px 200px ..

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다. grid-area를 이용한 Grid Layout첫번째 파트입니다.간단하게 그리드를 구현해보겠습니다.아래와 같은 Grid Layout으로 시작해봅시다.보기index.htmlDOCTYPE html> Document Header Nav Section Aside-right Footer 간단한 구조로 되어있습니다.div.container 안에는 header, nav, section, aside, footer 다섯 가지 레이아웃을 위한 시맨틱요소가 있습니다.head에는 두 가지 css 파일을 가져오고 있는데 에릭 마이어의 css 초기화를 위한 reset.css 파일 그리고 grid 관련 스타일 시트를 불러오고 있습니다.reset...

시작하며CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다.Github 바로가기CSS Grid?우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다. ex) Bootstrap, fancyGrid 등 하지만 CSS에 공식 GRID 지원 기능이 있습니다.다만 문제라면 Firefox 52, Chrome 57이상 버전의 브라우저를 사용하거나 크롬의 flag 기능을 이용해야 합니다.이렇게 보니 계륵이네요.그러니 실제 Grid 기능은 위에 언급한 라이브러리를 사용하시고, CSS에서도 Grid를 지원하긴 하는구만~ 하시면 더 좋을 듯 합니다.목차추후 정리 예정입니다.마치며이번 주제의 포스트들은 Egghead의 강의를 기반으로 하고 있으며, 강의 내용에서 참고하여 설명이 부족한..

Realm World Tour수요일 Realm 월드 투어 서울을 다녀왔습니다.온오프믹스에서 발견하고 신청했으나 인원이 이미 가득 차서 대기자로 예약했습니다. 그런데! 컨퍼런스 당일 참가자로 변경이 됐다는 메일을 받았습니다.원래 그날 아는 형님과 만나기로 약속이 있어서, 그 형님께 양해를 구해서 약속도 취소하고 컨퍼런스 장소로 부랴부랴 갔습니다. 이번 세미나는 Realm에 대한 소개도 외에도 코드리뷰 같은 부분도 있었습니다. 하지만 그런 부분은 사실 구체적으로 받아 적기가 어려우니 이런 걸 했구나~ 하고 가볍게 봐주셨으면 좋겠습니다.Realm 월드 투어 - 서울은 네이버 D2 컨퍼런스장에서 진행되었습니다.작년 Redux 때와 같은 곳이라 낯설지 않네요.간식은 작년과 같이 Joe's Sandwich. 맛있네..

Redux + Express Website BoilerPlateRedux + Express Website BoilerPlateInstallationFeaturesUsing Time Machine Debugging기본 웹 레이아웃으로 구성된 보일러플레이트입니다. 라우팅은 react-router v3을 사용합니다.back-end는 express를 사용하고 있으며, front-end는 react+redux를 사용하고 있습니다. 브라우저 확장프로그램 redux-devtools를 이용하여 시간여행 디버깅을 지원합니다. 스타일은 기본적으로 SASS를 사용하며 부트스트랩도 추가되어있습니다. 자세한 특징은 Features 항목을 참고해주세요 InstallationGithub 바로가기If you are using a y..

ES6을 쉽게 익혀보자 - tower of babel 일본 Node.js 유저 그룹 대표인 후루카와 요스케(Yosuke Furukawa)님이 만든 ES6 학습 도구입니다. Babel Setup부터 시작해서 ES6의 핵심기능들을 배우고 연습할 수 있습니다.바로 가기 - tower-of-babelReadMe 문서를 보시면 아시겠지만 아래와같이 설치 및 실행할 수 있습니다.$ npm install tower-of-babel -g$ tower-of-babel위 명령어를 실행하면 위 스크린샷과 같은 화면이 보이며, 처음에는 영어로 보이니 필요에 따라 언어 설정을 바꿔주시면 됩니다.사용법은 직접 설치해보면 매우 이해하기 쉽기 때문에 이 이상 자세한 설명은 생략하도록 하겠습니다. 바로 시작하세요! 최근 import에..

Atom Package - Regex Filter And GeneratorRegex Filter And Generator는 아톰 에디터의 패키지 입니다.소개이름을 직역하면 정규식 필터 그리고 생성기입니다.간단히 설명하면 열려있는 Atom 에디터에 Regular Expression를 입력하면 해당하는 텍스트에 마커가 추가됩니다.정규식 테스트 가능자주 사용하는 정규식 제공설치 및 참고 링크Setting -> Install -> regex-filter-and-generator 검색하여 설치할 수 있습니다. 단축키 Windows : Ctrl+Alt+R OSX : Ctrl+Option+R Atom Package Github Libraries.io기능정규식 필터입력받은 정규식을 이용하여 정규식에 해당하는 텍스트에 ..

문장 강화지금까지 100여 개의 포스트를 작성해왔지만 글 씀에 있어서 언제나 자격지심을 가지고 있었습니다. 그래서 작년 6월쯤에 부끄럽지 않은 글을 쓰고자 문장강화를 발견했고 바로 구매한 후 잠깐 읽고 봉인해놨습니다.그 후 2017년을 맞이하며 포스트를 하나 쓰는데 뭔가 막연히 꿉꿉한 느낌이 들어서 포스트 올리기 전 몇 번을 망설였습니다. "아 이제 문장강화를 할 때가 왔구나!" 막연히 그런 생각이 들어 책을 다시 폈습니다.문장을 강화한다가 아닌 문장에 대한 강화이다.저는 한자로 써있음에도 불구하고 이 포스트를 쓰기 전까지 문장을 장비 강화하듯이 강화시킨다는 줄 알았습니다. 표지 제목 아래에 한자로 써있긴 했지만 "알게 뭐람" 했던 것도 있습니다.講話강의하듯이 하는 이야기무언가를 더욱 견고하거나 좋게 한..

React처럼 생각하기이번 공식문서의 파트 제목은 Thinking in React입니다. 아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에 대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴포넌트 구조) 설계에 대한, 어렵지 않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?모의 기능을 만들기음악 리스트를 JSON 형식으로 받아서 이를 테이블로 볼 수 있고 필터 할 수 있는 기능의 테이블을 만들어 봅시다.1. UI를 Component 계층 구조로 만들기 위한 준비지금부터 만들 필터 테이블은 아래와 같은 화면으로 구성됩니다.이 화면에 사용될 JSON 데이터는 아래와 같습니다.var MUSIC_DATAS = [..

들어가기에 앞서..이번 공식문서의 파트 제목은 Thinking in React 입니다. 아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴퍼넌트 구조) 설계에 대한, 어렵지않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?어쩃든 지금까지 배운걸 토대로 간단한 기능을 가진 어플리케이션을 만들어 보겠습니다.합성과 상속이란?객체지향에서 기능의 재사용을 하기 위해서 사용하는 대표적인 기법입니다.상속 - Inheritance다른 부모클래스를 먼저 만듭니다. 자식클래스는 이 부모클래스를 상속받아서 구현을 정의합니다.is-a 라고도 합니다.합성 - Composition서로..

같은 state를 공유하는 두개의 컴퍼넌트상태 올리기라는건 언제 쓰는걸 까요? 그 이유를 알기 위해서 State를 공유하는 두개의 컴퍼넌트에 대해서 알아보겠습니다.공식문서에서 제공하는 아래 예제를 통해서 설명해 보도록 하겠습니다. 화씨와 섭씨를 각각 받을 수 있는 컴퍼넌트가 있다고 합니다. UI는 아래와 같이 노출됩니다. 위 스크린샷을 보면 두개의 컴퍼넌트가 있습니다.소스를 한번 보시겠습니다.const scaleNames = { c: 'Celsius', f: 'Fahrenheit'}; class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bi..