F.E

[JavaScript] JS 표준 내장 객체, Map

Map이란? Map은 JavaScript의 표준 내장 객체로, 키와 값이 쌍으로 이루어진 콜렉션이다. Map 객체의 특징 객체를 포함한 모든 값을 키로 사용 할 수 있다. 객체는 이터러블이 아니지만, Map은 이터러블이다. 키 값이 고유하다. Map 생성 const map = new Map([["key", "value"], ["key1", "value1"]]) console.log(map) // Map(2) {'key' => 'value', 'key1' => 'value1'} set()를 이용한 요소 추가 const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"]]) map.set("해산물", "오징어") map.set("캐릭터", "짱구").set("물고기", "금붕어"..

[JavaScript] JS 표준 내장 객체, SET

SET이란? SET은 JavaScript의 표준 내장 객체로, 중복되지 않은 유일한 값의 콜렉션(집합)이다. SET 객체는 수학적 집합을 구현하기 위한 자료 구조로, 교집합, 합집합 등을 구현 할 수 있다. SET 객체의 특징 동일한 값을 중복하여 포함 할 수 없다. 요소 순서의 의미가 없다. 인덱스에 요소로 접근 할 수가 없다. 자료형에 관계 없이 원시 값과 객체 참조등 모두 저장 가능하다. SET 생성 const set1 = new Set() console.log(set) // Set(0) {} const set2 = new Set([1, 2, 3]) console.log(set) // Set(3) {1, 2, 3} const set3 = new Set("Hello") console.log(set) ..

[JavaScript] 비동기 처리 - Promise

JavaScript에서 비동기 처리는 전 게시글에 나온 콜백 함수를 통해서 처리를 했지만, 콜백 함수가 중첩 되어서 계속 호출해야하는 복잡한 코드의 경우는 계속 들여쓰기를 사용을 하여도, 코드의 가독성이 현저하게 떨어지게 되는 콜백 지옥이 발생이 됩니다. 해당 문제를 해결하기 위해 Promise를 사용하게 되었습니다. Promise란? Promise는 현재에는 당장 얻을 수 없지만 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법을 제공한다. Promise 생성 방법 아래와 같이 Promise 객체를 생성하는 데, 보통은 변수에 할당 하는 것이 아닌, 함수의 리턴 값으로 사용하는 경우가 많다. const promise = new Promise((resolve, reject) => {}) Promi..

[JavaScript] 평가와 일급, 고차 함수

평가란? 코드가 계산 되어 값을 만드는 것을 의미한다. 일급이란? 아래의 항목에 해당 되는 것을 의미한다. 일급은 값으로 다룰 수 있다. 일급은 변수에 담을 수 있다. 일급은 함수의 인자로 사용이 가능하다. 일급은 함수의 결과로 사용 될 수 있다. // a와 10은 변수에 담을 수도, 값으로 다룰 수 있어 일급이다. const a = 10 // abc()와 a, def는 모두 일급이다. const abc = a => a + 10 const def = abc(a) 일급 함수란 일급으로 다뤄지는 함수로, 값으로 다룰 수 있다. JavaScript에서 함수가 일급인 것은 조합성과 추상화의 도구로 사용 할 수 있다는 것이다. // 함수 a => a + 5는 변수 add에 저장 할 수 있기에, 1급이다. cons..

[JavaScript] 비동기 내장 통신 Fetch

FrontEnd는 디자인과 이벤트 등으로 화면 구성을 하는 것도 중요하지만, 서버와의 통신을 통해 원하는 데이터를 가져오는 것도 중요하다. 이 때 서버와의 통신을 위한 기능인 fetch()가 있다. //비동기 함수 httpRequest const httpRequest = async () => { //fetch("url", {method, body, header 설정}) 요청 후 응답을 res에 저장 const res = await fetch("http://3.39.32.181:8080/api/auth/login", { method: "post", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: inputId, pw: ..

[JavsScript] 비동기처리 - Callback Function

JavaScript는 비동기적 언어다. 비동기(Asynchronous)란 하나의 작업이 끝나지 않아도 다음 작업을 실행하는 방식을 의미한다. 동기(Synchronous)란? 하나의 작업이 끝나야 다음 작업을 실행하는 방식을 의미한다. 예를 들어 카페에 가서 커피를 구매한다고 생각하자. 동기적 처리의 예시 카페에 가서 커피를 주문할려고 한다. 카페에 도착한 나는 점원에게 아이스 아메리카노를 주문하였고, 점원은 주문을 받은 후 커피를 만드는 중에 다른 손님이 왔지만, 커피를 만들고 나에게 건네주기 전까지는 다른 손님의 주문도 받지 않고 그 사람이 원하는 커피를 제작하지 않았다. 이처럼 동기적 처리에서는 하나의 작업이 끝나기 전까지는 다른 작업을 실행하지 않는 것이 특징이다. 비동기적 처리의 예시 카페에 가서..

[React] axios에 대해서 알아보자!

Axios란? Axios란 브라우저, Node JS를 위한 HTTP 비동기 통신 라이브러리다. Promise 기반이며, async, awit 사용이 가능하며, JavaScript의 내장 라이브러리인 fetch와 다르게 설치를 통해서 사용이 가능하며, 구버전의 브라우저와 호환이 되기에, 데이터를 JSON 형태로 자동 변환할 수 있다. Axios 사용하기. npm 혹은 yarn을 이용하여 axios를 설치한다. #Use npm npm install axios #Use Yarn yarn add axios 설치 후엔 사용할 파일에 적용해준다. //JS ES6의 import 이용 import axios from "axios" Axios의 기본적인 사용 방법은 아래와 같다. //Axios GET [1] axios(..

[HTML] HTML 알아두면 좋은 태그

progress Tag는 진행률을 나타낼 수 있는 태그다. HTML 삽입 미리보기할 수 없는 소스 progress Tag는 3가지의 속상을 가지며, min과 max를 통하여, 진행바의 최소 최대 크기를 지정해주고 value로 현재 진행률을 지정해준다. progress Tag는 CSS랑 같이 사용할 수도 있다. details Tag는 Toglelist를 Html만으로 구현할 수 있다. HTML 삽입 미리보기할 수 없는 소스 details Tag는 아래와 같이 작성하여 Toggle을 만든다. 안에 는 Toggle에 보이는 텍스트를 작성하고, 그 아래의 내용들은 전부 Toggle로 숨겨지는 내용들이다. PINO PINO IS Student datalist Tag는 HTML만으로 자동 완성 기능을 구현할 수 있..

[React] useParams를 이용하여, 게시글 리스트와 조회 하기.(index, show)

해당 게시글은 Nomad Coder님의 강의를 보고 작성한 게시글 입니다. 해당 강의에 있는 영화 API를 사용 합니다. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App" const root = ReactDOM.createRoot(document.getElementById("root")) root.render( ) src/App.js //App.js import { Route, Routes } from "react-router-dom"; import Detail f..

[React] react-router-dom 사용하기

01. react-router-dom 설치하기 npm 혹은 yarn 등의 패키지 모듈을 이용하여 react-router-dom 모듈을 설치한다. #npm npm install react-router-dom #yarn yarn add react-router-dom 02. BrowserRouter react-router-dom에서 라우터를 사용하기 위해서는 BrowserRouter 기능을 사용해야한다. index.js의 Tag를 아래와 같이 감싸주도록 하자. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" im..