진행중인 프로젝트에 스토리북 도입하기.

왜 스토리북을 도입하려고 하였나요? 내가 구현해야하는 UI이다. 그리고 아래 UI는 이미 구현해둔 UI 이다. 비슷하지만 조금다른 이 컴포넌트를 재활용하려고 했다. 하지만 HTML로 일일히 만들어둔 컴포넌트가 내가 원하는 형태인지 확인하는 과정이 귀찮았다. 이를 storybook을 사용했을 때 더 빠르게 확인이 가능하고 나는 확인된 컴포넌트로 UI를 완성만 하면 된다. 이러한 장점으로 인해 storybook을 도입하자 라고 판단하였다. Storybook 설치 프로젝트에 루트에서 다음 명령어를 실행시킨다. npx storybook init 그러면 루트에 .storybook 폴더와 src/stories 폴더가 생성된다. 나는 src/stories 폴더는 삭제했다. 그 이유는 각 컴포넌트 폴더안에 해당 컴포넌..

Request failed with status code 422

로그인, 회원가입 요청을 하는데 422 에러가 계속 생겼다. 이미 기존에 프로젝트를 진행하시던분이 동작했다고 하신 코드여서 갇힌 생각을 해버렸다. 422는 파라미터 형식에러인데, 나의 문제의 경우에는 json key 이름이 달라서 에러가 발생한 것 이다. 아 ㅋㅋㅋ.. 나는 오늘 세상이 밉다.

[openVidu] 카메라 권한 이슈

openVidu로 음성채팅을 구현하려고 합니다. openvidu-insecure-react 튜토리얼을 따라하고 있는데 이슈가 생겼습니다. https://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-react/ openvidu-insecure-react - OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io 크롬에서는 마이크나 캠을 사용하겠느냐라는 권한여부를 묻지 않습니다. 저만 그런건가요? 그래서 깃허브 이슈에 질문을 드렸습니다. 제가 권한을 수락하지 않아서 생긴 오류라고 합니다. 그런데 선생님! 권한여부를 묻지 않는다..

for문 안에서 await

for 문 안에서 비동기 요청을 해야하는 상황이였다. 그런데 다음처럼 i = 1 일때 먼저 콘솔로 출력되는 모습이다. 왜 그런지 생각해보면 i = 1 일때는 i = 0 일때와 비교했을때 더 가져올 값이 적기때문에 빨리 응답이 오기때문이 아닐까? 라고 생각했다. 하지만 나는 이렇게 중구난방으로 데이터가 와버리면 처리하기가 어렵다. 그러므로 await 를 사용하여 순차적으로 데이터가 응답받을 수 있도록 했다.

무작정 따라해본 Redux toolkit (1)

https://www.youtube.com/watch?v=bbkBuqC1rU4&t=149s Store.js import { configureStore } from "@reduxjs/toolkit"; export const store = configureStore({ reducer: {}, }); Slice 슬라이스라는 걸 배웠는데 useReducer를 사용할 때 처럼 초깃값을 넣어주나보다. 감속기를 장착한다나 뭐라나.. 전역 state 가 어떻게 변하는지 확인할 수 있다. 이것때문만이라도 쓸 수 있을 것 같다. 너무 편리한 기능이다. useSelector를 사용해서 하나의 값에 접근할 수 있었다. 그냥 구조분해 할당을 사용할 수 도 있었다. https://heroicons.com/ Heroicons Be..

export default vs export

공부를 하다가 export 와 export default 때문에 오류를 경험하였다. export default 로 선언된 컴포넌트는 다음 처럼 구조분해할당을 사용할 수 없다. 어차피 export default 가 하나를 export 하는 것을 의미하니까 말이다. 아래 코드가 올바른 코드 이다. 그리고 export default 는 import 할때 내가 원하는 이름으로 가져올 수 있다만 export 같은 경우에는 아래 코드처럼 as 를 통해 바꾸어주어야한다. import { MyFirstClass as BlahBlahClass, MySecondClass } from './MyClass' 참고자료 https://medium.com/@_diana_lee/default-export%EC%99%80-named-..

M1 프로 윈도우 마우스 키보드 연동

아 리덕스 툴킷 공부하다 재미가 없어서 딴짓을 해버렸다.. 최근에 맥북 노트북이랑 윈도우 노트북을 사용하고 있는데 (아이패드는 덤) 마우스와 키보드 하나로 모든 기기를 사용하고 싶었다. 로지텍 flow 사용하려했지만 (실패) 하지만.. 결국 방법을 찾았다 늘 그랬듯이.. Barrier 라는 오픈 소스를 설치한다. https://github.com/debauchee/barrier/releases Releases · debauchee/barrier Open-source KVM software. Contribute to debauchee/barrier development by creating an account on GitHub. github.com 아래의 블로그에서 굉장히 잘 설명을 해놓으셔서 저는 추가해..

React JSX 조건부 렌더링

https://velog.io/@hidaehyunlee/React-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-2-JSX%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%AC%B8-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%A0%8C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0 [React 리팩토링 #2] JSX에서 조건문 사용해 렌더링하기 리액트에서 if문을 사용하려면 즉시실행함수 형태로 사용해야하기 때문에 AND연산자가 훨씬 간편한 방법이 될 수 있다. velog.io 위 블로그의 자료를 공부한 내용입니다. 왜 조건부 렌더링에 대해 공부하게 되었나? 우선 상황에 맞게 다른 컴포넌트를 렌더링해야했습니다. 하지만 저는 삼항연산..

css 정중앙에 위치시키기

언뜻 보면 가운데 있는 것 같지만.. 아닌가 지금보니까 가운데 아니네 .. 가운데 일 수가 없는 이유가 top:35% left:30%를 주었기 때문이였다. 그래서 검색을 해본결과 top:50% left:50% 으로 주면 된다고 한다. 하지만 top:50% left:50% 안된다 ㅋㅋ 50% 50% 는 모달의 시작 지점이 바뀌는 것이다. 기존에 top:0 , left : 0 이었던 디폴트가 바뀌는 것이다! top: 50% , left: 50%로.. 그렇다면 저 모달녀석을 정중앙에 위치시키려면 어떻게 해야할까! margin-left margin-top 을 사용해서 모달 크기의 절반만큼 빼주면 된다. 이 보다 좋은 방법이 있으니.. 바로바로.. transform 을 사용하는 것이다. 위 방법보다 좋은이유는 반..

채팅 여러 ip로 테스트

chatBeforeModal.tsx