https://cashdoc.yeogiya.io 해당 사이트를 React -> Next.js로 마이그레이션하는 작업 중 겪었던 문제가 있는데, SSR이 적용된 페이지를 웹뷰에 올리면 (iOS,안드로이드 다) 초기로딩이 너무 느리다는 것이었다... 네트워크도 찍

react-slick으로 리뷰이미지들에 대한 slide를 만들었다.리뷰이미지여서 위와 같이 전, 후 label 딱지가 있는 이미지 slide다. 구현조건들은 아래와 같다.가로로 긴 이미지는 위와 같이 가로로 꽉 차야한다.세로로 긴 이미지는 반대로 세로로 꽉 차야한다.이

forwardRef를 props로 넘길 때 type에 관한 글은 많은데, list로 된 ref를 넘길 때의 글을 별로 없어서 정리한다.

React에서 상태관리 할때 압도적으로 Redux가 쓰이는건 맞지만 그냥 제일 먼저 나와서 많이 쓰는게 아닌가 싶다. 관리할 상태가 많아질 수록 파일이 너무 커진다. saga...thunk...최근에 recoil이랑 zustand를 잠깐 봤는데 (신세계임 ㅋ) 조만간

토스 slash 사이트를 보다가 헤더가 깜찍해보여서 해보려 한다.↑ 헤더가 스크롤 최상단에 위치해 있을 땐 배경색과 같고,↑ 스크롤을 내리면 투명도를 줘서 구분을 해준다. (관계자분 모자이크 해드림ㅋ)useState에 스크롤 상태를 넣어준다.현재 스크롤 위치를 set해

Next.js에서 SVG를 사용하려면, 두가지 방법정도가 있다.(예시)잘 작동하지만, 색을 바꾼다던지 SVG파일 자체에 속성을 주기가 어렵다.그래서 두번째 방법을 쓰는게 좋다.이렇게 사용하면 svg에 속성 값을 줄 수 있어서 좋다.export하는 module에 아래 속

최근 리액트에서 많이 사용되는 스타일링 방법은 sass(scss), styled-components, tailwind정도 이지 않을까 싶다. 그래서 CSS-in-CSS, CSS-in-JS를 비교해 볼 것이다. (근데 CSS-in-JS가 대세인 것 같음ㅎ) CSS-in-

replicaSet vs deployment? k8s에는 replicaSet과 deployment라는 개념이있다. 둘다 서비스에서 여러개의 pod의 가용을 보장해준다. (pod이 돌다가 뭐 하나 죽으면 소생시켜줌ㅎ) replicaSet은 단순히 pod의 갯수 유지에

웹팩같은 번들러는 위 그림 하나로 설명할 수 있다. (사실 그 정돈 아님ㅋ)그림의 왼쪽을 보면 하나의 웹을 구성하기 위해 수 많은 파일들이 있고, 수 많은 dependency가 걸려있다. 웹팩 같은 번들러가 하는 일은,웹을 구성하는 모든 파일들의 dependency를

웹 개발 중 한번 쯤은 CORS정책 위반을 해보셨을겁니다.보통 api request를 보낼 때 많이 접하는데저는 vue로 프로젝트를 할 때 처음 본 기억이 있습니다ㅠkakaomap api와 공공데이터 포털의 api서버를 이용해서지도에 핀을 찍고 해당 위치의 상권을 분석

저번엔 Low-level, 즉 OS단계에서 사용하는 synchronization 방식을 알아봤으니 이번엔 Application단계의 synchronization 방식인 Semaphore, Monitor방식을 알아볼 것이다. **※ Application단에서 synch

Docker swarm? 만약 관리하는 도커 머신, 컨테이너 갯수, 이미지가 수 없이 많아지면? 일일히 CLI창으로 관리 할 수 없기에, docker swarm이 필요하다. 도커스웜, 쿠버네티스와 같은 서비스를 오케스트레이터라고도 하는데, 말그대로 컨테이너들을 관리

VMware와 docker-machine를 같이 사용하려 했는데 오류가 발생했다.가상화도 켜놨고 하이퍼바이저도 다 꺼놨는데... 그런데 해결방법은 찾았다.그냥 create할때 가상화체크를 무시하도록 하면 된다.잘된다!

https://velog.io/@leejaehyuck9/DB-2.-%EA%B4%80%EA%B3%84%EB%8C%80%EC%88%98 저번에 관계대수를 포스팅했었는데, SQL은 관계대수를 선언적으로 사용하면 된다! 예를들어 π\dno,empname(employees)를

두번째 DB포스팅은 관계대수이다. 관계대수는 sql의 근간이

데이터베이스관한 글을 쓰기 전에, 바로 sql부터 포스팅할 예정이었다. 하지만, sql의 이론적 기초가되는 관계대수 또한 매우 중요하다고 생각되어 DB, 특히 RDBMS가 무엇인지, 그리고 관계대수는 무엇인지부터 정리할 것이다. RDBMS? 우선 DBMS는 Datab

저번 포스팅에서 OS는 hardware을 효율적으로 관리 해주는 software라고 했다.오늘은 그래서 어떻게! 효율적으로 관리해준다는건지 알아볼 것이다.표시된 부분이 OS의 중요한 기능들인데, 가볍게 짚고 넘어가면user interfacesCLI(bash, shell

프로세스나 스레드가 동일한 shared resoure에 access하지 못하도록 하는 것이다.두 프로세스가 하나의 변수에 접근해서 각자 값을 바꿔버리면 안될것이기 때문이다. 아래 예시를 보자.ATM에서 돈을 인출하는 process인데, synchronization에 대

도커 컨테이너 내에 데이터를 저장하면, 컨테이너의 소멸과 함께 데이터도 운명을 같이한다. 그래서 데이터를 저장하고, 컨테이너간 데이터를 공유할 수 있는 방법들이 있다.Docker volumebind amounttmpfs등이 그것인데, 오늘은 이 셋의 특징을 알아보고 D

자바스크립트의 Array methods를 정리해보자.물론 가장 좋은건 레퍼런스를 참조하는 것이다.spread 연산자를 이용한 항목 추가(원본 배열을 손상시키지 않음)이런 immutable한 특성은,리액트의 useState같이 배열을 직접 수정할 수 없을 때 유용하다.배