본문 바로가기

Frontend Dev

 (147)
[Main Project 2주차] 9.1 ~ 9.10 | 공통 컴포넌트 작업 & UI 구현 [Main Project 2주차] 9.1 ~ 9.10 공통 컴포넌트 작업 & UI 구현 💬 프로젝트가 끝난 후에 데일리로 정리했던 기록을 보며 프로젝트 전체 과정을 정리하여 4주차로 나누어 작성했습니다. 🔗 1주차 2주차: 현재글 🔗 3주차 🔗 4주차 🔗 데모데이 & 프로젝트 전체 회고 👩🏻‍💻 Github Repository https://github.com/sw2377/smoothie 🚀 SUMMARY 9.1 FRY 1. 프로젝트 초기 세팅 - 라이브러리 세팅 - CSS, Router 세팅 - 초기 Layout 작업 2. 개발 작업 시작 9.2 ~ 3 SAT, SUN ➡️ 주말 동안은 작업은 조금 한 후 공부 (Redux Toolkit, TypeScript) 9.4 MON 1. 페이지 UI 작업 진행..
[Main Project 1주차] 8.24 ~ 8.31 | 기획, 디자인 완료 & 본격적으로 개발 준비 [Main Project 1주차] 8.24 ~ 8.31 기획, 디자인 완료 & 본격적으로 개발 준비 💬 프로젝트가 끝난 후에 데일리로 정리했던 기록을 보며 프로젝트 전체 과정을 정리하여 4주차로 나누어 작성했습니다. 1주차: 현재글 🔗 2주차 🔗 3주차 🔗 4주차 🔗 데모데이 & 프로젝트 전체 회고 👩🏻‍💻 Github Repository https://github.com/sw2377/smoothie 🚀 SUMMARY 8.24 THU 1. 팀 빌딩 & 팀 규칙 정하기 2. 프로젝트 아이디어 Mix & 전체적인 기획 회의 3. 팀 명 “🫐 블루베리스무디”로 결정 8.25 FRY 1. 어제에 이어서 기획 회의 2. 사용자 요구사항 정의서 작성 8.28 MON 1. 유저플로우 작성 2. 🧙🏻 1차 멘토링 세션..
Section4 회고, 짧다면 짧고, 길다면 길었을 네 달간의 여정, 어땠나요? Section4 회고, 짧다면 짧고, 길다면 길었을 네 달간의 여정, 어땠나요? 📌 목표: 👩🏻‍💻 2023년 안에 프론트엔드 개발자로 커리어 시작하기 ✨ Keep _만족스러운 부분, 계속 이어가면 좋을 부분 • 매일 꾸준히 학습하고, 공부했던 내용을 정리하고 기록하는 습관 → 키워드만 기억하고 있다면 언제든 검색할 수 있는 편리함 🙂 → 무엇을 배웠는지, 배우지 않았는지 파악하는데 도움이 된다. • 하루를 돌아보는 아주 간략한 회고 작성 • 제시간에 출석 • 매일 스트레칭으로 몸 풀어주기 ✨ Problem _목표를 이루는데 장애물이 되었거나, 개선이 필요하다고 생각되는 부분 • 지난달에 이어 요즘 계속해서 새벽 2시까지 공부를 한다고 피로가 쌓이는 중인것 같다.. 🫠 • 아침에 일찍 일어나서 활기찬 하..
Proxy 설정해 HTTP 통신하기 ( webpack dev server의 proxy와 React Proxy 사용법 ) 💬 지난글들과 마찬가지로 이번에도 역시 CodeStates 부트캠프 중 실습했던 내용으로 Proxy 설정에 관한 부분이다. Proxy 서버, 언제 사용할 수 있을까? 브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터에 접근 할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다. 👩🏻‍💻 실제 서비스를 개발하며 서버의 API 를 요청해야 할 때, 기본적으로는 localhost:3000 에서 들어오는 것이 차단되기 때문에 서버 쪽에 해당 도메인을 허용하도록 구현을 해야한다. 하지만 CORS 설정을 하는 백엔드 개발자가 바쁘거나, 기능 구현이 당장은 안된다면? 서버에서 뿐만 아니라 클라이언트의 웹..
Section4 Unit7 [Deploy] CI/CD - Proxy 설정해 HTTP 통신하기 Section4 Unit7 [Deploy] CI/CD - Proxy 설정해 HTTP 통신하기 📌 Chapter4. Proxy • 프록시 서버는 클라이언트가 자신을 거쳐 다른 네트워크에 접속할 수 있도록 중간에서 대리해주는 서버를 말한다. 서버와 클라이언트 사이에서 대리로 통신을 수행해주는 것을 proxy라고 하고, 그 기능을 하는 서버를 proxy 서버라고 한다. • 브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터에 접근 할 수 있다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다. ⭐️ 과제. Proxy 설정해 HTTP 통신하기 ✔️ Bare Minimum Requirement 과제1 📁api ..
Section4 Unit7 [Deploy] CI/CD - Github Actions 실습 Section4 Unit7 [Deploy] CI/CD - Github Actions 실습 📌 Chapter1. 개발 프로세스 • 개발 프로세스, 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어졌다. • 전통적인 개발 프로세스로 워터풀 방식이 있고, 모던 개발 프로세스로 애자일이 있다. 📌 Chapter2. CI/CD • 지속적 통합(Continuous Integration, CI) 개발자를 위한 자동화 프로세스 (Code - Build - Test 단계) CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 ..
Github Actions, AWS S3를 사용한 CI/CD 💬 Code States 부트캠프의 막바지에 CI/CD를 위한 Github Action 실습이 있었다. 이전 챕터에서 AWS S3 버킷을 통해 클라이언트 코드를 배포했었고, 이미 배포 준비가 완료된 S3에 Github Action을 통해 파일을 전달하는 것이 이번 실습의 목표였다. 처음이라 너무 헷갈렸는데, 하다보니 흥미가 생겨서 과정을 정리해볼까 한다. 📌 GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 🚀 Github Actions를 통한 클라이언트 배포 Flow 1. Source Github 브랜치에 코드가 push (push 뿐만 아니라 다른 이벤트도 가능) 되면 2. Build Github Acitons의..
Section4 Unit6 [Deploy] Amazon Web Service Section4 Unit6 [Deploy] Amazon Web Service 📌 Chapter1. AWS Regulations • AWS 실습 관련 규정 및 가이드라인 안내 🙂 📌 Chapter2. Amazon Web Service • 아마존 웹 서비스(AWS)란 아마존이 자사의 노하우를 살려 제공하고 있는 ‘클라우드 컴퓨팅 서비스’를 의미한다. AWS에는 컴퓨팅, 스토리지, 데이터베이스, 분석, 네트워킹, 모바일, 개발자 도구, 관리 도구, IoT, 보안, 엔터프라이즈 애플리케이션 등 다양한 서비스가 준비되어 있으며, AWS의 다양한 서비스를 조합하여 모든 애플리케이션과 인프라를 구축할 수 있다. 일전에는 여러 사업자에게 각각 빌려야 했던 인프라를 일괄로 빌릴 수 있게 됐으며, 필요에 따라 운영체제(O..
반응형

티스토리툴바