FrontEnd :-)

Udemy - 【한글자막】 JavaScript 알고리즘 & 자료구조 마스터클래스 #1. Frequency Counter - sameFrequency Write a function called same, which accepts two arrays. The function should return true if every value in the array has it's corresponding value squared in the second array. The frequency of values must be the same. //시간복잡도: O(n^2) //indexOf 는 전체 배열을 반복하거나 중첩된 루프인 전체 배열을 잠재적으로 반복하는 것. function same(arr1, arr2) { i..

FE : React , yarn BE: Express, npm BE 최종 코드 //app.js const express = require("express"); const app = express(); const port = 8080; const { default: fetch } = require("node-fetch"); //cors 추가하면 ajax 잘됨 npm install cors const cors = require("cors"); const corsOptions = { origin: 'http://localhost:3000', credential: true } app.use(cors(corsOptions)); //latest API 가져와서 데이터 저장 let date = ""; let rate..

FE : React , yarn BE: Express, npm FE 최종 코드 //App.js import React, { useCallback, useEffect, useState } from "react"; import instance from "./API/instance"; import "./App.css"; import CurrencyBox from "./components/CurrencyBox"; import Spinner from "./components/Spinner"; function App() { const [data, setData] = useState([]); const [list, setList] = useState([]); const [date, setDate] = useState..

FE : React , yarn BE: Express, npm ③ Third commit - FE 1. install axios, instance 생성 2. select 선택을 국가 기준으로 변경 3. 변수명 변경 (1 => from , 2=> to 등으로) ① First Commit - BE 라이브러리 설치 1. xhr2 : XMLHttpRequest 사용 위함. 2. cors: cors 충돌 해결 위함. 클라이언트-서버 데이터 get : date, currencylist, nationlist 보내기 post: 두 국가의 통화코드값 받으면, rate 값 보내기 const express = require("express"); const app = express(); const port = 8080; co..

FE : React , yarn BE: Express, npm ① First commit 우선, 백엔드 서버는 만들어 본 적이 없어서 프론트에서 환율 정보를 받아서 작동하게 했다. 환율 정보 받아오는 API 코드는 해당 홈페이지 document를 참고했다. 1. "https://exchangerate.host/#/"에서 환율 정보 받음 2. 기본 UI import React, { useEffect, useState } from "react"; import "./App.css"; function App() { const [money, setMoney] = useState(1); const [list, setList] = useState([]); const [currency1, setCurrency1] = ..

Udemy - 【한글자막】 JavaScript 알고리즘 & 자료구조 마스터클래스 :: 섹션 4 문제 해결 접근법 HOW DO YOU IMPROVE? Devise a plan for solving problems Master common problem solving patterns PROBLEM SOLVING Understand the Problem Explore Concrete Examples Break It Down Solve/Simplify Look Back and Refactor 1. UNDERSTAND THE PROBLEM 문제의 이해 Can I restate the problem in my own words? What are the inputs that go into the problem? Wh..

Udemy - 【한글자막】 JavaScript 알고리즘 & 자료구조 마스터클래스 :: 섹션 3 배열과 오브젝트의 성능 평가 객체의 빅오 Big O of Objects Insertion - O(1) Removal - O(1) Searching - O(N) Access - O(1) When you don't need any ordering, objects are an excellent choice! Big O of Object Methods Object.keys - O(N) Object.values - O(N) Object.entries - O(N) hasOwnProperty - O(1) Quiz 질문 1: 오브젝트에 키와 값을 추가하기 위한 빅오는 무엇일까요? 답: O(1) 질문 2: 오브젝트의 키에 접근..

React Navtive 스터디 5week 도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗] (4장 할일 목록 만들기 ②-③) 4.1 불변성을 지키면서 객체와 배열 업데이트하기 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 4.3 새 항목 등록하기 4.4 할일 완료 상태 토글하기 4.5 항목 삭제하기 4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기 4.7 정리 AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소. iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현되어 있음. 브라우저에서 사용하는 locatStorage와도 꽤 비슷. 값을 저장할 때는 문자열 타..