개발78

• 

  [github] 쌩 초보자를 위한 팀 프로젝트 github 사용법 이 글에서는 완전한 초보 개발자를 대상으로 Git과 GitHub이 왜 중요한지, 사용하는 주된 이유들을 쉽게 설명하고자 합니다. 0. Git과 GitHub을 사용하는 이유 버전 관리: Git을 사용하면 코드의 이전 버전으로 쉽게 돌아갈 수 있으며, 어떤 변경사항이 언제, 누구에 의해 만들어졌는지 정확하게 알 수 있습니다. 협업: 여러 개발자가 동시에 하나의 프로젝트에 참여할 수 있습니다. 각 개발자는 자신의 로컬에서 작업을 하고, 완료된 작업을 공유하여 다른 사람들과 통합할 수 있습니다. 백업과 보안: GitHub은 클라우드에 코드를 저장하기 때문에 컴퓨터의 문제로 데이터가 손실되는 일이 없습니다. 또한, 중요한 프로젝트를 비공개로 설정하여 보안을 유지할 수 있습니다. 오픈 소스 프로젝트: GitHub은.. 개발/github 2024. 4. 18.

• 

  [github] 브랜치 룰 설정하기 개발 프로젝트에서 협업을 할 때 룰이 정해지지 않으면 아주 개판이 됩니다. 여러가지 룰 중에서 브랜치 룰이라는 것이 있는데 repository의 브랜치 룰을 설정하는 겁니다. 1. 브랜치 룰 설정하기 repository의 탭에서 Settings -> Branches -> Add rule을 눌러서 브랜치 룰을 추가합니다. 그러면 아래와 같은 화면이 나오는데 Branch name pattern에 자신이 설정하고 싶은 브랜치명을 넣어주면됩니다. 특정경로의 모든 브랜치에 적용하고 싶다면 *를붙이면 됩니다. ex) Feat* : Feat 로 시작하는 모든 브랜치에 적용됩니다. 그 후에 아래에서 설정하고 싶은 룰을 선택하면 됩니다. 2.  브랜치 룰 설명 1) Require a pull request before.. 개발/github 2024. 4. 16.

• 

  [github] github 대소문자 가릴줄 알게 만들기 PR을 올렸는데 netlify 배포가 실패했습니다. 이유가 무엇인지 링크를 타고 들어가서 읽어보니 OnBoardingPage -> OnboardingPage로 바꾸어서 에러가 생겼습니다. 참고로 저는 저 링크 타고 가면 흰 배경만 나오는데 시크릿모드로 들어가면 잘 뜹니다. github은 기본적으로 대소문자 구분을 못 한다고 하니 대소문자를 구분할 수 있게 만들어 보겠습니다. 1. 대소문자 구분 코드 $ git config core.ignorecase false 이 명령어는 github에게 대소문자를 구분하라고 명령을 내립니다. 2. git 추적 변경 $ git rm -r --cached . Git 추적 목록에서 모든 파일들을 제거합니다. 하지만 실제 파일들은 작업 디렉터리에 남깁니다. 이렇게 함으로 대소.. 개발/github 2024. 4. 3.

• 

  React Bootstrap 디자인 적용안되는 이유 아래의 그림처럼 react-bootstrap의 form을 그대로 복붙했는데도 적용이 안 되었다. 이상해서 한참 찾아보니깐. App.js에 import를 해줘야지 적용이 되는거였다. 안될때는 당황해서 이것저것하지말고 공식문서를 처음부터 찬찬히 읽어보자... 개발/버그일지 2024. 4. 1.

• 

  이미지에 커서 올렸을 때 커지게 하기 이미지에 커서를 올렸을 때 이미지의 크기가 적당한 크기로 커졌으면 했다. 아주 쉬운 코드이지만 다음에 기억이 안 날 것 같아서 정리를 보았다. transition을 사용해서 이미지가 변경되면 0.3초에 걸쳐서 서서히 변화하도록 하였다. img:hover로 img에 마우스가 올라가면 transform: scale(1.1); 기존 크기보다 1.1배 커지도록 하였다. .img { transition: transform 0.3s ease; } .img:hover { transform: scale(1.1); } 적용된 코드 이미지에 마우스를 올려보세요! 개발/CSS 2024. 3. 29.

• 

  ProgressBar를 <progress> 태그로 만들기 아래의 정체성 버튼을 누르면 상단의 프로그래스바가 채워지는 페이지를 만들었다. 팀원이 프로그래스바를 컴포넌트로 만들지말고 태그가 있으니 이걸 이용해서 만들어보라고 조언해주어서 변경을 해보았다. 기존의 코드 totalClicksNeeded -> 전체 클릭 수 currentClicks -> 현재의 클릭 수 전체 클릭 수를 현재 클릭 수로 나뉘고 100을 곱해서 현재의 %를 구하였다. const calculateProgress = () => { return (currentClicks / totalClicksNeeded) * 100; }; %를 width로 보내서 %만큼 width가 채워지게 만들었다. & > div { height: 4px; width: ${calculateProgress}%; backgrou.. 개발/HTML 2024. 3. 26.

• 

  git pull --rebase 하는법 rebase를 하는 이유 PR을 할 때 pull을 하면 받아온 파일의 커밋 기록까지 남는다. 커밋 기록이 남으면 pull 받아온 부분도 files changed에 남기 때문에 코드리뷰를 하기 어려워진다. 또한 commit history가 지저분해져서 이전의 커밋을 다시 보기 어려워진다. 그래서 rebase를 하여 깔끔한 PR을 만들어보자. git pull --rebase 하는 법 git pull —rebase origin {가져오고 싶은 브랜치명} 충돌 해결 (충돌해결 시 기존의 커밋메시지명을 유지한다.) git rebase —continue ... 충돌 해결과 git rebase --continue 반복 git push origin {브랜치명} —force git pull —rebase origin {.. 개발/github 2024. 3. 19.

• yarn dlx @yarnpkg/sdks vscode 후에 타입설정 안되는 현상 문제점 yarn dlx @yarnpkg/sdks vscode cmd + shift + p 누르고 typescirpt의 설정을 바꿔주어야하는데 설정을 바꾸는 옵션이 안 뜨는 문제가 있었다. 터미널을 보니깐 아래와 같은 에러가 뜨고있었다. YN0001: Error: Your application tried to access color-convert, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound. Required package: color-convert Required by: /Users/parksanghyun/.yarn/berry/cache/ansi-styles-npm-4.3.0-245.. 개발/버그일지 2024. 3. 18.

• 

  Nickname 설정을 위한 유효성 검사(이모지 완전히! 막기) Tars프로젝트를 진행하면서 Nickname의 유효성 검사 함수를 만들어야 했는데 생각보다 시간이 많이 들어가서 블로깅을 해보았다. 특히 이모지를 input에 입력조차 안되게 해야했는데 input.length가 자꾸 생성되어서 곤욕스러웠다. 기획에서 요구한 Nickname 설정 규칙은 다음과 같다. 허용 한글, 영어, 특수 문자, 숫자 허용 외자(귤, ㅎ) 허용 닉네임 중복 허용 제한 띄어쓰기 불가 - 띄어쓰기 막아버리기 이모지 불가능 - information에 “이모지는 사용할 수 없어요“ 빨간색으로 변경, 이모지 지우면 기존으돌아감 8자 제한 - 8자초과해서 입력 안되도록 공란 - 확인 버튼 비활성화 닉네임 중복 허용하기 때문에 onChange가 될때마다 유효성검사가 되도록 원하였고 8자 제한을 하며.. 개발/React 2024. 3. 13.

• 

  마크업형식의 데이터 받아와서 보여주기 문제점 좌측의 사진처럼 메시지가 string형식으로 올 때도 있지만 우측의 사진처럼 마크업형식으로 보내야할 필요가 있었다. 2024.03.12 - [개발/React] - 데이터받아올 때 특정 단어 색 변경하기 이전의 블로깅한 것과 비슷하게 마크업형식으로 데이터를 보내고 dangerouslySetInnerHtml을 사용해서 표현하고자 하였다. 해결책 message를 string형식이지만 마크업형식으로 데이터를 전달했다. dangerouslySetInnerHTML를 사용하면 HTML으로 작동되기 때문에 HTML형식에 맞는 style을 주입하였다. { id: 0, message: '', }, dangerouslySetInnerHTML 출력 PS 대표 사진에 있는 것처럼 하기 위해서는 상당히 긴 데이터를 보내야.. 개발/React 2024. 3. 13.