전체 글
-
git config 설정 확인 및 변경하기Dev/Git 2023. 8. 22. 12:52
새로운 레파지토리를 생성하여, 새로운 프로젝트를 시작하고자 할 때가 있다. 깃헙 계정을 하나만 사용하는 경우 처음 설정해놓은 상태로 쭉 가면 되긴 하지만, 그렇지 않는 경우에는 간혹 config 설정에 대한 내용을 확인할 필요가 있다. git config에 대한 리스트를 보고자 하는 경우에는 아래와 같은 커맨드를 입력한다. git config --list git config 설정하는 방법 중에 가장 많이 쓰이는 것이 이름과 이메일 변경이다. 이 경우에는 아래와 같이 수정한다. git config --global user.name "고양이" git config --global user.email "hbd9425@gmail.com"
-
ssh 키생성Dev/etc 2023. 7. 15. 20:27
Git 서버들은 SSH 공개키로 인증을 한다. 1. SSH 공개키 확인 $ cd ~/.shh $ ls id_dsa 혹은 id_dsa.pub 파일이 있으면 공개키가 생성된 적이 있는 것이다. 없다면 생성을 하자. pub확장자를 가진 파일은 공개키이므로 공개되어도 괜찮지만, 다른 파일은 개인키이므로 각별히 주의하자. 2. SSH 공개키 생성 $ ssh-keygen 생성할 때, 묻는 질문이 있는데 그냥 엔터를 계속 눌러서 진행하자. 그러면 생성 될 것이다. 위의 커맨드를 이용해서 잘 생성되었는지 확인하고, 넘어가자. 3. Git에 SSH key 등록 $ cat id_rsa.pub 위의 커맨드를 이용해서 값을 복사한다. 그 이후, github setting으로 들어간다. ssh and GPG keys라는 탭으로..
-
video 객체를 제대로 초기화하지 못했던 문제Error 2023. 6. 18. 19:09
html에서의 video 태그를 이용하여 아이템들의 이미지에 비디오를 넣어서 보여주는 부분이 필요하였다. 기존 property src에 값을 넣어주어서 재생을 시켰었다. 너무 잘 나왔다. 하지만, 랜더링을 하고 끝이 나면 상관없지만 아이템들을 담은 배열에 가공을 한다던지 새로운 데이터들을 불러와 src에 넣어서 돌려줘하는 경우 (예를 들어, 필터적용과 같은.. ) 기존의 비디오 객체를 제대로 초기화해주지 못하는 현상이 생겼다. 랜더링을 하는 과정에서 제대로 초기화가 되지않고 넣은 탓에 기존의 객체가 남아있어서 그전에 영상이 틀어지는 것 같았다. 동영상 플레이어 구성요소에 올바른 props 또는 state 값을 전달하고 있는지 확인을 해야 했고, URL이 변경될 때 플레이어 소스를 올바르게 업데이트하고 있..
-
Progress bar 라이브러리 추천 - @frogress/lineDev/NPM 2023. 6. 6. 19:05
HTML에서 진행바(progress bar)를 만들려면 아래의 코드를 사용한다. 혹시나 커스터마이징 하는 방법이 궁금할 수 있으니 아래에 링크를 걸어두겠다. 하지만, progress tag를 사용하면 두 가지의 문제점이 있다. 첫 번째로 진행바의 백그라운드를 둥근형태로 구현했을 때, 0 ~ 1%의 진행을 나타내야 할 경우이다. 이 경우에는 progress의 진행바가 네모난 백그라운드 기준으로 퍼센트가 차기때문에 UI가 둥근 막대기를 벗어나게 된다. (따로 진행 너비를 스타일링해주어야 한다.) 두 번째로 진행 정도에 그라디언트를 넣는 경우이다. 진행 너비에 따른 그라디언트가 들어가기 때문에 너비가 작은 경우 그라디언트가 자연스럽지 않고, 찌그러져 보인다. 특히, 둥근 형태의 진행바를 구현할 때에는 더욱 심..
-
내가 사용하는 VS Code 추천 익스텐션Dev/etc 2023. 6. 6. 04:34
Project Manager : 여러 프로젝트를 관리하여야 할 때, 새로운 창을 열어서 작업하기 보다는 사용중인 에디터에서 바로 이동을 할 수 있도록 즐겨찾기하여 바로 이동하는 듯한 느낌을 주는 익스텐션이다. Error Lens : 코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 보여준다. 나중에 컴파일을 실행 하기 전에 미리 에러를 발견할 수 있어 유용하다. Bracket Select : 문자열을 선택할 때 마우스로 드래그를 하여 사용했을 것이다. 화면 분할을 하는 등 긴 문자일 경우에는 여러번 하다보면 상당히 귀찮다. (모든 문자가 연결 되어 있다면 더블 클릭으로 가능하지만 띄어쓰기가 있는경우는.. ) 이럴때, 커맨드로 한번에 문자열을 선택할 수 있는 익스텐션이다. win : alt + a ma..
-
EACCES: permission denied, unlink '/usr/local/bin/code'Error 2023. 6. 6. 03:21
터미널에서 code . 를 치면 vs code가 실행된다. 하지만 가끔 다음과 같은 에러가 발생하곤 한다. 이러한 경우에는 다음 코드를 터미널에 입력해 준다. cd /usr/local/bin sudo rm -rf code 그러한 다음 command palette 열어서 code를 입력해주면 Shell Command: Install 'code' command in PATH가 뜬다. 이 부분을 선택하면 정상적으로 터미널에서 code . 로 원하는 디렉터리의 소스를 vs code로 불러올 수 있다.
-
원하는 태그 크기 확대/축소 하기(zoom)Dev/CSS 2023. 5. 27. 21:59
반응형을 구현할 때, 해당 요소가 너무 큰 경우에는 flex를 사용하여 자연스럽게 떨어지게 하거나 미디어쿼리를 사용하여 해당요소를 작게 하는 등 여러 가지 방법을 이용하여 구현한다. 하지만 다른 사람의 작업물이거나 복잡하게 구현되어 있는 경우에는 어디서 부터 손을 대야 할지 감이 잡히지 않을 때가 있다. 더군다나 반응형을 구현하기 위해 디바이스별로 정해놓은 구간이 있는 상황에서 새로 레이아웃을 획정해야 하는 경우에는 난감한 경우가 발생한다. 애매한 구간에서만 동일한 비율로 간단하게 줄일 수 있다면 좋을 텐데 말이다. 이러한 경우에 간단하게 css의 zoom 프로퍼티를 사용하면 된다. zoom : 0.5; // 50% 촉소 zoom : 1; // 기본 zoom : 2; // 2배 확대 미디어쿼리를 사용하여..
-
Material UI와 Chakra UI의 차이점Dev/etc 2023. 5. 20. 22:10
기존 프로젝트에서 chakra UI를 이용하여 모달을 구현하였다. 그리고 다른 프로젝트에서 만들어놓은 모달을 그대로 사용하고자 하였는데 충돌이 발생하였다. 알고 보니 그 프로젝트에서는 이미 MUI를 사용하고 있었다. 스택오버플로우를 찾아보니 가능하면 UI 라이브러리를 함께 사용하지 말라고 하였다. 충돌을 방지하게 위해 나에게 더 맞는 UI 프레임워크를 고를려고 했다. 당연히 MUI는 유명하기 때문에 도입하고자 하였지만 반응형을 제어하기에는 너무나 불편하였던 경험이 있었다. chakra ui는 처음 써보는 것이었고.. 그래서 이 둘의 차이점을 알아보고자 한다. 아래는 chakra ui 레퍼런스에서 타 라이브러리를 비교하는 것 일부를 번역하였다. Material UI와 Chakra UI의 차이점은 무엇일까요..