분류 전체보기

1. 프로젝트 배경과 기술 선택 과정최근 고객사와의 프로젝트를 진행하면서 새로운 서버 장비 도입에 맞춘 배포 환경 구축 작업을 맡았습니다.이번 작업에서는 신규 서버뿐 아니라 AI를 고려한 배포 환경을 설계해야 했습니다.특히, 금융과 관련이 있기 때문에 해당 고객사 측에서는 안정성과 호환성을 동시에 충족하며 기존의 운영 체제와 개발 도구, 그리고 새로운 요구사항에 모두 대응할 수 있는 기반을 마련하는 것이 목표였습니다. Redhat OS금융 산업에서는 안정성과 보안이 특히나 더 중요한데, Redhat은 엔터프라이즈 환경에서의 검증된 안정성과 보안성을 제공합니다.또한 고객사에서도 기존 인프라 환경에 대해서 Redhat을 사용하고 있어 Redhat OS 운영체제를 선택했습니다.AI 호환성 고려AI 부서에서는 ..

프론트엔드 개발자는 동영상을 어떻게 편집해야할까? Bestmoments는 사용자가 짧은 영상들을 빠르게 업로드 해야하고, 그 영상을 간단한 링크로 쉽게 공유할 수 있도록 하는 플랫폼 입니다. 영상을 짧은 시간안에 공유 가능한 상태로 만들어 주는 것이 주 목표 입니다. 하지만 문제는, 프론트엔드에서 동영상 편집을 처리하는 방법입니다. 동영상을 자르거나 인코딩하는 작업을 클라이언트에서만 처리하는 것은 성능과 안정성에서 여러 한계가 있었습니다.  과정1. 프론트엔드에서의 동영상 편집 문제점BestMoments 프로젝트를 진행하던중, "프론트엔드에서 동영상을 직접 편집하면 어떨까?" 라는 생각을 했었습니다. 그 과정에서 FFmpeg의 웹 어셈블리(WebAssembly) 버전을 사용해 동영상을 클라이언트측에서 처..

회고는 1기 모집이 있던 직후 1개월이 지난 상태이며 이미 코드잇 부트캠프를 수료한 이후입니다. 23년도 막바지에 인턴생활을 마치면서 프론트엔드 개발자로써의 추가학습이 더 필요할 것 같아 국비 혹은 부트캠프를 찾던 중 프로그래머스 데브코스, 우아한테크코스 등 을 알게되었었다. 하지만 우아한테크코스에선 떨어졌고 데브코스는 23년도 막바지엔 모집을 하지 않았었다. 24년도 6월중 프로그래머스 데브코스 1기가 새롭게 단장하여 모집을 시작하였고 전공/비전공자 유형으로 나뉘며 교육도 각각 나뉘는 것 같았다. 23년도와 달라진점에서는 크게 전공/비전공자의 실력 확인 테스트 가 서로 다르고 캠은 더이상 키지 않는다고 한다.전공자의 실력 확인 테스트에서는 Lv1 2문제 Lv2 1문제 총 3문제를 3시간 응시하는 것이고..

이번 포스트에서는 제가 최근에 진행하고 있는 BestMoments 프로젝트에 대해 소개하고자 합니다.이 프로젝트는 아직 개발 초기 단계에 있으며, 개발 기획, 단계, 과정으로 부터 배우고 있는 것들을 소개하고자 합니다.프로젝트를 시작하게 된 계기 (기획 의도)저는 게임,문화,여행 등 여러 활동을 즐기며, 그 순간을 영상으로 기록하고 추억으론 간직하곤 합니다.얼마나 많은 영상을 기록하느냐구요? 구글 드라이브에 프리미엄을 사용해서 영상을 저장할 정도로 많은 영상을 기록하고 있습니다. 하지만 이러한 영상을 단순히 저장하는 것만으로는 만족스럽지 않았습니다. 특히나 게임을 하면서 최고의 플레이 순간을 저장하고 공유하고 싶을때가 많았습니다. 영상을 공유할 수 있는 방법들영상을 공유할 수 있는 방법으로는 유튜브나 S..

Nextjs관련해서 다른 개발자의 블로그를 살펴보던 중 "Nextjs를 왜 사용하나요?" 라는 질문에 "주로 SSR을 사용하려고 Next.js를 사용합니다." 라는 답변을 합니다. 저 또한 최근 면접에서 같은 질문을 받았는데 정말로 같은 답변을 했었습니다.  하지만 최근 개발바닥이라는 유튜브를 보면서 다른분들의 이력서를 보던 중 프론트엔드 개발자의 이력서를 보게 되었는데 해당 블로그에 "Next.js가 무엇이고 왜 뜨는걸까?" 라는 블로그 게시글이 있었습니다. 해당 블로그 또한 글의 대부분은 Next.js의 SSR기반으로 설명이 되어있었는데 이 글을 보고 개발바닥 유튜브를 운영하시는 분들 께서"Next가 SSR, CSR 관점에서는 아예 아니다, 이러면 Next를 아예 잘 모르는 것이나 마찬가지다." 라는..

처음 React에서 이미지 컴포넌트를 만드려고 했을때 import React from 'react'; const Image = ({ src, alt, width, height }) => { return ; }; export default Image; 구조는 이러했었다. src, alt, width, height를 prop으로 받고 받은 prop을 나타내는 형식의 정말 기본적인 img 컴포넌트 구조였다. 또한 여기서 loading="lazy" 를 사용했던 적이 있었는데 이는 모든 브라우저에서 지원하지 않았기 때문에 후엔 해당 부분을 삭제하였다. 그렇다면 여기서 이미지 컴포넌트의 문제점은 무엇이였을까? React에서 내가만든 이미지 컴포넌트의 문제점 React에서는 img 태그를 사용한 이미지 컴포넌트를 ..

웹 개발의 트렌드는 항상 바뀌면서 진화하고 있습니다. 이러한 변화의 중심에는 웹 페이지의 렌더링 방식이 자리 잡고 있습니다. 현재 웹 개발에서는 크게 세가지 렌더링 방식이 주목받고 있습니다. 각각 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR) 그리고 정적 사이트 생성(SSG) 이 각각의 방식은 웹 애플리케이션의 성능, 검색 엔진 최적화(SEO), 사용자 경험(UX) 등 여러 면에서 중요한 역할을 합니다. 클라이언트 사이드 렌더링(CSR)CSR은 웹 애플리에키션의 동적인 사용자 경험을 제공하는 데 최적화된 방식입니다. 이 방식에서는 브라우저가 HTML을 받은 후, Javascript를 통해 컨텐츠를 동적으로 생성하고 렌더링합니다. 이 과정에서 사용자의 상호작용에 따라 필요한 데이터만을 서..

React 생명주기(Life Cycle)는 컴포넌트가 DOM에 삽입되는 순간부터 제거되는 순간까지의 과정을 말합니다. 이 과정은 여러 단계로 나뉘며, 각 단계는 특정 작업을 수행하거나 반응할 수 있는 기회를 제공합니다. 초기화 단계 : Constructor 컴포넌트의 생성자 함수에서 초기 상태를 설정하고, 종종 컴포넌트의 이벤트 핸들러를 바인딩 합니다. 이 단계는 컴폰넌트의 생명주기에서 단 한번만 발생합니다. import React, { Component } from 'react'; class ExampleComponent extends Component { constructor(props) { super(props); // 초기 상태 설정 this.state = { count: 0 }; } compon..