프론트엔드
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
2021.09.27Apollo Client는 GraphQL을 이용하여 로컬과 리모트 데이터를 다룰 수 있는 자바스크립트의 포괄적인 상태 관리 라이브러리이다. 이를 이용해서 데이터를 가져오거나, 캐시, 애플리케이션 데이터의 수정 이 모든 것을 UI를 업데이트하면서 할 수 있다. Apollo Client는 현대의 개발 방식과 동일하게 코드를 경제적이고, 예상가능하며 선언적인 방식으로 짤 수 있게 해준다. @apollo/client 라이브러리는 리액트와의 통합성을 제공하며, 다른 유명 라이브러리/프레임워크를 위한 통합도 거대한 아폴로 커뮤니티를 통해 유지되고 있다. 특징 선언적인 데이터 패칭: 직접 로딩 상태를 따라갈 필요 없이 쿼리를 작성하고 데이터를 가져올 수 있다. 휼륭한 개발자 경험: 타입스크립트, 크롬 / 파이어폭스 ..
지금 바로 사이트에 픽토그램 넣는 법 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 프로젝트를 계속 사용해 온 내 잘못도..
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
공개 API를 이용한 공개 API를 이용한 공개 API 검색 서비스 만들기
2021.02.01내가 데이터 고자라니! 😣 2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했다. 회사에서는 백/프론트 가리지 않고 하고는 있지만 그래도 나는 프론트엔드를 더 잘 알고 좋아하는 프론트엔드 가이이다. 그러나 모든 프론트엔드 개발자들이 알고 있듯, 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있다! 그것은 바로 "보여줄 데이터가 없다는것" 😂 Open API를 찾아나서는 여정 🛣 이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용해서더 많이 더 적게같은 프로젝트도 진행했다. 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 해왔다.그런데 Open API를 찾는 것..
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[HTML] 🤔 HTML이란?
[HTML] 🤔 HTML이란?
2020.01.11🤔 HTML이란? HTML은 웹페이지를 만들기 위한 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 다음과 같은 특징을 가지고 있다. HTML은 태그를 통해 웹 페이지의 구조를 알려준다. HTML은 다양한 요소들로 이루어져있다. HTML은 브라우저에게 어떤 것이 보여질 지를 알려준다. HTML은 태그를 통해 표현된다. HTML 태그는 머릿말, 문단, 표 같은 것들을 라벨링한다. 📄 간단한 HTML 문서 첫 머릿말 첫 문단 해당 문서의 의미는 다음과 같다. 라는 선언은 해당 문서가 HTML5라는 것이다. 요소는 HTML 페이지의 root 요소이다. 요소는 문서에 대한..
[JavaScript] {} + {}의 결과는 뭘까?
[JavaScript] {} + {}의 결과는 뭘까?
2019.12.14해당 글은 JavaScript values: not everything is an object를 번역한 글입니다. 질문 {} + {}의 결과는 뭘까? 자바스크립트에서 객체나 배열들을 더할 때 우리는 종종 예상치 못한 결과물을 얻곤한다. 이러한 결과물이 생긴 이유에 대해서 알아보자! 자바스크립트의 더하기 연산 법칙은 간단한다. 오직 숫자(number)나 문자열(string)만 더할 수 있다. 숫자와 문자열 이외의 다른 모든 값들은 더하기 연산을 만나면 이 둘 중 하나로 변하게 된다. 해당 변환이 어떻게 이루어지는 지 알기 위해서는, 몇 가지 사실에 대해서 이해해야한다. 자바스크립트는 원시값(primitives)과 객체(objects) 두 종류의 값으로 이루어져 있다. 원시값에는 undefined, null..
[인터뷰] 개발자 기술 인터뷰에 대한 간단한 팁
[인터뷰] 개발자 기술 인터뷰에 대한 간단한 팁
2019.10.08들어가며 요즘 여러모로 바빠져서 글을 못 올리고 있다. 최근에 면접준비를 하면서 나중에 블로그에 올려야지 생각하면서 이런저런 자료들을 노션에 정리했는데, 노션 => 티스토리 마크다운은 코드 부분 이식이 100% 안되는 듯하다. 결국 이론부는 놔두고 간단한 인터뷰 팁에 대한 부분을 먼저 올려보려한다. 대부분의 팁은 techsith라는 유튜브 채널의 영상에서 참조한 것이다. 인터뷰를 준비중인 프론트엔드 개발자라면 많은 도움을 받을 수 있는 유튜브 채널이다. 인터뷰 팁 답변 중 과정을 건너뛰지 마라. 어떤 문제나 질문에 답할 때 Don't just jump (과정을 건너뛰지 마라) 사람 본성이 바로 뛰어넘어서 답하는 것이다. 이것은 매우 잘못된 방식이다. 왜냐하면 질문이 알고보니 까다로운 내용이었거나,..
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기
2019.01.31🐶 리액트(React)를 이용해 이모지 빙고게임 만들기 🐶 노마드 코더 슬랙을 둘러보던 중, 빙고 게임을 과제로 만드시던 분이 빙고 검증에 대한 구현을 질문하셨다. 처음에는 Codesandbox에 돌아가는 코드를 만들어서 보여드리면 어떨까 생각하다가, "내 사이드 프로젝트로 좋을 것 같은데?"라는 생각에 바로 당일 빙고게임 사이드 프로젝트 작업을 시작했다. 컴포턴트(Component)화 시작하기에 앞서 생각났던 프로젝트가 바로 리액트 공식 문서에서 제공하는 튜토리얼인 틱택토 게임이었다. Board와 Squrare로 컴포넌트화 되어있던게 빙고에 적용하기 딱이였고, 똑같이 Board와 Square라는 컴포넌트를 만들어서 진행했다. 함수구현 빙고에서 구현해야할 함수는 다음과 같다. 1. 특정 칸 클릭시 해당 ..
[⚛React] React 기본 개념
[⚛React] React 기본 개념
2018.12.26🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..
야, 너두 개발자 포트폴리오 만들 수 있어 👉😉
야, 너두 개발자 포트폴리오 만들 수 있어 👉😉
2018.12.21👋 들어가며 나는 취업을 준비하면서, 네이버 핵데이 인턴 이후 채용에 필요한 서류를 준비하면서 개발자용 포트폴리오를 만들고 기획해왔다. 컴퓨터 공학과 대학생들은 대부분 취업시기가 다가오는 3~4학년때 이력서 및 포트폴리오를 준비하는데, 막상 포트폴리오를 만들려면 왜 만들어야하는 지 무슨 내용이 들어가야 하는 지, 어떻게 만들어야 하는 지 막막하고 참고할만한 자료도 충분치 않다. 작은 경험이지만 내가 개발자 포트폴리오를 준비하면서 고민했던 것들에 대해 적어보려한다. 🗂 당신이 개발자 포트폴리오를 만들어야하는 이유 포트폴리오를 만들어야하는 이유에 대해 생각하기 전에 우선 포트폴리오의 목적에 대해 짚고 넘어가보자. 포트폴리오의 목적은 단순하다. 내가 이 분야를 얼마나 잘하고 얼마나 열정을 가지고 있는 지 보여..