본문 바로가기
반응형

카테고리

 (78)
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 코드 등 문서화가 아주 잘 되어있어서 일주일정도 사용하다보니 손에 익어서 이제는 일반 컴포넌트로 만들기가 싫을 정도로 아주 좋은 퀄리티로 잘 사용하고있..
웹브라우저에서, File 서버의 특정 파일에 접근할 때 발생한 Synology WebDav CORS 문제 해결 방법 문제 : WebDav 프로토콜로 구성된 Synology에 접근하기 위해 특정 파일 0000/0000.mp4 에 접근에 실패해결 방법 : Synology WebDav Server에 CORS 관련 헤더 허용 설정이 GUI로 존재하지 않아서, ssh 22번 포트로 접근하여 WebdavServer에 접근한 후, 추가적인 설정 옵션을 적용해줌으로써 해결. 주의 사항 : Synology 관리 페이지에서, 설치한 WebDav ssh 접속이 가능하도록 옵션 허용 및 포트번호 체크 필수해결 방법은 아래 링크 참조https://github.com/keeweb/keeweb/issues/703#issuecomment-326404286 아래처럼 httpd.conf-webdav파일과 httpd-ssl.conf-webdav 파일 ..
List 구현하기 - 스크롤링을 하면 스크롤바가 덜덜 떨리네 (004화 - S급 프론트엔드 개발자로 회귀하다) 이번에 이벤트 조회와 관련된 UI를 구현하면서, List 컴포넌트를 이용하여 정보를 나타내야하는 일이 생겼다.찾아보니, CSS를 사용하지 않기 위해 사용하는 Material-UI 모듈에서 제공해주는 List 컴포넌트가 있었고, react-window 모듈에서 기본으로 제공하는  FixedSizeList 컴포넌트가 있었다.둘 중 무엇을 사용할까 하다가, FixedSizeList를 사용하면서, 적당히 섞어서 쓰기로 결정했다.아니 근데, 다 구현해놓고 보니까 특정 이상의 Item 밑으로 스크롤을 했을때 화면이 벌벌 떨기 시작하는게 아닌가?증상을 좀더 관찰해보니, FixedSizeList의 props로는 itemSize, itemCount, itemData 등이 들어가는데, 여기서 itemSize를 아무리 변경..
반응형

티스토리툴바