웹팩이란? 웹팩은 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리다. 즉 내가 여러개의 js파일을 만들면 그것들을 합쳐주는 라이브러리라고 생각하면 좋다. 웹팩이 뭐가 좋앙? 로딩에 대한 네트워크 비용이 감소됩니다. 모듈 단위로 개발이 가능하기 때문에 가독성이 높아지고 유지보수가 쉽습니다. 최신 JS 문법을 지원하지 않는 브라우저에서도 사용할 수 있습니다. 여기서 중요한 개념들이 있는데 Entry, Output Loader Plugin Module 이다. Entry - 의존성 그래프의 시작점으로 웹팩은 엔트리를 통해 모듈을 로딩 후 하나의 파일로 묶는다. Output - 번들된 결과물을 처리할 위치를 output에 기록 Loader - 웹팩은 js와 json만을 ..

ORM이 뭐임? 객체와 관계형 데이터 베이스를 자동으로 변형 및 연결하는 작업. 결국 간단하게 말하면 SQL데이터베이스를 사용할때 쓰는 거라고 생각하면 된다. 시퀄라이즈 잇자넝~ 고론거 근데 그게 뭐가 좋은데? 우리가 DB와 관계짜는거를 ORM 말고 Pure js로도 가능한데.... 쓸데없이 길다 ORM const boards = Board.find({title:req.body. title , status:"req.body. status "}) 뭐 맞는 문법은 아니지만 예를 들어 이거다 라면 Pure js db.query(`SELECT * FROM boards WHERE title = ~~~~`) 결국 sql문을 써야한다. 우리모두의 친구 ORM을 사용하면 길이도 짧고 sql문도 안외워도 되는 꿈과 희망..

시퀄라이즈와 비슷한 것으로 판단이 된다. 데이터베이스와의 관계를 짤때 사용하는것으로 역시 js ts로 사용이 가능하다. 사용방법은 npm i -D prisma => npx prisma init 여기서 관계를 짜려면 데이터베이스를 이용을 해야할텐데 이때 사용하는거는 postgres mysql과 같은 데이터베이스 라고 생각을 하면 된다 좀더 편하다고 한다... 일단은.... 방법 01. railway 가입 - 로그인 - postgres 클릭 - variables - databaseurl 복사 후 .env에 복붙 참 쉽죠? 방법 02. 도커 docker-compose.yml 파일 생

서스팬스에 앞서 리액트의 일단 서버사이드 렌더링 순서를 말해보자면 서버에서 데이터를 가져온다. 서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보낸다. 클라이언트에서 js코드를 로드한다 클라이언트에서 js를 전체 앱에 대해 서버 생성 HTML에 연결한다.(이게 하이드레이션) 간단하게 말하면 기존에 axios로 서버에 데이터를 가져오기 전에 즉 브라우저에서 서버로 데이터를 요청하기 전에 프론트서버에서 백서버에 데이터를 요청해서 미리 데이터를 볼수 잇게 작업하고 js css html을 뿌리는게 ssr(하이드레이션)작업이라고 판단이 된다. 근데 원래 그렛던거 같긴 한데.... 어쨋든... 서스팬스는 뭐냐 하면 페이지의 컴포넌트를 좀더 쪼개서 한페이지를 한번에 서버사이드렌더링을 하는게 아니라 컴포넌트별로 서버..

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 inpa.tistory.com 일단 사이트 부터 던져보려고 한다. 이거 보면 내개념은 볼필요 없으니 ㅅㄱ 프엔에서 뭔 헛짓거리를 해서 나오는것도 아니고 갑자기 빨간줄이 나오면서 CORS문제가 떳다 라는 문구를 본적이 있을 것이다. 내가 실수 한것도 아니고 이게 뭐지?? CORS는 함축 단어로써 이를 풀면 Cross-Origin Resource Sharing 이라는 단어로 이루어 져 있다. 이 문장을 직역하면 "교차 출처 리소스 공유 정책"이라고..

01. useRef 일단 내가아는건 queryselector마냥 원하는 선택자를 고르는 용도 변수가 업데이트 되어도 컴포넌트가 리렌더링이 되지 않기 때문에 리렌더링 할 필요없는 변수를 useRef로 관리하면 좋겟쥬? 02. Cookie의 MaxAge, Expires 옵션 exprires는 브라우저에 설정된 유효일자까지 쿠키를 유지하다가 해당일자가 되면 자동으로 쿠키를 삭제 한다.maxAge도 비슷한데 원하는 만료일자를 시간단위까지 가능하다.둘중 하나도 안쓰면 브라우저 끌때 쿠키가 삭제되고 그러면 쿠키를 사용하는 이유가 없겟쥬..