front-end

[Apollo] Apollo란 무엇인가?

[Apollo] Apollo란 무엇인가? (글쓴날 : 2020.04.24) * 이 글은 Apollo에 대한 단순 소개 글입니다. Apollo란? 1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vue를 동시 지원한다는 점에서 인기가 높은 것 같습니다. * GraphQL에 관해 궁금하시다면 ☞ [GraphQL] Gra..

[GraphQL] GraphQL이란 무엇인가?

[GraphQL] GraphQL이란 무엇인가? (글쓴날 : 2020.04.22) * 이 글은 GraphQL에 대한 단순 소개 글입니다. GraphQL이란? 1) GraphQL 소개 GraphQL이란 페이스북이 모바일 앱을 재구성하기 위해 노력하던 2012년 개발되어 2015년 오픈소스로 공개된 데이터 쿼리 언어입니다. 자체적으로 서버와 클라이언트를 구축해 애플리케이션 서버 및 데이터베이스와 클라이언트 사이에서 Operation과 Resolve의 과정을 통해 서로 간의 데이터 상호작용을 도와줍니다. 특징으로는 어떤 종류의 Back-End(데이터베이스 및 다른 API 등)에도 연동이 가능하며, 강타입 및 단일 Endpoint를 지향합니다. 특히, REST API가 가진 구조적 문제인 Over-fetching..

[CSS] CSS 초기화(Reset) 코드 모음

[CSS] CSS 초기화(Reset) 코드 모음 (글쓴날 : 2020.03.12) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 초기화(Reset) 코드 1) CSS 초기화(Reset)란? 먼저, CSS 초기화란 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다. 대표적인 브라우저에는 Microsoft의 인터넷 익스플로러(Internet Explorer), Google의 크롬(Chrome), Apple의 사파리(Safari), Mozila의 파이어폭스(Firefox) 등이 있으며, 브라우저들마다 내장되어 있는 CSS의 기본값들이 서로 다르게 설정되어 있습니다. 따라서, 웹 프로그래밍 시 분명히 동일한 코드인데도 ..

[styled-components] styled-components 소개 및 설치 방법

[styled-components] styled-components 소개 및 설치 방법 (styled-components 버전 : 5.0.1, 글쓴날 : 2020.03.10) * 이 글은 styled-components에 대한 단순 소개 글입니다. styled-components 소개 및 설치 1) styled-components란? styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리입니다. 물론, 이러한 인라인 스타일링이 별로 달갑지 않은 분들도 계실 것 같습니다. 또한, 저의 경우에도, 인라인 스타일링을 선호하지 않는 편입니다. 그럼에도 불구하고 제가 styled-..

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법 (글쓴날 : 2020.03.02) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 레이아웃(이미지, div 등) 중앙 정렬 방법 1) flexbox란? 간단하게 설명하자면 flexbox란 CSS3에서 새롭게 추가된 웹 레이아웃 모델로, 개발자들이 기존 CSS의 position, float, display 등의 속성들로 해결하기 힘들었던 문제들을 쉽고 유연하게 구현할 수 있도록 제공하는 기능입니다. 주로 1차원 레이아웃의 공간 배분 및 정렬을 하기 위해 설계되었으며, 행과 열 중점의 2차원 레이아웃을 다루는 Grid 레이아웃과는 지향점이 조금 다르니 각자의 상황에..

[CSS] 레이아웃 height 100%로 동작하게 하는 법

[CSS] 레이아웃 height 100%로 동작하게 하는 법 (글쓴날 : 2020.03.01) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS height에 % 값 적용 방법 1) 부모 태그의 높이를 100%로 지정하기 아래의 화면처럼, 만약 height를 100%로 지정했을 때 원하는 데로 동작하지 않으신다면, 저도 그랬듯이 아마 대부분의 경우가 부모 태그의 height가 지정하지 않은 경우일 겁니다. 따라서, 위의 화면처럼 height를 %로 지정하고 싶으시다면 html, body와 같은 부모 태그의 height를 전부 지정해 주셔야 합니다. (ex) 1 2 3 4 5 6 7 8 9 html, body { height: 100%; } 적용할..