분류 전체보기

Toast토스트 메시지란 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소이다. 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 사라진다.→ 이를 사용하게 된 계기는 alert창을 쓰다가 단조로워서 바꿀까하다가 우연히 보게 참고 사이트 글을 보게 되어 사용하게 되면서 글을 쓰게 되었다.react-hot-toast 사용하기1) 패키지 설치하기npm i react-hot-toast2) 앱에 toaster 넣기import toast, { Toaster } from 'react-hot-toast';해당 패키지를 설치했으니, 이를 가져온다.const App = () => { return ( Make me a toast );};toast를 쓰기 위해서 Toaster를 앱에 맨 위..

사람은 역시 공부해야 하는 동물이구나 느끼면서 글을 작성하고자 한다.styled-resetstyled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지이다. 내가 css를 적용할려고 했는데 브라우저에 기본적으로 적용되어 있는 스타일 때문에 적용이 안 된 경우를 많이 보았을 것이다. 그 때 reset을 시켜줘야 하는데, 구글에 쳐봤을 때 리셋시켜주는 코드를 쉽게 구할 수 있다.그러나, react에서 reset시켜주는 라이브러리가 존재한다. 이를 쓰면 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다. 또한 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징 때문이다. ✅ 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함이다.styled-..

설치하기npm install react-modal위와 같이 설치했는데 오류가 걸리는 경우가 존재한다. 내가 그랬기 때문이다.npm i --save-dev @types/react-modal타입 정의 라이브러리를 사용하면 오류가 나지 않는다.import하기import Modal from 'react-modal';import를 해주고 modal을 사용해주면 된다.useState 셋팅해주기나의 경우에 button을 클릭했을 때 modal을 보여주게 하고 싶기에 변수를 button과 modal을 연결해놓으면 된다.import React, { useState } from 'react';import Modal from 'react-modal';function App() { const [modalIsOpen, set..

개념Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, **flex**와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.코드의 길이 Not Pretty Code 😵내가 이 글을 쓴 계기는 코드의 가독성때문에 찾다가 쓰게 되었다.그래서 구글링해서 찾아보았더니, styled-component를 쓰던가 아니면 apply방식을 썼다.가독성 좋게 만들기1) styled-componentimport styled from "styled-components";const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; fon..

리액트에는 react-calendar와 react-datepicker등으로 캘린더를 구현할 수 있다.설치npm i react-calendarimport하기import Calendar from 'react-calendar';import 'react-calendar/dist/Calendar.css'; // css importreact-calendar를 설치하고 import해준다.아래의 css는 react-calendar에서 기본적으로 제공해주는 css파일이다.표시하기 위와 같이 했으면 Calendar를 가져와서 표시해주면 캘린더가 보이게 된다.하지만, 캘린더를 클릭시 내가 클릭한 날짜를 보여주게 해주고 싶으면 아래와 같이 코드를 추가해주면 된다.npm i moment우선, moment를 설치해준다...

chatGPT가 나왔을 때만 엊그제같은데, 지금은 vercel v0이 개발하였다. 개발자는 트렌드를 못 쫓아가면 죽겠구나 생각이 든다. chatGPT가 나오고 여러 인공지능이 개발되었다. 그런데 이제는 프론트를 꾸며준다니 점차 개발자가 설 공간이 줄어드는 건 아닌가라는 생각이 든다.v0서론은 이만하고 v0.dev에 대해서 서술하고자 한다. 참고사이트의 사이트를 들어갔다가 우연히 v0에 대해서 알게 되었다. 이는 인공지능이 프론트엔드 개발을 해주는 서비스이다.v0 by Vercel 해당 사이트에 들어가보면 알겠지만, 지금 엄청 많은 사이트들을 구현해놓았다. 보고 되게 신선한 충격을 받았다. 진짜 세상이 나도 모르는 사이에 너무 빠르게 변화하고 있구나라는 생각이 절로 든다. 채팅앱이나 인스타그램, 가계부등 ..

개념node.js에서는 많은 웹 소켓 구현체가 있다. 대표적으로 socket.io와 ws가 있다. 지금 여기서 내가 사용할 기술은 socket.io이다.웹에서 데이터를 주고 받을 땐 HTTP를 사용한다. 하지만 HTTP는 요청이 있어야만 응답을 보내주기 때문에 실시간을 보장하지 않는다. HTML5 WebSocket은 매우 유용한 기술이지만 오래된 브라우저의 경우 지원하지 않는 경우가 있다.www.caniuse.com브라우저 간 호환이나 이전 버전 호환을 고려하여 Node.js를 위한 강력한 Cross-platform WebSocket API인 Socket.io를 사용하는 것이 바람직하다.socket.io를 통한 양방향 통신 구현하기1) 백엔드에서 socket.io 설치하기(서버)npm i socket.i..

1. settings.py에 파일 경로 추가하기STATIC_URL = 'static/'STATICFILES_DIRS = [ BASE_DIR / 'static',]static폴더에 image파일을 사용하기 위해서 static폴더를 등록해준다.폴더는 이렇게 되어 있어야 static폴더 하위에 있는 이미지 파일을 사용할 수 있다.2. templates에 img 추가하기그리고 내 경우에 templates에 있는 html파일에 바로 이미지를 추가하고자 한다.1) static 파일 사용함을 공지하기{% load static %}img태그보다 위에 static 파일을 사용한다고 지정해줘야 한다.2) img태그 경로 설정하기그럴 경우 img태그를 만들어 src에 바로 static폴더 경로를 추가해준다.