기본 컴포넌트 작성세 컴포넌트 모두 Home 컴포넌트에서 렌더링 된다.function Home() { return ( 제목 테스트 버튼 테스트 Home body )} Title컴포넌트props로 children, size, color을 받는다. children은 h1 태그에 들어가고, size와 color는 스타일로 설정한다.import { styled } from "styled-components";import { ColorKey, HeadingSize } from "../../style/theme";interface Props { ..
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', ..
난이도: Lv. 2정답률: 50%문제: https://school.programmers.co.kr/learn/courses/30/lessons/155651 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 알고리즘파라미터로 주어진 배열을 순회하며 대실 시각을 저장하는 새로운 배열에 [대실 시작 시각, 1], [대실 종료 시각 + 10분, -1] 두 배열을 담는다.1에서 만든 배열을 시각 기준으로 오름차순 정렬한다. 동일한 시각이 있을 경우 대실 종료인 시각이 앞에 와야 한다.2에서 정렬한 배열을 순회하며 각 배열의 첫 번째 인덱스의 값을 더한다. 더하면서 현재..
저작자 체크리스트상표권 침해를 피하기 위해 프로젝트 이름은 중복되지 않아야 한다. 또한, 프로젝트 이름은 기능이 명확하게 나타나도록 지어야 한다.회사 프로젝트라면 사내 법무팀이나 오픈 소스 담당 팀에게 자문을 구하는 것이 좋다. 혼자 프로젝트 전체를 책임지기는 힘들기 때문에 담당자를 추가하고, 해당 프로젝트를 사내에 먼저 오픈하고 나서 외부에 오픈하는 것이 좋다. 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 함수를 정의한다. 같..
