styled-components설치npm i styled-components style/theme.tslight 모드와 dark 모드의 css를 다음과 같이 지정한다.export type ThemeName = 'light' | 'dark';type ColorKey = 'primary' | 'background' | 'secondary' | 'third';interface Theme { name: ThemeName, color: Record;}export const light: Theme = { name: 'light', color: { primary: 'brown', background: 'lightgray', secondary: 'blue', ..
저작자 체크리스트상표권 침해를 피하기 위해 프로젝트 이름은 중복되지 않아야 한다. 또한, 프로젝트 이름은 기능이 명확하게 나타나도록 지어야 한다.회사 프로젝트라면 사내 법무팀이나 오픈 소스 담당 팀에게 자문을 구하는 것이 좋다. 혼자 프로젝트 전체를 책임지기는 힘들기 때문에 담당자를 추가하고, 해당 프로젝트를 사내에 먼저 오픈하고 나서 외부에 오픈하는 것이 좋다. LISENCEfork 한 프로젝트일 경우 해당 프로젝트의 라이선스 전문을 포함해야 한다.README이 프로젝트를 만든 이유와 목적, 사용 용도, 코드 사용 방법, 설치 방법 등에 대해 작성한다.CONTRIBUTING다른 프로젝트를 참고하여 가이드를 작성한다. 작성이 어렵다면 환영 메시지만 작성해도 된다.코드이해하기 쉬운 코드를 작성해야 하며, ..
오픈 소스 프로젝트 찾기깃허브https://github.com/explore Explore GitHubExplore is your guide to finding your next project, catching up with what’s trending, and connecting with the GitHub community.github.comexplore 탭에서 start가 많은 프로젝트들이 오픈 소스일 확률이 높다. Google code-inhttps://codein.withgoogle.com/archive/ Google Code-in ArchiveGoogle's contest introducing 13-17 year old pre-university students to open source so..
오픈 소스 구성원 역할저작자: 오픈 소스 프로젝트를 만든 사람 또는 조직사용자: 오픈 소스 프로젝트를 사용하는 사람메인테이너: 프로젝트의 방향을 알고 있고, 직접 설정한 프로젝트를 관리하는 사람컨트리뷰터: 오픈 소스 프로젝트에 컨트리뷰션(기여) 활동을 하는 모든 사람 커미터: 컨트리뷰터가 컨트리뷰션을 하면 리뷰를 하는 사람으로, 프로젝트에 반영할지에 대한 결정 권한도 가지고 있음 컨트리뷰션컨트리뷰션을 하는 이유오픈 소스 저작자 입장에서는 컨트리뷰터들이 버그를 찾아줄 수 있고, 사용하면서 불편했던 점을 발견하고 코드를 개선할 수 있다.오픈 소스 사용자/컨트리뷰터 입장에서는 코드 리뷰를 받을 수 있고, 내가 원하는 기능을 추가해 볼 수 있다. 또한, 오픈 소스 코드 분석 능력을 기를 수 있다. 활동 유형버..
싱글톤 패턴이란특정 클래스의 인스턴스가 단 1개만 생성되는 것을 보장하는 디자인 패턴이다.생성자가 여러 번 호출되더라도 인스턴스를 새로 생성하지 않고 최초로 생성되었던 인스턴스를 반환한다. 언제 사용하는가프로그램 내에서 해당 클래스의 객체가 하나만 존재해야 할 때프로그램 내에서 해당 객체를 공유하여 사용해야 할 때예시로는 DB Connection Pool 같은 객체가 있을 때 한 번만 연결한 후 한 번만 끊는 것이 있다. 어떻게 사용하는가let Singleton = (function () { let instance = null; function SingletonClass(data = 'Init Data') { if (instance) { return instan..
오픈 소스 문서 구조기본 문서LICENSE.mdLICENSE.md 파일이나 txt 파일은 오픈 소스 라이선스 전문을 명시한 문서이다.이 파일이 프로젝트에 있으면 이 프로젝트는 해당 오픈 소스 라이선스 하에 배포되어야 한다.오픈 소스 프로젝트의 최상위 디렉터리에 위치한다. 추가 문서문서 이름설명README.md프로젝트 코드의 목적, 사용 방법 등을 설명한 문서이다.COPYRIGHT.txt저작권에 대한 이야기에 중점을 둔 문서이다.NOTICE.txt오픈 소스 라이선스 개요를 담고 있는 문서이다.CONTRIBUTING.md프로젝트에 기여할 수 있는 방법과 기여 절차를 설명한 문서이다. 이 문서가 있다는 것은 컨트리뷰션을 환영한다는 의미를 가진다.CODE_OF_CONDUCT.md오픈 소스 프로젝트(커뮤니티)에 ..
오픈 소스란누구에게나 특별한 제한 없이 공개되어 있는 소스 코드이다.공개된 소스 코드에 검사(리뷰), 수정 등 개선 사항을 제시할 수 있다.대부분 무료지만 더 많은 기능을 제공하는 프로 버전 같은 것은 유료이다. 라이선스오픈 소스로 배포/준비/공개된 소스 코드를 사용할 때 지켜야 하는 규칙 등을 명시한 것이다.오픈 소스임을 명시하고, 사용/배포할 때 조건(출처, 사용법 등) 명시하기 위해 사용한다.라이선스에 적힌 조건을 이행하지 않거나 라이선스 표기가 되어 있지 않은 깃허브 public 소스 코드를 임의로 사용하면 저작권 침해이므로 유의해야 한다.OLIS 사이트에서 라이선스를 확인할 수 있다. 오픈 소스 라이선스 표기 방법오픈 소스 라이선스를 표기할 때는 아래의 항목을 넣어야 한다.오픈소스명공식 홈페이지..
Drag And Dropreact-beautiful-dnd 라이브러리를 사용하려면 사용하려는 부분을 DragDropContext - Droppable - Draggable 컴포넌트 순으로 감싸줘야 한다.드래그가 가능한 범위는 위에서 네모 표시를 한 구간이다. 저 부분이 ListsContainer 컴포넌트이므로 해당 컴포넌트를 DragDropContext 컴포넌트로 감싸준다.import { DragDropContext } from 'react-beautiful-dnd';... ... onDragEnd 이벤트는 드래그가 끝났을 때 발생하는 이벤트이다. 드래그가 끝나면 재정렬이 이루어져야 하므로 boardSlice에 sort 함수를 정의한다. 같..
컴포넌트 생성Modal Edit 생성task를 클릭하면 modalActive가 true로 설정되면서 모달창이 뜨게 된다. 이 모달창이 EditModal 컴포넌트이다.function App() { ... return ( ... {modalActive ? : null} ... )} store에 있는 모달의 정보를 가져오고, 이 정보를 새로운 state의 초기값으로 저장한다. 모달 창의 정보가 변경되면 새로 만든 이 state(data)에도 변화가 일어난다.일 수정하기 버튼을 누르면 store에 저장되어 있는 task를 업데이트하고, 로그를 추가해 주고, 모달 활성화 여부를 false로 변경하여 모달창을 닫는다.일 삭제하기 버튼을 누르면 현재 활성화되어 있는 게..
컴포넌트 생성빨간색 네모가 BoardList 컴포넌트, 파란색 네모가 ListsContainer 컴포넌트이다.function App() { const [activeBoardId, setActiveBoardId] = useState('board-0'); const boards = useTypedSelector(state => state.boards.boardArray); const getActiveBoard = boards.filter(board => board.boardId === activeBoardId)[0]; const lists = getActiveBoard.lists; return ( ... )} Boar..
