🎸개발 기본기 다지기

2년차 프론트엔드 개발자가 그동안 모르고 지나쳤던 것들을 다시 공부하는 기록 📝오늘은 빌드·배포 프로세스 전체 흐름과 .env 파일의 위치에 대해 배웠다.프론트엔드 코드를 짜는 건 셰프가 "요리 레시피"를 쓰는 것과 비슷하다.근데 손님이 레시피를 먹을 수는 없으니까,

프론트엔드 기초 다시 쌓기 챌린지 2일차.어제는 "개발→빌드→배포 3단계" 라는 큰 그림을 잡았다면,오늘은 그 중 "빌드" 단계를 현미경으로 들여다보는 시간이었다.어제는 프론트엔드 코드 짜는 걸 "셰프가 레시피 쓰는 것"에 비유했다.오늘은 그 비유를 이어가본다.집에서

프론트엔드 기초 다시 쌓기 챌린지 3일차. > 오늘은 Chrome DevTools의 Network 탭을 파헤치면서 시작했는데, > 캐시 → 스토리지 비교 → CSS 배포 이슈 → CDN → S3 → 이미지 관리 전략까지 > 꼬리에 꼬리를 물며 엄청나게 많은 걸 배웠다.

프론트엔드 기초 다시 쌓기 챌린지를 하다가 궁금증이 생겼다."그럼 프론트엔드 코드에 있는 .env는 개인 로컬 테스트용이고, 배포할 때는 회사 서버에 따로 .env를 설정해야 하는 건가?"답은 "정확히 맞다" 였다. 이걸 제대로 정리해봤다..env 파일은 환경마다 따로

프론트엔드 기초 다시 쌓기 챌린지 4일차.Day 2에서 "빌드하면 파일이 합쳐진다"는 걸 배웠다면,오늘은 "왜 합쳐야 하는지", "누가 합쳐주는지", "안 쓰는 코드는 어떻게 되는지" 를 깊이 파헤쳤다.그리고 "네트워크가 뭐야?", "번들 사이즈가 크면 뭐가 느려지는

프론트엔드 기초 다시 쌓기 챌린지 5일차. Week 1 마지막 수업!지금까지 빌드·배포의 "무엇을" 과 "어떻게" 를 배웠다면,오늘은 "왜 개발 환경과 운영 환경이 다르게 동작하는가?" 를 파헤쳤다.yarn dev와 yarn start는 단순히 포트만 다른 게 아니었다

프론트엔드 기초 다시 쌓기 챌린지, Week 1이 끝났다.5일 동안 "내 코드가 어떻게 사용자 화면까지 도달하는가?" 라는 하나의 질문을 파헤쳤다.이 글은 Day 1~5에서 배운 모든 것을 하나의 흐름으로 정리한 Week 1 회고 포스팅이다."내가 VSCode에서 쓴

프론트엔드 기초 다시 쌓기 챌린지.Week 1 총정리를 하고 나서, 스스로 정리한 개념이 정확한지 확인하고 싶었다."대충 안다"와 "정확히 안다"는 다르니까.내가 이해한 걸 말로 풀어보고, 틀린 부분을 보완했다."로컬 개발서버는 내 컴퓨터, 개발서버와 실서버는 회사 서

📚 2년차 프론트엔드 개발자의 12주 기초 챌린지Week 2: 배포 환경 이해하기 (Day 6-10)Week 1에서 레시피를 만들고(개발), 재료를 손질해서 세팅하고(빌드), 손님에게 서빙하는(배포) 과정을 배웠다.그런데 그 요리를 어디서 만드나? 당연히 주방(Kit

📚 2년차 프론트엔드 개발자의 12주 기초 챌린지Week 2: 배포 환경 이해하기 (Day 6-10)어제 서버가 "멀리 있는, 24시간 켜져 있는 컴퓨터"라는 걸 배웠다.그런데 그 컴퓨터가 회사 서버실에 있거나 AWS 데이터센터에 있으면, 어떻게 조작하나?주방(서버)

📚 중간 테스트 후 약한 부분만 모아서 복습하기yarn dev는 로컬 서버, yarn start는 실서버yarn dev는 개발 모드, yarn start는 프로덕션 모드둘 다 로컬에서도 실행할 수 있고, 서버에서도 실행할 수 있다.차이는 "어디서 실행하느냐"가 아니라

📚 2년차 프론트엔드 개발자의 12주 기초 챌린지Week 2: 배포 환경 이해하기 (Day 6-10)Day 7에서 SSH로 서버에 접속해서 yarn start를 실행하면 사이트가 켜진다는 걸 배웠다.그런데 전화(SSH)를 끊으면 셰프가 불을 끄고 퇴근해버린다.레스토랑

📚 2년차 프론트엔드 개발자의 12주 기초 챌린지Week 2: 배포 환경 이해하기 (Day 6-10)지금까지 등장한 인물:셰프(프로세스) — 실제로 요리하는 사람 (yarn start)주방 매니저(pm2) — 셰프를 관리, 쓰러지면 대타 투입그런데 손님 응대는 누가

📚 2년차 프론트엔드 개발자의 12주 기초 챌린지Week 2: 배포 환경 이해하기 (Day 6-10) — 마지막!레스토랑에서 손님이 "음식이 안 나와요!" 클레임을 걸었다.그러면 어떻게 원인을 찾나? CCTV를 돌려본다!홀 CCTV → 손님 주문이 제대로 전달됐나?

📚 Week 1 후반 ~ Week 2 전체 복습용한눈에 보는 핵심 정리dev = 개발 모드, start = 프로덕션 모드 (둘 다 어디서든 실행 가능!)⚠️ "dev는 로컬, start는 서버"가 아니다!dev는 개발 모드, start는 프로덕션 모드가 정확한 표현.

프론트엔드 기초 다시 쌓기 챌린지 11일차.Week 3 "실전 배포 흐름"의 첫 번째 수업.지금까지 빌드·배포·서버·pm2·Nginx·로그까지 배웠다면,오늘은 "이걸 왜 매번 수동으로 하고 있었지?" 라는 질문에서 시작한다.지금까지의 배포 과정을 떠올려보면 이렇다.하루

프론트엔드 기초 다시 쌓기 챌린지 13일차.Week 3 "실전 배포 흐름"의 세 번째 수업.Day 11에서 CI/CD를, Day 12에서 Docker를 각각 배웠다면,오늘은 이 둘을 합쳐서 완성된 배포 파이프라인을 만드는 시간이었다.지금까지 배운 걸 레스토랑으로 쭉 이

프론트엔드 기초 다시 쌓기 챌린지 14일차.Week 3 "실전 배포 흐름"의 네 번째 수업.Day 11~13에서 CI/CD + Docker로 완성된 배포 파이프라인을 만들었다면,오늘은 "문제가 생겼을 때 어떻게 대응하는가"를 배웠다.이때 해야 할 일:핵심 원칙: "고치

프론트엔드 기초 다시 쌓기 챌린지 15일차.Part 1: 빌드·배포 프로세스 (Day 1~15) 완료!오늘은 15일간 배운 모든 걸 하나의 큰 그림으로 연결하는 시간이었다.Day 1에서 던졌던 질문: "내 코드가 어떻게 사용자 화면까지 가는가?"15일 전에는 막막했지만

프론트엔드 기초 다시 쌓기 챌린지 15일차.Part 1: 빌드·배포 프로세스 (Day 1~15) 완료!오늘은 15일간 배운 모든 걸 하나의 큰 그림으로 연결하는 시간이었다.Day 1에서 던졌던 질문: "내 코드가 어떻게 사용자 화면까지 가는가?"15일 전에는 막막했지만

프론트엔드 기초 다시 쌓기 챌린지 16일차.Part 2: 환경변수·시크릿·보안 시작!Part 1에서 코드가 사용자 화면까지 가는 전체 흐름을 배웠다면,Part 2에서는 그 흐름 속에 숨겨진 비밀 정보 관리를 다룬다.오늘의 핵심 질문:"내가 .env에 적은 값이 혹시 사

프론트엔드 기초 다시 쌓기 챌린지 17일차.Part 2 "환경변수·시크릿·보안"의 두 번째 수업.어제 NEXTPUBLIC의 비밀을 배웠다면,오늘은 환경변수를 환경별로 관리하는 법과 유출 사고 대처법을 배웠다.레스토랑이 확장됐다.같은 레시피(코드)인데 지점마다 납품처(환

프론트엔드 기초 다시 쌓기 챌린지 18일차.Part 2 "환경변수·시크릿·보안"의 세 번째 수업.Day 16에서 NEXTPUBLIC 규칙을, Day 17에서 .env 관리법을 배웠다면,오늘은 API 키를 체계적으로 관리하는 실전 패턴을 배웠다.납품업체에서 카드를 두 장

프론트엔드 기초 다시 쌓기 챌린지 19일차.Part 2 "환경변수·시크릿·보안"의 네 번째 수업.Day 16~18에서 환경변수와 API 키 관리를 배웠다면,오늘은 "해커가 우리 사이트를 어떻게 공격하는가? 그리고 어떻게 막는가?"를 배웠다.해커가 우리 사이트에 악성 스

프론트엔드 기초 다시 쌓기 챌린지 20일차.Part 2: 환경변수·시크릿·보안 (Day 16~20) 완료!오늘은 5일간 배운 환경변수·시크릿·보안을 하나의 흐름으로 연결하는 시간이었다.Part 1의 배포 파이프라인에 Part 2의 보안 지식을 합치면:Q1. 새 프로젝트

프론트엔드 기초 다시 쌓기 챌린지 21일차.Part 3: 네트워크 기초 시작!Part 1에서 "코드가 사용자 화면까지 가는 과정"을,Part 2에서 "비밀 정보 관리"를 배웠다면,Part 3에서는 그 사이에서 일어나는 대화 — 네트워크를 배운다.오늘의 핵심 질문:"브라

프론트엔드 기초 다시 쌓기 챌린지 22일차.Part 3 "네트워크 기초"의 두 번째 수업.어제 HTTP 요청/응답 구조를 배웠다면,오늘은 요청 라인에 들어가는 메서드가 각각 뭘 하는지,그리고 이걸 체계적으로 쓰는 REST API 규칙을 배웠다.HTTP 메서드가 바로 이

프론트엔드 기초 다시 쌓기 챌린지 23일차.Part 3 "네트워크 기초"의 세 번째 수업.어제 HTTP 메서드(GET, POST, PUT, DELETE)와 REST API를 배웠다면,오늘은 서버가 "결과가 어떻게 됐는지"를 숫자로 알려주는 방법 — 상태 코드를 배웠다.