0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..

웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. 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

SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..

백준 알고리즘 문제를 풀 때는 입력을 받고 그 입력을 바탕으로 계산을 수행한 뒤 결과를 출력하는 형태가 일반적이므로, 이를 기반으로 한 간단한 Node.js 템플릿을 만들어 이 글에 제시하였습니다. 백준 바로가기 Baekjoon Online Judge Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다. www.acmicpc.net Node.js 환경에서 사용할 수 있는 Beakjoon용 코드 템플릿 주석을 통해 나눠둔 몇 가지 주요 입력방식에 따른 기본 템플릿입니다. 문제 유형에 따라 주석을 해제하거나 이를 참고하여 입력받는 로직을 완성시키신 이후, 아래의 solution 함수 내부에 정답을 위한 코드를 적어 사용하시면 됩니다. // 이 두 줄을 필수로 ..

ESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..

Prettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..