Programming/JavaScript
[Javascript] 날짜와 관련된 <input> 요소의 type(date, month, week) 활용하기 (유효성, 포맷전환, 데이터 핸들링)
See the Pen onChangeInputType by BEGINNERWW (@beginnerww) on CodePen. 목적 - 기간설정으로 파라미터값을 전달하여 범위에 해당하는 데이터값을 가져온다. 과정 1. 태그에 일간, 주간, 월간, 연간을 선택할 수 있게 option을 주고 값이 변할때마다 이벤트를 실행한다. 2. select 태그의 값이 변할때마다 onChange이벤트로 기간 범위 템플릿을 변경해준다. (function onChangeCal(event)) 3. 범위값이 변경될때 마다 유효성 검사를 실시한다. (시작일 : startValidity(event) / 종료일 : endValidity(event)) 연도별 월별 주별 일별 ~ 태그의 기본 값을 설정하려면 태그의 속성으로 selecte..
[Javascript] 리덕스(Redux) 알아보기
리덕스(Redux)란? - 자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구 리덕스 devTools 사용하기 - 리덕스를 이용하여 중앙집중식 state 관리를 할때 리덕스 devtools(크롬 확장 프로그램)을 설치하면 해당 웹애플리케이션을 사용할때의 state 변화를 구동 시작부부터 확인할수 있다.(서버 내리기전 언제든지) - 데이터를 json형태로 받거나 아니면 반대로 데이터를 임의적으로 넣어 보는 것도 가능하다. ✔ 기본개념 - 리덕스에서 사용되는 키워드 숙지하기 var store = Redux.createStore( reducer ); var state = store.getState(); 1. 스토어(Store) 직접 액세스하거나 변경할 수 없는 단일 중앙 집중식 상태(..
[Javascript] table에 동적으로 행(row), 열(column)추가, 삭제하기, td 너비 일정하게 유지하기
See the Pen Dynamic generation Table Row by BEGINNERWW (@beginnerww) on CodePen. 태그에 동적으로 row(행) 추가하기 - 본 코드는 10줄씩 출력되고 페이징 기능을 고려하여 작성하였다. 추가 클릭 이벤트 onClick="userAdd()" 1. var trCnt = document.getElementsByTagName('tr').length; - tr 태그의 갯수를 구한다. 2. 기존에 입력되어있는 데이터가 있을 경우 해당 데이터의 index를 담고 있는 변수 baseCamp를 trCnt에 대입한다. 3. row가 10줄이상이 된 시점(즉, 11행)이 되었을때 첫번째 row 를 숨긴다. 4. $('#tbHead').after(inner); ..
[React ] Redux와 useReducer의 차이, Context API 사용하기
Redux를 사용하는 이유 리액트 프로젝트의 경우 대부분의 작업시 부모 컴포넌트를 통해 하위 컴포넌트의 데이터를 업데이트 한다. (데이터의 연관이 있는 컴포넌트끼리 ref를 사용하여 전달할 수 있으나 코드가 꼬이는 문제로 인해 지양한다) 컴포넌트의 갯수가 적을때는 문제가 되지 않지만, 점점 늘어날수록 유지보수의 어려움이 발생한다. 예를 들어 변수명의 변경을 하면 연관된 컴포넌트 파일 모두에 수정을 거쳐야된다. 그러나 리덕스를 사용하게 되면 데이터 상태를 컴포넌트 외부에서 관리하기 때문에 과정을 단순화 시킬 수 있게 된다. - Reducer : 업데이트 로직을 정의하는 함수 subscribe(상태 변화 감지요청) >> action(상태 변화) >> dispatch(상태업데이트, st..
[React] 리액트 라이프사이클, Hooks 알아보기
웹게임 가위바위보 본 강의에서는 react의 component를 상속받은 class component를 사용한다. React에서 extends Component 후 성능적 이슈가 있을지 react devtools로 확인 후 pure Component를 사용할지 결정 쓸데없이 리렌더링이 일어날 때는 pure Component로 전환한다. background-postion을 통해 하나의 이미지의 부분부분을 재조명해준다 React life cycle 클래스 컴포넌트의 경우 -> constructor -> render -> ref (있을 경우) -> componentDidMount -> (setState/props 의 값이 변경될 때 -> shouldComponentUpdate(true) -> render ->..
[React ] Webpack으로 React.js 빌드하기
webpack을 사용하는 이유 웹팩은 모듈 번들러이다. 코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업하는 경우가 많은데, 브라우저에서 파일 단위 모듈 시스템을 이용하는 것은 많은 네트워크 비용 낭비를 유발한다. 이러한 문제를 해결하기 위해서 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 웹팩이다. 웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 취급한다. (webpack을 이용하기 위해서는 node(자바스크립트 실행기)를 알아야한다.) (실제 서비스할때는 webpack을 사용하지 않고, 개발시에만 사용한다.) 모듈 시스템과 웹팩 설정 (react 기본 설정) 1. package.json (실행 명령어 >> npm init) package.json package nam..
[React / Node.js] 유튜브 사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기
error 내용 Router.use() requires a middleware function but got a Object .... 동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제, 이 부분은 server(node) 쪽 router에다 video upload 를 저장하는 내용을 적었던 부분인데 module.exports = router; 동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제, (강사님이 미리 작성했던 모듈에서 복붙해오셨던거라 router를 export 해주는 부분이 안보였었다... ) Express.js server단의 controller 역할(url에 따른 모듈 매칭(route 이용))을 한다 app.use 또는 app.method ..
[React / Node.js] react-router 리액트 라우터 알아보기
react-router 라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것 리액트에서 라우팅 기능을 제공하고 있지 않기때문에 직접 구현하여 사용해야한다. 그렇기 때문에 react-router 는 리액트를 사용함으로써 필수적이라 할 수 있다. - 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다. - 서버 사이드 렌더링을 도와준다. import { BrowserRouter } from "react-router-dom"; react-router-dom의 라우터는 와 두가지가 있다. 는 HTML5의 history API를 활용하여 UI를 업데이트하고, 는 URL의 hash를 활용한 라우터로 정적인(static)페이지에 적합하다. import { Route, Switch } from "react-route..
[인프런] 레츠기릿 자바스크립트 / 끝말잇기, 셀프체크 쿵쿵따 만들기
1번째 참가자 제시어 : 입력 대화창(prompt, alert, confirm) - 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 1) alert("hello") 사용자가 [확인]을 누르기 전까지 계속 떠있는 메세지창 ** 메시지가 있는 작은 창은 모달 창(modal window) 이라고 한다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 2) result = prompt(title, [default]); 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창 title : 사용자에게 보여줄 문자열 (ex prompt("참여할 인원은 몇 명인가요?")) default(선택값) : 입력 필드의 ..
[React / Node.js] 영화사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기
기본적인 BoilerPlate는 강사님 github에서 다운로드 받아서 이용했다. 루트 디렉토리 안에 server, client로 폴더가 구분되어있고 server의 package.json은 루트 디렉토리, client의 package.json은 client 폴더 하위에 만들어져 각각의 경로에서 npm install하여 모듈을 설치해준다. server / config 개발환경 설정에 따라 운영환경인지, 개발환경인지를 선택하여 따로 DB가 관리된다. process.env : node.js가 제공하는 환경설정 관련 property이다. npm run dev "scripts": { "start": "node server/index.js", "backend": "nodemon server/index.js", "f..
[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 미니프로젝트
기능 ) 1. "코드스쿼드 블로그" 버튼 클릭시 포스팅 목록 ajax로 가져온다 2. 가져온 데이터 카드형식으로 뿌려준다. (제목 - 링크 추가) 3. 찜하기 클릭하면 내 찜 목록에 제목만 리스팅한다. 4. 찜하기 버튼 클릭시 취소로 토글된다 webpack / webpack-cli 설치 - 모듈 번들화 작업을 위해 webpack을 사용했다. - webpack.config.js 파일로 webpack 번들화 작업시 환경설정을 해준다. 1) Node.js에서 path에 대한 경로 값을 가져와서 저장을 한다. 2) 환경설정을 object 타입으로 exports 한다. - entry : budling할 파일의 정보(budling 시작시 기준 파일로, 해당 파일을 기준으로 DI를 확인하고 번들링한다.) - outp..
[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 실습예제 2 - Destructuring 과 Set 을 활용한 로또 번호 생성기
문제 ) 다음 조건을 이용하여 Lotto 번호 추출기 만들기 1. 유일한 값을 추출하는 과정에서 Set을 사용한다. 2. getRandomNuber 함수에 변수를 전달하는 과정에서 destructuring을 사용한다. const SETTING = { name :"LUCKY LOTTO!", count : 6, maxNumber : 45 } function getRandomNumber(maxNumber){ //랜덤한 유일한 숫자값을 추출 let random = (Math.floor(Math.random() * maxNumber)+1); return random; } const {maxNumber, count} = SETTING; let setNumber = new Set(); setNumber.clear()..