간단한 블로그

정확한 이유는 알 수 없지만 Vue.js 2.x (3버전대로는 경험하지 못했으니)에서 v-디렉티브 사용시 SSR도중 DOM이 렌더링 되지 않는 현상이 때때로 발생한다. 내가 경험했던 케이스는 모두 vuex 데이터를 가공하는 computed 구문 내의 객체를 v-for 혹은 v-if에 사용했을 때 발생했다. 대략 2.3 ~ 2.4부터 경험했던 문제인데 2.7이 되도록 해결되지 않은 것으로 봐선 해결이 쉽지 않은 문제로 보인다. 이 문제는 정말 골치아픈 것이, computed로 처리하는 객체를 템플릿에 {{ object }} 구문 등으로 직접 노출시에는 데이터가 담겨있지 않지만, 라이프사이클에서 객체를 stdout으로 출력시에는 의도한대로 데이터가 담겨 출력된다. 심지어 data에 computed된 데이터를..

FE 개발자가 자주 사용하지만 직접 구현해보는 사람은 많지 않은 썸네일 서버 로직에 대해 정리한 글이다. 회사에서 팀 내에 공유한 문서였는데 쓰는 글이 없어 허전하길래 다시 정리해서 업로드한다. Thumbnail 썸네일이란? 트래픽 문제 → 용량의 문제 → 비용의 문제 사용자 경험 (UX) 증대도 있지만 클라우드 비용 감소에 있어 아주 큰 영향을 차지한다. 결국 사용자/제공자 모두에게 있어 비용 감소가 주요 목표라고 할 수 있음 최근 IOS에서도 webp가 지원되어 (webm은 아직) 많은 사이트에서 썸네일을 webp로 제공하는 추세 webp/webm: 구글에서 공개한 이미지 코덱(포맷)으로 webp는 정적, webm은 동적(gif) 이미지에 사용됨 대부분의 경우 용량을 아주 큰 폭으로 줄일 수 있지만 ..

예전에 공부하다 남긴 자료(이 블로그에 흔적으로 남아있는) 것들을 최대한 간략하게 요약한 내용. 대부분의 개발자는 수학과 출신 개발자가 아니므로, 수학적 이론을 기반으로 한 학습(탑다운)이 아닌, 실제 구현된 내용으로부터 이론을 알게 되는(바텀업) 경우가 많아 그 측면에서 설명하고자 했다. 팀 슬랙에 공유했었는데 그냥 버리긴 뭔가 아까워서 글로 작성해둔다. 함수형 프로그래밍 함수형 프로그래밍이란? 절차적, 객체지향과 같은 언어 패러다임으로 상위 요소나 전역에 의존성이 없는 순수한 함수를 만들고, 그 함수들을 조합함으로써 프로그램을 만들어 내는 프로그래밍 방식. 문제의 요소를 간단한, 처리하기 쉬운 형태의 함수 단위로 나누기 때문에 어려운 문제를 쉽고 사이드 이펙트 없이 풀어낼 수 있다고 주장한다. 함수형..

군 부대에서 자주 사용하던 단어로 전략과 전술이라는 단어가 있다. 이 두 단어는 쉽게 혼용되는 단어인데(사회에서의 의미는 약간 다르므로), 나는 훈련소에서 두 단어의 차이를 듣고 꽤나 재미있다는 생각을 했었다. 두 단어는 네이버 국어사전에서 아래와 같이 설명된다. 간단하게 요약하자면 국가간 전쟁을 이기기 위한 전체적인 규모의 행동은 전략, 하나의 전장에서 전투를 승리하기 위한 행동은 전술이라고 하는 것이다. (스타크래프트에서의 핵이 전술 핵미사일이라는 점을 떠올려보자) 전산병으로 근무하던 군 복무 시절 나는 다양한 AS 업무로 사단 본부에 가는 일이 잦았다. 특히 사단 본부 지하에 있던 사단 지휘통제실은 영화에서나 볼 법한 대형 원탁과 수 많은 빔 프로젝터, 초대형 스크린 등으로 정기 점검을 나가야 할 ..

아키텍처에 관한 글을 작성하다 보니 자꾸 늘어져서 다른 글을 주저리 적어본다. 현재 재직중인 회사에서 API 요청과 응답에 대한 Type validation 라이브러리 도입에 대한 논의를 진행했다(zod, joi, yup 등). 이 라이브러리들은 단순 응답 형식(타입스크립트 인터페이스) 작성을 통한 형변환을 넘어, 최소값과 최대값, 그리고 형식 등을 체크해주는 일종의 미들웨어다. 그런데 나는 회의 도중 문득 '이게 정말 필요한 것일까'라는 반골 기질의 의문이 들었다. 개인적으로 FE 개발자로서 업무를 진행한다면 프론트엔드에서 하는 '사내 내부 요청'은 항상 검증되어 있어야 한다고 생각하기 때문이다. 프론트엔드 제공을 위한 백엔드(BFF)에서 저런 데이터 검증을 한다는 것은 API, 다시말해 백엔드을 믿지..

컴포넌트에 대해 FE 개발을 할 때 제일 중요한 것은 컴포넌트다. 사실 거의 모든게 컴포넌트다. 막말로 컴포넌트를 대충 끄적이면 프로젝트 개발이 끝난다. 하지만 시간이 지날수록 생산성은 저하되고 심리적 부담감은 커진다. 유지보수와 개발을 진행하며 기능이 추가되고 변경되어 코드가 어려워지는 것은 어쩔 수 없지만, 최대한 그 시점을 늦추기 위해서 나는 아래 내용들을 고려한다. 컨텐츠를 기준으로 구조를 만들자 프론트엔드는 결국 기획과 디자인, 그리고 백엔드에 종속되어 있다. 특히 FE 개발자로서 가장 자주 충돌하는 대상은 기획자다. 그리고 기획자는 개발자가 아니다. 이 버튼을 저리로 옮기는 '단순한' 작업에 왜 그렇게 시간이 오래 걸리는지, 어렵다고 하는지 이해할 수 없다. 컴포넌트의 데이터가 어쩌고 저쩌고 ..

이직하기 전에 말해줬어야 하는 내 개인적인 의견에 대해 정리해봤다. 쓰다보면 별거 없을 거 같아서 다 쓰고 공유해줄지 고민해봐야 할 것 같다. 내가 대단한 사람도 아니고 흔한 개발자 중 하나에 불과하니 이 사람은 이렇게 생각하는구나 정도로 봐 줬으면 한다. FE 프로젝트에 대해 우리는 서비스를 유지보수한다. 개발은 쉽지만 유지보수는 어렵다. 왜 그럴까? 대부분의 경우 유지보수에 대한 생각 없이 개발하기 때문이다. 최근 몇 년 사이 급격하게 생태가 변했고(심지어 채용관련해서도), 상대적으로 룰이 정립되지 않은 프론트엔드에서 그 문제는 더욱 크게 다가온다. 만든지 몇 년, 아니 몇 달만 지나도 단순한 변경에 큰 리소스가 소모되기 시작한다. 나 역시 그리 많은 경험이 있다고 자신할 수는 없지만, 여러 프로젝트..

웹 개발로 급여를 받는다면 꼭 알아야 한다고 생각하는 아주 기본적인 서비스와 간단한 설명을 작성했다. 회사 문서에 러프하게 적었던 내용이라 쓸모가 있을지는 모르겠다. Nginx 사용자 접속시 어플리케이션에 리버스 프록시로 연결하기 위해 사용 보안을 위해서 사용한다고 주로 알려져 있지만 인프라 측면에서의 관리 요소를 분리하기 위한 아키텍처 측면에서의 역할이 강함 추가 모듈들을 이용하여 다양한 기능을 추가할 수 있음 AWS Cloudfront (CF) AWS에서 제공하는 CDN 서비스로 다양한 기능을 제공하여 간편하게 사용할 수 있음 CDN: static한 에셋들을 캐싱하는 서버로 nginx 모듈을 이용해 직접 구현할 수도 있음 (그냥 돈 쓰는게 나음) 비용은 AWS S3보다는 저렴하지만 꽤 비싼 편이기에 ..

주판. 어릴 때 보이던 주판이 떠오른다. 많은 사람들은 전자제품이 흔해지며 금새 자취를 감췄다고 기억하고 있다. 하지만 나는 주판 학원의 광고지를 잊을 수 없다. 전자계산기는 부정확할 수 있다. 주판을 사용하면 머리가 좋아진다. 주산 자격증을 취득해 취업할 수 있다... 하지만 그들의 노력에도 시대의 변화에 주판은 사라졌다. 주판 기술자들은 어디로 간 걸까? 개발자로서 IT업계에 몸담고 사회 생활을 하다 보면 앞선 선배 개발자들이 개척해 온 문화, 그리고 시대가 변함에 따라 개선된 처우. 이 두 가지가 엮여 다른 직업보다 편한 생활을 하고 있다는 것을 느낀다. 하지만 이러한 '편한' 생활에 취해서인지 특이한 모습도 보인다. '개발자는 대단한 직업이다 - 우리는 특별하다 - 우리를 룰에 엮지 마라' 마치 ..

프론트엔드 프로젝트와 백엔드 프로젝트를 분리하여 개발하는 방법도 있지만, 개발 편의성 혹은 구조상의 문제로 합쳐야 하는 경우가 있다.이 글에서는 Spring boot 프로젝트와 Vue 프로젝트의 소스가 합쳐진 프로젝트를 생성한다.추가로 크롤링을 위해 Prerendering 플러그인도 적용한다. 1. 스프링 부트 프로젝트를 생성한다. Spring Boot 프로젝트를 생성한다 2. 뷰 CLI를 이용하여 뷰 프로젝트를 생성한다. 이 예제는 webpack-simple 템플릿으로 생성했다 3. 뷰 프로젝트 폴더에 만들어진 파일을 스프링 프로젝트로 이동한다. From (Vue project)To (Spring project)비고src./src/main/vue Index.html./src/main/resources/..