본문 바로가기

Frontend Dev/🐥 코드스테이츠 FE 부트캠프

(78)

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를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 ..

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..

Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작 Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작 📌 Chapter1. TypeScript • TypeScript는 JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다. VSCode에서 TypeScript 환경 설정하기 👾 VSCode에서 TypeScript 환경 설정하는 방법 본격적으로 TypeScript 학습을 하기 위해 VSCode에서 환경 설정을 했다. 과정이 마냥 단순한건 아닌것 같아서 정리를 해두기로 했다. 혹시나 다음에 다시 보 fay-story.com 타입스크립트 학습을 위한 VSCode 환경설정 하는 방법을 따로 기록해두었다 :) ..

Section4 Unit4 [UX/UI] Design System - 디자인 시스템 구축하기 Section4 Unit4 [UX/UI] Design System - 디자인 시스템 구축하기 📌 Chapter3. 디자인 시스템 구축하기 • 디자인 시스템을 도입하기 좋은 시기 : 제품군 및 기능이 확장될 때, 관련된 인원이 늘어날 때, 채널이 확장될 때 ⭐️ 과제. 디자인 시스템 구축하기 지난 과제였던 Component Library는 겨우 어떻게 해서 제출을 했는데, 이번 과제인 디자인 시스템 구축하기는 할 엄두가 안나서 포기했다. 어떤 부분이 할 엄두가 나지 않았냐하면, 스토리북을 사용하는데서 막혔다. 라이브 세션 강의를 보고 스토리북을 세팅하고, 컴포넌트 하나를 만들기는 했는데 글쎄... 지난 Section3 에서도 스토리북을 제대로 보지 않아서 이번 Section에서 다시 해보려니 빈 스케치북에..

Section4 Unit4 [UX/UI] Design System Section4 Unit4 [UX/UI] Design System 📌 Chapter1. Design System • 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미한다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다. • 디자인 시스템을 사용하면, 1. 디자이너와 개발자는 문서 혹은 툴킷 형태를 기반으로 디자인 시스템을 공유해 이를 참고하며 서로의 작업에 대한 이해를 높일 수 있고, 따라서 프로젝트의 진행 속도가 빨라지며, 팀원 간의 소통과 협업이 원활해지는 등 팀 간의 원활한 협업을 촉진할 수 있다. 2. 디자인 시스템에 따라 제품이 만들어지면, 사용자들은 시간이 지남에 따라 서비스의 일관된 디자..

Section4 Unit3 [React] 심화 - React Hooks 적용하기 Section4 Unit3 [React] 심화 - React Hooks 적용하기 ⭐️ 과제. React Hooks 적용하기 ✅ Bare Minimum Requirement ✔️ json-server 설치 ✔️ 상세 컴포넌트 구현하기 - App.js react.lazy()와 suspense 사용 - BlogDetail.js createBlog.js CRUD 구현 - useFetch.js custom hook 만들기 ✅ Advanced ✔️ 블로그 글 클릭해서 들어갔을 때 스크롤 맨 위로 적용되는 기능 구현하기 ✔️ custom hook과 custom component 만들기 나름 재미있었던 이번 과제. 내가 한 방법이 맞는건지, 더 좋은 방법이 있는지 잘 모르겠는데 (특히 custom hook을 만드는 부..

Section4 Unit3 [React] 심화 - 코드분할과 React.lazy() & Suspense Section4 Unit3 [React] 심화 - Code Spliting, React.lazy() & Suspense 📌 Chapter3. React의 주목해야 할 기능 주목해야 할 기능인가? 오늘 QnA 세션에서 외부 강사님이 Suspense는 잘 사용하지 않는다고 하시긴 했다만...😐 여튼, 무거워진 리액트 앱의 성능을 최적화하는 것은 중요한 일임은 틀림없다. 이 부분은 좀 더 공부를 해봐야 할 것 같지만, 우선 배운 내용들만 간단히 정리해보자면 아래와 같다. • React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다. React.lazy 함수를 사용해 컴포넌트를 동적으로 import를 할 수 있고, 이를 사용하면 초기 렌더링 ..

이전 1 2 3 4 5 ··· 10 다음

티스토리툴바