쭈

💥 오픈소스 구성원 역할1) 저작자 : 오픈 소스 프로젝트를 만든 사람/조직 2) 메인테이너 : 프로젝트의 방향을 알고 있거나 직접 설정하고 프로젝트를 관리하는 컨트리뷰터 3) 사용자 : 오픈 소스 프로젝트를 사용하는 사람 4) 컨트리뷰터 : 오픈 소스 프로젝트에 컨트리뷰션(기여) 활동을 하는 모든 사람 5) 커미터 : 리뷰하는 컨트리뷰터로써 프로젝트에 반영할 지 말 지에 대한 결정 권한도 가지고 있는 컨트리뷰터 6) 그 외 다수... 💥 컨트리뷰션 활동 유형보통 오픈 소스 프로젝트 기여를 했다고 하면 코드에 한정적으로 구현을 하거나 수정을 했다고 생각을 한다.하지만 '프로젝트 기여' 라는 큰 틀을 담고 있기 때문에 코드에만 한정되는 것이 아닌 프로젝트 결과물이 나오기 까지의 모든 과정에서의 활동을 ..

💥 오픈소스 코드 공개 시(feat. 깃허브 가이드) [ 오픈소스 가이드 사이트 ]https://opensource.guide/위에 적어놓은 오픈소스 가이드 사이트를 들어가보면 이렇게 궁금한 부분들이 다 적혀있다.가장 궁금해할 부분인 "깃허브에 있는 프로젝트는 모두 오픈 소스인가?" 에 대한 답도 적혀있다."깃허브 프로젝트를 공개하는 것은 프로젝트에 라이센스를 부여하는 것관 다르다" 라는 답이 적혀있다.외부인이 프로젝트를 보고 fork 를 할 순 있지만 그 외의 작업에 대한 권한은 없다는 것이다.즉, 다른 사람이 내 프로젝트를 사용, 배포, 수정, 기여를 하도록 하고싶으면 오픈 소스 라이선스를 포함해야만 한다는 것이다.그리고 마지막의 글을 보면 "공개된 코드일 지라도 귀하가 명시적으로 권한을 부여하지 ..

💥 오픈 소스누구나 특별한 제한 없이 공개가 되어 있는 소스 코드이다. 검사(리뷰), 수정 등 개선사항을 마음껏 펼칠 수 있다.하지만 무료다! 라고 할 순 없다. Pro 처럼 유료 결제가 필요한 것도 있기 때문이다.그럼 이렇게 오픈 소스 라는 단어는 왜 생겼을까? 내가 힘들게 만든 코드는 나만 쓰는 게 좋지 않나? 라고 생각할 수도 있겠지만,대중적으로 개발 분야에는 서로의 코드를 리뷰하고, 사용해보고, 수정하는 문화가 있다.이렇게 리뷰, 수정, 사용을 하면서 다른 개발자들의 시선을 합치는 것이다. 시선을 합치면 뭐가 좋은데?🤷‍♀️ 라고 한다면,내가 찾지 못한 버그를 찾을 수도 있고, 내가 생각지 못한 아이디어를 얻을 수 있고, 코드가 업그레이드 될 수도 있다.개발 문화는 이러한 장점을 갖고 있다. ..

💥 리뷰 섹션1. MainReview.tsximport { 생략 }import Slider from "react-slick"import "slick-carousel/slick/slick.css"import "slick-carousel/slick/slick-theme.css"interface Props { reviews: IBookReviewItem[]}function MainReview({ reviews }: Props) { const sliderSettings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 3, gap: 16,..

2025.02.17 - [웹 개발 공부하기] - [02.11] 모킹 서버2025.02.17 - [웹 개발 공부하기] - [02.11] 도서 상세 - 리뷰💥 드롭다운import React, { useEffect, useRef, useState } from "react"import styled from "styled-components"interface Props { children: React.ReactNode toggleButton: React.ReactNode isOpen?: boolean}function Dropdown({ children, toggleButton, isOpen = false }: Props) { const [open, setOpen] = useState(fal..

💥 리뷰 목록 구현하기1. BookReview.tsximport { BookReviewItem as IBookReveiwItem } from "@/models/book.model"import styled from "styled-components"import BookReviewItem from "./BookReviewItem"interface Props { reviews: IBookReveiwItem[]}function BookReview({ reviews }: Props) { return ( {reviews.map((review) => ( ))} )}const BookReviewStyle ..

💥 모킹 서버(Mock Service Worker)1) MSW 자바스크립트 라이브러리2) 존재하지 않는 API에 대한 응답을 모킹3) service worker 에서 요청을 처리4) chrome 기준 devTool의 Application /Service workers 의 "Bypass for network"로 일시 정지 1. book.model.tsexport interface BookReviewItem { id: number; userName: string; content: string; created_at: string; score: number;}원래의 book.model.ts 파일에 BookReviewItem 인터페이스를 추가해주었다. 2. review.api.tsim..

2025.02.16 - [웹 개발 공부하기] - [02.10] Book-Shop(Front) - 중간 회고  1) alias 적용2) 중복코드 제거3) 스니펫 만들기4) useAuth 훅 만들기5) react-query 적용6) 다양한 UI 경험 1. alias 적용 하위 컴포넌트를 import 해오면서 상대경로로 적혀있었다.새로운 폴더, 파일들을 만들면서 가장 최근에 만든 파일들을 보면 상대경로가 굉장히 복잡해졌다.../../ 이런 식으로 상대경로의 뎁스가 깊어지고 있다. 이렇게 되면 점점 복잡성이 늘어진다면 import 관리도 힘들어진다.그래서 상대경로들을 절대경로로 바꾸었다. craco와 craco-alias 를 설치해서 사용했다.그 다음, tsconfig.json 파일에 상대경로를 절대경로로 바꾸..

💥 회고의 중요성1) 성장과 학습2) 문제 해결3) 유연성과 적응성4) 퍼포먼스 향상 => 더 잘하기 위해서! 💥 주요 학습 주제1) 타입과 모델2) 데이터 흐름3) 컴포넌트 작성4) css 스타일링5) 커스텀 훅 1. 타입과 모델 [타입과 모델] 에서 중요한 부분은 theme, model, 사용법 이다. theme는 theme.ts로 설명을 하려한다.그 중에서도 Record 항목을 중요하게 생각한다. color를 보면 ColorKey를 미리 타입으로 정리했다.그냥 string 으로 정의해도 되지만 string이 아닌 정해진 키를 사용하겠다 라고 선언 함으로써 추후에 프로젝트가 확장이 되고 많은 변화가 생길 때 겪을 수도 있는 사이드이펙트(Side Effect)를 방지할 수 있다.사이드이펙트는 프로그..

💥 스니펫(Snippet)vscode는 반복적으로 입력해야하는 정보에 대해 Snippet을 지원한다.하단 [환경설정] - 사용자 코드 조각(snippets) - typescriptreact.jsontypescriptreact.json에 스니펫을 등록하고 특정 키워드를 입력해서 입력을 바로 할 수 있다.typescriptreact 처럼 확장자에 대응하는 json 파일들이 존재한다. 근데 json 파일들에 직접 내용을 넣으려면 이렇게 코드가 복잡해지고 개행문자도 따로 파싱해야한다.그래서 스니펫을 쉽게 만들어주는 Snippet Generator 를 써보려고 한다.  💥 스니펫 등록Home이 들어가야하는 부분을 멀티셀렉트 한 후, $1을 입력한다.멀티셀렉트는 Home 부분을 더블 클릭 후, 바꾸고 싶은 만큼..