Will find a way

최근에 Git으로 협업을 하는 것이 너무 서툴러서 여러가지로 배우고 있다. 그리고 원활한 협업을 위해서 어떻게 해야 팀이 알아보기 쉽게 Git 관리를 할 수 있을지 찾아보았다. Git으로 협업을 위한 방법의 예시로 3가지 예시를 가져왔다. 지금 단계에서는 1. 협업을 위한 Git 브랜치 전략 (Git Flow, 실용적 버전)- 기본 구조브랜치 이름역할main운영(배포)용 코드dev개발 통합 브랜치feature/기능명기능 단위 작업 브랜치fix/버그명버그 수정 브랜치hotfix/긴급패치운영 중 긴급 수정 (main에서 파생) 실전 흐름 예시# 1. 작업 시작git checkout devgit pull # 최신 dev 기준으로git checkout -b feature/login-page # 새 작업 브..

'내'가 아닌 '팀'을 우선으로 생각하는 것은 어렵다현재 온라인으로 간단한 프로젝트를 진행하면서 Git Hub으로 협업을 하고 진행하고 있다.Git 사용법을 모르는 것도 모르지만 실수가 일어났을 때 어떻게 해야할지 검색해서 알아보고 찾아내고Git을 사용하고 있었다. 사용법에만 너무 집중한 나머지 협업툴을 협업이 아닌 그냥 업로드 용도로만 사용하는 '나' 자신을 보게됐다.'팀'이 아닌 '나'를 위한 깃을 사용하여 협업에 지장이 있기 시작했다. 내가 깃을 어떻게 썼나 돌이켜 여러가지가 있겠지만생각나는거만 적어보려고한다. 1) Commit 메시지를 목적에 맞게 제대로 작성하지 않은 점2) dev 브랜치를 만들고 각각의 작업 branch를 merge 후 팀원에게 알림3) 코드리뷰 및 test를 하지 않고 mer..

들어가기 전나는 2개의 국비지원 과정을 이수하였다. 첫 번째는 웹퍼블리셔 프론트엔드 과정 두 번째가 풀스택 과정이다.그래서 이게 지금 말할 웹 접근성이랑 무슨 상관이 있을까? 직접적인 관련은 없지만 내가 이 글을 쓰게 된 이유이기 때문에 언급해봤다. 국비교육을 이수하면서 개발을 배우고 싶은 사람으로서는 풀스택 과정이 훨씬 좋았지만 웹접근성을 놓고 봤을 때는 첫번째 국비 과정에서 더 많이 언급을 했고 알려주려고 했어서 기억이 남는다. 2번째 과정을 들으면서 웹접근성에 대해서 내 기억이 조금 흐려지기도 했어서 다시 상기 시키고 싶었다. 단순한 정보글이 아닌 내가 왜 이 글을 포스팅했으며 목적까지도 적고 싶기 때문이다. 내가 만들고 싶은 웹이나 앱은 모든 사람들이 동일한 서비스를 이용할 수 있었으면 좋겠다. ..

Taiwilwind v4.0 (CSS-first)Tailwind가 v4로 버전이 업데이트 되면서 몇가지 몇가지 바뀐 것들이 있다.공부하면서 안되는것중에 하나가 npx tailwindcss init 설치가 안됐다. 이유를 찾아보니 다음과 같다. Tailwind 가 v4.0 이 되면서 config 파일이 필요가 없어졌다.(v3.0 일 때는 필수) 하지만 나는 작업하면서 기존의 tailwind 커스텀을 필요로 했다.v3.0 일 때는 npx tailwindcss init -p 를 터미널에 입력하면 됐지만,v4.0 면 설치도 안된다. 기존의 v3.0 은 config 가 필요했으며 이런식으로 config를 작성하고 루트경로에 두면 적용이 됐을 것이다.tailwind.config.js/** @type {import(..

1. HTML 태그 생성2. JavaScript 코드 부분// 1. 캔버스 요소 가져오기const jakaCanvas = document.getElementById('jaka_canvas');const ctx = myCanvas.getContext('2d');// 2. 캔버스 크기를 브라우저 창 전체로 설정jakaCanvas.width = window.innerWidth;jakaCanvas.height = window.innerHeight;// 3. 마우스 위치를 지정할 객체 (초기값은 중앙)const mouse = { x: jakaCanvas.width / 2, y: jakaCanvas.height / 2 };// 4. 원(circle)의 현재 위치와 반지름 정보const circle = { x: mo..

들어가기 전마우스 포인터를 따라가게 하는 코드를 한번 구현해보고 싶어서 예시 코드를 찾게 되었고 그 중에 canvas 태그를 이용하여 하는 방법을 알게 됐다. 그래서 오늘 알아볼 것은 canvas 태그와 어떻게 사용하는지 알아보려고 한다. 이 글을 읽는 사람들 대부분은 이미 HTML, CSS 에 대해서 어느 정도 알 것이라고 생각한다. 처음에 이 글을 작성할 때, HTML의 카테고리로 넣을 것인지 CSS에(?) 넣어야 하는지 잠시 생각하게 되었는데, 결국에는 JavaScript 카테고리에 넣으려고 한다. 그 이유는 canvas 태그는 자바스크립트로 자주 DOM 조작을 하는 태그이기 때문이다. canvas 태그가 무엇이며 어떻게 쓰는지 알게 된다면 이 말을 납득할 수 있을것이라 생각한다. 바로 알아보자...

들어가기 전지금 간단한 프로젝트를 하는 중이다. react를 사용 중이고 ul안에 li를 map() 메서드로 순회하여 출력하다가 객체 key값을 출력해야할 일이 있었다. 그렇게 찾아보던중 Object.entries() 라는 것을 알게 됐다. 오늘은 Object.entries()가 어떤건지, 언제 쓰면 좋은지에 대해서 간단히 글을 써보려고 한다.1. Object.entries()Object.entries()는 객체를 [key, value] 쌍의 배열로 변환해주는 메서드이며 반환 타입은 2차원 배열이다.객체는 원래 순회가 불가능하다. 그렇기 때문에 배열에만 쓸 수 있는 메서드 (forEach, map 같은 것을 바로 사용하지 못한다.)그래서 사용하는 것이 Object.entries()이다. 그러면 객체를 배..

상황설명원래 작업할 방식은 merge가 된 dev 브랜치에서 화면별로 브랜치를 나눠서 작업을 할 예정이였다.원래 의도하려던 브랜치현재 잘못된 브랜치dev (브랜치)ㄴ C3300Sㄴ C4100Sdev (브랜치)ㄴ C3300S 브랜치에 C4100S 작업하여 문제 발생  브랜치를 하나를 더 생성해서 작업해야하지만 위에 표의 예시처럼 전에 작업하던 브랜치 그대로 커밋을 하게 됐다.여기에서 기존 커밋과 브랜치를 새로 분리시키는 방법을 찾아보고 실행을 하여서 위의 깃에서 아래에 있는 깃으로 변경된 상태다.  해당 방법에 대해서 간단하게 알아보자. 목표- C3300S에 들어간 C4100S 관한 커밋을 분리- 새로운 브랜치에 C4100S로 옮긴 다음- C3300S는 원래 목적에 맞게 정리된 상태로 유지 1. C4100..

들어가기 전createBrowserRouter라는 것을 접하게 된 계기는 현재 간단한 프로젝트를 진행하던중 router처리를 할 일이 있었다. 리액트 router 처리는 BrowserRouter 밖에 모르는 내게 프론트 팀원이 loader라는 기능을 사용하면 좋을것 같다는 제의를 했다. loader는 컴포넌트가 렌더링되기 전에 데이터를 미리 불러오는 함수로 서버에서 데이터를 받아오는데 적합하고, SSR CSR 모두에게 잘 어울린다는 장점을 알려줬다. 그런데 그 loader를 사용하기 위해서 router처리를 createBrowserRouter라는 것을 사용해야한다고 한다. 본격적으로 알아보자.  createBrowserRouter 란?React Router v6.4 이상에서 도입된 새로운 라우팅 방식이다..

들어가기 전최근에 간단한 프로젝트를 해보려고 시도하고 있었다. 어떤 라이브러리가 필수적으로 쓰이며, 많이 쓰이는지 찾던 중Zustand라는 것을 알게 됐다. Zustand가 무엇이며 뭐가 좋으며 예제에 대해서 알아보는 시간을 가져보자  Zustand 란 무엇인가?Zustand라는 말은 독일어로 '상태' 라는 말을 의미한다.이걸 통해서도 상태에 관한 무엇인가를 우리는 유추할 수 있다.Zustand는 가벼운 상태 관리 라이브러리로, Redux보다 간결하고 사용하기 쉽다. Zustand를 알기 위한 필수 개념1. Store> store는 애플리케이션의 전역 상태(state)를 저장하고 관리하는 공간입니다.React에서 일반적으로 상태는 useState나 useReducer를 사용하여 개별 컴포넌트에서 관리(u..