TIL/JavaScript (10) 썸네일형 리스트형 React JWT로 로그인 구현 import axios from "axios";import { API_ENDPOINT } from "./server";import Cookies from "js-cookie";const instance = axios.create({ baseURL: API_ENDPOINT, headers: { "Content-type": "application/json" },});// 인터셉터를 사용하여 요청에 토큰을 추가instance.interceptors.request.use( config => { const token = Cookies.get("access"); if (token) { config.headers['Authorization'] = `Bear.. React access 토큰 디코딩 access 토큰 디코딩해서 userId 얻기 import base64 from 'base-64';export const getUserId = (token) => { try { if (!token) { throw new Error('Token is undefined or empty'); } const payload = token.substring(token.indexOf('.') + 1, token.lastIndexOf('.')); const decodingInfo = base64.decode(payload); const decodingInfoJson = JSON.parse(decodingInfo); re.. Js 객체 <-> JSON 문자열 변환 stringify(): 자바스크립트 객체 -> JSON 문자열로 변환. 네트워크를 통해 객체를 JSON 문자열로 변환할 때 주로 사용console.log(JSON.strignify({x: 5, y: 6}))// Expected output: "{"x":5, "y":6}" parse(): JSON 문자열 -> 자바스크립트 객체로 변환. 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 JS 객체로 변환할 때 사용const json = '{"result":true, "count":42}';const obj = JSON.parse(json);console.log(obj.count)// Expected output: 42 JSONPlaceholder가짜 서버(fake server) React Dynamic Route Dynamic Route란, path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다.useParams를 사용하면 된다. 바로 적용해보았다. 우리 프로젝트에서 이 Dynamic Route를 사용해 department 별 페이지를 이동하게끔 구현했다. Header.jsx {Array.isArray(departmentList) && departmentList.map(department => ( {department.department_name} ))} router.jsx} /> Department.jsximport React, { useEffect, useState } from 'react';import { useParam.. React Router Dom yarn add react-router-dom 1. 페이지 컴포넌트 작성 -> 다중 페이지2. Router.js 파일 생성. router를 구성하는 설정 코드 작성3. App.jsx import 하고 2번 적용 : 주입4. 페이지 이동 # Router.jsimport { BrowserRouter, Route, Routes } from "react-router-dom";import About from "../pages/About";import Home from "../pages/Home";import Works from "../pages/Works";import Contact from "../pages/Contact";const Router = () => { return ( .. jQuery 기본 문법 jQuery 기본 문법 예제 $(선택자).동작함수1().동작함수2() $는 jQeury를 의미하고, jQuery에 접근할 수 있게 해주는 식별자 1. 선택자 (Selectors) jQuery는 CSS 선택자를 사용하여 문서의 요소를 선택한다. 선택자를 사용하여 원하는 요소를 찾을 수 있다. // 예시: 모든 요소를 선택 $("p") 2. 이벤트 핸들링 (Event Handling) 이벤트 핸들러를 쉽게 추가할 수 있다. // 예시: 버튼 클릭 이벤트 핸들링 $("button").click(function(){ // 실행될 코드 작성 }); 3.DOM 조작 (DOM Manioultion) 문서 객체 모델(DOM)을 쉽게 조작할 수 있다. // 예시: 요소의 내용 변경 $("p").text("새로운 내용").. JS 기본문법 - 함수(2) 함수 1. 함수의 정의 - 함수를 정의하는 순간, 함수를 저장할 수 있는 메모리 공간이 생성되고 함수 안에서 정의된 코드가 메모리에 저장된다. 2. 함수 사용 - 메모리에 저장된 함수를 사용해서 함수 안에 있는 코드를 실행시켜야 한다. 함수를 호출한다고 표현함. 3. Return - 함수 안에서 변수를 선언하면 해당 변수는 함수가 저장된 메모리에서 저장 공간을 확보래 그 내용을 저장하게 된다. 함수 안에서 선언된 변수를 함수 밖으로 꺼내오기 위해서는 Return 키워드를 사용해 값을 반환하는 과정을 거쳐야 한다. 함수 안에서 Return을 사용해 값을 반환하면 해당 함수를 호출 했을 때 그 함수 자체가 반환값을 의미한다고 보면 된다. 4. Parameter - 함수를 정의할 떄 함수명 뒤에 위치한 ( ).. JS 기본문법 - 함수 기본적인 함수 개념은 아는데 아직 익숙하지가 않아 직접 코딩을 하다보면 항상 헷갈려서 list와 dictionary에 이어 함수도 복습할 겸 내용 정리를 한번 해보기로 했다. 함수의 기본 생김새와 예시이다. // 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들); // 예시 // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수 function sum(num1, num2) { console.log('숫자', num1, num2); return num1 + num2; } console.log(sum(3, 5)); // 8 출력 console.log(sum(4, -1)); // 3 출력 function sum(num1, num2) //.. jQuery 란? jQuery는 미리 작성된 javascript 코드 JS 만으로도 모든 기능을 구현할 수는 있지만, 1. 코드가 복잡해지고, 2. 브라우저 간 호환성 문제고 고려해야 해서, jQuery라는 라이브러리가 등장하게 되었다. 쉬운 예시로 '친구들끼리 대화를 할 때 줄임말을 써서 상대가 쉽게 알아듣게 만드는 것'과 같다. 미리 작성된 JS 코드를 가져오는 것을 'import' 라고 한다. 라이브러리를 가져와 사용할 때는 '로컬에 다운로드' 하거나 '웹의 주소를 입력'하면 된다. 여기서 웹 주소를 입력하는 것이 CDN이다. CDN은 Content Delivery Nerwork의 약자로 웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다. CDN을 사용하면.. JS 기본문법(list, dictionary) 계속해서 강의를 듣다보니 list 와 dictionary의 개념이 매우매우매우 중요한 것 같아서 다시 한번 복습해보았다. list = 값을 순서를 지킨 채로 가지고 있는 형태 [ ] 로 되어있다면 list!! index = list의 순서, 0부터 시작하며 1씩 증가하는 형태 0부터 시작한다는 것을 항상 기억하자! list 내의 요소 = 'element' or 'item' 이라고 한다. 서로 미세하게 차이가 있는 것 같지만 혼용해서 사용하는 듯 하니 나중에 자세히 알아보자 배열인 array와 비슷하지만 다르다. array에 대해선 나중에 따로 공부하자 let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let b_list = [1,2,'hey',3] // 로.. 이전 1 다음