export { /*공부한 것들*/ };

axios

2024.01.19·

JavaScript

axios" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스Promise 기반의 HTTP 클라이언트 라이브러리 GET 요청" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스import axios from "axios";const Home = () => { const response = axios.get("https://learn.codeit.kr/api/members");}export default Home;1. 첫번째 인자는 앤드포인트, 선택적으로 두번째 인자에 config객체를 넣을 수 있다2. axios.get()이 반환하는 promise 객체에 있는 PromiseResult 객체의 data 프로퍼티 값은 fetch의 json()이 반환하는 Pro..

Link, useRouter

2024.01.19·

next.js

Link" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스next.js의 네비게이션 컴포넌트import Link from "next/Link";const Home = () => { return( go to Guitar Category go to Bass Category go to Drum Category )}export default Home;1. Link 컴포넌트의 href prop에 이동하려는 페이지의 상대 경로를 넣는다2. next에서 Link는 전체 페이지를 불러오는게 아닌, 필요한 부분만 불러오기 때문에 최적화에 용이하다3. 외부링크를 사용할 땐, 외부링크 전체를 herf의 값으로 넣는다 useRouter" data-ke-ty..

Link, NavLink, useNavigate, useParams

2024.01.14·

React

Link 지정한 경로로 페이지를 이동시켜주는 컴포넌트 - to 속성으로 지정한 경로를 이동시켜 준다. - Link 컴포넌트에선 "href" 대신 "to"를 사용한다. - 이동할 경로의 앞에 /를 사용하면 절대경로, /를 사용하지 않으면 상대경로. NavLink - 현재 URL과 to가 가리키는 링크가 일치할 때 , activeStyle과 activeClassName이 활성화 되고, 일치하지 않으면 비활성화 된다. - activeStyle을 사용하여 위 코드와 같은 기능을 하도록 만들었다. useNavigate - 지정한 경로로 이동시켜주는 훅. - 인자로 들어가는 문자열에 /를 빼면 상대경로, /를 사용하면 절대경로

CORS에러

2024.01.14·

HTTP

CORS" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. Cross Origin Resuource Sharing 의 약자인 CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스 할 수 있게 하는 보안 메커니즘이다.2. CORS는 서버와 클라리언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 경정하는 방식으로 CORS라는 이름으로 표준화 되었다.3. CORS는 최신 브라우저에서 구현된 동일 출저책 때문에 등작했다. ※동일 출저 정책 : 동일한 출저(프로토콜, 호스트명, 포트)의 리소스에만 접근하도록 제한하는 것. CORS 에러 발생 시 해결" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. 웹 브라우저 ..

react-router-dom

2024.01.14·

React

react-router-dom" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스현재 경로와 일치하는 컴포넌트를 렌더링 시켜주는 라이브러리 BrowserRouter" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스라우팅 범위를 지정import { BrowserRouter } from "react-router-dom";const App = () => { return ( {/* ... */} );}export default App;1. BrowserRouter 는 라우팅 범위를 감싸며, 내부에는 렌더링 시킬 컴포넌트들이 들어간다2. 렌더링 시킬 컴포넌트들은 같은 src폴더에 있어야 한다. (외부에 있으면 에러) Routes, Rout..

react-hook-form

2024.01.13·

React

react-hook-form" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스폼의 유효성을 검사하는 라이브러리 useForm" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스유효성 검사를 위한 여러 프로퍼티들과 메서드들을 가진 객체를 반환하는 메서드import { useForm } from "react-hook-form";const Inputs = () => { const formTools = useForm(); return ()}export default Inputs;1. useForm의 인자에 { mode: "onChange" } 를 넣으면 유효성을 실시간으로 모니터링 한다.formState폼 상태에 관한 여러가지 정보들이 들어있는 객체import..

context

2024.01.10·

React

HTML 삽입 미리보기할 수 없는 소스 prop drilling을 방지하기 위한 훅 HTML 삽입 미리보기할 수 없는 소스 import { createContext, useState } from "react"; const LanguageContext = createContext(); const LanguageProvider = ({ children }) => { const [language, setLanguage] = useState("ko"); const toggleLanguage = () => { language === "ko" ? setLanguage("en") : setLanguage("ko"); } return( {children} ) } export default LanguageProvider..

타입 정의 방법

2023.12.29·

typescript

anaotation " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스변수를 선언할 때, 타입을 지정하는 방식" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스원시값const stringSample: string = "string"; //변수뒤에 콜론과 타입을 넣는다const numberSample: number = 1;const booleanSample: boolean = true;const nullSample: null = null;const undefinedSample: undefined = undefined;배열const strArr: string[] = []; //대괄호 앞의 타입은 배열요소의 타입이다strArr.push("hello")..

Cascading, position

2023.10.22·

CSS

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. user agent stylesheet(브라우저 기본 스타일) 은 CSS 스크립트보다 우선 순위가 낮음. 2. HTML style attribue는 우선 순위가 가장 높음. 3. 동일한 요소에 대한 여러 CSS규칙이 있을때, 가장 나중에 정의된 스타일이 우선 순위가 높음. 4. 명시도 점수 순에 따름.(https://specificity.keegan.st/) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. static 1.기본 포지션 값, 요소의 원래 위치에 배치. 2. relative 1. 요소의 원래 위치를 기준으로 이동가능. 2. 요소의 원래 자리는 그대로 차지하고 있으며, 다른 ..

fetch

2023.10.07·

JavaScript

fetch" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스네트워크 요청을 보내거나, 응답을 처리하는 웹 API GET 요청" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스window.onload = () => { const response = fetch("https://learn.codeit.kr/api/members");}window.onload = () => { fetch("https://learn.codeit.kr/api/members") .then((promiseResult) => { console.log(promiseResult.json()); });}1. 첫번째 인자로 앤드포인트를 넣는다.2. 선택적으로 두번째 인자에 method..

property attribute

2023.10.02·

JavaScript

앞으로 살펴볼 프로퍼티 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념에 대해 알아보자. 내부슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값인 내부 슬롯을 자동 정의한다. ○ [[value]] : 값. ○ [[writable]] : 값의 갱신 가능 여부. ○ [[enumerable]] : 열거 가능 여부. ○ [[configurable]] : 정의 가능 여부. 내부 슬롯에는 직접 접근할 수 없지만, Object..

Event

2023.09.29·

JavaScript

이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 에를 들어, 클릭 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라고 하고, 이벤트가 발생했을 때 브라우저 에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라 한다. 예를들어, 사용자가 버튼을 클릭했을 때 함수를 호출하여 어떤 처리를 하고 싶다고 가정해보자. 이때 문제는 "언제 함수를 호출해야 하는가"다. 사용자가 ..

티스토리툴바