본문 바로가기

분류 전체보기

 (92)
Code contributor: 오픈소스 프로젝트 활용(2) 오픈 소스 라이선스 적용 방법프로젝트에 사용시➡️깃허브 레포지토리 Read.me 도 쓰지만대부분 License.txt 파일을 만들어 같이 배포한다.❗깃허브는 License 쉽게 적용하는데 도움을 주고 있었다❗https://docs.github.com/ko/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository 리포지토리 라이선싱 - GitHub DocsGitHub의 퍼블릭 리포지토리는 오픈 소스 소프트웨어를 공유하는 데 자주 사용됩니다. 리포지토리가 진정으로 오픈 소스가 되려면 다른 사용자가 소프트웨어를 자유롭게 사용, 변경 및 배포할 수docs.github.c..
Code contributor: 오픈소스 프로젝트 활용(1) 개발문화참여형 지식 공유 플랫폼 종류등Open Source 란"누구에게나 특별한 제한 없이"공개되어있는 소스 코드+검사(리뷰), 수정 등 개선사항을 마음껏 펼칠 수 있는 소스코드 🗝️오픈 소스일때 여러 개발자들이 참여하여여러 아이디어, 미처 발견하지 못한 버그의 해결 등으로 업그레이드가 된다❗❗ex) Node.js, 리액트, Apache, Bootstrap ...등 https://github.com/facebook/react GitHub - facebook/react: The library for web and native user interfaces.The library for web and native user interfaces. Contribute to facebook/react developm..
프로젝트: React(TypeScript) 기반의 동적 UI 개발(10) 메인 페이지hooks/useMain.ts전체 구현된 main page❄️리뷰 섹션전체 리뷰를 슬릭 캐러셀을 이용하여 보여준다. React Slick Carouselyarn add react-slickyarn add @types/react-slickyarn add slick-carouselyarn add slick-carousel @types/slick-carouselimport "slick-carousel/slick/slick.css";import "slick-carousel/slick/slick-theme.css"; https://react-slick.neostack.com/ Home | React SlickThe Last React Carousel You'll Ever Need!react-slick...
프로젝트: React(TypeScript) 기반의 동적 UI 개발(9)-MSW(모킹서버), Faker, React.Children.toArray(children), toast, 모킹 서버 작성(MSW)Mock Service Worker존재하지 않는 API에 대한 응답을 모킹service worker에서 요청을 처리chrome 기준 devTool의 Application / Service workers의 "Bypass for network"로 일시정지yarn add msw@latest --devhttps://mswjs.io/docs/basics/mocking-responses Mocking responsesLearn how to mock HTTP responses.mswjs.io❄️리뷰추가 구현npx msw init public/ --savemain.tsx💢process.env.NODE_ENV 를 사용하려고 하자'process' 이름을 찾을 수 없습니다. 노드의 형식 정의를 설치..
프로젝트: React(TypeScript) 기반의 동적 UI 개발(8)-회고, <Record k, v>. [key in k], 유틸리티 타입(Omit, Pick), KPT회고, path alias, react-query 작업 중간 회고🗝️회고를 하는 이유성장과 학습문제 해결유연성과 적응성퍼포먼스 향상➡️➡️더 좋은 코드 작성을 위함주요학습주제1. 타입과 모델theme.ts✨type을 단순한 타입이 아닌 유니온 타입으로 설정하고,interface에서 정의하여 사용할 때, 타입방어가 가능하여프로젝트가 확장하고 변화하면서 겪을 수 있는 사이드 이펙트를 미리 막을 수 있다.✨유니온 타입으로 설정한 type은 일일이 열거하기보다,Record  | [Key in K] 로 가져다 사용할 수 있다.✨type과 interface를 적절하게 사용하면 오류를 제한하고,확장성있는 구조를 만드는데에도 유용하다.✨테마로 정해놓은 light, dark의 객체가 존재하는데,dark는 light의 기본 정의를 스프레드 연산자로 가지고 오고dark에..
프로젝트: React(TypeScript) 기반의 동적 UI 개발(7)-axios interceptors, kakao 주소 API, <React.Fragment key={id}> 장바구니 목록사용자가 장바구니에 담은 내역을 확인선택한 도서 아이템의 수량과 가격 합계를 표시장바구니 담은 도서 아이템을 삭제각 도서 아이템을 선택하여 주문서 작성💢작성중 ERR_CONNECTION_REFUSED 에러가 뜸💢찾아보니 HTTP 응답을 클라이언트에 전송한 후, 다시 헤더를 설정하려고 할 때 발생하는 오류와 관련이 깊다고 했다. 문제는➡️로그인 후 토큰이 로컬 스토리지에 잘 저장이 되지만, 저장이 되기 전 서버로 요청을 보냈기 때문에, 토큰이 제대로 전송되지 않고, 코드를 다시 저장하거나, 새로고침시 토큰을 제대로 헤더로 보내는 상황이었다. 지금 새로고침없이 headersㅇ의 Authorization에서 토큰이 반영되지 않는 이유는Axios 인스턴스가 처음 생성될 때만 토큰을 가지고 오기 ..
프로젝트: React(TypeScript) 기반의 동적 UI 개발(6)-dayjs, styled $변수 전달 도서상세페이지도서 상세 화면 요구 사항각 도서 상세 정보를 노출좋아요 버튼을 클릭시 좋아요 또는 취소 기능수량을 입력하여 장바구니 담기날짜 포맷팅 해주는 외부모듈dayjs다른 라이브러리들에 비해 많은 기능을 포함하고 있고 가벼워 많이 사용한다.yarn add dayjs 💢💢BookDetail.tsx여기 코드에서, dl태그 아래로는 styled-components에서 모든 style이 먹지 않는다.!important를 해도 css코드 자체를 웹에서 읽어오지를 못한다.찾아봐도 이유를 알 수가 없다.그래서 일단 inline에다 다 넣었다.💢dl의 위치가 잘못되어 css가 먹지 않았다..위치를 수정하고 dl 이하로 설정한 css가 모두 잘 먹는 것을 확인했다.상세설명 더보기지금 코드에서 expanded의 ..
프로젝트: React(TypeScript) 기반의 동적 UI 개발(5)-비밀번호 초기화, zustand, 쿼리스트링 비밀번호 초기화auth.api.tsresetRequest로 이메일이 있는지 판별하고,resetPassword로 변경한 비밀번호로 초기화 해주는 코드를 구현💢지금 방법은 모킹버전이기 때문에,실무에서는 토큰을 같이 보내거나하는 일이 있지만실습이기때문에 간소화하게 했다.ResetPassword.tsxSignup.tsx와 구조가 비슷해서 복붙해서 수정해서 사용했다.status 200으로 원래 1111이던 password가 1234로 변경이 된 것을 볼 수 있다.로그인과 전역 상태관리zustandyarn add zustand도서 목록 페이지도서 목록 화면 요구 사항도서(book)의 목록을 fetch하여 화면에 렌더페이지네이션을 구현검색 결과가 없을 때, 결과 없음 화면 노출카테고리 및 신간 필터 기능을 제공목록..

티스토리툴바