next.js로 만든 개인 프로젝트를 배포하기 위해 로컬에서 빌드를 해봤고, 용량은 무식하게 높았지만 빌드는 완료되었기에 vercel을 이용하기로 결정 후 곧장 배포 단계를 밟았다. 하지만 수많은 오류에 봉착했고, 정말 머리가 30가닥도 넘게 빠질 정도로 스트레스를 받아가며 오류를 해결하기 위한 시도들이 있었다. 놓쳤던 부분 나의 경우엔 node - 16버전, next- 9버전, 그리고 여러 라이브러리들을 사용했다.(next-redux-wrapper, chart.js등) 하지만 vercel로 빌드에 들어갈 때부터 새빨갛게 물든 화면을 볼 수 있었다. 여기서부터 환상의 삽질이 시작되었다. error:0308010C:digital envelope routines 이 에러의 의미를 아무리 찾아봐도 나오질 않았..

이전 회사에서 진행한 채팅 프로젝트에서 유저가 이미지를 첨부한 메시지가 많아질수록 이미지 로딩이 오래 걸리는 현상이 있었다. 대부분의 유저가 텍스트 메시지를 사용하기도 했고 이미지를 많이 보내는 유저도 드물었지만 유저는 항상 예측할 수 없는 행동을 하기에 대량의 이미지를 로딩해오는 부분에 대해 고려가 필요했다. 그 때 사용했던 것이 react-lazy-loading이었다. 웹 페이지의 성능 개선 중 하나이다. 효율적으로 import를 하는 것으로도 성능 개선이 가능하다. 모든 import를 한 번에 가져오는 것 보다 필요할 때만 가져와서 import를 해줌으로서 resource 낭비를 줄이기 때문이다. 그 방법으로 react-lazy-loading이라는 것이 있다. 쉬운 말로 해당 컴포넌트로 화면을 렌더..

일급 함수 JS에서의 함수는 일급 객체라는 말을 개발 초창기부터 들어왔고 그렇게 `함수는 객체에 속하는 것`이라는 것만 알고 개발을 해왔다. 그렇다면 왜 함수는 일급 객체에 속하게 되는것일까. 먼저 일급 객체의 특징에 대해 알아야 했다. 일급 객체의 특징 변수에 담을 수 있고, 파라미터로 전달이 가능하며, 리턴값으로 사용이 가능할 때 일급 객체라고 말할 수 있다. 일급 함수 함수를 일급 객체로 다루는 것 JS에서는 함수를 변수에 담는 것이 가능하고, 파라미터로 전달도 가능했으며 리턴값으로도 활용할 수 있었다. 그러므로 JS의 함수를 일급 함수이자 일급 객체라고 말할 수 있는 것이었다. 개발을 하며 당연하게 여겨오던 것들로 일급 함수의 예시를 들어보자. 일급 함수의 예시 1. 변수에 할당 const box..

오늘은 항상 사용하면서 당연하게만 여겼던 함수형 프로그래밍에 대해 알아보고자 한다. 함수형 프로그래밍 1. 순수함수 동일한 인자를 투입하면 동일한 결과를 return하기 때문이다 함수가 return값으로 결과를 만드는 것 외에 외부 상태에 영향을 미치는 것을 부수효과라고 하는데, 순수함수는 부수효과가 없는 함수를 말한다 1-1) 예시 function plus(a, b) { return a + b; } 위의 함수는 외부 상태에 영향을 미치지도 않고, 인자를 투입하면 그에 따른 결과만 return한다. 그러므로 순수함수라고 볼 수 있다. 1-2) 예시 let c = 30; function plus(a,b) { return a+b+c; } plus(1, 2); // 33 c = 40; plus(1,2); //..

인스타를 돌아댕기다가 JS의 형변환에 관한 짤을 보고 글을 작성하게 되었다. ↓ 문제의 짤 true / false인 이유 0 == '0'; // true 0 == [ ]; // true '0' == []; // false 3개의 연산 결과가 true/false인 이유에 대해 알아보자 나의 생각 결론부터 말하면 Null과 undefined로 접근을 했고, 틀렸다. 1) 0 == '0' 원시 데이터 타입 중 num과 string을 비교하는 것. 자바스크립트가 알아서 해주는 거 아녔나? 라는 생각이 들었다. 문득 값이 없는 것은 undefined가 아닐까라는 생각이 들었고, undefined == undefined 로서 true가 된 것 같았다. 2) 0 == [ ] 원시 데이터와 참조형 데이터를 비교하는 것..

회사 프로젝트를 진행 중, 실시간으로 채팅을 주고받을 수 있도록 socket.io를 사용한 기능에 수정이 필요했던 경험이 있다 이 당시 나는 실시간 통신이 가능하다는 것 이외의 다른 점은 전혀 모르고 있었고, 웹소켓이 뭔지도 모르고 기능 개선을 할 수는 없기에 웹소켓에 대한 학습 내용을 정리하며 포스팅을 하게되었다 WebSocket이 생겨난 이유 양방향 통신이 필요한 현대의 서비스에 대응하기 위함 기존 HTTP 통신은 요청에 대한 응답만 해주는 단방향 통신이었다 한 번만 통신하고 종료되는 방식으로도 과거의 서비스는 운영이 가능했지만 실시간 채팅이나 거래 등 빠르게 이뤄지는 현대의 서비스는 기존의 HTTP 통신으로 운영하기엔 어려움이 있었다 예를 들어 현대의 서비스 중 하나의 기능으로 3초마다 새로운 가격..

Module이란 프로그램을 구성하는 구성요소의 일부 개발하는 애플리케이션의 크기가 커지면 확장성과 유지보수 측면에서 파일을 여러 개로 분리하는 시점이 온다. 이때 분리된 파일 각각을 '모듈'이라고 부른다. 모듈화의 장점 1. 프로그램의 효율적인 관리 및 성능 향상 2. 전체적인 소프트웨어의 복잡도 감소 3. 기능 분리의 가능, 인터페이스의 단순화 4. 오류의 영향력을 최소화 5. 모듈의 재사용 가능으로 개발과 유지보수가 용이 JS에서의 모듈 JS에서 export와 import를 통해 모듈을 로드할 수 있다. export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다(= 모듈 내보내기) Test.js export function Test() { console.log('..

이전까지는 SEO에 대해 관심이 없었지만 기업 입장에서 서비스를 바라볼 때 필수로 신경써줘야 하는 부분이 바로 SEO라는 것을 알게 되었고, SEO 점수 개선에 대한 방법 중 defer를 통한 성능 개선이 가능하다는 점을 알게 되었다. Defer란 defer 는 '미루다, 연기하다' 라는 의미를 가진 단어로써 html 및 css 보다 늦게 자바스크립트 구문을 호출하는 방법이다. HTML 파싱과 동시에 비동기로 JavaScript 파일을 로드한다는 것이다 HTML 파싱이 완료된 후, JavaScript 코드의 실행이 시작된다. defer 속성이 추가된 경우의 실행 defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다. 비동기적으로 로드된 스크립트와 마찬가지로..