프로그래밍 공부하기

React에서 상태관리를 하기 위한 대표적인 라이브러리는 Redux이다. 리덕스는 위와 같이 Store, Dispatch, Reducer, Action으로 되어있어 하나의 상태를 저장하는 리덕스도 4개의 파일이 나오게되며 기존 리덕스에 하나의 액션을 추가하려면 3개의 파일을 수정해야한다. 이 것이 불편하다고 생각했던 사람들은 구조가 아닌 기능을 기준으로 파일을 분리하기로 하였다. 이 것이 Ducks 패턴이다. 1. 규칙 Ducks 패턴은 하나의 상태에 필요한 액션 타입, 액션생성자 함수, 리듀서를 한 파일에 저장한다. 따라서 하나의 액션이 추가되면 하나의 파일이 추가될 뿐이다. 구체적인 규칙은 다음과 같다. 반드시 reducer란 이름의 함수를 export default 한다. 반드시 action 생성자..

땅땅마켓 우리 동네 경매장 땅땅마켓에서 여러분들의 중고 물품을 등록해 경매 주최자가 되어보세요! 등록된 물품을 입찰하고 실시간 채팅을 통해 거래할 수 있습니다. 경매를 통해 원하는 가격으로 거래하세요! 주소: https://ttangttang.shop/ 깃허브: 백엔드 프론트엔드 백엔드: Node.js, socket.io, Multer, MySQL, Sequelize 프론트엔드: TypeScript, React Hooks, Redux, socket.io, Styled-Component, SCSS 배포: AWS CodeBuild, EC2(ELB), S3, CloudFront, Route53, Docker 기능: 로그인 지역기반 물품 검색 실시간 입찰 및 가격 변동 업데이트 경매 물건 등록 나의 경매 필터링..

프로젝트에서 모달창을 구현해야하는 일이 생겼다. 라이브러리를 이용해도 좋지만 직접 구현하는 것이 더 학습에 도움이 될 것 같아서 모달만들기 글 를 참고하여 직접 구현을 해보았고 만족스러운 결과가 나왔다. 1. 구조 모달창의 구조는 DImmer, OuterContainer, InnerContainer, Icon으로 구성된다. 각 요소의 역할은 다음과 같다. Dimmer 화면을 0.3투명도의 검은 화면 Div로 채운다. 다른 컴포넌트들보다 위에 위치 한다.(z-index) OuterContainer InnerContainer를 감싸고 있다. position을 fixed로 주어 스크롤을 내려도 위치를 유지시킨다. Dimmer보다도 더 위에 위치한다. InnerContainer Dimmer위에 떠있는 하얀 Di..