Programming
[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); ..
MYSQL 날짜 형변환 과 데이터가 없어도 날짜 출력하는 방법
개발환경 - Java8, Mybatis, SpringBoot, gradle, mariaDB, JSP 목적과 문제발생 - 기간별 데이터를 출력해야하는데 데이터가 없는 기간은 조회되지 않았다. 해결방법 1. 출력할 날짜 템플릿을 만드는 쿼리를 작성한다. 2. 모듈도 중복되서 출력되면 안되므로 기간 템플릿 쿼리와 조인하여 최종 템플릿 쿼리를 픽스한다. 3. 템플릿 쿼리에 넣을 데이터를 가지고 있는 테이블을 조인한다. 하기는 문제해결 과정으로 쿼리 변천사이다. SELECT IFNULL(MONTH(B.접수일), 0) AS 접수일 , A.세부코드명 AS 모듈명 , A.세부코드 AS 세부코드 , COUNT(B.진행상태) AS 접수건수 FROM (SELECT * FROM 공통코드 WHERE 회사SEQ = #{회사SEQ..
MYSQL 쿼리문 통계(일간/주간/월간/기간별), DATE_FORMAT() 알아보기
MySQL 쿼리문(일간/주간/월간/기간별) // 일간통계 SELECT DATE(`날짜컬럼`) AS `date`, sum(`value`) FROM test_st GROUP BY `date`; // 주간통계 SELECT DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(`날짜컬럼`)-1) DAY), '%Y/%m/%d') as start, DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(`날짜컬럼`)-7) DAY), '%Y/%m/%d') as end, DATE_FORMAT(`날짜컬럼`, '%Y%U') AS `date`, sum(`value`) FROM test_st GROUP BY date; // 월간통계 SELECT MONTH(`날..
🔥자바스터디🔥 자바의 정석 CH16 네트워킹
1. 네트워킹(Networking) 네트워킹(networking)이란 두 대 이상의 컴퓨터를 케이블로 연결하여 네트워크(network)를 구성하는 것을 말한다 1.1 클라이언트/서버(client/server) '클라이언트/서버는 컴퓨터간의 관계를 역할로 구분하는 개념이다 서버(server)는 서비스를 제공하는 컴퓨터(service provider)이고 클라이언트(client)는 서비스를 사용하는 컴퓨터(service user)가 된다. 네트워크를 구성할 때 전용서버를 두는 것을 서버기반모델 이라고 하고 각 클라이언트가 서버역할을 동시에 수행하는 것을 P2P모델 이라고 한다 - 서버는 제공하는 서비스의 종류에 따라 파일서버 메일서버, 어플리케이션 서버 등이 있다 1.2 IP주소(IP Address) IP주..
[React ] Redux와 useReducer의 차이, Context API 사용하기
Redux를 사용하는 이유 리액트 프로젝트의 경우 대부분의 작업시 부모 컴포넌트를 통해 하위 컴포넌트의 데이터를 업데이트 한다. (데이터의 연관이 있는 컴포넌트끼리 ref를 사용하여 전달할 수 있으나 코드가 꼬이는 문제로 인해 지양한다) 컴포넌트의 갯수가 적을때는 문제가 되지 않지만, 점점 늘어날수록 유지보수의 어려움이 발생한다. 예를 들어 변수명의 변경을 하면 연관된 컴포넌트 파일 모두에 수정을 거쳐야된다. 그러나 리덕스를 사용하게 되면 데이터 상태를 컴포넌트 외부에서 관리하기 때문에 과정을 단순화 시킬 수 있게 된다. - Reducer : 업데이트 로직을 정의하는 함수 subscribe(상태 변화 감지요청) >> action(상태 변화) >> dispatch(상태업데이트, st..
🔥자바스터디🔥 자바의 정석 CH15 입출력(I/O)
1. 자바에서의 입출력 1.1 입출력이란? 컴퓨터 내부 또는 외부의 장치와 프로그램간의 데이터를 주고받는 것 1.2 스트림(stream) 자바에서 입출력을 수행하기 위해 두 대상을 연결하고 데이터를 운반하는데 사용되는 연결통로 먼저 보낸 데이터를 먼저 받게 되어 있으며 중간에 건너뜀 없이 연속적으로 데이터를 주고 받는다 1.3 바이트기반 스트림 - InputStream, OutputStream 스트림은 바이트단위로 데이터를 전송하며 입출력 대상에 따라 다음과 같은 입출력스트림이 있다. 1.4 보조스트림 실제 데이터를 주고받는 스트림이 아니기 때문에 데이터를 입출력할 수 있는 기능은 없지만, 스트림의 기능을 향상시키거나 새로운 기능을 추가할 수 있다 // 먼저 기반스트림을 생성한다. FileInputStr..
[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..
🔥자바스터디🔥 자바의 정석 CH14 람다와 스트림
1. 람다식 1.1 람다식이란? 람다식은 메서드를 하나의 식(expression)으로 표현한 것. - 객체 지향 언어보다는 함수 지향 언어에 가깝다. - 함수를 간략하면서도 명확한 식으로 표현할 수 있도록 해준다. - 메서드를 람다식으로 표현하면 메서드의 이름 및 반환 값이 없어지므로 익명 함수 라고도 한다. - 람다식의 형태는 매개 변수를 가진 코드 블록이지만 런타임 시에는 익명 구현 객체를 생성한다. 1.2 람다식 작성하기 (타입 매개변수) -> { 실행문; ... } ex) - ExFunctionInterfaceTest.java interface ExFunctionInterface { public void method(); } public class ExFunctionInterfaceTest { p..
[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 ..