Will find a way

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..

CORS(Cross-Origin Resource Sharing) 란?- 교차 출처 자원 공유라는 말로 서로 다른 출처간에 리소스를 공유하는 것을 허용하는 정책을 의미한다.- 서로 다른 출처 공유에 대해서는 기본적으로 제한되어있다. (이를 SOP라 한다.) *SOP (Same-Origin Policy) : 같은 출처끼리만 리소스를 공유할 수 있다는 정책HTML태그를 통한 이미지, CSS, Script 요청은 SOP에 제한이 되지 않음  Origin : 출처를 의미하며, URL구조 / 프로토콜 + 호스트 + 포트를 합친 것을 말함Port가 다른 경우에 다른 출처로 인식한다.HTTP 포트 : 80 / HTTP 포트 : 443 생략 가능 CORS가 정의된 이유SOP(Same-Origin Policy)의 장점동일..

https://jakapark.tistory.com/68 [디자인 패턴] MVC 패턴에 대해서 간단히 알아보는 글들어가기 전백엔드와 DB 기본을 공부하던 중 기초 디자인 패턴중인 MVC 패턴에 대해서 알게 됐다. 디자인 패턴이란 기존 환경 내에서 반복적으로 일어나는 제들을 어떻게 풀어나갈 것인가에 대jakapark.tistory.com 며칠 전에 MVC 패턴에 대해서 알아보았다. (윗글 참고)오늘은 MVC 패턴 예제 코드를 작성해보려고 한다. MVC에 대해서 간단히 알아보자면Model : 데이터를 처리View : 유저가 보이는 화면Controller : Model과 View를 이어주며 유저의 요청을 담당한다 .env 파일DB_CONNECT = "MongoDBURI"Config.js [./config/db..

const http = require("http");// createServer 메서드가 생성한 서버를 변수나 상수로 지정해야함const server = http.createServer((req, res) => { const { url, method, headers } = req; console.log(url, method, headers); // 서버에 요청을 보내지 않으면 안됨 // res (response : 응답) 우리가 반송해야할 데이터 res.setHeader('Content-type', 'text/html'); // setHeader : 새로운 헤더 설정 / Content-type은 브라우저가 알고 이해하며 받아들이는 디폴트 헤더 // 응답에 헤더를 붙이게 되고, 컨텐츠 ..