log4me

원글: How and when to force a React component to re-render (주의❕ 의역 다수 존재) 리액트는 보통 자동적으로 컴포넌트를 리렌더한다. 하지만 강제적으로 리액트가 컴포넌트를 리렌더하도록 하기 위해서는 리액트의 리렌더 방식에 대한 이해가 필요하다. 웹 발전의 시작에서부터 지금까지 HTML과 CSS가 웹 사이트의 시각적인 부분을 담당하고 있다. 하지만 JavaScript가 등장함으로써 우리는 렌더링된 페이지의 HTML을 읽고 업데이트할 수 있게 되었다. 이를 DOM API라고 한다. jQuery와 같은 라이브러리는 이러한 DOM API 위에 향상된 기능과 호환성을 가진 추상적인 개념의 레이어를 제공했고, 이를 통해 개발자들이 쉽게 웹 어플리케이션을 구축할 수 있게 되..

1. APIs란 API(Application Programming Interfaces)란 프로그래밍 언어로 만들어진 일종의 데이터와 기능들의 모음, 구성정도로 생각하면 이해하기 쉽다. API는 특정 기능에 대한 복잡한 코드를 추상화해서 사용하기 쉬운 문법으로 제공한다는 것이 가장 큰 특징이다. 이를 사용하여 개발자들은 복잡한 기능을 쉽게 구현할 수 있다. 웹앱에서 3D 그래픽 개발을 하려면 어떻게 할 수 있을까? GPU를 직접적으로 다루는 C나 C++과 같은 low-level 프로그래밍 언어로 구현할 수도 있을 것이다. 하지만 저런 것들을 알지 못해도 괜찮다. 자바스크립트나 파이썬과 같은 high-level 프로그래밍 언어로 작성된 API를 사용하여 쉽게 개발할 수도 있다. 자바스크립트에서의 APIs 클..

TL;DR slice() 메서드는 복사+추출의 개념, splice() 메서드는 제거+추출의 개념이다. 때문에 원본 배열이 유지되어야 할 때는 slice() 메서드를, 원본 배열을 변경해야 할 때는 splice() 메서드를 사용한다. 특히 요소를 삭제하고 곧바로 그 위치에 새로운 요소를 삽입하고 싶다면 splice() 메서드를 사용한다. 문제 아래 array 배열의 값은 그대로 유지한 채, 맨 앞의 두 원소가 제거된 새로운 배열을 만들어 출력하려고 한다. 둘 중 어떤 메서드를 써야할까? const array = [1, 2, 3, 4, 5];1. splice() Removes elements from an array and, if necessary, inserts new elements in their pl..

TL;DR Webpack을 통해 직접 구성한 리액트 프로젝트 .env 파일에 환경 변수를 선언할 때 REACT_APP_으로 시작하지 않아도 됨 dotenv 패키지: DefinePlugin을 통해 수동으로 전역 변수 정의 dotenv-webpack 패키지: 플러그인에 new Dotenv() 추가 CRA를 통해 구축한 리액트 프로젝트 변수명은 반드시 REACT_APP_으로 시작해야 함 별도의 설정 없이 /src 디렉토리의 하위 파일에서 process.env로 환경변수 접근 1. 삽질기 '리액트에서 환경변수 사용하기' 라는 키워드로 구글링하면 대부분 dotenv 패키지 설치 -> 프로젝트 루트에 .env 파일 생성 -> REACT_APP_으로 시작하는 변수 작성 -> 변수를 사용하려는 곳에서 r..

1. 깃 403 에러 발생 깃허브 레파지토리에 push를 하려는데 뜬금없이 접근권한이 없다며 403 에러가 발생했다. 8월 13일부터 더이상 깃허브 계정의 비밀번호로 접근할 수 없다고 한다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access '': The reque..

+ 2022.07.13 추가 댓글을 무시할까 하다가 아무래도 나의 작고 다 쓰러져가는 구멍가게 같은 블로그에 이런 의견이 들어오는 일이 또 있을까 싶어 늦게라도 피드백을 남겨본다. 먼저 이 글은 티스토리에 등록한 시점보다 훨씬 이전에 쓴 글이다. 그 당시 구글링을 통해서 나도 처음 알게 된 내용이고, 너무 유익했기 때문에 공유해야겠다는 마음으로 글을 쓰기 시작했다. 시간이 꽤 지났지만 분명히 기억나는 건 외국 글을 토씨하나 안 틀리고 그대로 베껴 번역한 게 아니라 최대한 나의 언어로 정리하고 소스도 직접 테스트 해보고 내 방식 대로 수정했다는 것이다(이게 더 나쁜 걸까?ㅠㅠ). 그래서 이번에 혹시나 원글을 찾아봤는데 정확히 일치하는 글을 찾지 못했다..😥 하지만 얼추 가장 비슷해보이고 나도 낯이 가장 익..

Firebase란 Firebase는 웹 어플리케이션 개발 플랫폼이다. 개발자가 직접 서버를 구축할 필요 없이 즉, 서버리스로 빠르게 웹앱을 개발할 수 있도록 다양한 기능을 지원한다. 대표적으로는 클라우드 기반의 NoSQL 데이터베이스를 제공하는데, 이를 사용해 개인 프로젝트를 실시간 서비스로 구축할 수 있다. 이번 포스팅은 그 사전 작업으로 가지고 있던 Mock 데이터를 Firebase에 import하기 위한 방법에 관한 것이다. 🛑 이렇게 import하게 되면 기존 데이터는 덮어씌워져 사라지기 때문에, 기존 데이터와 동기화가 필요한 경우에는 이 방법을 사용해선 안된다! 1. CSV → JSON 변환 Firebase 데이터베이스에 import하기 위해선 JSON 파일이 필요하다. 데이터의 수가 많을 경우..