전체 글
[CSS] 'autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.' 해결방법 : autoprefixer란 무엇인가
autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 1. 발단 NextJS에서 npm run dev 명령어를 입력했더니 갑자기 에러가 떴다. 에러가 뜨기 전과 비교했을 때, 내가 한 행동은 package들을 싹 최신 버전으로 갈아 엎어줬다는 정도? 패키지 버전업은 함부로 하는게 아니라는걸 다시 한 번 되새기면서 이 에러에 대해 찾아보았다. 2. 해결방법 구글링 결과 원인 및 해결책은 매우 간단했다. autoprefixer의 버전을 10.4.5로 할 것 따라서 이 문제를 해결하기 위해서는 다음 명령어를 통해 다운그레이드 시켜주면 된다. 참고로 에러가 발생한 버전은..
[Windows] Zone.Identifier 란 무엇이고, 어떻게 지울 수 있나?
Zone.Identifier란 무엇인가? WSL에 인터넷에서 다운받은 파일을 복붙해서 넣으면 Zone.Identifier 가 붙은 파일이 저절로 생성된다. 어떤 경우에는 생기지 않고, 어떤 경우에는 생기는 걸로 봐서 뭔가 생성 요건이 있는 듯 한데.. 아직 거기까지는 파악을 못한 상태. Zone.Identifier에 대해 알아보니, Windows에 도입된 새로운 ADS라고 한다. ADS란 Alternate Data Stream(대체 데이터 스트림) 의 약자로 NTFS 파일 시스템에 딸려있는 숨겨진 영역이다. 여기에는 일반적으로는 확인할 수 없는 여러가지 데이터가 담길 수 있는데, 이 ADS는 보안상 취약점이 되기도 한다. 어쨌거나 Windows에서 생성하는 Zone.Identifier에는 파일의 출처에 ..
[아키텍쳐] ARM vs AMD... 어라 그럼 Intel은 어디로..?
최근 PlanetScale 이라는 서버리스 DB를 공부하고 있다. 근데 PlanetScale의 CLI를 Linux 환경에 설치하려는 과정에서 아래와 같은 상황과 마주하였다. 나의 경우, 데스크탑은 AMD CPU이고, 노트북은 Intel을 쓴다. 그래서 데스크탑에서는 자신있게! amd64를 깔아왔었지만, 노트북은 이제 겨우 2달 남짓 쓴 터라 설치할 일이 그리 많지도 않았고, 그동안은 64가 붙은게 하나뿐이라 눈치껏 64 붙은 녀석으로 설치해왔는데, 이번에는 amd도 64, arm도 64다. 난관이다. 그래서 이번 기회에 여태 미뤄왔던 아키텍처 부분을 조금 정리해보려 한다. 사실 amd64, arm64를 마주한 상황에서의 정확한 나의 심정은 아래와 같았다. arm은 죽었다 깨어나도 아니니 amd일 것 같은..
[ReactJS] React hook form, 모던 Form을 위한 치트키
React로 form의 이벤트를 모두 컨트롤하기 위해서는 발생 가능한 이벤트를 다 상정하여 개별적으로 state를 설정하여 컨트롤 해야하는 문제가 있다. 물론 이 마저도 바닐라 JS에 비해서는 아주 많이 간편해진 셈이지만, 사람의 욕심은 끝이 없고 개발자의 게으른 부지런함(?)도 마찬가지다. form과 관련된 웬만한 이벤트들을 한 번 싸그리 모아다가 상정해두고 이를 컨트롤할 간단한 방법을 만들어두면 두고두고 쓸 수 있지 않을까? 위 고민에 대한 답을 내놓는 React 라이브러리가 바로 React-hook-form 이다. 1. 설치하기 $ npm i react-hook-form 위 커멘드를 입력하면 설치가 진행된다. 2. 기본 개념 React를 기반으로 하고 있으므로 큰 틀은 React와 동일하다. rea..
[NextJS] ReactJS를 품은 프레임워크, NextJS를 알아보자
NextJS는 ReactJS를 바탕으로 만들어진 웹 Front-End 프레임워크이다. 프레임워크다보니, ReactJS에 비해 자유도는 낮지만, 그만큼 정형화/규격화 되어 있어서 협업이 편하고 생산성이 높다. NextJS는 ReactJS의 SEO문제를 해결하고자 등장했다. 대표적인 CSR 라이브러리인 ReactJS는 Request에 대해 Javascript 코드만을 Response하는데, 이 JS 코드가 최종적인 HTML을 만드는 구조라, JS를 돌릴 줄 모르는 검색엔진이 사이트를 크롤링하면 텅 빈 HTML만 인식하게 되어 검색친화적이지 못하다. 반면, NextJS는 Request가 오면, 서버측에서 먼저 Rendering을 거친 후 HTML과 JS를 따로 Response한다. 따라서, 사용자는 HTML코..
[도서/AI] '구글 브레인 팀에게 배우는 딥러닝 with TensorFlow.js' 개발자 리뷰
얼마 전 주변의 아는 분께서 이번에 길벗에서 개발자 리뷰어 모집을 한다는 소식을 전해주셨고, 여러가지 책 중에서 내 마음을 이끄는 책은 당연 였다. 나는 현재 JavaScript를 이용하여 Front-End와 Back-End 개발을 진행하는 개발자이지만, 동시에 머신러닝, 딥러닝 쪽에 관심이 많은 사람인지라, JS 라이브러리인 TensorFlow.js를 바탕으로 딥러닝을 소개하는 책이 가장 흥미로울 수 밖에 없었다. 그래서 길벗 18차 개발자 리뷰어 모집에 책으로 신청을 하였고, 운 좋게 선정되어 책을 받아보게 되었다. 이 책의 특징 TensorFlow.js를 진심으로 다루는 책 내 개인적으로는 이 책의 가장 큰 장점으로 TensorFlow.js를 사랑하는 사람들이 정말 진심을 담아, 보다 많은 사람들이..
[TS] Typescript의 enum, const enum, as const 에 대해 알아보자
enum enum의 개념 enum은 열거형 타입(Enumerated Type)을 앞 글자를 따와서 만들어진 단어이다. Javascript에는 존재하지 않는 Typescript 만의 몇 안되는 기능이다. Typescript에서는 숫자기반 뿐만 아니라 문자열 기반의 열거형까지도 지원한다. enum의 대표적인 예로 boolean Type을 생각할 수 있다. 일반적으로 JS에서 숫자 1은 True에, 숫자 0은 False에 대응되는데, 일종의 Built-in enum인 셈이다. enum booleanType { False = 0, True = 1 } 위 코드를 JS로 컴파일하면 아래와 같이 바뀐다. "use strict"; var booleanType; (function (booleanType) { boolea..