Docker for Frontend
·
개발
도커란 무엇인가도커란?리눅스의 응용프로그램들을 소프트웨어 컨테이너 안에 배치시키는 일을 자동화하는 오픈소스 프로젝트 무슨 말일까소프트웨어 컨테이너란?다양한 프로그램, 실행 환경 등을 추상화하거나 배포 및 관리를 단순하게 해주는 것 무슨 말일까가상화와 리눅스 컨테이너컨테이너를 이해하기 위해서는 가상화 개념이 필수가상화란?컴퓨터 리소스의 추상화앱, 서버, 저장장치 등 물리적으로 하나인 것을 복수의 것처럼 또는 복수의 것을 하나인 것처럼 만들어주는 기술VM이란?VM은 호스트 운영체제에서 구동되며 하드웨어에 가상으로 액세스하는 Guest 운영체제를 가지는 격리된 것 === 하나의 컴퓨터(물리적인 컴퓨터 자원을 가상화시켜 별도의 컴퓨터를 만든 뒤 거기에 필요한 운영체제를 올렸다고 생각)컨테이너란?vm과 마찬가지로..
제네릭(<T>)인가? extends인가?
·
TypeScript
제네릭(Generic)은 언제 쓰는 것이 좋을까?제네릭이란 무엇인가?제네릭은 타입을 변수처럼 다루는 기능을 의미한다.우리가 이미 익숙하게 사용하는 Array, Array가 그 대표적인 예이다. 배열이라는 구조는 동일하지만, 그 내부에 무엇이 담기느냐에 따라 타입이 결정되는 방식이다. 즉, 제네릭은 구조는 고정하되 일부 타입만 외부에서 주입받을 수 있도록 설계된 기능이라 할 수 있다.// Array는 내부적으로 다음과 같은 구조를 가진다interface Array { push(item: T): void; pop(): T | undefined;}const numbers: Array =;const strings: Array = ["a", "b", "c"];실제로 마주한 상황Toss API를 연동하며 응답 ..
프론트엔드 면접 회고(2)
·
카테고리 없음
1차에서 답변을 정말 못했다고 생각이 드는 면접이었지만, 운이 좋게도 최종 면접까지 오게 되었다. 최종 면접은 기술 면접 보다는 개발자로서의 내 마음가짐과 어떤 경험들을 해왔는지 돌아볼 수 있는 면접이었다.🗂️ 질문 리스트1차 면접이 끝나고 뭘 하고 지내셨나요?가벼운 아이스브레이킹 질문인가? 뭔가 더 열심히 살았어야했나? 하는 생각이 들었지만, 일단 있는 그대로 답변했다.1차 면접에서 생각보다 답변을 못했는데, 그만큼 배운 점이 많았어서 이를 극대화하기 위해 면접 복기 및 회고를 진행했습니다. 기존에 듣던 AI 관련 교육이 있어서 면접 이후에도 똑같이 교육을 들었습니다.회고를 하셨나요? 어떤 내용으로 했는지 말씀해주실 수 있나요?기술 질문들에 대해서 제대로 답변한 것이 없다고 생각했습니다. 질문도 듣고..
프론트엔드 면접 회고(1)
·
회고
떨어지더라도 면접을 보는 것 자체가 도움이 많이 된다는 것을 느꼈다. 이를 극대화하기 위해서 매 면접마다 질문 복기 및 학습, 회고를 진행해보려고 한다. 기업명은 밝히지 않는 것이 좋을 것 같다. 질문에 대해 답변을 할 수 있을 정도로만 정리를 해놓고 필요한 카테고리는 깊게 학습해서 글로 남겨보겠다.📂 질문 리스트Hash table이란 무엇인가요?Hash table은 (Key, Value)로 데이터를 저장하는 자료구조 중 하나로 빠르게 데이터를 검색할 수 있는 자료구조입니다. Hash table은 각각의 Key값에 해시함수를 적용해 해시값을 table(배열)의 고유한 index를 생성하고, 이 index를 활용해 값을 저장하거나 검색하게 됩니다. key는 해시가 가능한 값들로 이루어집니다.=> 해시 함..
GitHub Actions + Vercel로 CI/CD 파이프라인을 구축한 2번째 이야기
·
개발
CI가 성공했을 경우에만 CD를 진행하도록 리팩토링아래 기존 코드만으로는 CI가 실패해도 Vercel의 main 코드 푸시 감지를 통해 CD가 진행name: CI/CD# 언제 이 워크플로우를 실행할지 정의on: push: branches: [main] # main 브랜치에 코드를 push했을 때 pull_request: branches: [main] # main 브랜치로 PR을 열었을 때jobs: # ───────────────────────────────────────── # Job 1: CI (코드 품질 검증) # ───────────────────────────────────────── ci: name: Lint · Test · Build runs-on: ubuntu..
GitHub Actions + Vercel로 CI/CD 파이프라인을 구축한 이야기
·
개발
CI/CD란?CI/CD는 Continuous Integration(지속적 통합) 과 Continuous Deployment(지속적 배포)한 마디로 정리하면,"코드를 push하면 → 자동으로 검증하고 → 자동으로 배포까지 해주는 파이프라인" CI (지속적 통합): 코드를 push할 때마다 자동으로 Lint 검사, 테스트, 빌드를 실행해 품질 보장CD (지속적 배포): CI를 통과한 코드를 자동으로 운영 서버에 배포왜 CI/CD가 필요한가?CI/CD를 도입하기 전과 후를 비교해보면 그 필요성이 명확해진다. 도입 전 문제점테스트를 까먹고 배포하면 버그가 그대로 사용자에게 전달빌드와 배포를 수동으로 매번 반복사람이 직접 처리하다 보니 실수가 발생 가능도입 후 장점git push 한 번이면 검증부터 배포까지 모두..
하고 싶은 거 다 하는 내 포트폴리오 개인 프로젝트 이야기
·
개발
WEB-OS 시뮬레이터를 만들어봤는데, 해당 디자인에 매력을 느끼고 포트폴리오를 os 형식으로 만들어보았다. 내가 해보고 싶었던 부분들 다 여기다 적용하면서 공부해볼 예정이다. https://cjyportfolio.vercel.app/
Vite Vendor Chunk 분리로 초기 로드 시간을 단축시킨 이야기
·
개발
🚨내가 느낀 문제 🚨 서비스 첫 진입 시(캐시 없음) 초기 로딩이 너무 느림네트워크 탭을 확인하니까 너무 많은 파일들이 다 로드된 뒤에 Home이 마운트 되기 때문에 렌더링 속도가 느린 것을 확인그렇다면 어떻게 해결을 할까1. 왜 필요하지?"우리 모두 다빈치" 프로젝트는 실시간 드로잉 게임으로, 다음과 같은 구조Home 페이지 (/) → 방 생성/참여Game 페이지 (/game/:roomId) → 6개 Phase (WAITING, DRAWING, PROMPT, ...)기존 상황:모든 코드가 단일 번들(1,041KB)로 합쳐짐Vite 빌드 tool은 빌드 결과물을 index와 vendor 2가지로 나눠서 생성vendor에 모든 비즈니스 로직, 라이브러리가 담겨있음🚨 문제Home 페이지만 보려 해도 G..