CategoryLearn Programming (86)

[번역] 디버깅 시간을 절약할 수 있는 CSS 네이밍

이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다.Ohans Emmanuel(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Ohans Emmanuel에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.잘못된 번역은 댓글로 남겨주시면 감사하겠습니다!디버깅 시간을 절약할 수 있는 CSS 네이..

[번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react)

이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다.이해의 편의상 의역이 들어가 있습니다.들어가기 전React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다.이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이..

배열에서 가장 큰 정사각형 찾기

배열에서 가장 큰 정사각형 찾기프로그래머스에서 제공하는 문제 중 하나입니다.배열 내부를 탐색하여 가장 큰 정사각형을 찾는 알고리즘입니다.배열은 아래와 그림과 같이 제공되며 1이 정사각형일 때, 배열 내부의 가장 큰 정사각형의 값을 return 합니다.위와같은 배열이 있으며, 가장 큰 정사각형은 아래와 같습니다.가장 큰 정사각형이 9칸을 차지하고 있으므로 답은 9입니다.구현하는 방법이야 여러가지가 있겠지만 10000*10000의 배열이면 성능에 문제가..

[CSS] 5. fr 단위 대하여

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다.그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid {    display: grid;    grid-template..

[CSS] 4. Grid Name을 이용한 Grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.Grid name을 이용한 Grid 나누기보기이번 예제에서는 grid css 중 grid-template-columns와 grid-template-rows를 사용합니다.여기에 Grid Name을 할당하여 레이아웃을 나눠보도록 하겠습니다.html element 설정아래와 같은 class를 가진 element를 생성해 줍시다.<body..

[CSS] 3. fr 단위를 이용하여 grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container {    display: grid;    height: 100vh;    grid-template-col..

[CSS] 2. grid-column, grid-row

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-column, grid-row를 이용하여 grid 나누기grid-column과 grid-row를 이용하여 레이아웃을 나누는 법을 알아보겠습니다.우선 기본적인 grid css를 적용해 줍시다.보기.container {    display: grid;    grid..

[CSS] 1. grid-area를 이용한 Grid Layout

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-area를 이용한 Grid Layout첫번째 파트입니다.간단하게 그리드를 구현해보겠습니다.아래와 같은 Grid Layout으로 시작해봅시다.보기index.html<!DOCTYPE html><html lang="en"><head>    <meta cha..

[CSS] 0. CSS Grid Layout 시작하기 & 목차

시작하며CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다.Github 바로가기CSS Grid?우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다.ex) Bootstrap, fancyGrid 등하지만 CSS에 공식 GRID 지원 기능이 있습니다.다만 문제라면 Firefox 52, Chrome 57이상 버전의 브라우저를 사용하거나 크롬의 flag 기능을 이용해야 합니다.이렇게 보니 ..

[React] 12. React처럼 생각하기 - 지금까지 배운 걸 이용해 간단한 컴포넌트 만들기

React처럼 생각하기이번 공식문서의 파트 제목은 Thinking in React입니다.아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에 대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴포넌트 구조) 설계에 대한, 어렵지 않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?모의 기능을 만들기음악 리스트를 JSON 형식으로 받아서 이를 테이블로 볼 수 있..

[React] 11. Component 간의 합성(Composition)

들어가기에 앞서..이번 공식문서의 파트 제목은 Thinking in React 입니다.아마도 Thinking in C++, Thinking in Java 등 유명한 시리즈가 있는데 이에대한 오마쥬가 아닌가 싶습니다.React에서의 앱(혹은 컴퍼넌트 구조) 설계에 대한, 어렵지않지만 매우 중요한 내용을 설명하고 있습니다.그래서 제목이 Thinking in React?어쩃든 지금까지 배운걸 토대로 간단한 기능을 가진 어플리케이션을 만들어 보겠습니다.합성..

[React] 10. React 상태 올리기 (React Lifting State Up)

같은 state를 공유하는 두개의 컴퍼넌트상태 올리기라는건 언제 쓰는걸 까요?그 이유를 알기 위해서 State를 공유하는 두개의 컴퍼넌트에 대해서 알아보겠습니다.공식문서에서 제공하는 아래 예제를 통해서 설명해 보도록 하겠습니다.화씨와 섭씨를 각각 받을 수 있는 컴퍼넌트가 있다고 합니다.UI는 아래와 같이 노출됩니다.위 스크린샷을 보면 두개의 컴퍼넌트가 있습니다.소스를 한번 보시겠습니다.const scaleNames = {&..