본문 바로가기

Programing371

Pure React : Modal Modal 컴포넌트 예제import styled from 'styled-components';const ModalWindow = styled.div` position: fixed; background-color: rgba(0, 0, 0, 0.7); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; &.open { visibility: visible; opacity: 1; pointer-events: auto; } & > div { width: 400px; height: 60vh.. Programing/CSS 2024. 6. 22.
입력 필드 유효성 검사 상태 만들기 const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [error, setError] = useState(''); const [isButtonDisabled, setIsButtonDisabled] = useState(true);유효성 검사 함수 만들기const validateEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); };.. Programing/React 2024. 6. 22.
API key 환경 변수로 설정하기 (.env) 예를 들어 아래와 같이 fetch를 하는 코드에 API Key가 필요하다고 가정하자. tanstack 쿼리는 리액트 라이브러리이지만 기본적인 fetch 함수에도 통용이 되는 개념이다. import { useQuery } from '@tanstack/react-query';import axios from 'axios';function useFetch() { const apiUrl = 'API URL 또는 Key'; const { data, error, isPending } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await axios.get(apiUrl); r.. Programing/JavaScript 2024. 6. 22.
2024-06-20 리액트 심화 팀 프로젝트 회고 (회원 인증/인가 파트) 과정 정보리액트 심화 : 아웃소싱 프로젝트기간 : 2024-06-17 (월) ~ 2024-06-19 (금)조 : A10주제 : 행사 정보 사이트맡은 역할supabase 셋업user authentication/authorization회원가입 / 소셜 로그인자체 평가팀 프로젝트 : 10 / 10 점점수 부여 이유 : 남겨 둔 버그도 없이 깔끔하게 진행됨.개인 / 팀 평가팀잘한 점서로가 작성한 코드를 이해할 수 있을 정도의 수준으로 작성하여 컴포넌트 간 코드 재사용이나 리팩토링이 용이하였음.팀원 간 실력 격차나 견해의 차이를 활발한 소통으로 좁힐 수 있었고, 나만의 언어가 아닌 팀 전체의 언어로 소통하여 최상의 퍼포먼스를 낼 수 있었음.아쉬운 점팀 프로젝트에서 아쉬운 점은 없었고 과제 기간만 길었다면 코드 최.. Programing/TIL 2024. 6. 21.
pull 오류 : need to specify how to reconcile them 해결 방법 오류 내용hint: You have divergent branches and need to specify how to reconcile them.hint: You can do so by running one of the following commands sometime beforehint: your next pull:hint: hint: git config pull.rebase false # mergehint: git config pull.rebase true # rebasehint: git config pull.ff only # fast-forward onlyhint: hint: You can replace "git config" with "git config --global.. Programing/Git 2024. 6. 21.

티스토리툴바