분류 전체보기
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
2021.08.02들어가며 웹에서 앱과 같은 경험을 주고자하는 시도가 많아지면서, 웹사이트 제작시 아이콘은 필수적인 요소가 되었습니다. 아이콘 혹은 픽토그램은 사용자에게 전달하고자하는 복잡한 정보를 간단한 이미지로 보여줄 수 있습니다. "메뉴모음"이라는 단어가 아닌 햄버거 아이콘으로 모두가 이해하는 아이콘으로 보여줌으로써 사용자가 좀 더 깔끔한 웹사이트를 이용한다는 경험을 느끼게할 수 있습니다. 웹사이트에 픽토그램을 넣는 방법은 다양하게 있으나 주로 웹 아이콘 폰트를 이용하며, 일부 사용이 무료이면서 가장 유명한 것이 Font Awesome입니다. Font Awesome의 특징 1. HTML의 font 스타일 속성이 모두 사용 가능 Font Awesome은 이미지가 아닌 웹 폰트이기 때문에 HTML의 font 스타일을 모..
더 많이 더 적게: 고장나버린 사이트 살려야한다
더 많이 더 적게: 고장나버린 사이트 살려야한다
2021.07.30고장나버린 사이트 거의 방치하고 있던 더 많이 더 적게 프로젝트를 오랫만에 한 번 들어갔는데, 뭔가 문제가 생겼었다. "문제가 생겼습니다."라는 저 문구 저건 분명히 GraphQL 요청이 실패했을 때 뜨는 화면이였다. 타임어택 기능 이후로 방치는 하고 있었지만, 처음으로 흥한 소중한 사이드 프로젝트라 문제의 원인 파악에 나섰다. 문제는 내가 사용하고 있었던 GraphCMS라는 서비스에 있었다. GraphCMS의 과거 Lagacy 버전 프로젝트를 그대로 사용하고 있었는데, GraphCMS 측에서 Lagacy 프로젝트를 다 지워버린 것이다. 덕분에 사이트에 오류가 뜬 건 물론이고 내가 어렵게 모은 키워드 + 사진 + 검색량 자료도 날라갔다. 억울하긴 하지만, Lagacy 프로젝트를 계속 사용해 온 내 잘못도..
VSCode 설정 및 확장 프로그램 동기화하기 (feat. Settings Sync)
VSCode 설정 및 확장 프로그램 동기화하기 (feat. Settings Sync)
2021.02.01⚠️ 현재는 확장프로그램인 Setting Sync가 아닌 VSCode에서 자체적으로 동기화 기능을 제공하고 있기 때문에 더이상 Setting Sync를 통해 동기화할 필요가 없습니다. 들어가며 👋 새로운 환경에 들어갔을 때 IDE를 다운받아서 처음부터 환경설정을 다시 하는 작업은 굉장히 귀찮은 작업이다. 이는 웹에서 자주 사용하는 IDE인 VSCode에서도 마찬가지인데, 자신만의 단축키나 특히 VSCode의 장점인 확장프로그램을 사용하는 경우 하나하나 이를 입력 및 설치하는 건 정말 힘든 일이다. VSCode에서 이러한 동기화 작업을 할 수 있는 방법에 대해 알아보자! Settings Sync ♻️ Settings Sync - Visual Studio Marketplace Extension for Vis..
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
2021.02.01내가 데이터 고자라니! 😣 2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했다. 회사에서는 백/프론트 가리지 않고 하고는 있지만 그래도 나는 프론트엔드를 더 잘 알고 좋아하는 프론트엔드 가이이다. 그러나 모든 프론트엔드 개발자들이 알고 있듯, 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있다! 그것은 바로 "보여줄 데이터가 없다는것" 😂 Open API를 찾아나서는 여정 🛣 이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용해서더 많이 더 적게같은 프로젝트도 진행했다. 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 해왔다.그런데 Open API를 찾는 것..
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 ..
👋 2020 👋
👋 2020 👋
2021.01.01들어가며 👋 2020년이 지나갔다. 분명 2020년에 회고글을 쓰려했는데 멍때리다보니 내년이 와버렸다. 2020 개발자 회고와 2021의 목표를 중심으로 빠르게 적어보려한다. 입사 가장 컷던 이벤트가 아닐까 싶다. 나도 내가 이렇게 빨리 내가 원하던 회사에 입사하게 될 줄은 몰랐다. 핵데이를 통해 입사했는데, 입사후에 감사하게도 연수를 모두 받게해주셔서 프론트엔드 전반과 사내 플랫폼들에 대해 많이 배울 수 있는 시간이 되었다. 물론, 같은 프론트엔드 교육을 들은 동기들과도 인연이 생기게 된 좋은 시간이 였다. 그렇게 그렇게 남들과 같은 신입 생활이 시작되는 줄 알았다. 관련 블로그 글 2020 네이버 신입 입문 프로그램 시작 👶 코로나와 재택 코로나가 갑자기 터지면서 연수 스케줄부터 바뀌었다. 연수동안 ..
돌고 도는 가트너의 하이프 사이클
돌고 도는 가트너의 하이프 사이클
2020.12.10최근 블록체인 기사를 읽던 도중 당최 모르는 용어가 나왔다. 최근 블록체인 프로젝트가 다시 조명을 받고 있는데요. 블록체인 기술은 어떻게 보세요? “저희가 매년 1000팀에서 1500팀의 기술 스타트업을 만납니다. 지금까지 한 6000~7000팀 정도 만났는데요. 이렇게 만나다 보면 기술 스타트업에 대한 직관이 생깁니다. 기술에는 사이클이 있어요. 어떤 기술이 나오면 많은 사람이 그 기술을 찬양하고, 개발해 시장에 내놓으면서 혁신이라 주장하는 과정이 존재하죠. AI와 가상현실(VR)이 그랬고, 블록체인도 가트너의 하이프 사이클을 따르고 있는 것 같아요. 초기에 시장의 기대치가 높을 때는 기술 상용화 가능성이 검증되지 않아 불확실성이 높습니다. 실패 사례가 늘어남에 따라 사람들의 관심이 잠잠해지고, 수면 ..
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년 ..
DEVIEW 2020 정리 - 묻고 한 벌로 가
DEVIEW 2020 정리 - 묻고 한 벌로 가
2020.12.03해당 글은 제가 DEVIEW 2020의 발표 영상을 보면서 문서화한 글입니다. 발표 영상을 보시려면 아래 링크를 확인해주세요. DEVIEW 2020 - 묻고 한 벌로 가 묻고 한 벌로 가 한 벌의 코드로 모바일 웹/모바일 앱/PC 웹 서비스 확장 개발기 - 여러 환경으로 서비스를 확장하면서 겪었던 시행착오를 공유 - 네이버 플레이스 서비스의 기술 스택: JavaScript 웹 fullstack 1. 왜 코드 한 벌을 여러 서비스에 넣었을까? 1.1 플레이스와 지도 플레이스와 지도는 원래 다른 서비스 "검색에서 업종별 특화 화면을 보여주면 어떨까?"라는 생각에서 플레이스 서비스 시작 식당, 숙박, 미용실, 관광 명소 등 1.2 플레이스/지도 통합의 배경 플레이스 서비스의 성장 업종별로 특화 및 세분화 해수..