분류 전체보기124

• 

  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.

• 

  [Tars] 회고록 12일차 - rebase, PR, 나의 실수들 오랜만에 회고록을 작성하게 되었다. 지금까지 있었던 일들이 너무 사소한 일들이라서 한꺼번에 올리고자 블로깅을 미뤄두고 있었다. git pull --rebase 할 때 기존의 코드 그대로 커밋히스토리에 남는 현상 내가 PR을 올리고 dev에 git pull --rebase origin dev를 하면 기존의 코드가 똑같이 한번 더 커밋이 되는 현상이 있었다. 그래서 PR을 삭제하고 처음부터 다시 PR을 올렸는데 동일한 현상이 나타나서 팀원들과 함께 내가 rebase 하는 걸 보았다. 다행히도 문제점은 바로 찾았는데 git pull --rebase origin dev 충돌해결하고 git rebase --continue 까지는 괜찮았는데 마지막에 push를 할 때 vscode의 소스제어부분을 통해서 push를 .. 프로젝트/Tarss 2024. 3. 21.

• 

  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.

• 

  데이터받아올 때 특정 단어 색 변경하기 문제점 데이터를 받아와서 메시지를 출력하는데 특정 단어의 색만 변경을 해야했다. 한줄로 표현을 하면 아래와 같이 표현이 가능하다. 무엇을 할지명확해야 하고 하지만 객체로 데이터를 받아오는 경우 특정 단어의 색을 변경해야하는 방법을 몰랐다. { id: "time", message: [ `이제 본격적으로 습관을 구체화 시켜볼까요?`, `습관 약속은 시간, 장소, 행동으로 구분돼요.`, `그리고 그 약속은 \n1. 무엇을 할지 명확해야 하고\n2. 하고 싶도록 매력적이며\n3. 쉽게 할 수 있어야 하고\n4. 하고 난 뒤 만족스러워야 합니다.`, `최대한 4가지 원칙에 맞게끔 습관을 만들어 볼까요?`, `먼저 시간을 정해 볼게요!`, `다른 일에 방해 받지 않는 시간 혹은 매일 지키기에 수월한 시간으로 설정해.. 개발/React 2024. 3. 12.

• 

  [Tars] 회고록 11일차 오늘은 프론트 회의를 하면서 받았던 세세한 피드백을 작성해보겠다. 숨겨진 conversation PR에서 숨겨진 conversation을 모르고 그냥 지나쳤다. 가끔 이렇게 숨겨져 있으니깐. PR은 꼼꼼히보자. 강제머지는 왠만해서 하지말자. 프로젝트에서 머지를 할때 3명의 승인을 받아야 머지가 가능하게 세팅을 해놓았다. 나는 2명의 승인을 받았었고 1명의 수정사항만을 고치면되서 코드를 수정하고 강제머지를 시도했었다. 하지만 팀원에게 이렇게 하면 안된다고 피드백을 받았다. 수정된 코드가 잘 못된 코드일 수도 있고 다른 팀원은 무엇이 수정된지 모르기 때문이다. PR의 머지가 느리더라도 천천히 기다려보자. 적용이 안되는 css코드 제거 후 PR 코드리뷰를 할 때 제거가 되어도 전혀 상관없는 css코드들이 너무.. 프로젝트/Tarss 2024. 3. 12.