반응형

개발/javascript 10

[react] hook - 상태관리(useState,useReducer,useContext)

react의 hook은 함수형 컴포넌트에서도 상태관리를 할 수 있게 useState, useEffect 등의 함수를 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. 내가 사용해본 hook은 useState, useEffect, useContext, useReducer, useMemo, useRef이다. 이번에 복직 준비하면서 다시 api를 보니 여러 hook이 있어 기존의 hook과 함께 공부하고 정리해 보려고 한다. 오늘은 상태를 관리하는 useState, useReducer, useContext 만! 1. useState 상태 값과 상태 갱신함수를 반환하는 hook. 초기값은 매개변수로 설정. - 배열, object, 숫자, 문자열 등 간단한 데이터를 다룰 때 ..

개발/javascript 2023.01.26

[npm] webpack에서 babel 설정

저번 포스팅에서 babel 셋팅하는 것을 설명한 적이 있다. 그 때는 webpack을 이용하지 않고 babel 만 이용해서 셋팅했는데, webpack으로 babel을 셋팅하면 프로젝트 파일이 묶여 나오면서 js를 변경(es6를 es5로 또는 리액트 jsx를 js로 변환 등)할 수있다. 일단 babel-loader와 사용할 프리셋들, babel-core를 설치해야 한다. $npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react /*webpack.config.js*/ const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin =..

개발/javascript 2023.01.20

[javacript] ES6 Map/Set

Map과 Set은 ES6에서 새로 도입한 자료구조이다. Map은 키와 값의 집합이라 할 수있고, Set은 중복을 허용하지 않는 배열이라 할 수 있다. 🎈Map Map은 키와 값을 연결한다는 점에서 Object와 비슷한데, 아래와 같은 차이가 있다. - Map은 프로토타입 체인에서 자유롭다. - Map은 저장된 키와 값의 쌍이 몇 개인지 알 수 있다. - Map은 객체를 키로 사용할 수 있다. - Map은 순서를 보장한다. 사용 방법은 아래와 같다. //생성 const students = new Map(); //const students = new Map([["01",{name:'ha',age:12}],["02",{name:'roh',age:17}]]); //추가 students.set("01",{name..

개발/javascript 2023.01.04

[javascript] ES6 배열 함수

🎈 대상 배열 직접 수정 함수 push / pop / shift / unshift / splice / sort var arr=['a','b','c','d']; arr.toString();//'a,b,c,d' //push - 배열의 끝에 요소 추가 arr.push('e'); arr.toString();//'a,b,c,d,e' //pop - 배열의 끝 요소 제거 arr.pop(); //'e' arr.toString();//'a,b,c,d' //shift - 배열의 처음 요소 제거 arr.shift();//'a' arr.toString();//'b,c,d' //unshift - 배열의 처음에 요소 추가 arr.unshift('a'); arr.toString();//'a,b,c,d' //★splice - 임의의..

개발/javascript 2023.01.02

[javascript] 원시타입과 객체 Boolean으로 변환

Boolean 타입이 아닌 변수에 부정연산자를 쓰거나 Boolean 생성자로 감싸면 Boolean 형태로 변한다. 변수가 참같은 값이면 true, 아니면 false가 반환된다. 조금 헷깔려서 한번 여러 형태를 다 돌려보았다. Boolean(0) !!0 false // Number 타입 0 Boolean(3) !!3 true //0이 아닌 Number 타입 Boolean("") !!"" false //빈 문자열 Boolean("false") !!"false" true Boolean(" ") !!" " true //공백 문자열 Boolean("kk") !!"kk" true // 비어있지 않은 문자열 Boolean({}) !!{} true //빈 object Boolean([]) !![] true // 빈 배..

개발/javascript 2023.01.01

ECMAScript 2015(ES6)

🎈 ES6 ? javascript에는 Ecma International이 정의한 ECMAScript(ES)라는 기술규격이 있다. ES에는 여러 버젼이 있는데 각 브라우저의 각 버젼별로 지원되는 ES의 종류가 다르다. 이것은 브라우저별로 사용하는 javascript 엔진이 다르기 때문인데, 이 이야기는 다음번에 시간 되면 따로 포스팅을 하겠다... 어쨌든, 현재까지 나온 ES 버젼에는 아래와 같이 11개의 버젼이 있다. (아래 표는 w3schools에서 가져왔다.) Ver Official Name Description ES1 ECMAScript 1 (1997) First edition (초판) ES2 ECMAScript 2 (1998) Editorial changes ES3 ECMAScript 3 (199..

개발/javascript 2022.12.30

[npm] 패키지 관리

npm(node package manager)은 Node.js에서 사용할 수 있는 모듈을 패키지화하여 모아둔 저장소이며, 패키지 관리 및 설치를 위한 CLI를 제공한다. ※CLI(Command line interface) : 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식. 하지만 꼭 Node.js를 사용할 때만 npm이 필요한 것은 아니다. 브라우저 기반 앱을 개발할 때에도 npm을 사용하면 일이 훨신 편하다. - 개발 전 npm 홈페이지에서 내가 필요한 기능을 검색하여 존재한다면 그대로 가지고 와 사용함으로서 개발 시간을 단축할 수 있기도 하고, 꼭 사용하지 않더라도 참고할 수 있어서 좋다. 🎈 npm 설치 npm은 node.js를 설치할 때 함께 설치된다. node.js 홈페이지(http..

개발/javascript 2022.12.23

[javascript] javascript란? #정의 #역사

■ 정의 - javascript는 동적으로 \컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 등을 웹 페이지를 꾸며주도록 하는 프로그래밍 언어 - javascript는 보통 HTML, CSS와 함께 웹페이지를 표현한다. ■ 특징 - javascript는 객체 기반의 스크립트 프로그래밍 언어※스크립트( 프로그래밍) 언어(Scripting language) : 응용 소프트웨어를 제어하는 프로그래밍 언어로, 응용프로그램과 독립립하여 사용되고 일반적으로 응용프로그램의 언어와 다른 언어로 사용되어 최종 사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다.스크립트언어로 작성된 코드는 시작에서 끝날때까지 실행되며, 명확한 엔트리 포인트가 없다.(javascript, php, 파이썬,..

개발/javascript 2019.02.02

[javascript] ModalDialog에서 window.open시 session 끊기는 문제

일부 Internet Explorer에서 Modal 창에서 window.open시 session이 끊기는 문제가 발생한다. [원인]구글링 결과 ModalDialog에서 window.open을 하면 도메인이 다른 새로운 창으로 인식해서 세션을 공유할 수 없어서 해당 문제가 발생하는 것이라한다. show.ModalDialog window.openA page ------------------------------> B popup page -------------------X---------> C popup page 일부 IE에서 세션 끊김 [해결방안] 이때, 아래와 같이 B page 에서 window.dialogArguments를 통해서 A page(부모창)에 접근하고 window.dialogArguments..

개발/javascript 2019.01.23
반응형