본문 바로가기

S급 프론트엔드 개발자로 회귀하다

 (8)
S급 프론트엔드 개발자로 회귀하다 008화. Docker build fail to install Insightface 해결방법 Docker build fail to install insightface...프론트엔드 개발 중, 간단한 AI 모델을 올려서 테스트용으로 Python Fastapi 서버를 구현하였는데, 매번 서버를 켜기 귀찮아서 Docker라고 하는 서버 빌드, 배포 기능을 제공하는 편리한 툴을 사용해보았다. Docker Image를 빌드하는 중 발생한 문제를 해결한 내용이다. 문제DockerFile을 작성하여 image build하는 중 insightface 패키지 설치를 실패하여 image build를 할 수 없는 상황Windows OS 환경에서는 microsoft c++ build sdk 설치를 통해 문제 해결하였지만, docker build는 ubuntu os 환경이여서 다른 방법으로 해결 필요해결 방법Docke..
S급 프론트엔드 개발자로 회귀하다 007화. Blocked aria-hidden on a <button> element 에러 해결 (포커싱 에러) 오늘은 나름? 까다로웠던 포커싱 동작과 관련된 에러 해결 내용이다. 리액트에서 사용할 간단한 Dialog 컴포넌트를 만들고, 자동으로 몇초 뒤 종료되도록 구현을 하였는데, Dialog가 보여지고 닫히는 순간 아래 에러가 발생하였다.Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. F..
S급 프론트엔드 개발자로 회귀하다 006화. 너의 모든 순간, 날짜 데이터를 관리해줄게 - moment.js moment.js 모듈은 javascript 개발환경에서 가장 많이 사용하는 날짜와 관련된 라이브러리이다.Date 클래스가 이미 존재하기에, 궂이 라이브러리를 사용해야하나 싶지만, 아무래도 특정 날짜 데이터 형태로의 format화가 필요한 경우에 moment 모듈을 사용하면, 코드 몇줄로 쉽게 변환이 가능하다보니, 많이 사용되는 라이브러리인 것 같다. 자주 쓰이는 사용법은 대략적으로 아래와 같은데, 생각보다 헷갈려서 자주 써봐야 적응이 될 것 같다는 생각이다.설치방법은 npm install moment 타입스크립트도 지원한다. Q1. 현재 날짜를 알려줘const now = moment(); // now의 Type은 moment.Moment 오브젝트   Q2. 현재 날짜를 Number Type으로 알려줘c..
S급 프론트엔드 개발자로 회귀하다 005화. Material-UI 사용기 - 레이아웃 미세 조정이 힘들면 개발자 도구로 material ui를 써보니 처음에는 여러 컴포넌트를 가져다 쓰려니 Document를 계속 찾아보면서 사용하느라 너무 힘들었다... 특히 배치를 하려면 결국에는 sx 속성을 이용하여 width, height 같은 style 속성을 잘 넣어줘야하고, display 속성값도 flex나 relative, absolute 등 특정 상황에 맞는 옵션을 잘 선택하여 사용해야하고, 반응형 레이아웃 관련 컴포넌트 중, Grid 컴포넌트 이해하는 것이 조금 어려운 편이였던 것 같다. 다만, 전체적인 react와의 호환성과 TypeScript로도 잘 짜여진 Example 코드 등 문서화가 아주 잘 되어있어서 일주일정도 사용하다보니 손에 익어서 이제는 일반 컴포넌트로 만들기가 싫을 정도로 아주 좋은 퀄리티로 잘 사용하고있..
S급 프론트엔드 개발자로 회귀하다 004화. List 구현하기 - 스크롤링을 하면 스크롤바가 덜덜 떨리네 이번에 이벤트 조회와 관련된 UI를 구현하면서, List 컴포넌트를 이용하여 정보를 나타내야하는 일이 생겼다.찾아보니, CSS를 사용하지 않기 위해 사용하는 Material-UI 모듈에서 제공해주는 List 컴포넌트가 있었고, react-window 모듈에서 기본으로 제공하는  FixedSizeList 컴포넌트가 있었다.둘 중 무엇을 사용할까 하다가, FixedSizeList를 사용하면서, 적당히 섞어서 쓰기로 결정했다.아니 근데, 다 구현해놓고 보니까 특정 이상의 Item 밑으로 스크롤을 했을때 화면이 벌벌 떨기 시작하는게 아닌가?증상을 좀더 관찰해보니, FixedSizeList의 props로는 itemSize, itemCount, itemData 등이 들어가는데, 여기서 itemSize를 아무리 변경..
S급 프론트엔드 개발자로 회귀하다 003화. 나는 리엑트의 새로운 페이지가 필요해 React를 어찌하여 설치하였다.요즘은 세상이 좋아져서 vite라고 하는 프로젝트 셋팅 툴이 프로젝트 시작을 편리하게 해준다고 한다.그런데 훌륭하게 설계된 프레임워크와 다르게, 플랫폼 개발 환경이 이토록 정형화되어있지 않았던 것도 문제가 있는 것?인가.. 하는 생각도 하지만, 워낙 javascript의 자유도나 변형된 형태가 다르다보니, 이해할 것 같기도 하다. 리엑트 프로젝트를 생성하는 방법은 `npm create vite@latest`이라고 명령어를 CLI에 작성하면, 어떠한 프로젝트로 생성할지 알아서 만들어준다. 나는 리엑트 + 타입스크립트 프로젝트를 선택하였는데, 리엑트 이외에도 바닐라 스크립트, Vue.js 같은 프론트엔드 기술들이 몇몇 보이긴 한다. 아직은 관심이 생기지 않는다..생성된 프로젝..
S급 프론트엔드 개발자로 회귀하다 002화. 웹프론트엔드, 시작은 개발 환경 설정부터 구글 신이 말했다.`VSCode를 까시오` vscode를 검색하여 공식 홈페이지에서 Stable 버전 Installer를 다운로드 받았다. 설치를 한 후, vscode를 실행하니 빈 윈도우가 하나 열렸다.. 이제 무엇을 해야하나 보니 다시 구글 신께서 말하시길`확장 프로그램들을 깔아라,그 목록은 아래와 같다.- ESLint- Error Lens- Live Server- Prettier돈이 많다면, GitHub Copilot을 깔아라` 구글신이 알려준 확장 프로그램들을 하나씩 검색해보니, 다음과 같은 정보들을 담고 있었다.- ESLint : JS코드의 문법 검사와 코딩 스타일을 검사하여 잘못된 정보를 표시해준다.- Prettier : ESLint가 검사를 해준다면, Prettier는 잘못된 코드나 포멧을 ..
S급 프론트엔드 개발자로 회귀하다 001화. 프론트엔드 개발자로 회귀하다 그동안 주변에서 자주 듣던 얘기들. `선언형 개발 개꿀``이제 프론트엔드는 자동으로 만들어줍니다.``10년 안에 개발자가 사라진다.``요새는 다들 웹으로 개발하니까``node.js 써라``왜 그걸 직접 만들고 있어?` 5년간 클라이언트 개발을 해왔던 나에게 갑자기 웹 프로젝트가 찾아왔다. `웹 프레임워크로 개발 해볼까요?` 이제 정말 시작이다.. 늦은 30대 초반에 웹 개발자의 세계로 회귀하였다. "웹 프론트엔드 개발자 1년차로 회귀를 시작합니다." [다음화]https://ngost.tistory.com/124

티스토리툴바