전체 글
웹 렌더링과 CSR/SSR/SSG/ISR 정리 종결
웹 렌더링이란?웹 개발에서 CSR, SSR, SSG, ISR 같은 용어를 이야기할 때 '렌더링'이란 "웹 페이지의 HTML 콘텐츠를 최종적으로 만들어내는 과정"을 의미합니다.쉽게 말해, 사용자가 브라우저에서 실제로 보게 될 HTML 콘텐츠를 누가, 어디서, 언제 만들어내느냐에 관한 것입니다.일상 속 예시로 이해하기배달 음식(SSR): 레스토랑(서버)에서 요리를 완성해서 집(클라이언트)으로 배달해주는 방식밀키트(CSR): 재료와 레시피만 배달해주고 집에서 직접 조리하는 방식냉동식품(SSG): 미리 만들어서 냉동해둔 음식을 데워 먹는 방식주기적으로 교체되는 도시락(ISR): 미리 만들어 두지만 주기적으로 새로운 도시락으로 교체해주는 방식렌더링의 핵심 질문들웹 렌더링 방식을 구분할 때 우리가 관심 있는 건 이..
공통 컴포넌트 설계 여정
🎯 개요최근 회사에서 공통 컴포넌트를 분리하는 리팩토링 작업을 하면서 느꼈던 공통 컴포넌트 분리할 때 고려해야 하는 것들, 재사용성을 높이기 위한 노력들, 그 과정에서의 실수와 고민거리 등등을 정리했습니다. 📒 과거의 나의 실수📌 UI가 비슷해보이면 무조건 하나로똑같은 코드가 중복되는 건 무조건 나쁜 코드(?)인 줄 알았습니다. UI만 비슷해 보이면 이건 앞뒤 잴 필요도 없어 무조건 공통 컴포넌트로 분리해야 하는 코드로 정의했습니다. 이건 연쇄적인 문제점들을 떠안고 왔는데요. 📌 눈덩이처럼 불어나는 나의 공통 컴포넌트서비스에서 사용되는 모든 UI들을 하나의 컴포넌트로 묶어야 한다는 강박에 억지로 props, emits들을 끼워 맞추게 되고, 오만가지 분기처리와 예외처리들이 생겨났습니다. 처음에는..
[Vue] SFC의 교차 분석을 통한 컴파일 최적화
Vue의 공식 문서에서는 SFC (Single File Component) 를 사용하면 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 최적화할 수 있다고 설명하고 있다. 이번 글에서는 SFC 구조를 취함으로써 구체적으로 어떻게 컴파일 최적화를 이룰 수 있는지 알아보자. 🔖 Vue SFC의 구조Vue의 SFC(.vue 파일)에서는 , 위 코드에서 count는 템플릿과 스크립트에서 모두 사용되며, Vue는 이를 최적화할 수 있다. 🔖 컴파일 최적화의 원리Vue의 컴파일러는 템플릿을 렌더링 함수(render function) 로 변환하는 과정에서 다음과 같은 최적화를 수행한다.1️⃣ 반응형 데이터 최적화Vue는 템플릿에서 사용된 변수가 반응형(ref, reactive)인지 여부를 분석하여 불필요한 반응형..
vpn 연결 후 인터넷 안됨 해결
환경 및 사용한 프로그램윈도우 11OpenVPN GUI v11.44.0.0 - A Windows GUI for OpenVPN 문제OpenVpn을 사용해 사내 서버에 접속할 수 있는데 vpn 연결에는 문제가 없지만 연결 후 인터넷이 안되는 문제 발생정말 어느날 갑자기, 전날까지 잘됐었는데 갑작스럽게 발생한 문제라 아무리 찾아봐도 결국 원인을 찾지 못했음터미널에서 ping이 날라가지 않았음 해결 방법결론: DNS 리셋관리자 권한으로 터미널 실행아래 명령어를 차례로 실행해서 DNS 리셋컴퓨터 재부팅$ ipconfig /flushdns$ netsh winsock reset
2024 프론트엔드 개발자 연말 회고 겸 입사 1년 회고
2023년 연말에 프론트엔드 개발자로 입사해 2024년 12월 31일 기준 약 1년 2개월이 지났습니다. 연말에 입사한 덕분에 연말회고이자 입사 1년 회고를 퉁쳐볼까 합니다. 저는 만다라트를 사용해 신년계획을 세웁니다. 8개의 카테고리와 각 카테고리별로 세부 목표를 세웁니다. 제 2024 만다라트의 한 칸을 차지했던 "개발"칸을 되돌아보며 회고 시작합니다 :) 발표나 컨퍼런스 참여하기 우선 컨퍼런스는 한 번도 참여해보지 못했습니다.최근 몇년간 테크기업이나 여러 커뮤니티에서 진행하는 컨퍼런스가 많아졌습니다. 일부 컨퍼런스는 세션 내용을 영상으로도 공개하지만 그래도 역시 오프라인의 묘미가 있다고 생각해서 꼭 한번쯤 참여해보고 싶었는데 운이 부족해서일까요, 꽤 여러 번 응모했는데 어느 곳에서도 불러주지 않았..
성장하지 않으면 안괜찮나?
2024년 7월 10일 ~ 2024년 10월 10일 3개월간 30개의 글쓰기에 도전했던 적이 있습니다.당시 작성했던 글들을 옮긴 글입니다. 성장하지 않으면 안괜찮나? 항상 생각해왔다. 주니어 이력서나 포트폴리오를 보면 "성장"이라는 단어가 대부분 포함되어 있다. 사실 내 첫 번째 포트폴리오에도 “성장하는 개발자”라는 문구를 넣었었다. 처음에는 어떻게 써야할지, 무슨 말을 써야할지도 몰랐고 성장이라는게 뭔지도 모르면서 있어보이는 문구 같아서 썼었다. 어느순간부터 이 단어가 불편해졌다. 유난히 IT업계에서는 성장하면 안되는 병이 있는 느낌이 들었다. 사실 무슨 직군이든 성장이 안중요한 사람은 없지 않은가? 심지어 성장이라는건 문법적으로도 완전하다는 느낌은 아니다. “성장한다”, “성장했다”라고 말한다는 ..