전체 글 42

[Docker] Vercel 없이 Next.js를 배포한다고?

1️⃣ 들어가며안녕하세요! IT연합동아리 디프만 17기에서 ‘3초는 어떻게 기다려~ 이야이야이야이야’ 3팀 소속 이지현입니다! 이번 글은 제가 디프만에서 프론트엔드 개발자로 참여하며 겪었던, 그리고 지금 돌이켜보면 정말 놓치고 싶지 않은 경험이었던 CI/CD 구축 삽질 기록을 공유하려고 합니다. 우선 저희 팀은 무조건 맛집? 아니, 우리에게 잘 맞는 집! _ 모무찌 를 개발했어요! 프로젝트를 진행하면서 Next.js 기반의 Web 서비스를 만들고 있었고, 보통의 프론트엔드라면 자연스럽게 떠올릴 배포 방법이 있죠."일단 Vercel에 올리면 되지 않나요?""Next.js 공식 호스팅 플랫폼인데, 거기 쓰면 끝 아닌가요?" 저도 원래라면 그렇게 했을 거에요.. 그런데 이번 프로젝트는 조금 달랐습니다. 2️⃣..

WASM(Web Assembly)란?

🧩 1. WASM(WebAssembly)이란?WebAssembly(WASM)은웹 브라우저에서 실행될 수 있는 이진(바이너리) 형식의 저수준 코드입니다.JavaScript보다 훨씬 빠른 성능으로 C/C++, Rust, Go 등의 언어로 작성된 로직을 브라우저에서 직접 실행할 수 있게 해줍니다.🧱 2. WASM 파일이란?.wasm 파일은 일반 텍스트가 아닌 바이너리 형식의 모듈 파일이에요.보통 C/C++ 또는 Rust 등의 언어로 작성한 코드를 WebAssembly로 컴파일하면 .wasm 파일이 생성됩니다.예를 들어 Rust로 작성한 다음 코드를 보죠:// math.rs#[no_mangle]pub fn add(a: i32, b: i32) -> i32 { a + b} 이 코드를 WebAssembly로..

📚 Study 2025.10.23

[Git] Git 병합 후 UI가 돌아오지 않는 문제 — wasm 파일로 인한 병합 꼬임 해결기

협업 프로젝트 중, 병합 후에도 UI가 revert되지 않던 문제를 해결한 과정을 기록합니다.🧩 배경현재 진행 중인 프로젝트는 CAD 관련 Web 시스템으로,다수의 브랜치(develop, VMS-17-develop, VMS-18-core-cadian-web-signed-26-7-6)가 동시에 운영되고 있습니다.팀원들이 각 브랜치에서 기능을 개발하고,테스트 완료 후 develop으로 병합하는 구조로 진행 중입니다.⚙️ 문제 상황하루 전, 특정 브랜치(VMS-17-develop)의 내용을 develop에 병합한 후UI가 예상과 다르게 표시되기 시작했습니다.리버트(git revert) 명령어로 머지 커밋을 되돌렸음에도UI는 여전히 변경된 상태로 남아 있었습니다.📁 문제의 원인 파일 public/Drawin..

📚 Study 2025.10.22

[Javascript] window vs document 이벤트 리스너 차이

React나 JS에서 window vs document를 이벤트 리스너에 쓸 때의 차이는 **“이벤트 버블링 단계와 대상의 범위”**에 따라 달라요.같이 정리해볼게요 👇🧱 1. 기본 개념 차이구분windowdocument의미브라우저 전체 창 (최상위 객체)DOM 트리 전체 (HTML 문서 그 자체)포함 범위document를 포함한 모든 객체 (콘솔, 브라우저 이벤트 등) 이하의 모든 DOM 요소이벤트 트리거 시점모든 이벤트가 버블링을 마친 후 (최상위 단계)DOM 트리 내에서 이벤트가 전파되는 중간 단계대표적인 용도resize, scroll, blur, focus, keydown 같은 “전역” 이벤트 감지특정 DOM 외부 클릭 감지(드롭다운 닫기 등)🪟 2. 실제 코드 예시로 비교✅ window.a..

📚 Study 2025.10.14

[Git] 원격(Remote) 관리와 레포 이관하기

1. 원격(Remote) 이란?Git에서 remote는 로컬 저장소와 연결된 원격 저장소(GitHub, GitLab, Bitbucket 등)의 별칭입니다.보통 첫 클론 시 자동으로 origin 이라는 원격이 생깁니다.원격은 여러 개를 동시에 둘 수 있으며, 별칭을 통해 구분합니다.# 확인 명령어git remote -v# 출력 예시Dev https://github.com/Dev/Homepage (fetch)Dev https://github.com/Dev/Homepage (push)origin git@github.com:journey1019/hompage.git (fetch)origin git@github.com:journey1019/hompage.git (push)여기서 Dev, orig..

📚 Study 2025.09.24

[Git] git push, ERROR: Repository not found.

현재 레포지토리는 이전에 내 개인 계정과 팀 계정에 속해있도록 했다.즉, 두 레포지토리로 연동되게끔 관리한 것이다.# 현재 프로젝트에 등록된 리모트 저장소를 확인 명령어git remote -v> team git@github.com-team:Team/react_web.git (fetch) # 팀 계정> team git@github.com-team:Team/react_web.git (push)> origin git@github.com:journey1019/Web.git (fetch) # 내 개인 계정> origin git@github.com:journey1019/Web.git (push) 따라서 git remote로 저장소를 확인해보니, team과 개인 계정 두 곳이 연동된 것을 확인할 수 있었다. 주 ..

📚 Study 2025.09.24

가치(Gachi) 크루 1기 합격 & 활동 회고

더보기2025/05/29 ~ 2025/07/18, 약 2달 동안 진행했던 가치(Gachi) 크루 1기 활동에 대한 회고입니다.https://gachi.oopy.io/ 올해 초 같이 구름톤을 했던 승훈핑이 추천해줘서 사이드 프로젝트 크루인 '가치(Gachi) 크루'를 알게됐다. 올해부터 1기로 활동을 시작하였고 공식 노션 소개페이지에서도 알 수 있듯이,기획자와 개발자, 디자이너가 모여 가치있는 시간을 창출하는 크루이다. 크루 활동에 지원한 이유는 최근 구름톤을 진행했을 때 경험이 너무 좋았고, 그로 인해 사이드 프로젝트 경험도 해보고 싶었다.아무래도 혼자할 때보다 자의적인 목표를 가진 사람들이 모여서, 사이드 프로젝트를 개발한다면 그 과정에서 많은 걸 배우고 나눌 수 있겠다고 생각했고,나도 남는 여유시간..

[React Native] expo start vs expo run:android

명령어 동작 방식 실행 대상 특징명령어동작 방식실행 대상특징npx expo startExpo Go 앱을 사용하는 개발 서버 시작📱 Expo Go (폰에 설치된 앱)빠르고 편리하지만 기능 제약이 있음npx expo run:android앱을 네이티브로 빌드하고 직접 설치/실행📱 직접 연결된 안드로이드 디바이스 또는 에뮬레이터실제 빌드된 앱 환경. 모든 네이티브 기능 테스트 가능 🔍 각각의 역할 설명1. ✅ npx expo start로컬에서 Metro 번들러 서버를 시작함QR코드를 스캔하면 Expo Go 앱에서 실행됨useProxy: true로 Google OAuth도 쉽게 작동함가볍고 빠르지만, 일부 네이티브 기능(예: 카카오 SDK, 네이티브 모듈)은 사용 불가👉 Expo Go 앱에서 동작하는 개발..

📚 Study 2025.07.17

13기 구름톤 in Jeju 참가 & 대상 후기

구름톤 지원 계기 및 지원서 작성 내용에 대해 적은 글은 여기에 정리해 두었다. 13기 구름톤 In Jeju 합격 후기 & 지원서 작성 꿀팁지난 2025.02.18. ~ 2025.02.21. 카카오와 구름이 주관하여 진행했던 구름톤 해커톤,3박4일간의 경험 회고.(회사 일이 바빠서 거의 두 달이 넘어서 기록하는..💦) 당시 회사에 입사한 지 2년, 곧 3년 차에journey1019.tistory.com 📆 일정총 4일에 걸쳐 일정이 진행되었다. 1️⃣ 해커톤 1일차 ✈️오전 🌤️1일차 일정은 아침 10시부터 시작이었기 때문에, 전날 미리 제주도로 갈지 아침에 출발할지 고민했었다.하지만 첫날은 주로 아이스브레이킹과 교육 중심의 비교적 가벼운 일정이라, 당일 아침 비행기를 타기로 결정!전날까지 업무..

[React Native] 시작(설치)하는 방법

환경 구축React Native에는 두 가지 주요 방식이 있다.Expo: 빠르고 간단하게 시작 가능, 설정이 거의 필요 없음 (단, 네이티브 코드 커스터마이징은 제한적)React Native CLI: 네이티브 코드(Android/iOS)를 직접 다룰 수 있음 (초기 세팅 복잡하지만 유연함.RN에 Expo? Native CLI? 처음엔 이게 뭔가 싶었다.Expo는 React로 따지면 create-react-app 같이 복잡한 세팅을 알아서 설정해준다고 생각하면 된다.React Native CLI는 각각 안드로이드와 iOS를 직접 다뤄서 각각 개발 하는 것을 말한다. → 추천: 처음엔 Expo로 시작해서 React Native 구조와 생태계에 익숙해지고, 필요 시 CLI로 넘어가는 게 좋음. Expo로 시..

📚 Study 2025.06.18