Flik LAB

영상 편집을 할수 있는 방법은 여러가지가 있는데리액트 코드로 영상을 편집할 수 있는 remotion이라는 것을 알게 되어서 사용해 보았다. https://www.remotion.dev/웹서버를 실행하고 코드를 수정하면 프리뷰에 반영되어 보인다. 타임라인 등의 동작이 깔끔하게 동작한다. 하지만 개발문서를 읽어가면서 수정할 부분이 존재하고, 웹 개발에 능숙한 사람이 아니라면 다루기 쉽지는 않을 것 같다.코드로 영상을 단독으로 만드는 것은 일반적으로 활용하는 방법은 아니다 보니 활용 사례가 많이 알려져 있지는 않다. 그래서 내 나름대로 장점을 정리 할 수 있을 것 같다.1. 영상 편집 프로그램으로 만들 때는 굉장히 까다로운 스타일의 영상이 코드로는 쉽게 만들 수 있다. 인트로나 자막 특수효과 등을 삽입할 때 ..

항해플러스에 대한 회고는 몇 차례 작성한 적이 있지만 한 코스를 모두 마치는 현시점을 기준으로 종합적인 소감을 작성해본다. 회고는 많이 할수록 좋다고 생각.항해 플러스를 선택하기까지항해플러스 백엔드 과정을 수료한지 1년이 지나지 않아서 프론트엔드 과정이 새로 열린다고 해서 지원하고 시작한지 벌써 10주가 지나 모든 과정이 끝났다. 당시에 나는 3년정도의 경력자였지만 백엔드 개발 경험이 없었고 관련 지식이 거의 없는 상태였다. 백엔드 코스에서 경험했던 성장 경험을 본래 포지션인 프론트엔드 에서도 경험하고 싶었기에 망설임 없이 지원을 하게 되었다. 항해 플러스를 처음 지원하기 전의 상태는 개발자로서의 내 존재에 대해 막막한 상태였던 것 같다. 단순히 실력이 좋고 나쁜걸 떠나서, 내가 잘 하고 있는지 자체가 ..

키 바인딩의 필요성맥OS에서 Home키와 End키의 바인딩이 다른 OS와 차이가 있어서 이를 교정하는데 도움이 됩니다. 필요에 따라서 캡스락 키를 컨트롤로 바꾼다든지... 등 조합이 가능합니다. 저의 경우에는 키보드 왼쪽 상단의 ₩키가 backtick(으로 입력 되기를 원했습니다. 원래 이 키는 영어일때는 백틱, 한글인 경우에는 원 기호를 표시하는데 저는 원 기호보다 백틱을 훨씬 많이 쓰기 때문에 ₩를 ‘로 입력되게 하는 설정을 추가했습니다. 방법키 바인딩에 대한 설정을 저장하는 파일이 있는데, 해당 파일을 수정하면 바인딩이 저장됩니다. (여기서 유저는 OS의 로그인 유저를 말한다.)경로 ~/Library/KeyBindings/DefaultKeyBinding.dict 를 수정하면(없는경우 생성) 해당 유..

Intro 개발자로서의 첫 회사를 다니기 시작한지 벌써 4년이란 시간이 흘렀다. 그러니까 4년차 개발자라는 뜻이다. 4년간 스스로 열심히 회사에 기여하기 위한 일, 스스로 성장을 위한 공부도 해왔지만 어쩐지 아직 부족한 느낌이다. 그리고 면접이란 것을 본적이 없다보니 앞으로 이직에 대한 고민도 많이 든다. 이번에 3년차 이하 경력자를 대상으로 하는 항해플러스에 참여하게 되었고 앞으로의 여정을 시작하기 전에 스스로를 되돌아보고자 이 글을 쓴다. 항해플러스 참여 계기 사실 나는 백엔드 코스 1기를 수료했다. 당시에 매주 발제에 대한 팀과제, 오픈소스 프로젝트 기획 및 개발, 그리고 다양한 개발자 분들과의 네트워킹을 하면서 만족스런 경험을 했다. 하지만 아쉬웠던 것은 커리어에 대한 고민이다. 코스가 백엔드 개..

React의 useEffect 훅은 외부 시스템과의 동기화나 Side Effect를 관리할 때 사용됩니다. 그러나 모든 상황에서 useEffect가 필요한 것은 아닙니다. 직접적인 렌더링 로직이나 이벤트 핸들러 내에서 처리할 수 있는 경우에는 useEffect를 사용하지 않음으로써 코드를 더 단순하게 만들고, 실행 속도를 빠르게 하며, 오류 가능성을 줄일 수 있습니다. 이런 경우에는useEffect 사용을 재고해야 합니다. 리액트 공식문서의 You Might Not Need an Effect를 참고로 하여 useEffect를 사용하지 않아야 하는 대표적인 패턴들을 정리해보았습니다. useEffect의 활용 사례 먼저, useEffect를 잘 사용하는 예시입니다. useEffect는 외부 데이터를 가져오..

React에서 useEffect 훅의 적절한 이해와 사용은 효과적인 컴포넌트 생명주기 관리의 핵심입니다. 이 포스팅은 useEffect의 실행 시점, 컴포넌트의 마운트, 리렌더링, 그리고 마운트 해제 과정에서 useEffect가 어떻게 작동하는지에 대한 세밀한 이해를 제공합니다. 또한, React의 렌더링과 마운트 과정에 대한 기본적인 이해도 함께 다룹니다. useEffect의 기본 useEffect는 함수형 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용되는 React 훅입니다. 사이드 이펙트에는 데이터 fetching, 구독 설정 및 해제, 수동 DOM 조작 등이 포함됩니다. 이 훅은 컴포넌트 렌더링 결과가 DOM에 반영된 후에 실행되어, 컴포넌트 로직과 부수 효과 로직을 분리할 수 있게 해 줍니다...

항해 플러스 후기로 보일 수도 있는데 앞으로의 과정을 더 잘 가기 위한 기록이기도 하다. 항해 플러스를 다시 신청했다. 나는 항해플러스 백엔드 코스 1기를 수료했다. 백엔드 코스 신청 당시엔 백/프론트 구분이 없었지만 사실상 백엔드 코스였다. 지금은 백엔드 코스가 3기를 끝마쳐가는 중이고 이제 프론트엔드 코스 1기를 신청받고 있다. 사람이 좀 쌓이다보니 프론트엔드에 대한 수요가 어느정도 있다고 판단이 되었나? 프론트엔드 1기 모집 소식을 듣고 여러모로 고민 끝에 수강을 신청했다. 왜 또 수강? 이렇게 까지 부트캠프를 두번이나 들어가며 얻는 것은 뭘까? 가장 큰것 물경력에 대한 두려움..당연히 있다. 앞으로의 경력 커리어 연봉 그 모든것을 좀더 있는 힘껏 달려 보고싶어서다. 항해 플러스(백엔드) 1기를 수..

웹팩은 현대 웹 개발에서 중요한 역할을 하는 도구입니다. 복잡한 자바스크립트 애플리케이션의 개발과 배포 과정을 효율적으로 관리해주는 모듈 번들러로, 개발자들 사이에서 필수적인 도구로 인식되고 있습니다. 이 글에서는 웹팩의 기본 개념을 설명하고, 웹팩 사용과 관련된 자주 묻는 질문들에 대해 답변하고자 합니다. 웹팩이란 무엇인가요? 웹팩은 여러 개의 파일(자바스크립트, CSS, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐주는 모듈 번들러입니다. 이 과정에서 웹팩은 파일들을 최적화하고, 불필요한 부분을 제거하여 웹사이트의 성능을 향상시키는 역할을 합니다. 웹팩의 핵심 기능들 1. 모듈 번들링(Module Bundling) 개념: 웹팩은 웹 애플리케이션을 구성하는 자바스크립트, CSS, 이미지 파일 등 다양..

🙋🏻‍♂️ 할인 정보 항해플러스 등록시 추천인을 등록하면 상당한 할인/리워드가 있다고 합니다.저를 추천인으로 기입하고 싶다면 추천 코드 "zplPXG"를 활용해주세요.더 궁금하신 부분은 인스타그램 @code_bukket 또는 댓글을 통해 문의 부탁드립니다!경력자도 코딩 부트캠프가 필요할까?아직까지 경력자을 대상으로 하는 부트캠프가 정착된 느낌은 아니지만 코딩스파르타에서 주최하는 경력자 부트캠프인 항해플러스를 직접 수강해본 뒤 내 생각과 경험을 토대로 생각을 정리해본다.개발자는 학벌이나 나이 등을 덜 보는 대신 실력이 중요한 직업이다. 그렇다보니 단순히 경력이 연차만 쌓인다고 다가 아니다. 회사에서 일을 하면서 그에 준하는 실력과 경험이 쌓여야 인정을 받을 수 있는데 상황에 따라 그러지 못하는 경우도 ..

요즘 유행하는 코딩 부트캠프에 대한 생각을 정리할 겸 작성해봅니다... 코딩 배우기 좋은 시대 코딩을 배울수 있는 곳이 요즘 들어 굉장히 많아졌다. 더불어 코딩이란 것은 어느 기술이 표준이라고 보기 어려운 경우가 많고 실력을 측정하기 어려운 것인데, 요즘은 여러 코딩 스킬이나 기술스택들이 학벌이나 자격증처럼 표준에 가까운 것처럼 다루어진다. 물론 그것이 그 사람의 능력을 정확히 대변하는지는 다른 문제이다. 내가 말하고 싶은 것은 그만큼 로드맵이 잘 되어있어서 진입하기기 쉬워지고 사람들은 대체가 가능해진다는 것이다. 오픈소스의 영향도 있고 여러 요인이 있지만 최근 몇년 사이 코딩, 개발자라는 직업과 그 행위에 대한 붐, 로망이 커졌다. 아무튼 일하기 편하고 배우기 쉽다는 점, 그리고 일자리고 그만큼 많기도..