본문 바로가기

Study

 (114)
[React] React-Query 조건부로 fetch하기 작업 도중 아이템 생성/수정 컴포넌트를 하나의 컴포넌트로 재사용하게 되었는데, id 값에 따라 조건부 처리를 하게 되었다. react-query를 사용하여 아이템 정보를 가져올 때 id 값이 없다면(생성) 위와 같이 계속 에러가 나면서 fetch를 재시도하는 현상이 발생했는데, useQuery의 query-option 중 enabled를 사용하여 조건부로 간단하게 처리할 수 있다. const DEFAULT_DATA = {...}; const Project = () => { const location = useLocation(); const id = location.state?.id; const { data } = useQuery([`project/${id}`, id], fetcher, { enabled:..
[React] 카카오 공유하기 1. kakao developers 애플리케이션 등록 https://developers.kakao.com/ 에 접속하여 내 애플리케이션 - 애플리케이션 추가하기 등록 플랫폼 등록후 제공되는 키 중 javascript key를 사용합니다. 2. JavaScript SDK 추가 useEffect로 sdk를 등록하는 방법이나 index.html에 추가하는 방법으로 sdk를 추가합니다. public 폴더의 index.html에 아래의 sdk를 추가합니다. 3. 카카오 공유하기 함수 생성 사용할 컴포넌트에서 공유하기 함수를 만들어 줍니다.(createDefaultButton과 sendDefault를 사용하는 방법 2가지 중 직접 버튼을 만들어서 기능만 사용할 예정이라 sendDefault를 사용하였습니다.)..
WS vs WAS Web Server 1. Web Server란 ? 웹 브라우저(클라이언트)로부터 HTTP 요청을 받아 정적 컨텐츠를 제공하는 프로그램. * 정적 컨텐츠 - 요청 인자값에 상관없이 달라지지 않는 컨텐츠 (HTML, CSS, Image) - 어느 사용자의 요청이든 항상 동일한 컨텐츠 2. Web Server의 기능 - 클라이언트로부터 HTTP 요청을 받을 수 있다. - 그 요청이 정적컨텐츠 요청일 경우 정적 컨텐츠를 제공할 수 있다. - 동적컨텐츠 요청일 경우 WAS로 전달하여 WAS가 처리한 결과를 클라이언트에게 전달한다. Web Application Sever 1. Web Application Sever 란? * Web Server + Web Container * 웹 어플리케이션과 서버 환경을 만들어 동..
SSR vs CSR 브라우저 렌더링 (Browser Rendering) 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용(HTML, CSS, JavaScript)을 받아와 이를 읽고, 파싱해서 실행한 결과물로 화면에 그려내는 과정입니다. 이러한 브라우저 렌더링은 크게 클라이언트 사이드 렌더링과 서버 사이드 렌더링으로 나뉘어집니다. SSR (Server Side Rendering) SSR 은 클라이언트(브라우저)가 서버에 데이터를 요청하여 서버에서 처리하는 방식. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공한다. (서버가 화면을 그리는 주체가된다.) Step 1. 서버에서 렌더 될 준비를 끝마친 상태로 HTML 응답을 브라우저(클라이언트)에 보냅니다. Step 2. 브라우저는 바로 페..
[TailwindCSS] TailwindCSS 스크롤바 숨기기 1. TailwindCSS 에서 제공하는 플러그인을 받아줍니다. npm i tailwind-scrollbar-hide or yarn add tailwind-scrollbar-hide 2. tailwind.config.js 수정 -> plugins 추가 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [require("tailwind-scrollbar-hide")], }; 3. 스크롤바를 숨기고 싶은곳에 적용해줍니다. Lorem ipsum dolorn Lorem ipsum dolorn Lorem ipsum dolorn Lo..
[React] TailwindCSS 설치하기 0. Tailwind 란? Tailwind CSS는 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다. 클래스 이름에 대한 모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동하며 제로 런타임으로 빠르고 유연하며 안정적입니다. 장점 1. css 파일이 필요 없으며 style 태그를 사용하지 않고 스타일을 줄 수 있으므로 코드가 상당히 줄어드는 장점이 있습니다. 2. html 태그에 직접적으로 style을 주기 때문에 class name을 고민하지 않아도 됩니다. 3. 빠르고, 반응형 또한 쉽습니다. 단점 1. 코드의 가독성이 상당히 떨어집니다. 2. css에서 사용하는 코드와는 다르기..
[CSS] li 태그 들여쓰기 하기 text-indent text-indent 는 시작부분을 들여쓰기로 시작하게 하는 속성입니다. 해당 속성에 음수값을 주어 해결할 수 있습니다. li { text-indent: -18px; margin-left: 18px; }
[React] 폰트 적용하기 (.ttf/.otf) 1. 폰트를 다운로드 받습니다. Fontsgeek : Download Thousands Of Cool Free Fonts For Windows And Mac. 1 Style Uncategorized 14 Downloads fontsgeek.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. fonts 폴더를 만들어주고 해당 ttf/otf 파일을 넣어줍니다. 3. index.css에서 해당 폰트를 불러줍니다. @font-face { src: url () } 을 이용하여 해당 폰트를 불러와줍니다. font-swap 속성을 웹 폰트를 적용하는 CSS에 추가하면 해당 CS..

티스토리툴바