수민's 개발 이야기

React Native는 앱스토어(Play Store, App Store)에 배포해야 하므로 심사 및 업데이트 과정이 번거롭다. 네이티브 어플리케이션의 특징이긴 하지만 회사에서만 사용하는 어플의 특성상 URL로 공유해서 어플을 깔 수 있게 하는 것도 훨씬 편리할 것이라는 생각이 들었다. 또한 설치 없이 브라우저에서도 바로 접속 가능하며 웹 배포만으로도 최신 기능 반영 가능해 테스트가 매우 쉽다는 장점이 있다. 또한 Next도 안써보긴했지만 더 어색한 ReactNative보다는 나을 것 같다는 판단을 하고 PWA로 진행해야겠다고 생각했다. 또한 react native가 플랫폼별 이슈나 빌드 환경 설정 부담가 많아서 빠른 피처 추가 및 버그 수정 가능하다고 판단했다.PWA란?: 프로그레시브 웹 앱으로 브라우..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 25. 16:02

역시 개발의 킥은 성능개선이라고 할 수 있다. 다양한 성능을 개선하는 방법이 있지만 메일메일에서 받은 메일을 기반으로 메모이제이션이 무엇인지 알아보고자 한다.메모이제이션이란?: 기억되어야하는 것이라는 뜻의 라틴어에서 파생된 단어로 동일한 계산을 반복적으로 해야할 때 이전에 계산한 값을 메모리에 저장해 중복적인 계산을 제거해 전반적인 실행 속도를 빠르게 만들어줄 수 있다. 보통 애플리케이션의 최적화를 위해 사용된다.리액트에서 메모이제이션을 사용하는 법1) useMemo: useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다고 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. 메모이즈 된 값을 return하는 Hook이다.const memoiz..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 22. 18:00

나는 원래 tailwind-css가 아닌 styled-component를 사용하고 있었다. 근데 styled-compoent의 고도화가 중지되고 이제 사라지는 스타일링 도구가 되지 않을까 하기도 하고 디자이너들이랑 협업을 하다보니 디자인 시스템을 등록해놓고 개발하는게 필수라는 생각이 들었다. (특히 나는 구분 못하지만 미묘하게 바뀌게 된 컬러를 바로 적용하기에는 무조건이다. )tailwind-css란?Tailwind CSS는 Utility-First 컨셉*을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.*Utility-First 컨셉 : 클래스를 미리 정의된 스타일 조각처럼 써서 직접..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 21. 13:17

STACK스택이란? : 나중에 넣은 데이터가 먼저 나오는 자료구조 (LIFO*)*LIFO : Last In First Out / 후입선출 주요연산연산 설명시간복잡도push(요소)요소를 맨 위에 넣기 O(1)pop()맨위의 요소를 제거하고 반환 O(1)peek() [/ top()]스택의 맨 위 요소를 확인O(1)isEmpty()스택이 비어있는지 확인O(1)size()스택에 들어 있는 요소의 개수 반환- 사용예시 웹 브라우저 뒤로 가기 기능 (페이지 방문 순서 저장)재귀 함수 호출 스택 (함수 호출 순서 저장)문자열 괄호 짝 검사DFS자바스크립트에서 사용하는 방법 const stack = [];// pushstack.push(10);stack.push(20);stack.push(30); // popcon..

🙏 프론트엔드 개발자의 코딩테스트 뿌수기 2025. 7. 18. 14:51

인턴을 하면서 이제 프론트를 개발할 시간이 왔다 . 폰을 VR 기기에 넣어서 확인해야하기 때문에 앱으로 개발해야했고 나는 원래는 웹을 주로 개발해왔고 RN만 연구실 인턴 당시 개발해본 경험이 있기 때문에 RN으로 골랐고 RN이 개발되어있는 라이브러리도 많아서 최적의 선택이라고 생각했다. 그리고 처음엔 PWA로 개발해볼까? 라는 생각도 하긴 했었는데 PWA로 하면 내가 생각했던 기능 중 하나를 구현하지 못한다는 걸 알고 포기했다. 내가 생각했던 기능은 ⭐️현재 내가 연결된 IP를 자동으로 인식해 IP를 주입해주는 기능⭐️이다.생각하게 된 이유이미 개발되어있는 초기 버전의 앱이 있어 사용해보며 프로토타입을 고민해봤는데 불편했던 점 중 하나가 ip 주소를 외우고 있어야 검색할 수 있는 상태라는 점이었다. 그래..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 7. 17. 17:53

인턴을 하면서 webRTC로 구현하던 라즈베리파이 실시간 통신 로직이 계속 malloc() 에러가 나서 이걸 거의 일주일 내내 고쳐봤는데 렌더링을 해서 트랙을 보내는 과정에서 PvAv를 쓰는게 어쩔 수 없이 발생하고 그럼 계속해서 메모리 할당에 에러가 나서 그냥 쌩으로 yuv480p로 인코딩 하려고 해봤는데[CameraTrack] 초기화 완료[/offer0] CameraTrack added[/offer0] LocalDescription 설정 완료INFO: 192.168.0.143:50419 - "POST /offer0 HTTP/1.1" 200 OK[CameraTrack] 프레임 수신: shape=(480, 640, 3)[FFmpeg stderr] ffmpeg version 5.1.6-0+de..

🔫Trouble Shooting 2025. 7. 15. 17:52

⏰ 진행기간 : 2025.03.31-2025.05.31기업 프로젝트에 비해 엄청 긴 기간..ㅋㅋㅋㅋ이라는 장점이 있다. 두 달동안 하고 다양한 주제로 프로젝트를 진행하니 메리트가 있다고 생각했다.근데 아무래도 프로젝트의 크기가 크다보니 회고하기는 너무 어려웠다. 🥹📁 프로젝트 소개팀원 : 기획 2 디자인 2 프론트 2 백엔드 2프로젝트 : VOIM - 저시력자 쇼핑 어드바이저 크롬 익스텐션프로젝트 소개: 쿠팡 페이지에서 상품 정보를 분석해 화장품, 식품, 건강기능식품에 대한 성분 위험성 정보와 리뷰, 장바구니를 요약한 정보를 시각적인 요소를 인지하기 쉽게 안내하는 기능과 고대비/글자 확대 등 접근성 기능을 제공한다. 팀명 : 호공주와 일곱프린세스팀명의 의미 : 우리팀의 청일점인 최호를 위해 모두가 공..

😃 프로젝트를 마치며.... 2025. 7. 15. 10:57

두 개 카메라 동시에 가동하면서 메모리 부족하지 않게 하는 로직 구현하는 방법으로 카메라 락 분리하는 방법을 생각해봤다. 현재 CameraTrack.recv() 함수에서 두 카메라가 각각 다른 인덱스(0, 1)로 Picamera2를 생성했지만 해당 인스턴스들이 동시에 .capture_array()를 호출할 때 내부 libcamera의 상태가 충돌하고 있는 것 같다는 결론을 냈다.저번 블로그 해결 방법의 결론전에는 해결이 되었던 이유가 트랙을 나누면서 눈이 한쪽만 구동되면서 해결이 되었던 것 같다. 즉 , 해결이 안되었지만 두 개가 동시에 접속하지 못하면서 메모리 해결이 된 것처럼 보인 것 같다. 🥹 libcamera와 Picamera2는 완전한 thread-safe 구조가 아니기 때문에 동시에 star..

🔫Trouble Shooting 2025. 7. 10. 17:47