분류 전체보기
-
scss 에서 global styles가 스토리북에 적용안되는 문제코드잇 2024. 5. 3. 16:22
Storybook에서 SCSS로 작성된 전역 스타일을 적용하려면, .storybook/preview.js 파일에서 해당 SCSS 파일을 import해야 합니다.예를 들어, global.scss라는 전역 스타일 파일이 있다면, 다음과 같이 import할 수 있습니다:import '../styles/global.scss'; 이렇게 하면, Storybook에서 global.scss 파일의 스타일이 적용됩니다.또한, SCSS 파일을 처리하려면 Storybook의 webpack 설정을 수정해야 합니다. .storybook/main.js 파일에서 webpackFinal 설정을 다음과 같이 추가하세요:이제 Storybook에서 SCSS로 작성된 전역 스타일을 적용할 수 있습니다. module.exports = { ..
-
[리팩토링] 클라이언트에서 쿠키 설정 js-cookie코드잇 2024. 3. 30. 15:38
이전에 올린 Taskify 프로젝트 리팩토링을 진행하였다. 토큰을 로컬스토리지에 저장했는데 이 부분을 쿠키에 저장하는 코드로 바꾸었다. 로그인 요청을 했을 때, 서버에서 accessToken을 header에 set-cookie로 보내지 않고 body에 저장해서 보내고 있었다. 그래서 이전 코드에서는 로컬 스토리지를 이용해 토큰을 저장했다. 로컬 스토리지에 저장할 경우 보안상의 위험이 있다고 한다. js-cookie 라이브러리를 이용하면 클라이언트에서도 쿠키를 저장하고 읽을 수 있다. api에서 리프레쉬 토큰을 주지 않아서 똑같이 보안상의 위험이 있다. 그래도 나중에 리프레쉬 토큰을 백엔드에서 줄 수도 있기 때문에 미리 토큰으로 저장하는 코드를 작성했다. 참조 링크 https://www.npmjs.com/..
-
[Taskify] 프로젝트 회고코드잇 2024. 3. 26. 15:00
개발 기간 : 3.8~ 3.25 거의 3주간의 프로젝트를 진행했다. 프로젝트 주제는 노션과 비슷한 일정관리 서비스이다. 😄 좋았던 점저번 프로젝트에서 문제점이었던 부분을 해결하려고 노력했다. hooks 사용을 해서 파일안에 기능적인 부분은 모두 hooks로 분리시켰고, 코드 가독성이 좋아졌다. 😢 아쉬웠던 점많이 나태해졌던 것 같다. 기능 구현을 일주일이면 가능하다고 예상했고, 시간이 남을거라고 생각해서 천천히 진행해버렸다.그리고 에러가 마주쳤을 때, 해결하지 않고 일단은 나중에 처리해야지 라는 안일한 생각을 가져버렸다. 문제 상황이 발생했을 때 해결 과정을 기록을 하지 않은게 아쉽다. 다음에는 문제가 왜 발생했는지. 어떻게 개선해 나갈 건지. 개선한 코드에 대한 설명을 정리하도록 작성해보자. ..
-
[위클리 회고] 3월 2주차위클리 회고 2024. 3. 17. 23:31
다음 주에 끝을 내야하는데 생각보다 구현을 많이 못했다. 새로운 기술을 쓰다보니 늦어지게 되는 것 같다. 👍 Keep - hooks를 프로젝트에서 처음 사용해보았다. hooks는 기능별로 나누거나 공통적으로 쓰일 때 나눌 수 있다. react에서 공통적으로 쓰이는 부분을 hooks로 따로 뺐다. 🥹 Problem - 꼼꼼함이 부족해졌다. 기능 구현에 집중하고 자잘한 부분은 나중으로 미뤄버리는 나쁜 습관이 생겼다. 👊 Try - 특히 api 요청 후 에러처리를 대충했던 것 같다. 나중에 하자고 하고 결국 못하는 경우가 저번 프로젝트 때 생겼기 때문에, 눈에 보이는 부분은 할 수 있을 때 하도록 하자. - PR을 잘게 나눠서 보내도록 노력해야겠다. PR 수정사항이 길어질수록 팀원들이 보기 힘들어 지기 때문..
-
[위클리 회고] 3월 1주차위클리 회고 2024. 3. 12. 13:13
목요일 부터 중급 프로젝트가 시작되었다. 이번 프로젝트에서는 공통 컴포넌트 나누기, hooks에 익숙해지는게 목표다. 👍 Keep - 팀원들과 공통 컴포넌트를 피그마로 잘 나누었다. 서로 겹치는 공통 컴포넌트를 따로 표시하였고, 공통 컴포넌트 역할 분배도 하였다. 🥹 Problem - 자리에 앉아서 공부를 시작하는게 힘들다. - 블로그를 2월 1일 이후로 작성을 안했다. - 이번 프로젝트에서 새로운 기술들을 도입했는데 아직 공부가 부족하다. 👊 Try - 공부 시작하는게 힘들 때, 자리에 앉아서 딱 10분만 집중해서 공부해보자. - 위클리 회고를 통해서 1주에 최소 한 번이상 블로깅을 할 생각이다. - 한 번에 다 학습하려고 하지말고, 필요할 때 학습하는 식으로 공부하자.
-
[오픈마인드] 프로젝트 회고록코드잇 2024. 2. 1. 20:33
오늘 프로젝트 발표를 했고, 프로젝트 일정은 끝이 났다. 오픈 마인드는 익명의 사용자들이 질문과 답변을 하는 서비스이다. 😄 좋았던 점 최대한 깃허브를 이용해서 작업한 부분이 좋았다. 개인 레포지토리를 파서 서로 포크하는 방식이 아닌 팀 레포지토리를 파서 포크하여 공동 작업자로 작업했었다. 이외에도 이슈들을 칸반보드로 오늘 할 일과 끝난 일 관리, 플랜트 플로우로 프로젝트 일정 관리, 위키 문서에 팀 규칙과 컨벤션 정리, 디스커션탭을 이용하여 팀원들의 회고를 정리했었다. 덕분에 깃허브에 대한 숙련도가 올라갔다고 생각한다. 깃허브 주소 https://github.com/OPENMIND-TFT/OPENMIND GitHub - OPENMIND-TFT/OPENMIND: 질문과 답변을 나누는 플랫폼 OpenMin..
-
[오픈마인드] 하위 컴포넌트 안에서 전체화면 모달 띄우기코드잇 2024. 1. 31. 15:53
하위 컴포넌트 안에서 전체화면 모달 띄우기 프로젝트 추가 기능으로 삭제 버튼 클릭 시 모달이 나오게 기능 구현했다. 하위 컴포넌트 안에서 모달을 만들고 width: 100%를 해도 컴포넌트 안에서만 모달이 생성된다. 하위 컴포넌트의 모달도 전체 화면에 가득차게 보여주고 싶다. z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; z-index만 넣으면 되는 문제였는데 context api를 써서 어떻게든 해결하려고 했던 것 같다. 여기서 top: 0만 썼었는데 left: 0을 추가시켜줘서 화면 끝에 오도록 맞춰주었다.
-
[오픈마인드] API 호출 시 새로고침 안되게 적용코드잇 2024. 1. 26. 22:49
이슈 : API에서 delete 메서드를 사용했을 때, 새로고침 해야만 데이터가 삭제 되는것을 볼 수 있었음. 해결 : `window.location.reload(true)` 쓰면 새로고침 되면서 데이터가 삭제된 것을 볼 수 있지만, 스크롤이 맨위로 올라가버리는 문제가 생긴다. 데이터를 삭제 했을 때 서버에서는 데이터가 삭제가 된 상태다. 그러므로 filter메서드를 이용해서 해당하는 값을 없애주고 클라이언트에 삭제한 것을 표시해주자. const deleteQuestion = async questionId => { const response = await fetch(`${API_BASE_URL}/questions/${questionId}/`, { method: 'DELETE', }); if (respon..