Pay it forward

프로젝트가 어느 정도 안정기에 들어감에 따라 시간이 많이 들어가는 작업들을 자동화하고 있다.그중, 테스트 서버에 배포하는 과정을 자동화 한 경험과 트러블슈팅.테스트 서버의 특징은 배포되는 브랜치가 정해져 있는 게 아니라 매번 현재 작업 중인 기능을 테스트할 때마다 브랜치를 옮겨 다닌다.기존에는 직접 ssh로 원격 서버에 접속해서 git branch를 옮겨 다니며 직접 pm2로 프로젝트를 실행시켜 줬다.개발자가 직접 원격에 접속하고, 명령어를 하나하나 입력하고 혹은 빌드 에러나 예상치 못한 에러가 발생하는 경우 갑작스레 pm2 프로세스가 완전히 내려가버리는 일도 있어서 "지금 ~~~ 한 작업 중이라 테스트서버 접속 이상 있다"라고 소통해야 하고 팀원들에게 불편을 초래하는 경우도 있었다.이런 일을 없애고 개..

추상자료형추상자료형에 대해 검색해 보면'기능의 구현 부분을 나타내지 않고 순수한 기능이 무엇인지 나열한 것' 혹은'기능의 구현 부분을 나타내지 않고 자료구조의 특성과 연산을 설명한 것'이라고 한다.이를 더 자세히 생각해 보자면 추상자료형은 특정 자료구조에 대한 프로그래머의 의도를 명확히 설명하고 오해를 없애기 위해구현 부분을 만드는 게 아니라 단지 어떤 객체가 어떤 행동을 하는지만 설명함으로써 프로그래머의 의도를 정확하게 반영한 자료구조를 정의하기 위한 방법이라고 생각한다. 스택의 추상자료형스택 객체: 0개 이상의 원소를 갖는 유한 순서 리스트연산1. CreateStack(maxSize) ::= 스택의 크기가 maxSize인 빈 스택을 생성하고 반환한다.2. StackIsFull(stack, maxSiz..

pdf 데이터를 서버에서 base64로 인코딩 된 문자열을 받아서 pdf타입의 blob객체를 만들고 이것을 새창에서 띄운다.새창에서 한번 확인한 후에 저장한다.blob url을 만들어서 새창에 띄워주면 크롬 pdf 뷰어가 나오면서 빨간색 동그라미로 표시한 다운로드 버튼을 누르면 pdf가 저장된다.근데 이 pdf가 엄청 많아질 수 있다. 그러면 자연스럽게 서버에서 받아오는 base64로 인코딩 된 데이터가 많아진다.이것을 URL.createObjectURL(blob)메서드로 계속 만들기만 한다면 메모리에 데이터가 계속 쌓이기만 할 테니 필요 없어지면 제거하자.const openToArrayBuffer = ({ data, extension = 'pdf', }: IOpenToArrayBufferP..

처음으로 프론트엔드 테스트 코드를 작성했다.작업을 하고 리팩토링을 많이 하다 보니 자연스럽게 테스트 코드의 필요성이 느껴졌다.기존 코드의 기능을 분석해서 핵심기능을 완전히 똑같이 구현했다는 확신이 필요했다.오늘은 훅에 의존적인 컴포넌트의 통합 테스트코드를 작성하면서 어려웠던 점과 생각보다 쉽게 해결한 경험을 작성한다.export const Index = ({ options, searchKey, name, width }: ILabeledSelectProps) => { const { addURLparams, searchParams } = useURLparams(); const urlValue = searchParams.get(searchKey); const onChange = (value: string..

Nextjs 프로젝트를 배포한 뒤 유독 시크릿탭에서 , 그것도 처음에만!! 위와 같은 화면이 간헐적으로!! 목격됐다.제일 어려운 잘되다가 또 안되다가 이유없이 잘되다가 또 이유 없이 안 되는... 그런 이슈였다. 콘솔창에는 ChunkLoadError라고 찍힌다. 처음 ChunkLoadError라는게 보여요~라는 제보를 받았을 때는아~ 그거 새 배포해서 그래요 새로고침 하면 될 거예요. 하고 대답했지만 시크릿 탭을 닫았다가 새로 켜고 접속해도 똑같은 에러가 다시 발생한다는 믿을 수 없는 추가제보가 들어왔다.게다가 새로고침을 여러 번 하면 괜찮아진다고 한다. 정말 이상했다.전 회사에서는 브라우저 장기접속자(?)들을 위해 ChunkLoadError를 미들웨어에서 잡은 후에 새로고침 해주는 방식으로 해결했었다...

이 글을 리액트 코드의 성능과 브라우저에 대한 내용이다.분명히 발생해야 할 이벤트가 무시될 수도 있을까?아래와 같은 코드가 있었다const [barcode, setBarcode] = useState('');const handleBarcode = (e) => { setBarcode(e.target.value);};const handleEnter = async () => { // await post('/barcode',{barcode})};return ( ); barcode 값은 바코드리더기가 읽어낸 QR코드의 value값이다. 예를 들어 "eij1oidj012d93j980dj128d12987" 이렇게 생긴 스트링이 바코드 value값으로 읽힌다고 보면 된다.input에 포커스를 두고..

Nextjs의 app router로 진행했던 개인 프로젝트를 다시 배포했다.이번 프로젝트를 하면서 가장 신경을 썼던 부분은 로딩, 랜더링 성능의 최적화이다.클라이언트 컴포넌트를 어디에 둬야 트리의 가장 하단에서 인터렉션에 따른 리랜더링을 최소화할 수 있을까?어떻게 유저에게 빨리 보여주고 덜 지루하게 할 수 있을까?이러한 고민들의 한 방법으로 컴포넌트 스트리밍과 Blur 이미지 제공하는 기능을 추가했다.하지만 로컬에서와 다르게 배포환경에서 제대로 동작하지 않는 부분에서 트러블이 있었고,이 글에서 그 트러블과 해결을 정리한다. MainPosts컴포넌트에 데이터를 fetch 요청하는 로직이 들어있다.loading.tsx파일을 준비하거나(로딩화면) 스트리밍 fallback ui를 준비하지 않으면 저 mainpo..

1. 문제점저희는 컴포넌트 스타일 라이브러리로 styleX를 선택했습니다.전에 사용하던 styled-components는 여러 스타일을 상속받고 중첩하여 작성해서 다양한 스타일을 만들 수 있는 장점이 있었습니다.하지만 css가 많아지고 중첩될수록 스타일을 예측하기 어려웠습니다.왜 border가 생기는지, 어디서 backgroudColor가 생기는지 찾기 위해 스타일 파일을 한참 뒤적거려야 했습니다.이런 불편함으로 인해 styleX가 스타일을 생각하는 방법에 공감했습니다.’Don’t repeat yourself가 항상 옳지는 않다’라는 말인데요, 특히 스타일을 다룰 때는 컴포넌트와 가장 가까운 곳에 스타일을 위치시킴으로써 마크업과 가장 가까운 스코프에서 예측 가능한 스타일을 작성하면서 코드를 조금 반복하는..