👩‍💻 가연의 개발자취 📚

Intro ffmpeg 라이브러리를 사용해서 비디오를 내보내는 기능을 구현했다. 공식 문서가 조금 빈약하다고 느껴져서 ffmpeg 라이브러리를 이해하기는 데에 조금 어려웠다 ㅠ 프로젝트 진행사항 FFmpeg Overview | ffmpeg.wasm For 0.11.x, visit https://ffmpegwasm-0-11-x.netlify.app ffmpegwasm.netlify.app 위의 공식 사이트와 더불어 리액트에서 FFmpeg를 사용한 예제 코드를 참고해서 구현했다. https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/apps/react-vite-app/src/App.tsx 버전이 올라가면서 바뀐 부분이 많아 프로젝트 전 강의에서는 다운그레이드하여 FFm..

Intro 오늘은 프로젝트에 필요한 비디오 플레이어 라이브러리인 video-react에 대해 알아보고 적용하였다. 일요일에는 열심히 놀아야해서 토요일에 프로젝트에 신경을 많이 썼다. ㅎㅎ 프로젝트 진행사항 video-react https://video-react.js.org/ { const videoFile = useContext(VideoFileContext); const [player, setPlayer] = useState(); const [playerState, setPlayerState] = useState(); const [source, setSource] = useState(); useEffect(() => { setSource(URL.createObjectURL(videoFile)); },..

Intro 이번엔 공통 컴포넌트를 구현하고 전반적인 스타일링을 주로 진행했다. 8일엔 프로젝트 중간 점검이 있어서 중간 보고서도 작성을 했고 지금까지 짠 코드들을 멘토님께 코드리뷰도 받았다. 프로젝트 진행 사항 공통 컴포넌트 세팅 본 프로젝트에선 페이지가 한 페이지이긴 하지만 추후 확장될 수 있기 때문에.. 공통 컴포넌트인 Header, Footer, CustomButton을 구현했다. App.css /* HEADER */ .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ececec; margin-bottom: 24px; width: 100%; background-co..

Intro 3월 6일부터 12일까지 비디오 에디터 제작 프로젝트가 시작되었다. 비디오 에디터 제작 강의를 듣고 시작한 거라 부담은 크게 없었다. 프로젝트 진행 과정 프로젝트 기초 공사 폰트 세팅 레이아웃 세팅 이미지 에셋 세팅 공통 컴포넌트 세팅 상태 관리 세팅하기 프로젝트 State Context 세팅하기 프로젝트 Dispatch Context 세팅하기 프로젝트는 React 강의에서 알려주신 방법대로 진행했다. Prettier 적용하기 깔끔한 코드를 위해서 Prettier 적용도 잊지 않고 해주었다. .prettierc { "semi": true, "singleQuote": true, "arrowParens": "avoid", "tabWidth": 2, "useTabs": false, "trailing..

Intro 오늘은 지금까지 개발한 화면을 Vercel을 이용하여 배포하는 방법에 대해 학습했다. 오늘 학습한 내용 https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com ☑️ Vercel이란?? 웹 애플리케이션을 배포 및 호스팅하기 위한 클라우드 플랫폼 Vercel을 사용하여 개발자는 손쉽게 웹 애플리..

Intro 오늘은 프론트엔드에서 중시하고 있는 반응형 웹에 대해 학습했다. 오늘 학습한 내용 반응형 웹 소개 반응형 웹은 하나의 웹 사이트로 PC, 모바일, 테블릿 등 기기 종류에 따라 최적의 사용자 경험을 제공하는 웹 디자인 접근 방식이다. 공간의 한계 극복하기 스크롤 확장 (수직, 수평 스크롤) 많은 양의 정보를 보여주기 위한 방안들 (아코디언 등) 위와 같이, 디바이스에 대응하기 위한 여러 방안들이 제시되고 있다. 반응형 웹 종류 Mostly Fluid Layout Pattern (유동형 패턴: 화면 크기에 따라 컨텐츠의 배치가 자동으로 조정) Layout Shifter Layout Pattern (화면 크기에 따라 레이아웃을 변화시킴) 반응형 웹의 발전도 프론트엔드의 발전 : 반응형 웹을 구현하기..

Intro 지금까지 배운 내용을 토대로 비디오 에디터 제작 사이트를 만드는 강의를 학습했다. 오늘 학습한 내용 ⚠️ 서비스를 만들기 전에는 항상 어떤 기능이 들어가는 지부터 고민해보자! 비디오 에디터의 동작방식 필요한 기능: 비디오 플레이어 비디오 업로드 기능 비디오 타임라인 (아쉽게도 웹에서는 고수준의 비디오 에디터를 제작하는 것은 어렵다.) 비디오 에디터 서드파티 라이브러리 분석 서비스를 개발하기 전 필요한 기능들을 구현하기 위해 적합한 라이브러리를 찾는다. 다른 사람들이 만든 비슷한 프로젝트(Github)에서 package.json을 통해 어떤 라이브러리를 사용했는지 분석해 보는 것도 좋은 방법이다. 서비스를 만들 때 구현 순서로는, HTML 구조 잡기 (화면 만들기) CSS 스타일링 자바스크립트 ..

Intro 리액트 부트스트랩 외에도 자주 사용하는 라이브러리인 Ant Design, MUI를 프로젝트에 적용해보는 실습을 하였다. 오늘 학습한 내용 Ant Design 자주 사용하는 Components Flex: CSS로 직접 구현하는 것 보다 코드 수가 줄어듦 Card Button MUI Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 코딩 컨벤션 코드 작성 시, import의 순서 1️⃣ 공통된 import가 최 상..

Intro 오늘은 리액트에서 자주 사용하는 라이브러리인 리액트 부트스트랩에 대해 알아보고 실습해 보았다. 오늘 학습한 내용 React Bootstrap React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 리액트 부트스트랩은 라이브러리 중 가장 크기가 작은 라이브러리이다. 따라서 작은 서비스를 개발할 때 사용하면 좋은 라이브러리이다. 현재도 업데이트 되고 있고 향후에도 잘 관리될 라이브러리이기 때문에 안전하게 사용할 수 있다. 부트스트랩의 컴포넌트, 레이아웃은 직접 써보며 적용해보며 라이브러리를 익혀보는 것이 좋다. patterns Patterns...

Intro React Bootstrap 라이브러리에 대해 공부하기 전에 현재 자주 사용하는 CSS 라이브러리와 웹 개발 트렌드에 살펴보는 강의를 들었다. 오늘 학습한 내용 React 핵심 원리 State와 Props가 변하면 화면을 렌더링한다. HTML 코드 내에 JS 코드를 삽입할 수 있다. 위의 2가지 원리를 바탕으로 원하는 곳에 원하는 조건으로 스타일링과 기능을 구현한다. CSS 라이브러리 Material UI (MUI) Material UI: React components that implement Material Design Material UI is an open-source React component library that implements Google's Material Design. ..