구글 광고에 자주 뜨던 tabnine 을 설치해봤다. 흔한 자동완성 플러그인이라고 생각했는데, 링크를 타고 들어가자 예전부터 관심있게 보던 GTP-2 기반 자동완성 플러그인이라는 소개글을 보고 깜짝 놀라서 설치하게 되었다. Code Faster with AI Code Completions Tabnine is an AI code completion tool that works on any IDE and supports all programming languages. www.tabnine.com GTP-2에 대한 소개글은 아래에서... GPT-2 - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Artific..

코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 결과물은 다음과 같다. 고려해야 할 조건은 아래의 10개 정도로, 꽤 많다. 표의 각 셀은 제목과 내용으로 이루어져 있음 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함 한 행에는 1개 혹은 2개의 셀이 올 수 있음 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데) 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%) 표의 너비는 컨테이너의 너비에 따라 반응형으..

작성한 코드를 한 줄 한 줄 주석을 달면서 스스로 리뷰하는 포스팅을 해보려 합니다. 항상 느끼지만, 다른 사람의 코드를 읽을 때 한 줄 한 줄 해석하고 읽다보면 결국 읽히지 않는 코드는 없다고 생각합니다. 저질의 포스팅을 남발하며 느끼는 죄책감을, 주석을 달아 다른 사람에게도 쉽게 읽히는 코드를 포스팅 함으로써 조금이나마 덜어보고자 합니다. 피드백은 언제든 환영합니다. 사족으로, 짭플린이 1.4버전으로 업데이트 되었습니다. zzaplin도 많은 이용 부탁드립니다. Ryan's ZZaplin Layout visualizer like a Zeplin chrome.google.com

이미지 최적화와 웹 사이트 속도는 떼려야 뗄 수 없는 관계이다. 이미지의 용량을 압축과 최적화를 통해 줄일 만큼 줄였다면, 이제 페이지 로딩 시간을 향상하기 위한 지연 로딩(Lazy Loading)을 적용해보자. 지연 로딩이 적용된 이미지는, 사용자의 눈에 충분히 노출되기 전에는 데이터 요청이 일어나지 않게 할 수 있다. 그러므로 이를 통해 페이지의 초기 로딩 속도를 비약적으로 향상시킬 수 있다. React와 TypeScript를 사용한 이미지 컴포넌트 코드는 다음과 같다. Image.tsx import React, { useEffect, useRef, useState } from "react"; //* polyfill 2개. 아래에 설명있음*// import "intersection-observer";..

웹 페이지에서 AJAX 요청 시에 불필요한 중복 요청이 발생하는 경우는 뭐가 있을까? 페이지에 잘 바뀌지 않는 게시판(공지사항)이 존재한다고 가정하자. 공지사항 목록을 가져오는 API와 공지사항 내용을 불러오는 API는 약 1초가 소요된다고 가정한다. 이 페이지의 로직을 가정하면, 유저가 공지사항 목록 페이지에 접근하는 순간, 서버에서 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초) 렌더링 된 공지사항 목록 페이지에서 유저가 1번 공지사항을 클릭한다. 1번 공지 내용을 불러오는 요청이 호출된다. (1초) 뒤로가기로 다시 목록 페이지에 접근하는 순간, 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초) 실시간으로 글의 목록이 갱신되는 자유게시판이라면 이야기가 다르겠지만, 잘..

Ryan's ZZaplin Layout visualizer like a Zeplin chrome.google.com 오랜만에 짭플린이 업데이트 되었습니다... 기존 짭플린에서 사용하던 css class명이 fixed라서, 몇몇 웹 사이트에 있는 fixed요소랑 출동이 있었습니다. 그리고 로직상 clear키인 C버튼 연타시 정상적으로 작동하지 않던 부분, 페이지 레이아웃 요소를 보는 B키가 텍스트 입력시에도 토글되는 부분, 전역으로 짭플린 ON/OFF하는 기능 추가, 마지막으로 팝업창 내 가독성 확보를 위한 레이아웃 수정이 있었습니다. (조언을 주신 회사 인턴 스타크님에게 감사의 말씀을...)