Will find a way

들어가기 전React 프로젝트 진행중 객체의 상태관리를 필요로 하던 중 Record라는 타입정의 하는 법을 알게 됐다.오늘은 Record가 뭔지 간단하게 알아 보겠다. Record란 무엇인가?타입스크립트에서 객체의 타입을 정의할 때 자주 쓰이는 유틸리티 타입이다. 기본 문법RecordKey's type : 객체의 키 데이터 타입 / Value's type : 객체의 값의 데이터 타입 예시 1 (문자열 키에 불리언 값)const checks: Record = { age: true, terms: false, privacy: true,};// 다음과 같다type Checks = { [key: string]: boolean;} 예시 2 (특정 키들만 허용)type TermKey = 'age' | 'te..

들어가기 전간이 프로젝트 때 로그인 기능을 구현할 예정이다. 로그인 기능을 구현하기 위해서는 반드시 알아야 할 '쿠키(Cookie)'라는 것이 있다. 쿠키에 대해서 예전에 써놓은 글이 있으니 참고하면 된다.쿠키의 속성 중에 HttpOnly와 SameSite라는 것이 있다.HttpOnly는 JS에서 접근이 불가능 하고 XSS 방어를 할 수 있고 SameSite는 CSRF를 방지할 수 있다고 한다.이번에 쓸 글은 XSS가 무엇이며 CSRF가 뭔지에 대해서 알아보는 글이다.https://jakapark.tistory.com/21 [JS] 쿠키 세션 로컬스토리지목차1. 쿠키2. 세션 스토리지3. 로컬 스토리지 1. 쿠키 (Cookie)- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각(쿠키는 유효기..

최근에 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..