전체 글49 Vue.js 입문 (프로젝트 구조, 라우터, 네비게이션 가드) Vue.js를 처음 접했을 때 솔직히 "이걸 왜 배워야 하지?"라는 생각이 먼저 들었습니다. HTML 파일 하나로 다 짜면 되는 거 아닌가 싶었는데, 직접 써봤더니 그 생각이 완전히 바뀌었습니다. 파일을 컴포넌트 단위로 쪼개서 조립하는 방식이 이렇게 편할 줄은 예상 밖이었습니다. 이 글은 Vue.js 프로젝트를 처음 만들면서 겪은 것들을 구조, 라우터, 그리고 네비게이션 가드 순으로 정리한 경험담입니다.Vue.js 프로젝트 구조를 처음 열었을 때npm create vue@latest 명령어 하나로 프로젝트를 생성하면, 폴더와 파일이 한꺼번에 쏟아집니다. 처음에는 뭘 건드려야 할지 몰라서 한참 멍하니 쳐다봤습니다. 제가 직접 써봤을 때 가장 먼저 느낀 건 "건드릴 파일이 생각보다 적다"는 점이었습니다.실질.. 2026. 6. 23. Vue 상태관리 (Pinia, EncryptStorage, 라우터) 컴포넌트가 많아지면 데이터를 그냥 props로 전달하면 된다고 생각했습니다. 직접 부딪혀보기 전까지는요. 부모에서 자식으로, 자식에서 또 자식으로 계속 타고 내려가다 보니 어느 순간 어디서 데이터가 바뀐 건지 추적조차 힘들어졌습니다. 그때 처음으로 상태관리 라이브러리가 왜 필요한지 몸으로 느꼈습니다.컴포넌트 구조가 복잡해질수록 props 전달이 한계에 부딪힌다프로젝트 초반에는 데이터를 부모 컴포넌트에서 자식 컴포넌트로 props로 넘기는 방식이 직관적으로 느껴졌습니다. 그런데 컴포넌트 depth가 3단계, 4단계로 깊어지기 시작하면 이야기가 달라집니다. 중간에 끼어 있는 컴포넌트는 그 데이터가 필요하지도 않은데 단순히 아래로 전달하기 위해 받아야 합니다. 이걸 props drilling이라고 부르는데, .. 2026. 6. 22. AWS 배포 (EC2, S3·CloudFront, ACM) 서버를 직접 사서 기계실에 놓아야만 서비스를 운영할 수 있다고 생각하는 분들도 여전히 계십니다. 그런데 저는 이번에 AWS 하나로 프론트엔드 배포부터 HTTPS 인증서 발급까지 전부 처리해봤고, 솔직히 이건 예상 밖이었습니다. 설정 단계마다 헷갈리는 부분이 꽤 있었고, 잘못 건드리면 요금이 청구된다는 긴장감도 있었지만, 그 과정에서 클라우드 인프라 구조가 어떻게 맞물려 돌아가는지 꽤 명확하게 이해할 수 있었습니다.EC2와 S3, 각 서비스가 하는 일AWS는 퍼블릭 클라우드(Public Cloud) 플랫폼입니다. 여기서 퍼블릭 클라우드란 아마존이 전 세계에 구축해 놓은 물리 서버 인프라를 인터넷을 통해 누구나 빌려 쓸 수 있는 구조를 의미합니다. 직접 서버를 구매하지 않아도 필요한 만큼 컴퓨팅 자원을 사용.. 2026. 6. 21. 톰캣 서블릿 (OSI 7계층, HTTP 서블릿, 로그인 구현) 솔직히 처음 톰캣을 접했을 때, "이걸 왜 쓰는 거지?"라는 생각부터 들었습니다. 소켓 통신으로 서버를 직접 만들 수 있다는 걸 배웠는데, 또 다른 도구를 쓴다고 하니 순간 머릿속이 복잡해졌습니다. 그런데 막상 직접 손을 대보니, 톰캣이 왜 존재하는지 자연스럽게 납득이 됐습니다. 소켓 통신부터 HTTP 파싱, 파일 입출력까지 직접 짜야 한다면 서비스 기능을 만들 시간이 없다는 걸 바로 체감했기 때문입니다.소켓 통신과 OSI 7계층, 톰캣이 필요한 이유웹 서버를 이해하려면 OSI 7계층 모델을 먼저 짚어야 합니다. OSI 7계층이란 네트워크 통신 과정을 역할별로 7단계로 나눈 국제 표준 모델로, 물리 계층부터 응용 계층까지 단계적으로 데이터를 처리합니다. 우리가 흔히 쓰는 HTTP, FTP, SSH 같은 .. 2026. 6. 20. Java 객체지향 (상속, 오버라이딩, 오버로딩) 저도 처음엔 상속, 오버라이딩, 오버로딩이 그냥 비슷한 개념인 줄 알았습니다. 이름도 헷갈리고, 뭐가 다른지 제대로 구분이 안 됐습니다. 직접 챔피언 예제를 짜보면서 세 개념이 완전히 다른 목적으로 쓰인다는 걸 몸으로 익혔고, 그 과정에서 일반적으로 알려진 것과 실제 사용 방식이 꽤 다르다는 것도 알게 됐습니다.상속과 오버라이딩: 코드 재사용이라는 말의 실제 의미상속(Inheritance)은 기존 클래스의 변수와 메서드를 그대로 물려받아 새 클래스를 만드는 기능입니다. 여기서 상속이란 단순히 코드를 복사하는 게 아니라, 부모 클래스가 가진 구조 전체를 자식 클래스가 이어받아 활용하는 방식을 의미합니다. 일반적으로 "코드 재사용을 위해 상속을 쓴다"고 알려져 있는데, 저는 처음에 그 말이 그냥 복붙 아닌가.. 2026. 6. 19. 자바 객체지향 (추상 클래스, 인터페이스, 다형성) 자바에서 추상 클래스, 인터페이스, 다형성은 객체지향 프로그래밍의 핵심 개념 세 가지입니다. 처음 배울 때는 셋 다 비슷해 보여서 "그냥 다 추상 클래스 쓰면 안 되나?" 싶었는데, 직접 코드를 짜보고 나서야 각각의 역할이 왜 나뉘어 있는지 체감이 됐습니다.추상 클래스, 언제 쓰고 언제 안 쓰나추상 클래스(Abstract Class)는 구현되지 않은 메소드가 하나 이상 포함된 클래스를 말합니다. 여기서 추상 메소드(Abstract Method)란, 메소드 이름과 반환 타입만 선언해두고 실제 동작 코드는 비워둔 것입니다. "이런 기능이 있어야 한다"고 명세만 남겨두고, 실제 구현은 상속받는 자식 클래스에게 맡기는 구조입니다.제가 처음 이 개념을 접했을 때는 "그냥 일반 클래스에 메소드 만들면 되지, 왜 굳.. 2026. 6. 18. 이전 1 2 3 4 ··· 9 다음
