xlsx-js-style 라이브러리 JavaScript를 사용하여 기본 스타일 지정 옵션으로 Excel 스프레드시트를 만들 수 있는 라이브러리이다. 설치 Sample(in React) 다음은 공식 페이지에서 제공하는 예제 코드이다. row 변수에서 엑셀 스프레드

React Suspense > 컴포넌트가 데이터를 기다리고 있음 > 데이터를 기다리는 동안 fallback 컴포넌트를 선언적으로 렌더링 선언적이라는 개념은 명령형과 비교하여 아래에서 설명해보도록 하겠다. 명령형 프로그래밍(Imperative) VS 선언형 프로그

VAC 패턴이란? > View Asset Component HTML과 거의 유사한 뷰(View) 컴포넌트와 비즈니스 로직(Business Logic)만 담고 있는 컴포넌트를 만드는 것으로 역할을 완전히 분리하는 것 모든 컴포넌트를 뷰 파일과 로직 파일로 분리한다는 것

우리는 MBTI 탐정단! 친구들의 MBTI를 맞춰보고, 친구들은 내 성격을 어떻게 생각하는지 들어봅시다! 구글 스프린트 구글 스프린트는 5일이라는 짧은 시간 동안 프로토타입을 만들어내고 고객 테스트까지 완료하는 과제 해결법이다. 스프린트의 저자인 구글 수석 디자이너

제스처를 통한 UI 상호작용을 구현할 수 있는 라이브러리이다.react-use-gesturespring-physics 기반의 애니메이션 라이브러리이다.react-spring useDrag 훅은 이벤트 핸들러가 있는 함수를 반환한다. {...bindPos()}는 스프

다음 포스팅은 구글 검색 센터의 문서를 참고하여 작성하였습니다. 참여한 오픈소스 프로젝트가 좋은 서비스를 하고 있다고 생각해서 많이 알려지면 좋을 것 같은데 검색 엔진 최적화가 되어 있지 않아 시도하여 많은 이들이 접근할 수 있도록 개선해보고자 한다. 웹사이트가 G

반응형 웹 구현을 위해 화면 크기가 달라질 때마다 화면의 가로나 세로 길이를 구하고자 했다.컴포넌트 내에서 window.innerWidth로 받아오면 처음 렌더링할 때의 가로 길이는 받아올 수 있었는데, 새로 고침을 하지 않고 화면 사이즈가 변경되었을 때는 동적으로 브

프로젝트 배포가 끝났다. 첫 배포 후 라이트하우스에서 성능을 측정해보니 성능 65점, 접근성 86점으로 개선해야 하는 수치가 나왔다. 성능과 접근성 면에서 여러 가지 방법으로 리팩토링을 시도해볼 예정인데, 첫번째 시도는 이미지 스프라이트를 사용하여 Peformanc

지금까지 주로 깃헙 페이지를 이용해서 배포를 했었는데 리액트 코드는 코드를 수정하고 빌드하고 다시 업로드하는게 번거로워서 이번 팀 프로젝트는 Netlify를 사용하여 배포하였다. 가장 편리했던 점이 Netlify에서 빌드를 알아서 해줘서 배포를 해주는 것이었다. 최

See the Pen Untitled by Soohyun Jung (@sasha1107) on CodePen. <script as

팀프로젝트 진행 상황을 한 눈에 훑어보고, 작업들을 효율적으로 관리하기 위해 GitHub 프로젝트와 이슈를 활용하기로 했다. 작업 단위로 이슈를 생성하고 닫으며 진행도를 표시하려고 하는데 혼자 하는 일이 아니다 보니 형식이 다 달라질 수 있어서 미리 깃허브 이슈 템플릿

파이썬을 학교에서 어느정도 배우고, 현재는 프론트엔드 개발자가 되기 위해 자바스크립트를 더 깊게 배우고 있다. numpy, pandas 같은 파이썬 라이브러리를 사용하면 1줄로 작성 가능한 코드를 자바스크립트로는 20줄씩 써야 하는 것을 보면서 나 파이썬 좋아했네..라

서버 설정 > 연동 탭으로 들어간다. 웹 후크를 클릭새 웹후크를 클릭해줍니다.웹후크 URL 복사 선택연동을 원하는 깃허브 레포지토리로 이동 > Settings로 들어가서 Webhooks 탭 선택 Add webhookPayload URL에 아까 복사한 웹후크 URL을 붙

프로젝트에서 사용하는 일반적인 폴더 구조에 대해 정리해보려고 한다. (⚠️ 일반적이지 않을 수 있음..)리액트 프로젝트를 시작할 때 다음 명령어로 손쉽게 환경을 셋팅할 수 있다.위 명령어를 실행하면 다음과 같은 파일들과 디렉토리들이 생성된다.📂 node_modules

렌더링 이전..우리가 어떤 웹페이지에 접속하려면? 렌더링이 일어나기 전, 웹서비스는 전 세계에 퍼져있는 웹 서버에 접속해서 웹 서버에 있는 문서를 요청하여 받아온다. 이 때 “어느 서버에 어떤 문서인지” 위치를 나타내는 방법이 있어야 하는데, 이 방법이 바로 URL(

웹 또는 어플리케이션 개발 프로젝트를 진행하면서 협업 툴로 노션을 많이 사용하시고 계실 것입니다. 개발 팀 프로젝트 협업을 위한 노션 템플릿을 공유합니다. 템플릿 사용하기 노션 템플릿 바로가기 우측 상단 복제 버튼을 눌러 템플릿을 사용하실 수 있습니다. 템플릿 미

💡 호이스팅이란 코드드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.변수에 할당할 수 없다.함수 이름을 생략할 수 없다.런타임 이전에 자바스크립트 엔진에 의해 함수 객체가 먼저 생성됨런타임에서 함수 선언문이 실행되기