Web
티스토리 블로그에 TOC 추가하기
티스토리 블로그에 TOC 추가하기
2021.09.30마크다운으로 글을 작성하다보면 글이 계층화되어진다. 제목의 크기로 계층을 확인할 수 있지만, 좀 더 가시적으로 보여줄 무언가가 필요했고, TOC를 적용하기로 결정했다. TOC란? TOC는 목차(Table Of Content)라는 뜻으로 웹 문서에서는 헤더 태그들을 모아서 계증화하여 보여주고, 클릭 시 해당 헤더 태그로 자동으로 이동해주는 역할을 하는 부분을 뜻한다. TOC를 아주 잘 사용한 사이트로는 나무위키가 있겠다. 나무위키는 설명하고자하는 내용이 계층화되어 있어서 이를 자동으로 목차화해준다. 그리고 위에 언급한 것처럼 클릭시 해당 헤더 태그로 이동하게 된다. TOC 적용하기 아래 소개할 적용 방식은 프라치노 공간 스킨으로 진행한 내용으로, 본인의 스킨에 따라 다르게 적용해야할 수 있습니다. Tocb..
URI와 URL
URI와 URL
2021.09.29이전까지는 URL만 알고 있다가, 학교에서 웹 프로그래밍 수업을 들었을때 URI라는 것을 처음 알게되었다. 그렇다고 찾아본 건 아니고, 현재까지도 일을 하면서 매번 URI, URL 구분없이 사용하고 있다. 구분없이 사용한다고 큰 문제는 생기지 않지만, 개발자는 명확한 정의를 아는 직업 아닌가? 이 기회에 URI와 URL의 정의와 용도를 통해 둘의 차이를 알아보자. URI URI는 특정 자원(Resource)를 식별하는 통합 자원 식별자(Uniform Resource Idendifier)를 의미한다. 웹 상에서 논리적/물리적 리소스를 식별하는데 사용되는 고유한 문자열의 시퀀스이다. URI의 하위 개념으로는 URL과 URN이 있다. URL URL은 일반적으로 이야기하는 웹사이트 주소이다. 통합 자원 지시자(..
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
2021.09.27Apollo Client는 GraphQL을 이용하여 로컬과 리모트 데이터를 다룰 수 있는 자바스크립트의 포괄적인 상태 관리 라이브러리이다. 이를 이용해서 데이터를 가져오거나, 캐시, 애플리케이션 데이터의 수정 이 모든 것을 UI를 업데이트하면서 할 수 있다. Apollo Client는 현대의 개발 방식과 동일하게 코드를 경제적이고, 예상가능하며 선언적인 방식으로 짤 수 있게 해준다. @apollo/client 라이브러리는 리액트와의 통합성을 제공하며, 다른 유명 라이브러리/프레임워크를 위한 통합도 거대한 아폴로 커뮤니티를 통해 유지되고 있다. 특징 선언적인 데이터 패칭: 직접 로딩 상태를 따라갈 필요 없이 쿼리를 작성하고 데이터를 가져올 수 있다. 휼륭한 개발자 경험: 타입스크립트, 크롬 / 파이어폭스 ..
네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
2021.09.09👋 들어가며 웹사이트 개발, 기획 등을 하다보면 GNB, LNB 등의 단어를 듣게 된다. 필자도 실무를 하면서 알게되었고, 항상 들을때마다 헷갈려서 이번 기회에 한 번 정리해보려한다. 네비게이션 영역? 네비게이션 영역은 이름처럼 네비게이션 즉 특정 페이지 이동을 위해 필요한 영역을 의미한다. 또한, 이러한 영역들은 모든 페이지에서 항상 고정된 영역을 차지하는 특징을 가지게된다. GNB(Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 공통 네비게이션 포함되는 콘텐츠 사이트 로고 - 홈페이지 링크 메인 메뉴 - 대분류 메뉴라고도 하며, 주요 페이지 링크 버튼 역할을 하거나 호버시 서브 메뉴를 볼 수 있는 버튼 역할을 한다. 서브 메뉴가 있는 경우 클릭시 메인 서브 메뉴로 가는..
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
2021.08.02들어가며 웹에서 앱과 같은 경험을 주고자하는 시도가 많아지면서, 웹사이트 제작시 아이콘은 필수적인 요소가 되었습니다. 아이콘 혹은 픽토그램은 사용자에게 전달하고자하는 복잡한 정보를 간단한 이미지로 보여줄 수 있습니다. "메뉴모음"이라는 단어가 아닌 햄버거 아이콘으로 모두가 이해하는 아이콘으로 보여줌으로써 사용자가 좀 더 깔끔한 웹사이트를 이용한다는 경험을 느끼게할 수 있습니다. 웹사이트에 픽토그램을 넣는 방법은 다양하게 있으나 주로 웹 아이콘 폰트를 이용하며, 일부 사용이 무료이면서 가장 유명한 것이 Font Awesome입니다. Font Awesome의 특징 1. HTML의 font 스타일 속성이 모두 사용 가능 Font Awesome은 이미지가 아닌 웹 폰트이기 때문에 HTML의 font 스타일을 모..
Next.js에 Tailwind CSS 적용하기
Next.js에 Tailwind CSS 적용하기
2021.01.21Tailwind CSS Tailwind CSS는 Bootstrap과 흡사한 UI 프레임워크 입니다. Tailwind CSS는 커스터마이징이 가능한 저수준 CSS 프레임 워크로, 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공합니다. 대부분의 UI 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다. 하지만, 사이트를 사용자가 지정한 디자인으로 제작하고 싶은 경우에는 많은 제약이 따릅니다. Tailwind CSS는 HTML을 떠나지 않고도 커스터마이징 가능한 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공합니다. npm/yarn을 통해 Tailwind 의존성 설치하기 Tailwind CSS 패키지를 프로젝트에 설치합니다. npm을 사용하는 경우 # Nex..
input 태그의 type 속성 종류와 예제
input 태그의 type 속성 종류와 예제
2021.01.21HTML에서 양식을 만들 때, form 태그를 사용하고, input 태그를 통해 입력 영역을 만듭니다. 입력 영역의 종류는 다양하며 type 속성의 값에 따라 동작 방식이 현격히 달라집니다. 특성을 지정하지 않는 경우 기본값은 text입니다. input 태그의 type 속성값 속성 설명 text 기본값으로 한 줄의 텍스트 입력 칸을 만듭니다. (기본 너비 문자는 20입니다.) password text 속성과 같지만, 입력 문자를 별표(*)로 대체해서 표시합니다. checkbox 선택 항목 중 여러개를 선택할 수 있는 체크박스를 만듭니다. radio 선택 항목 중 1가지만 선택 가능한 라디오 버튼을 만듭니다. button 누를 수 있는 기본 버튼을 만듭니다. submit 전송 버튼을 만듭니다. reset ..
package.json의 패키지들을 모두 버전 업 하고 싶다면
package.json의 패키지들을 모두 버전 업 하고 싶다면
2020.12.07package.json의 패키지들을 모두 버전 업 하고 싶다면 프로젝트를 진행하면서 사용하던 라이브러리들이 너무 노후화된 경우 날을 잡아서 최신 버전으로 업데이트하곤 합니다. 이때, 하나하나 제거하고 설치하면서 버전업을 할 수도 있지만, 커맨드 한 번이면 현재 설치되어있는 패키지들을 모두 버전업할 수 있습니다. 사용 방법 아래의 yarn upgrade-interactive 커맨드를 입력하면 됩니다. yarn upgrade-interactive --latest 현재 버전과 업그레이드 버전을 비교하여 세가지 색으로 나타냅니다. red : 이전 버전 호환이 안될 수도 있는 메이저 업데이트 yello : 이전 버전 호환이 되는 마이너 업데이트 green : 이전 버전 호환이 되는 버그 수정을 위한 패치 업데이트..
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
2020.12.06
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
2020.12.03해당 글은 제가 DEVIEW 2020의 발표 영상 DEVIEW 2020 - React 개발이 이렇게 쉬웠나? (Feat. Next.js)을 보면서 문서화 및 제 의견을 추가한 글입니다. 0.React 개발이 이렇게 쉬웠나? (Feat. Next.js) 1. UI Library React / UI 라이브러리 리액트 리액트를 이용한 개발은 처음에는 모든 것을 해결해줄 만능 해결책을 가진 것 같이 느껴진다. 그러나 프로젝트의 규모가 커지고, 계속 사용할 수록 리액트를 이용한 개발의 어려운 점들이 등장한다. 1. UI Library React에서는 현재 리액트 개발이 어려운 이유와 이를 설명하기 위해 리액트와 리액트 개발에 대해 소개하려한다. 1.1 커져가는 React 생태계 리액트는 꽤나 과거부터 2020년 ..
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
2020.11.28index.html app.js import { Polygon } from "./polygon.js" class App { constructor() { this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1; window.addEventListener('resize', this.resize.bind(this), false); this.resize() this.isDown = false; this.moveX = 0; this.offsetX..
Creative Coding 개발환경 설정 및 기본 프로젝트
Creative Coding 개발환경 설정 및 기본 프로젝트
2020.11.22개발 환경 설정 코드 에디터 Visual Studio Code Visual Studio Code 확장 프로그램 ESlint, jslint - JavaScript용 코드 lint 확장 프로그램 Beautify - 코드 포메터 확장 프로그램 Live Server - HTML 파일을 서빙하는 가상의 서버를 띄우는 확장 프로그램 추가 팁 파일이 크지 않기 때문에 로컬영역이 아닌 클라우드에 저장해서 사용하는 것도 좋다. 구글 드라이브 + 드라이브 파일 스트림으로 로컬 드라이브처럼 사용 가능) 기본 프로젝트 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%;..