.일반적으로 를 사용하는데 가끔 Navigate를 사용하고 싶다는 생각이 들면, 사용 시점과 무관하게 사용을 했는데 문득 궁금해졌다. 어떤 차이점이 있는지? 사용 시점이 있을까? 그래서 갑자기 찾아보았다.. 🤣🤣 목적 사용자가 클릭할 수 있는 하이퍼링크 생성. 페이지를 새로고침하지 않고 애플리케이션 내의 다른 경로로 이동할 수 있다. 장점 ● 선언적 접근 : 와 유사하게 선언적으로 라우팅을 구현할 수 있다. ● 사용용이성 : 링크를 통해 특정 경로로 이동하고자 할때 간단하게 사용할 수 있다. 단점 ● 이벤트 헨들러 내에서 프로그래매틱하게 라우팅을 제어할 수 없다. 즉, 사용자 상호작용 또는 조건에 따라 라우팅을 동적으로 변경하는 것이 어렵다. 🔥와 차이점 - 외부 프로젝..
HTTP란? HyperText Transfer Protocal HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜이다. 쉽게 웹에서 데이터를 주고받기 위핸 프로토콜이라고 생각하면 된다. 1. 작동원리 클라이언트 ↔ 서버 클라이언트가 웹브라우저를 통해 웹페이지에 접근하려 할 때, HTTP요청을 웹서버에 보낸다. 서버는 해당 요청을 처리 후 HTTP 응답으로 결과를 클라이언트에게 전송한다. 2. 주요특징 📌 비연결성(Connectionless) 클라이언트가 요청을 보내고 서버가 응담을 한 후 연결이 바로 종료. 장점 : 효율성이 높다 단점 : 각 요청이 독립적이다. 📌 무상태(Stateless) HTTP는 이전의 요청을 기억하지 않는다. 서버는 요청을 받으면 새로운 것으로 처리하고 ..
json server 1. JSON Server란? 프론트엔드 개발자가 백엔드 없이 RESTful API를 모의할 수 있도록 설계된 도구이다. 실제 서버를 구축하지 않고도 데이터를 생성, 읽기, 업데이트, 삭제 (CRUD) 하는 API를 빠르게 프로토타이핑하고 테스트할 수 있다. JSON Sever는 단순히 JSON파일을 데이터베이스처럼 사용하고, 이 파일에 대한 요청을 처리하기 위해 실제 서버를 에뮬레이트 한다고 한다!! 🔥에뮬레이트 (Emulator) 하나의 시스템이 다른 시스템의 기능을 모방하는 하드웨어나 소프트웨어를 의미 2. 설치 방법 - yarn add json-server - npm install json-server 3. JSON 파일 준비 데이터를 저장할 db.json 파일생성 { "po..
먼길을 돌고 돌아 작성한 코드.. 처음에는 for문으로 문자열을 하나씩 빼주어 배열로 나타내 보자라고 생각했다. 다음으로는 크기비교를 해야함으로 sort로 크기비교를 해주자 까지 생각을 했는데, sort에서 - 또는 + 로 순서를 나열할 수는 있었으나 문자열은 어떻게 비교할 수 있는지 모르고 있었다. 그래서 찾아낸 보다 간단한 삼항연산자로 식을 만들 수 있었다. function solution(s) { return s.split('').sort((a, b) => a > b ? -1 : 1).join(''); } split 매서드를 이용해 배열로 변환 sort 매서드를 이용해 a가 b 보다 크면 -1, a를 b 뒤로 이동 a가 b 보다 작다면 1, a를 b보다 앞으로 이동 그리고 배열나온 값을 join 매..
분명 분명 나는 또 사용할 곳이 있을 것이기 때문에!!!!!!!!!!!!!!!! import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { getAuth, onAuthStateChanged } from "firebase/auth"; export default function Navbar() { const [userMail, setUserMail] = useState(""); const [userProfileImg, setUserProfileImg] = useState(""); useEffect(() => { co..
풀옵으로 전달해주는 값에 따라 다른 리스트 컴포넌트를 보여주어야 했다. 그래서 작성한 코드 export default function ListSection({ text, onClick, category }) { let ComponentToRender = null; if (category === "면접후기") { ComponentToRender = Interview; } else if (category === "취업정보") { ComponentToRender = WorkInfo; } return ( {text} 더보기 {ComponentToRender && } ); } let을 이용해 ComponentToRender 라는 변수의 초기값을 null로 설정\ let ComponentToRender = null..
import { useNavigate } from "react-router"; import styled from "styled-components"; const navigate = useNavigate(); const onClickInterview = () => { navigate("/detail"); }; export default function ListSection({ text }) { return ( {text} 더보기 ); } useNavigate를 사용했더니 위와같은 에러가 발생했다. 그리곤 깨달았다 왜 저러게 작성했는가... 선언문 밖에다가 선언을 해놓았다니ㅋㅋㅋ 다음에 이런에러가 발생하면 안되겠지만 발생하면 다시 내부에 잘 선언해주자 멍청아...
이번 문제를 가져온 이유는 아시는분들은 쉽게 풀었겠지만 for문 하나로 2개의 배열 값을 구할 수 있다는 것을 처음 알았다!!! function solution(a, b) { let num = 0 for(let i =0 ; i < a.length ; i ++){ num += a[i] * b[i] ; } return num } 처음에는 for문을 두개 돌렸는데 두개를 돌리고 보니 이후에 어떻게 해야할지 모르겠어서 찾아보았는데 껄껄껄 이런 이득이... 하나 헷갈리는 부분도 있었다. 배열의 n의 길이를 구할때 n-1을 구해야 한다!! 그러니 for문으로 index 값을 구할때 1
처음 이 문제를 직면했을때 길이를 2로 나누었을 때 0인경우와 아닌 경우, slice를 이용해 자리수를 잘라내면 될 것 같은데 까지는 생각했으나 그 이상으로 무엇을 해야하는지 알 수가 없었다. 초기에 작성해 본 식 function solution(s) { const middle = s.length % 2 if (middle === 0) { } } 그리고 아무생각이 없음... slice를 어떻게 써먹어야하는지.. 이렇게 저렇게 해보았으나 빨간 글자들 뿐..😬 그래서 이번 문제는 chat GPT의 도움을 받아보기로.. 😭 function solution(s) { const middle = Math.floor(s.length / 2); return s.length % 2 === 0 ? s.slice(middl..
1. Router 설정 상세페이지는 동적으로 표현하기 위해 router를 이용해 동적 경로를 이용 import { Navigate, RouterProvider, createBrowserRouter } from "react-router-dom"; import Home from "./components/pages/Home"; import Error from "./components/pages/Error"; import Detail from "./components/pages/Detail"; const router = createBrowserRouter([ { path: "/", element: , errorElement: , }, { path: "/:detail/:id", element: , }, { pat..
- Total
- Today
- Yesterday
- styled component GlobalStyle 사용방법
- 별점만들기
- axios instance 작성하기
- 영화 별점
- readme 이미지 추가 방법
- axios 사용하기
- readme 작성해야 하는 이유
- readme 역할
- styled component 설치방법
- styled component 사용방법
- Warning: Each child in a list should have a unique "key" prop.
- Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>
- simple Icon 사용방법
- axios CRUD
- axiosinstance 사용 시 토큰 사용 법
- nextjs 토큰 만료처리하기
- readme작성해보기
- 영화별점만들기
- styled component 조건부 사용방법
- 에러모음집
- axios 설치하기
- git cache
- readme 작성 방법
- 별점 색채우기
- Fetch와 Axios 의 장단점
- Warning: A component is changing an uncontrolled input to be controlled.
- 유효성검사
- 유효성검사 css
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |