전체 글124

• 

  [Tars] 회고록 10일차 브랜치 프로젝트를 하면서 브랜치를 너무 남발하였다. 지금 상황이 A브랜치를 완성하기 위해서 다른 분이 모달을 만들 때까지 기다려야해서 B브랜치를 만들고 작업하다가 또 기다려야 되서 C브랜치를 파서 작업을 하고 막 이런 식으로 개발을 하니깐 pull을 어떻게 받아야할 지 까먹기도 하고 브랜치 이곳저곳을 가면서 개발을 하려니깐. 어지럽다. 빨리 PR을 해버리고 브랜치를 최소화하자. 다음부터는 브랜치를 파면 다른 분들꺼를 기다리기보다는 바로 PR을 하고 다른 분이 완성되면 그때 따로 브랜치를 파서 해야겠다. 프로젝트/Tarss 2024. 3. 4.

• 

  [Tars] 회고록 9일차 - reduxjs/toolkit, 채팅페이지버튼, 닉네임필터 reduxjs/toolkit 어제 react-redux를 배우고 오늘은 reduxjs/toolkit을 배워서 블로깅을 하였다. 내일 프로젝트에 직접 적용할 예정이다. 무언가를 배워서 실제로 적용한다는게 참 기분이 좋다. 스택블리츠를 사용해서 블로깅을 하기 시작하였는데 예시를 보여주기 편하고 내가 배운 것을 적용하기가 너무 편해서 공부의 즐거움이 배가 되었다. 채팅 페이지 버튼 변경 기존에는 채팅메시지 밑에 버튼이 있었는데 좌측에 버튼이 있다가 우측에 버튼이 있다가 버튼이 여러개가 되었다가 너무 복잡해져서 PM과 디자이너를 불러서 하단에 버튼을 고정하자고 제안을 하였다. 그래서 하단에 버튼이 생기게 되었다. 다시 버튼을 변경해야되지만 이게 맞다고 생각된다. 공통버튼이랑 통일되는 색이 없고 위에 옵션들도 있.. 프로젝트/Tarss 2024. 3. 4.

• 

  react-redux와 비교하며 배우는 Redux toolkit 기초 사용법 Tars프로젝트를 하면서 유저의 정보를 저장할 전역 상태가 필요해서 redux toolkit의 필요성을 느끼게 되었고 여러 강의를 찾다가 근본 강의인 생활코딩님의 유튜브 강의를 들으면서 정리한 내용이다. redux -> react-redux -> reduxjs/toolkit 순서로 공부를 해서 이전에 배운 react-redux와 비교를 하면서 정리를 하였다. 생활코딩 유튜브 React-redux 1) react-redux로 import 해오는 것들 import { createStore } from 'redux'; import { Provider, useDispatch, useSelector, connet } from 'react-redux'; createStore : store를 만들 때 사용 Provi.. 개발/React 2024. 3. 4.

• 

  [Tars] 회고록 8일차 - redux onboardingPage를 만들면서 전역으로 상태관리의 필요성을 느끼고 있었다. 팀원이 redux toolkit을 사용해서 만들어 놓았는데 코드를 하나도 이해하지 못 하겠어서 redux부터 생활코딩님의 강의를 들으면서 공부를 하기 시작하였다. 생활코딩 - redux 강의 리덕스를 정리한 노션 4년전 강의라서 오래된 감은 있지만 기본적인 원리, 구조는 변경되지 않아서 정리를 하였다. 내일은 redux-toolkit강의를 듣고 실제로 Tars프로젝트에 적용을 해보자. 프로젝트/Tarss 2024. 3. 2.

• 

  [Tars] 회고록 7일차 - 채팅페이지 만들기 처음으로 채팅페이지를 만들어 보았는데 많은 시행착오가 있었다. 만들어야 하는 채팅페이지 특징 기본적인 채팅페이지가 아니라 채팅형식으로 사용자의 데이터를 알아내기 위한 페이지이다. 기본적인 구조 상대방(편의상 dev라고 부르겠다)이 채팅을 통해서 설명을 진행한다. 그때 사용자는 {습관 선택}과 같은 버튼을 누르면 다른 페이지 또는 모달이 떠 데이터를 가져오는 형식이다. 예외적으로 버튼이 여러개 있는 경우도 있었다. 데이터 구조 채팅에 대한 데이터를 저장을 위한 구조를 생각했다. 처음에 이 데이터를 어떻게 활용할 지 모르고 냅다 들이박아서 수정이 많았다. 다음에는 전체적인 그림을 먼저 그리자. 시도 1. 채팅 메시지만 배열에 넣기 무지성으로 이렇게 짜 보았는데 데이터를 가져올 때 숫자만 입력해서 어떠한 메시.. 프로젝트/Tarss 2024. 2. 28.

• 

  [Tars] 회고록 6일차 - git rebase 오늘은 내 파트는 많이 못 했지만 팀원들과 회의를 하면서 git에 대해서 상의를 하는 시간을 갖었다. PR을 merge를 할 때 반드시 rebase를 하라고 해서 하는 방법과 이유에 대해서 간략하게 정리를 해보았다. git rebase 해야하는 이유 우선 PR을 올릴 때 rebase를 안하면 pull받아온 파일의 커밋 기록이 남았다. 커밋 기록이 남으면 pull받아온 부분도 files changed에 남기 때문에 코드리뷰를 하기가 어려워지고 PR도 지저분해진다. 그래서 rebase를 하면 그 브랜치에서 작업한 부분만 files changed에 남아서 코드리뷰를 하기가 편하고 깔끔해진다. git pull rebase를 하는 방법 자신 브랜치에 있는 작업물을 가져오고 싶으면 git pull —rebase o.. 프로젝트/Tarss 2024. 2. 23.

• 

  git pull와 git pull --rebase의 차이점 git pull과 git pull --rebase는 둘 다 원격 저장소로부터 변경 사항을 가져와 로컬 브랜치에 적용하는 명령어이다. git pull 두 단계로 이루어지는데 먼저 git fetch를 사용하여 원격 저장소의 변경 사항을 로컬로 가져온다. 그런 다음 git merge를 사용하여 로컬 브랜치에서 가져온 변경 사항을 병합한다. 이러한 방식으로 병합하면 새로운 병합 커밋이 생성되어서 이력이 남아 나중에 변경사항을 자세히 알 수 있다. git pull --rebase git pull --rebase는 git merge대신 git rebase를 사용한다. 이 경우 로컬 브랜치의 변경 사항이 원격 저장소의 최신 변경 사항 위로 재배치되어서 이력이 한줄로 된다. 그래서 깔끔하고 이해하기 쉽지만 부모를 알 .. 개발/github 2024. 2. 23.

• 

  [Tars] 회고록 5일차 - 채팅페이지, 태그선택모달 오랜만에 글을 작성하였는데 그 동안 쉬었던 건 아니고 너무 바빠서 정신없이 하다보니깐. 블로깅하는 것을 까먹고 있었다. 그래서 부랴부랴 다시 작성하는 회고록 5일차!! 프로젝트를 만들다보니 chatGPT한테 부탁해서 되면 넣고 안되면 다시 물어보고 생각없이 코딩을 하고 있는 것 같아서 최소한 10분은 고민해보고 코드 입력해 본 다음에도 막히면 chatGPT한테 질문하는 식으로 프로젝트를 진행하였다. 아무생각 없이 ai한테 의존하면 발전할 수가 없다. Progressbar 2024.02.20 - [분류 전체보기] - Progressbar 만들기(with React, emotion) 프로그래스바도 만들었는데 transition을 넣어서 자연스럽게 바가 채워지도록 하려고했는데 안되었다. class가 변경되어야.. 프로젝트/Tarss 2024. 2. 22.

• 

  Progressbar 만들기(with React, emotion) CSS 부모 div는 width 100%으로하고 자식 div는 width에 변화를 주어서 progressbar를 만들려했다. progress: (percentage?: number) => css` width: 100%; height: 4px; background-color: ${theme.color.button_disabled}; & > div { height: 4px; width: ${percentage}%; background-color: ${theme.color.main_blue}; } `, 로직 프로젝트에서 11번 버튼을 누르면 100%가 채워져야 했다. const [percentage, setPercentage] = useState(100 / 12); const handleProgress = (.. 개발/React 2024. 2. 20.

• 

  input placeholder와 content 다른 색으로 만들기 닉네임을 입력하는데 placeholder는 회색, content는 검은색을 만들어야 했다. ::placehoder라는게 있어서 적용해봤다. HTML 삽입 미리보기할 수 없는 소스 개발 2024. 2. 18.