본문 바로가기

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

(10)

Git 개념 잡기 : add, commit, branch, head, checkout, log (010화 - S급 프론트엔드 개발자로 회귀하다) git이란, 버전관리 도구이다.프로젝트를 진행하면서 다양한 기능들을 구현하거나 디자인 레이아웃 등을 작성하여 적용하게 되는데,수많은 작업들에 대해 단계적으로 구현을 진행하게 되므로 만들어지는 과정을 기록하기 위해 중간중간 저장을 할 필요가 있다. git은 snapshot이라고 하는 찰칵! 기능을 이용하여 작업하는 중간에 한번씩 저장을 하게 되고, git을 사용하는 개발자는 특정 기능의 구현이 완료되거나 테스트가 완료되었을 때 찰칵 하여 진행 사항을 저장한다.이 찰칵! 기능을 git에서는 Commit 이라고 한다. 결혼식장에서 본판 사진 촬영을 할때에, 사진에 등장할 인물에 따라 무대로 올라가는 사람들이 가족, 친척, 친구나 회사동료 등이 될 수 있는데, git에서도 마찬가지로 프로젝트 내의 내가 ..

자바스크립트란? Node란? (009화 - S급 프론트엔드 개발자로 회귀하다) Javascript와 Node.js 의 그렇고 그런 사이... 자바스크립트는 우리가 현재 사용하고 있는 현대적인 브라우저의 모태가 되는 넷스케이프 브라우저에서 사용하기 위해 만들어진 스크립트 언어로 개발되었어. 넷스케이프는 모질라 프로젝트에서 오픈소스화되었고, 이를 바탕으로 현대적인 브라우저 중 하나인 파이어폭스가 아직 남아있지.*파이퍼폭스와 같은 브라우저에서 사용하기 위해 개발된 스크립트 언어 : 자바스크립트 그런데, 만들고 보니 너무 괜찮은 거 같아..! 이걸 서버에서도 쓸 수 있을 것 같은거야. 구글에서 2008년도에 개발한 V8 엔진을 기반으로 Node.js라고 하는 서버 개발 플랫폼을 만들어서 썼어. 더 이상 자바스크립트를 브라우저 내에서만 국한하여 사용할 필요가 없어진거지. 이때부터 Node...

Docker build fail to install Insightface 해결방법 (008화 - S급 프론트엔드 개발자로 회귀하다) 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..

Blocked aria-hidden on a <button> element 포커싱 에러 해결 (007화 - S급 프론트엔드 개발자로 회귀하다) 오늘은 나름? 까다로웠던 포커싱 동작과 관련된 에러 해결 내용이다. 리액트에서 사용할 간단한 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..

너의 모든 순간, 날짜 데이터를 관리해줄게 - moment.js (006화 - S급 프론트엔드 개발자로 회귀하다) moment.js 모듈은 javascript 개발환경에서 가장 많이 사용하는 날짜와 관련된 라이브러리이다.Date 클래스가 이미 존재하기에, 궂이 라이브러리를 사용해야하나 싶지만, 아무래도 특정 날짜 데이터 형태로의 format화가 필요한 경우에 moment 모듈을 사용하면, 코드 몇줄로 쉽게 변환이 가능하다보니, 많이 사용되는 라이브러리인 것 같다. 자주 쓰이는 사용법은 대략적으로 아래와 같은데, 생각보다 헷갈려서 자주 써봐야 적응이 될 것 같다는 생각이다.설치방법은 npm install moment 타입스크립트도 지원한다. Q1. 현재 날짜를 알려줘const now = moment(); // now의 Type은 moment.Moment 오브젝트 Q2. 현재 날짜를 Number Type으로 알려줘c..

Material-UI 사용기 - 레이아웃 미세 조정이 힘들면 개발자 도구로 (005화 - S급 프론트엔드 개발자로 회귀하다) material ui를 써보니 처음에는 여러 컴포넌트를 가져다 쓰려니 Document를 계속 찾아보면서 사용하느라 너무 힘들었다... 특히 배치를 하려면 결국에는 sx 속성을 이용하여 width, height 같은 style 속성을 잘 넣어줘야하고, display 속성값도 flex나 relative, absolute 등 특정 상황에 맞는 옵션을 잘 선택하여 사용해야하고, 반응형 레이아웃 관련 컴포넌트 중, Grid 컴포넌트 이해하는 것이 조금 어려운 편이였던 것 같다. 다만, 전체적인 react와의 호환성과 TypeScript로도 잘 짜여진 Example 코드 등 문서화가 아주 잘 되어있어서 일주일정도 사용하다보니 손에 익어서 이제는 일반 컴포넌트로 만들기가 싫을 정도로 아주 좋은 퀄리티로 잘 사용하고있..

List 구현하기 - 스크롤링을 하면 스크롤바가 덜덜 떨리네 (004화 - S급 프론트엔드 개발자로 회귀하다) 이번에 이벤트 조회와 관련된 UI를 구현하면서, List 컴포넌트를 이용하여 정보를 나타내야하는 일이 생겼다.찾아보니, CSS를 사용하지 않기 위해 사용하는 Material-UI 모듈에서 제공해주는 List 컴포넌트가 있었고, react-window 모듈에서 기본으로 제공하는 FixedSizeList 컴포넌트가 있었다.둘 중 무엇을 사용할까 하다가, FixedSizeList를 사용하면서, 적당히 섞어서 쓰기로 결정했다.아니 근데, 다 구현해놓고 보니까 특정 이상의 Item 밑으로 스크롤을 했을때 화면이 벌벌 떨기 시작하는게 아닌가?증상을 좀더 관찰해보니, FixedSizeList의 props로는 itemSize, itemCount, itemData 등이 들어가는데, 여기서 itemSize를 아무리 변경..

나는 리엑트의 새로운 페이지가 필요해 (003화 - S급 프론트엔드 개발자로 회귀하다) React를 어찌하여 설치하였다.요즘은 세상이 좋아져서 vite라고 하는 프로젝트 셋팅 툴이 프로젝트 시작을 편리하게 해준다고 한다.그런데 훌륭하게 설계된 프레임워크와 다르게, 플랫폼 개발 환경이 이토록 정형화되어있지 않았던 것도 문제가 있는 것?인가.. 하는 생각도 하지만, 워낙 javascript의 자유도나 변형된 형태가 다르다보니, 이해할 것 같기도 하다. 리엑트 프로젝트를 생성하는 방법은 `npm create vite@latest`이라고 명령어를 CLI에 작성하면, 어떠한 프로젝트로 생성할지 알아서 만들어준다. 나는 리엑트 + 타입스크립트 프로젝트를 선택하였는데, 리엑트 이외에도 바닐라 스크립트, Vue.js 같은 프론트엔드 기술들이 몇몇 보이긴 한다. 아직은 관심이 생기지 않는다..생성된 프로젝..

이전 1 2 다음

티스토리툴바