본문 바로가기

분류 전체보기

 (260)
220817 - 자바스크립트 -함수 합성, 커링, sort, filter, map, reduce, 파일 저장/불러오기/수정/추가 함수 합성 : 2개 이상의 함수 합쳐 사용하는 것 const plus=(a,b)=>a+b; const minus=(a,b)=>a-b; const multiple=(a,b)=>a*b; const add10=x=>x+10; console.log(multiple(add10(80),3)); //270 console.log(minus(plus(10,20),15)); //15 커링 (currying) : 하나 이상의 매개변수(파라미터)를 갖는 함수를 부분적으로 나누어 각각 단일 매개변수를 갖는 함수로 설정 파라미터 개수보다 적은 값이 들어오면 함수 자체를 반환, 파라미터에 맞게 들어오면 최종값 반환 https://sujinlee.me/currying-in-functional-javascript/ [번역] 초보자를 ..
220811 - 자바스크립트 - 함수, 배열, 클로저 clearInterval const my=setInterval(() => { console.log('안녕하세요'); }, 3000); //3초마다 실행 setTimeout(() => { clearInterval(my); }, 7000); //7초 후 실행 재귀 함수 const countdown=(value)=>{ console.log('출력값 =',value); if (value===0) return value; return countdown(value-1); //a함수 안에서 a함수 다시 호출 } const lastValue=countdown(10); console.log('최종값 =',lastValue); // 출력값 = 10 출력값 = 9 출력값 = 8 출력값 = 7 출력값 = 6 출력값 = 5 출..
자바 재정리 - 클래스 https://cerulean85.tistory.com/149 객체와 인스턴스의 차이 * 자의적인 해석이므로 논란의 여지가 있음 객체와 인스턴스의 차이를 알아보니 블로그마다 말이 다르다. 어떤 블로거는 인스턴스는 객체와 같지만, 관계적인 측면에서 이야기할 때 객체 대신 cerulean85.tistory.com 객체 지향 프로그래밍 (Object Oriented Programming) : 부품 객체들 먼저 만들고, 하나씩 조립해나가 프로그램 완성 객체 : 소프트웨어 세계에 구현할 대상 / 독립적으로 존재하며 서로 상호작용 클래스 : 객체 구현 위한 설계도 인스턴스 : 클래스에 의해 소프트웨어 세계에 구현된 실체 객체⊃인스턴스 객체 물리/추상적으로 존재하는 것 중 속성 갖고 식별 가능한 것 객체 모델링 : ..
220810 - 자바스크립트 - 문법 자바스크립트 문법 try, catch try { let num=20; printMessage(num); console.log('수행완료'); } catch (e) { console.log(e.name); console.log(e.message); } console.log('프로그램 종료'); // ReferenceError printMessage is not defined 프로그램 종료 => 자바와 달리 예외 종류가 구체적으로 정의돼있지 않음 함수 //선언적 함수 function message(data){ console.log(data,'코로나 조심합니다'); } //표현식 함수 const corona=function(){ console.log('오늘의 코로나 발생 현황 1111'); } //화살표 함수..
220809 - 자바스크립트 - 기초 문법, JSON 표기법 문법 let str1='10'; let str2='20'; console.log('두 문자 더하기=%s',str1+str2); //두 문자 더하기=1020 let num1=10; let num2=20; console.log('두 숫자 더하기=%d',num1+num2); //두 숫자 더하기=30 isNaN const isNum=isNaN(20); //is Not a Number const isNum2=isNaN(-20); const isNum3=isNaN('50'); //따옴표 속에 있는 숫자로 인식됨 const isNum4=isNaN('hello'); console.log(isNum); //false //=is a number console.log(isNum2); //false console.log(is..
220808 - 리액트 - redux, es6 redux 참고: https://itprogramming119.tistory.com/entry/React-react-redux-%EC%98%88%EC%A0%9C [React] react-redux 정리 및 예제 [Redux란?] 1. Redux 등장 배경 MVC 패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였습니다. 즉, 양방향 데이터 흐름이었죠. 양방향 데이터 흐름은 복잡하 itprogramming119.tistory.com https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/Redux-%EC%A0%95%EB%A6%AC/ Redux 정리 Redux란? 리덕스는 리액트..
220805 - 리액트 - 생명주기, AJAX 리액트 생명주기 Mount(컴포넌트 처음 실행됨) -> props, state 저장 -> componentWillMount 메소드 호출됨 (DOM에 render 안 됐으므로 props, state 수정 불가) -> render로 컴포넌트를 DOM에 부착 -> Mount가 완료된 후 componentDidMount 메소드 호출됨 props update 과정 업데이트 발생 감지 -> componentWillReceiveProps 메소드가 호출 -> shouldComponentUpdate, componentWillUpdate가 차례대로 호출 -> 업데이트가 완료(render) -> componentDidUpdate 참고: https://lktprogrammer.tistory.com/130 [React] 리액트..
자바 재정리 - 참조 참조 : 값이 직접 할당되지 않고 값이 있는 주소를 가리키는 것 ex. 배열 타입, 열거 타입, 클래스(ex. String), 인터페이스 => 참조 객체 자체는 힙 영역, 객체의 주소값은 스택 영역에 생성됨 ※ 데이터 타입 ※ 메모리 구조 1. 메소드 영역 (=클래스/정적 영역) 전역변수, 정적 멤버변수 저장 메인 메소드의 클래스, 정적변수(=> 바이트 코드)가 로드됨 -> JVM이 메인메소드 호출 가능해짐 2. 스택 영역 => 공유되는 다른 영역과 달리 스레드별로 각각 생성됨 지역변수, 매개변수 저장 기본형 변수(공간에 직접 할당되는 값들 ex.int), 참조값의 주소 저장 메소드 호출 될때마다 지역변수 저장, 호출 끝나면 저장됐던 변수들 제거됨 3. 힙 영역 참조값 저장 인스턴스 변수(new로 생성)..
220804 - 리액트 - 라우터돔 라우터돔 (업데이트 이전 버전) npm i react-router-dom@5.2.0 Switch : 첫번째 Route(보통 메인 페이지)를 렌더링 Route : path에 지정된 url에 접속해 렌더링 Link : url로 이동 (새로고침 없이) Useparams : 파라미터 가져옴 (URL/user/1) index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; functio..
220803 - 리액트 - update(기존 목록 내용 변경), delete(선택 목록 삭제) update render() 내부 코드 메소드로 분리 App import { Component } from 'react'; import './App.css'; import Subject from '../src/Components/Subject'; import TOC from '../src/Components/TOC' import ReadContent from './Components/ReadContent' import Control from '../src/Components/Control' import CreateContent from '../src/Components/CreateContent'; import UpdateContent from './Components/UpdateContent'; clas..

티스토리툴바