🤔 먼저 fetch API를 이용한 Client 와 Sever의 통신 방법에 대해 알아보자기본적으로 Client와 Server는 API를 통해 데이터를 주고 받는다하지만 Next.js는 Client와 서버의 데이터를 API를 통해서 주고 받지 않아도 된다 🧐 HTTP 요청(fetch API) VS Next.js Server Action기본적으로 Next.js를 사용하지 않고있다면 HTTP 요청을 사용해야한다 RESTful하고 통신이 명확하게 분리되기 때문이다하지만 Next.js fullstack으로 개발중이라면Next.js Sever Action이 더 좋을 수 있다코드를 간소화해도 되고 HTTP 요청이 없어서 빠른 응답과 직접적으로 클라이언트 함수에 접근이 가능하기 때문이다다양한 BE를 사용한..
분류 전체보기
🤔 Input 안에 div 요소를 넣을 수 없어 focus를 활용한 border-color 변경이 어려워 졌다..🧐 GPT에게 도움 받기// React, Tailwind CSS, 그리고 TypeScript를 사용하여 Next.js 프로젝트에 맞게 필드의 포커스 상태에서 테두리 색상을 변경하는 방법을 설명하겠습니다.// Tailwind CSS는 유틸리티 클래스를 통해 포커스 상태의 스타일을 쉽게 제어할 수 있습니다. focus: 접두사를 사용하여 포커스 상태일 때의 스타일을 정의할 수 있습니다. 아래 코드는 필드가 포커스될 때 테두리 색상을 변경하는 방법을 보여줍니다:typescriptCopy codeimport React from 'react';interface SearchInputProps ..
🤔 PC 화면에서는 모든 컨텐츠를 보여주지만 모바일 화면에서 특정 컨텐츠를 드래그하면서 스크롤바를 안보이게 하는작업구글링을 통해 구현하려다가 간단하게 구현할 방법이 없을까 고민해보았다 참고한 블로그https://jihyundev.tistory.com/33 리액트로 만들어보는 마우스 드래그 좌우스크롤 컴포넌트최근 프로젝트에서 모바일에서만 노출되던 화면을 PC 환경에서 그대로 띄워줘야 할 일이 생겼다. 이때 신경써야 할 부분 중 하나가 바로 좌우스크롤이었다. 기존 모바일 브라우저 환경에서는 터jihyundev.tistory.comhttps://wnsdufdl.tistory.com/518🧐 라이브러리를 활용https://www.npmjs.com/package/tailwind-scrollbar-hide..
🤔 NavBar라고 불리우는 네비게이션바를 두줄로 출력하는 방법퍼블리싱 작업에서 한줄인 div를 두줄로 나눠서 출력하는 방법에 대해🧐 hidden을 사용하여서 만들기 {/*내용*/} {/*내용*/} tailwind 기준으로 크기를 지정하여 hidden을 이용하여 컨텐츠를 가리고 넣는 방식으로 진행하였다하지만 단점은 하나의 내용을 수정하려면 두개다 수정해야하는 번거로움이 발생하였다😆 flex-row flex-col 적극 사용하기크기에 따라서 flex-col과 flex-row를 사용해서 컨텐츠들을 적절히 배치해줬다div가 추가로 필요하지만 한번의 내용만 수정할 수 있어서 편리했다 {/*상단*/} {/*내용*/} ..
https://velog.io/@lky9303/127.0.0.1-%EA%B3%BC-localhost%EC%9D%98-%EC%B0%A8%EC%9D%B4
🤔 BigQuery를 알아보다가 데이터 웨어하우스라는 단어를 발견 🧐 뜻 정보에 입각한 의사 결정을 내릴 수 있도록 분석 가능한 정보의 중앙 리포지토리입니다. 😆 A a a 💪 출처 및 도움주신분들 https://aws.amazon.com/ko/data-warehouse/
🤔 파일을 새로 받아오면 한글이 깨진다. 🧐 구글링으로 찾아보았다. https://valar.tistory.com/16 💪 출처 및 도움주신분들 a
🤔 한개의 오브젝트에서 인자를 변경해서 여러개의 오브젝트로 만들려고 했다. gridItem = { headerName: translate('column_num', { value: 1 }), field: 'column1', cellRenderer: 'dateRenderer', width: 50, } 🧐 메서드 함수를 만들어서 처리해보자 Obejct.assign() 사용 함수를 만들어서 처리하니 복사가 쉬웠다 하지만 추가 목표가 생겼다. gridItems = (gridItem, name) => { const test = Object.assign({}, gridItem); test.headerName = name; test.field = name; console.log(name); console.log(..
