(3D)Dev Deep Dive/Templates & Guides
-
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 -
Git branch naming convention은 Git 저장소에서 사용되는 브랜치 이름을 표준화하여 일관성을 유지하고 명료한 커뮤니케이션을 도모하는 방법입니다. 이런 일관성 있는 이름 규칙을 사용함으로써 협업을 용이하게 하고, 브랜치 관리를 효과적으로 할 수 있습니다. Git branch naming convention의 장점들 명확한 커뮤니케이션 브랜치 이름이 직관적이고 일관되면, 프로젝트 참여자들이 브랜치의 목적과 내용을 쉽게 파악할 수 있습니다. 브랜치 관리 용이 규칙에 따라 브랜치를 생성하면, 사용자들이 언제 어떤 브랜치를 만들었는지 쉽게 추적할 수 있습니다. 더 나은 협업 일관된 규칙을 따르면 프로젝트 참여자들 간의 혼동을 줄이고, 코드 리뷰 및 병합 과정에서 발생할 수 있는 실수를 줄일 ..
[Template] Git Branch Naming ConventionGit branch naming convention은 Git 저장소에서 사용되는 브랜치 이름을 표준화하여 일관성을 유지하고 명료한 커뮤니케이션을 도모하는 방법입니다. 이런 일관성 있는 이름 규칙을 사용함으로써 협업을 용이하게 하고, 브랜치 관리를 효과적으로 할 수 있습니다. Git branch naming convention의 장점들 명확한 커뮤니케이션 브랜치 이름이 직관적이고 일관되면, 프로젝트 참여자들이 브랜치의 목적과 내용을 쉽게 파악할 수 있습니다. 브랜치 관리 용이 규칙에 따라 브랜치를 생성하면, 사용자들이 언제 어떤 브랜치를 만들었는지 쉽게 추적할 수 있습니다. 더 나은 협업 일관된 규칙을 따르면 프로젝트 참여자들 간의 혼동을 줄이고, 코드 리뷰 및 병합 과정에서 발생할 수 있는 실수를 줄일 ..
2023.04.23