Dev
-
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라는 탭으로..
-
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..
-
원하는 태그 크기 확대/축소 하기(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의 차이점은 무엇일까요..
-
스크롤 해도 배경 이미지는 고정하기(background-attachment)Dev/CSS 2023. 5. 20. 22:07
전체 wrapper에 백그라운드 이미지를 주고, 스크롤했을 시 고정이 되게 하고 싶었다. 결론을 먼저 말하자면 한 줄의 코드로 이 기능이 구현되었다. background-attachment: fixed; -scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성. -fixed : 스크롤 시 보이는 페이지와 다르게 배경 이미지는 고정되는 속성. 하지만 모바일 브라우저에선 사용할 수 없고, 가끔 버벅거리는 듯한 느낌을 주며 스크롤이 내려간다. 해결책을 찾아보았다. 배경 레이어를 따로 나누어서 적용하기 //HTML // 배경 처리할 레이어를 따로 분리 // CSS .bg { position: fixed; // 배경 이미지가 아닌 배경 레이어를 고정 top: 0; ┓ left: 0; ┣ // 배경 ..
-
Alert창 이쁜 라이브러리 추천 - SweetAlert2Dev/NPM 2023. 5. 20. 21:57
웹 개발을 하다 보면 사용자에게 알림 창으로 필요한 정보를 알려줘야 할 경우가 자주 발생한다. 그래서 보통은 이러한 alert창이나 modal을 이쁘게 디자인하여 사용자에게 보여준다. 디자인 및 기능구현에 있어 생각보다 시간이 소요되는데 간편하고 이쁜 alert 라이브러리를 알게 되었다. 심플하게 사용할 수 있으면서 엄청 이쁘다! 심지어 애니메이션도 구성할 수 있다! 공식문서를 보면 테마도 추가할 수 있다. 최신 업데이트도 빠른 거 같고 매달 다운로드 수도 200만이 넘어간다. 공식문서도 엄청 이쁘고 설명을 잘 써놨으므로 꼭 공식문서를 보는 것을 추천한다. 아래는 유명한 블로그에서 예시를 만들어놔서 가져와보았다. 꼭 이 분 블로그 들어가보시길! SweetAlert2 Using sweetalert2... ..