template
-
0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..
[GitHub] Git에서 팀 단위로 협업하기0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..
2023.07.14 -
웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. Columns과 Rows로 나뉘며 스펙은 다음과 같습니다. 이런 그리드가 들어올텐데 Columns와 Rows는 Grid를 선택해서 고를 수 있습니다. 제작 후 눈 모양을 통해 켜고 끄며 그리드를 활용하여 웹 디자인을 진행할 수 있습니다. Columns(세로줄) Count Color Type Width Offset Gutter 10 FF0000, 10% Center 80 0 20 Rows(가로줄) Count Color Type Height Offset Gutter 10 FF0000, 10% Center 16 0 16 결과물 End
[Design] 피그마 그리드 템플릿웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. Columns과 Rows로 나뉘며 스펙은 다음과 같습니다. 이런 그리드가 들어올텐데 Columns와 Rows는 Grid를 선택해서 고를 수 있습니다. 제작 후 눈 모양을 통해 켜고 끄며 그리드를 활용하여 웹 디자인을 진행할 수 있습니다. Columns(세로줄) Count Color Type Width Offset Gutter 10 FF0000, 10% Center 80 0 20 Rows(가로줄) Count Color Type Height Offset Gutter 10 FF0000, 10% Center 16 0 16 결과물 End
2023.06.05 -
SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..
[Template] SEO 향상을 위한 Header 템플릿SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..
2023.05.24 -
백준 알고리즘 문제를 풀 때는 입력을 받고 그 입력을 바탕으로 계산을 수행한 뒤 결과를 출력하는 형태가 일반적이므로, 이를 기반으로 한 간단한 Node.js 템플릿을 만들어 이 글에 제시하였습니다. 백준 바로가기 Baekjoon Online Judge Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다. www.acmicpc.net Node.js 환경에서 사용할 수 있는 Beakjoon용 코드 템플릿 주석을 통해 나눠둔 몇 가지 주요 입력방식에 따른 기본 템플릿입니다. 문제 유형에 따라 주석을 해제하거나 이를 참고하여 입력받는 로직을 완성시키신 이후, 아래의 solution 함수 내부에 정답을 위한 코드를 적어 사용하시면 됩니다. // 이 두 줄을 필수로 ..
[Template] JavaScript(Node.js) Template for Baekjoon백준 알고리즘 문제를 풀 때는 입력을 받고 그 입력을 바탕으로 계산을 수행한 뒤 결과를 출력하는 형태가 일반적이므로, 이를 기반으로 한 간단한 Node.js 템플릿을 만들어 이 글에 제시하였습니다. 백준 바로가기 Baekjoon Online Judge Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다. www.acmicpc.net Node.js 환경에서 사용할 수 있는 Beakjoon용 코드 템플릿 주석을 통해 나눠둔 몇 가지 주요 입력방식에 따른 기본 템플릿입니다. 문제 유형에 따라 주석을 해제하거나 이를 참고하여 입력받는 로직을 완성시키신 이후, 아래의 solution 함수 내부에 정답을 위한 코드를 적어 사용하시면 됩니다. // 이 두 줄을 필수로 ..
2023.05.17 -
ESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..
[Template] ESLint Template for FrontEnd DevelopersESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..
2023.05.13 -
Prettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..
[Template] Prettier Template for FrontEnd DevelopersPrettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..
2023.05.13 -
Github Label Setting은 Github 프로젝트에서 이슈와 풀 리퀘스트에 태그를 지정하여 작업을 분류하고 조직화하는 데 사용되는 기능입니다. 이를 사용하면 프로젝트 관리가 훨씬 수월해지며, 몇 가지 주요 이점이 있습니다. 이슈 및 풀 리퀘스트 분류 레이블을 사용하면 이슈와 풀 리퀘스트를 효과적으로 분류할 수 있습니다. 예를 들어, 버그, 기능 요청, 문서 개선 등과 같은 카테고리로 나눌 수 있습니다. 작업 우선순위 지정 레이블을 이용해 작업의 우선순위를 표시할 수 있습니다. 예를 들어, 긴급, 높음, 중간, 낮음 등의 우선순위를 나타내는 레이블을 만들 수 있습니다. 팀 협업 향상 팀원들이 레이블을 통해 작업을 빠르게 파악할 수 있어 효율적인 협업이 가능합니다. 이슈 및 풀 리퀘스트 필터링 레..
[Template] GitHub Label SettingGithub Label Setting은 Github 프로젝트에서 이슈와 풀 리퀘스트에 태그를 지정하여 작업을 분류하고 조직화하는 데 사용되는 기능입니다. 이를 사용하면 프로젝트 관리가 훨씬 수월해지며, 몇 가지 주요 이점이 있습니다. 이슈 및 풀 리퀘스트 분류 레이블을 사용하면 이슈와 풀 리퀘스트를 효과적으로 분류할 수 있습니다. 예를 들어, 버그, 기능 요청, 문서 개선 등과 같은 카테고리로 나눌 수 있습니다. 작업 우선순위 지정 레이블을 이용해 작업의 우선순위를 표시할 수 있습니다. 예를 들어, 긴급, 높음, 중간, 낮음 등의 우선순위를 나타내는 레이블을 만들 수 있습니다. 팀 협업 향상 팀원들이 레이블을 통해 작업을 빠르게 파악할 수 있어 효율적인 협업이 가능합니다. 이슈 및 풀 리퀘스트 필터링 레..
2023.04.23 -
Issue Template은 프로젝트 관리 및 협업 툴에서 사용되는 미리 정의된 형식의 템플릿으로, 팀원들이 일관된 정보를 공유하고 문제를 신속하게 해결할 수 있도록 돕습니다 일반적으로 GitHub, GitLab, Jira 등의 협업 도구에서 사용됩니다 Issue Template의 장점들 일관성 템플릿을 사용하면 팀원들이 동일한 형식을 따르도록 유도하여 일관된 이슈 제출을 돕습니다. 이로 인해 정보 공유가 더 효과적이고 효율적으로 이루어집니다. 효율성 템플릿에 필요한 정보가 미리 명시되어 있어, 팀원들이 이슈를 보다 신속하게 작성하고 해결할 수 있습니다. 커뮤니케이션 개선 모든 관련 정보가 한 곳에 모여 있어, 이슈에 대한 논의와 해결 과정에서 오해가 줄어듭니다. 시간 절약 이슈를 작성하는 데 걸리는 시..
[Template] Issue TemplateIssue Template은 프로젝트 관리 및 협업 툴에서 사용되는 미리 정의된 형식의 템플릿으로, 팀원들이 일관된 정보를 공유하고 문제를 신속하게 해결할 수 있도록 돕습니다 일반적으로 GitHub, GitLab, Jira 등의 협업 도구에서 사용됩니다 Issue Template의 장점들 일관성 템플릿을 사용하면 팀원들이 동일한 형식을 따르도록 유도하여 일관된 이슈 제출을 돕습니다. 이로 인해 정보 공유가 더 효과적이고 효율적으로 이루어집니다. 효율성 템플릿에 필요한 정보가 미리 명시되어 있어, 팀원들이 이슈를 보다 신속하게 작성하고 해결할 수 있습니다. 커뮤니케이션 개선 모든 관련 정보가 한 곳에 모여 있어, 이슈에 대한 논의와 해결 과정에서 오해가 줄어듭니다. 시간 절약 이슈를 작성하는 데 걸리는 시..
2023.04.23