분류 전체보기
-
작성 일자 기준 메인페이지 근황
[Project : HQRoutine] 7~8차 스프린트 패치노트작성 일자 기준 메인페이지 근황
2023.04.28 -
오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
[TypeScript] type {함수명}? interface {함수명}?오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
2023.04.27 -
프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
[Folder Structure] Hooks? Utils? 차이점이 뭘까?프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
2023.04.27 -
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 -
2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 학교에 일찍 와서 아침을 먹으며 여러 생각을 하던 날이었다. 아침으로 맛있는 샐러드와 주먹밥을 먹으며 갑자기 떠오른 의문, "동적 컴포넌트를 만들면 잠이 깰까?" 사람들 중에 밥을 먹고 식곤증이 와서 많이 졸려하는 사람들이 있다 나도 그 사람들 중 한 사람이지만 동적인 활동을 하면 잠이 깨는 편이었다 "어? 그러고 보니 리액트에도 동적인 사이트와 정..
[문득 떠오른 건데] 밥먹고 졸릴때 동적 컴포넌트를 만들면 잠이 깰까? - 1편2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 학교에 일찍 와서 아침을 먹으며 여러 생각을 하던 날이었다. 아침으로 맛있는 샐러드와 주먹밥을 먹으며 갑자기 떠오른 의문, "동적 컴포넌트를 만들면 잠이 깰까?" 사람들 중에 밥을 먹고 식곤증이 와서 많이 졸려하는 사람들이 있다 나도 그 사람들 중 한 사람이지만 동적인 활동을 하면 잠이 깨는 편이었다 "어? 그러고 보니 리액트에도 동적인 사이트와 정..
2023.04.22 -
React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
[React] 차트 라이브러리 비교 분석React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
2023.04.16 -
React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
[React] 9개의 대표적인 애니메이션 라이브러리 비교해보기React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
2023.04.16 -
영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
[Techeer Talk] JavaScript ES6에는 어떤 변화가 있었을까?영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
2023.04.16 -
2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 본문 이번 주에는 POC 기능에 대한 대부분의 마무리를 진행하는 주인 것 같다. 회고나 블로그를 쓰면서 느끼는 것이 평소에 캡처를 해두는 습관이 중요하다는 것을 깨달은 주인 것 같다 그래서 이번 주에는 많이 사진들을 모아두어서 보는 맛이 있는 그런 글이 되지 않을까 싶다 이제, 시작하도록 하겠다 어디선가 보던 것들을 개발해 내었다는 그 성취감 위에 ..
[Project : HQRoutine] 6차 스프린트 회고2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 본문 이번 주에는 POC 기능에 대한 대부분의 마무리를 진행하는 주인 것 같다. 회고나 블로그를 쓰면서 느끼는 것이 평소에 캡처를 해두는 습관이 중요하다는 것을 깨달은 주인 것 같다 그래서 이번 주에는 많이 사진들을 모아두어서 보는 맛이 있는 그런 글이 되지 않을까 싶다 이제, 시작하도록 하겠다 어디선가 보던 것들을 개발해 내었다는 그 성취감 위에 ..
2023.04.16 -
AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는 이미지처럼 웃으면서 할 것이다 [1회차] - EC2 찍어먹어보기 [Learn About AWS] 1회 time-map-installer.tistory.com 초기 연습하기 file1.txt 복사하기 디렉토리 dir1 만들고 file1.txt 복사해넣기 rmdir - remove directory → 비어있는 디렉토리를 제거한다 -r 을 이용하면 내용물이 있어도 제거한다 문제 풀어보기 1. 현재 디렉토리에서 txt 파일 검색해보기 find . -name "*.txt” 2. nice라는 단어가 들어가있는 파일 검색 grep nice..
[Learn About AWS] 3회차 실습내용 정리AWS Series [Learn About AWS] Series 이 글은 AWS 수업 시간에 진행되는 내용들을 담아 둔 시리즈이다 상반기동안 업데이트 할 예정이며 최대한 위에있는 이미지처럼 웃으면서 할 것이다 [1회차] - EC2 찍어먹어보기 [Learn About AWS] 1회 time-map-installer.tistory.com 초기 연습하기 file1.txt 복사하기 디렉토리 dir1 만들고 file1.txt 복사해넣기 rmdir - remove directory → 비어있는 디렉토리를 제거한다 -r 을 이용하면 내용물이 있어도 제거한다 문제 풀어보기 1. 현재 디렉토리에서 txt 파일 검색해보기 find . -name "*.txt” 2. nice라는 단어가 들어가있는 파일 검색 grep nice..
2023.04.14