짧은코딩

문제 상황 이번 프로젝트를 하면서 위 사진과 같은 화면을 구현을 했어야 했다. Feature, Changed 등 Type 마다 색을 다르게 지정했어야 했다. 코드는 map 함수로 돌아가고 있고, tailwind.json에 사용해야 하는 색들은 모두 지정되어 있었다. {arry.type} 따라서 나는 이렇게 코드를 줘서 배경색을 지정하려고 했다. 하지만 이 코드는 적용되지 않았다..! 코드가 문제가 있나 싶어서, 개발자 도구에서도 봤었지만 class는 잘 적용됐다. 해결 방법 나는 도저히 이해가 안 되가지고 구글링을 하였다. https://forsaken.tistory.com/entry/tailwind-template-literal-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%8A%A4%ED..

이번 프로젝트에서는 Kakao I Cloud(이하 KIC)에서 배포를 했다. 이유는 KIC를 지원해 줬기 때문이다! 사실 처음 CI/CD를 제대로 해보는 느낌이라 삽질을 많이 했다. 그리고 이전에 배포를 제대로 해 본 적이 없으니 기본적인 3 티어 기반으로 배포를 해봤다. 이 중에서 나는 프론트엔드 부분을 배포했다. 아키텍처 설계도 우선 우리는 이런 식으로 3 티어 기반의 설계를 하고 CI/CD를 했다. 주요 사용 Tool은 Jenkins, Docker, Dockerhub, GitHub, Nginx 등이며, 깃허브에 main 브랜치에 push가 되면 자동으로 배포가 되게 설계하였다. key pair KIC를 이용하기 위해서 가장 먼저 해야 할 일은 key를 발급받아야 한다. key를 발급받으면 publi..

23.08.11(월) 한 일 KIC 삽질 JWT 삽질 api 삽질 할 일 CICD api 연동 문제점 모든게 문제 23.08.12(화) 한 일 젠킨스 파이프라인으로 배포 성공 배포 환경에서 toast ui editor 안되는 문제 해결 제품 리스트 모달 api 연결 할 일 헤더 제품 리스트 모달 수정 로그인 후 제품 리스트 불러오기 멤버 초대 페이지 완성하기 url 인코딩 문제 그 외 나머지 api 연동 문제점 시간이 너무 없음 23.08.13(수) 한 일 제품 멤버 프로젝트 생성, 완료 헤더 제품 불러오기 할 일 그룹 페이지 프로젝트 멤버 변경 사항 문제점 시간이 없음 23.08.14(목) 한 일 마감 전 전체적인 버그 수정 할 일 마감 전 전체적인 버그 수정(끊임이 없다..!) 문제점 밤 새서 정신이..

23.08.07(월) 한 일 릴리즈 노트 페이지 + 에디터 다크 모드 완료 + 테스트 완료 제품 멤버 관리 페이지 프로젝트 그룹 멤버 관리 페이지 할 일 프로젝트 그룹 멤버 관리 페이지 마무리 로그인 회원가입 하기 문제점 프로젝트 그룹 멤버 관리 페이지 url 문제(원인은 알음) 23.08.08(화) 한 일 로그인, 회원가입 api 연동 헤더 반응형 할 일 토큰 저장 위치 수정 다른 api 연결 리프레시 토큰 활용 생각하기 문제점 속도가 좀 느림 23.08.09(수) 한 일 로그인, 회원가입 완벽 구현 마이페이지 닉네임, 이름 수정 할 일 KIC 다른 API 연결 문제점 너무 피곤함 23.08.10(목) 한 일 url encodeURI로 바꾸는거 하나 성공함 Dockerfile 계속 시도 중 할 일 ur..

23.07.31(월) 한 일 릴리즈 노트 페이지 만드는 중 editor 라이브러리 더 예쁜거 찾고 적용함 할 일 editor 라이브러리 좀 더 커스텀 릴리즈 노트 페이지 테스트 배포 얘기해보기 문제점 나태함 23.08.01(화) 한 일 전반적인 글씨 크기 조절 editor 라이브러리 커스텀 삽질 할 일 editor 라이브러리 커스텀 하기 문제점 나태함 23.08.02(수) 빠지 여행~~~ 23.08.03(목) 빠지 여행~~~ 23.08.04(금) 한 일 빠지 감 할 일 에디터 마무리 멤버 페이지 문제점 놀아서 행복함!

23.07.24(월) 한 일 마이 페이지, 로그인 테스트 코드 작성 절대 경로 설정 회원가입 페이지에서 인증 시간 이상한거 수정 할 일 절대 경로 설정 시 jest에서 문제가 발생하는거 해결 멤버 페이지 antd message가 modal 뒤로 가는 문제점 수정 문제점 jest 절대 경로 설정이 잘 안됨 23.07.25(화) 한 일 jest 절대 경로 해결 중첩 라우터로 url 구현 Workspace 뼈대만 잡음 할 일 프론트엔드 문서화 수정 Workspace 컴포넌트 UI antd message 뒤로 가는 현상 해결 문제점 antd message가 chakra modal보다 뒤로 가는 원인을 잘 모르겠음 23.07.26(수) 한 일 제품 생성 모달에서 이미지 upload 고침 프론트엔드 문서 수정 할 ..

23.07.17(월) 한 일 로그인, 비밀번호 찾기 페이지 생성 회원가입, 테스트 코드 작성 할 일 마이, 멤버 페이지 문제점 로그인 테스트 코드는 구글 로그인 provider가 있어서 테스트가 실패 23.07.18(화) 한 일 로그인, 회원가입 스타일 수정 마이 페이지 80% 만 할 일 마이 페이지 완성 멤버 페이지 만들기 문제점 이미지를 원형으로 잘라도 원형으로 저장되지 않음 비밀번호 찾기 모달 만들어야됨 23.07.19(수) 한 일 다크모드 시 흰색 배경 쓰는 레이아웃 수정함 스크롤 바 autohide로 되게 수정함 mypage에서 modal chakra 다크 모드 적용 및 ui디자인 할 일 mypage에서 회원 탈퇴 모달 모달에서 message 띄울 때, antd message 뒤로 사라지는 버그..

1주차와 2주차 수욜까지 나는 프론트 세팅(테스트까지 다 완료), 테일윈드 css, 도커, 엔진엑스 다함, 로그인, 회원가입 개발할 예정 이렇게 하였다. 스크럼을 제대로 쓰지 않은 이유는 각자 다들 분업하여 개발 전 피그마, 요구 사항 정의서 등을 작업했기 때문이다..! 23.07.13(목) 한 일 signUp 페이지 UI 거의 다 만듬 tailwind css 활용법 생각 좀 함(https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply, https://velog.io/@hokim/React-3-Tailwind-커스텀하기) 할 일 button type 문제 해결 login, signup 페이지 UI 만들기 + 기능 구현 문제점 갑자..

이번 프로젝트에서 “/workspace/:product”와 “/workspace/:product/:project” 이런 url을 사용하고자 했다. 이를 위해선 중첩 라우터를 이용하는 방법과 workspace 컴포넌트를 만들고 각 페이지마다 workspace를 부모 태그로 주는 방식 2가지가 있다. 우리는 “/workspace”라는 공통적인 url을 사용하기 때문에 중첩 라우터를 사용하는 것이 더 적절하다고 판단하여 중첩 라우터로 구현하였다. App.tsx 우선 이렇게하여 ”/workspace”에서 url이 뻗어나가도록 했다. Workspace.tsx import React from 'react'; import { Outlet } from 'react-router-dom'; export default fu..

https://velog.io/@hunmok1027/vite-에서-절대경로-설정하기 처음엔 위 블로그 보고 설정했다.(블로그 주인님께 감사) 잘되는가 싶었는데 내 프로젝트에서는 jest에서 에러가 발생했다..! 문제점 jest에서는 절대 경로를 설정한 파일을 또 불러오지 못한다. 따라서 따로 설정이 필요하다. 해결법 package.json "jest": { "moduleNameMapper": { "^@/(.*)$": "/src/$1" } } 이렇게 설정하여 jest의 절대 경로를 설정했다. 테스트 코드 파일 import UserManageModal from '@/components/Member/MyPage/UserManageModal'; 그리고 import 할때, 경로를 @/components 이렇게 불..