/redux/react/react-redux/2020/01/20/react-redux1/ ====================================================================== Should I only connect my top component, or can I connect multiple components in my tree? https://redux.js.org/faq/react-redux/#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree ====================================================================== redux connect로 store와의 연결은 아직도 최상단(top component)에만 해야하고 store에서 최상단 컴포넌트가 값을 받아 자식컴포넌트들에게 props로 그 값들을 줘야 할까? 만약 각각의 모든 컴포넌트들을 분리 독립적으로 connect해서 store에서 따로 받아 오게 하면 성능에 악영향은 없을까?라는 고민을 해본적이 있다. 응 해도 된대. 그게 더 좋다 //이렇게 연결하는 것은 꼭 최상단 컴포넌트만 해줄 필요는 없다. 모든 각각의 컴포넌트들을 연결해줘도 괜찮다. const mapStateToProps = (state) => { return { clientIdx: clientIdxSelect(state), loading: babyInfoLoadingSelect(state), updateMode: babyInfoIsUpdateModeSelect(state), currentModifyBaby: babyInfoCurrentModifyBabySelect(state), TEXT:COMMON_COMPONENT_TEXT_RESELECTOR(state), ERROR_TEXT:ERROR_TEXT_RESELECTOR(state), } }; //이렇게 프레젠 테이션컨테이너에서만 연결할 필요는 없다. 각각의 하위 컴포넌트들도 전부 connect로 감싸서 연결해줘도 된다. //그게 성능상으로도 더 이득이라고 한다. export default connect(mapStateToProps, mapDispatchToProps)(BabyRegisterModalComponent); 보통 이렇게 많이 넘겼다 dumbcomponent들은 top component에서 받은 값을 내려 받는 식으로.. 근데 redux 공홈에 따르니 https://redux.js.org/faq/react-redux/#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree 다 연결해도 된단다. 성능도 좋단다. 그러니 걱정안해도 될 것 같다. 결국 모든 컴포넌트들을 Store에 connect 시켰습니다 그래서. 해보고 나니 오히려 더 나아졌고, 상태관리도 한층 더 편해졌습니다. 캬 redux react react-redux react redux react-redux /babel/webpack/front/config/2018/11/20/babelconfig/ ====================================================================== babel docs https://babeljs.io/docs/en/configuration ====================================================================== 우리회사는 .babelrc에 babel에 관한 설정을 해왔는데, 한 참 신경을 놓고 있다가 보니 babel의 빌드가 벌써 7.1.6까지 나왔다. 현재 프로젝트의 babel 버전이 6이었기에 업그레이드로 하기로 하였고 업그레이드 하면서 기존의 바벨과 다른 점과 설치과정을 포스팅해보겠다. 업그레이드 하면서 느낀 점은 babel은 항상 또 항상, 최신버전으로 웬만하면 유지해주자. NPM으로 먼저 바벨부터 깔자 7이전 버전이랑은 npm 스트링이 좀 다르다. 예전에는 babel babel-core babel-cli였던 것 같았는데? npm install -D @babel/core @babel/cli @babel/preset-env @babel/polyfill 이제 .babelrc 보다는 babel.config.js를 쓰자. 그다음에는 babel.config.js를 설정해주면 된다. webpack.config.js처럼 root에 위치시켜두자. 공식홈에서도 babel.config.js를 쓰기를 적극 권장하고 있다. babelrc보다 babel.config.js가 플러그인과 프리셋을 좀 더 프로그래밍틱하게 관리할 수 있게 해준다. 만들어 주자. //babel.config.js설정 module.exports = (api) =>{ const babelEnv = api.env(); const babelVer = api.version; console.log(` -- 바벨(${babelVer})모드 : ${babelEnv} --`); const presets = ['@babel/preset-env']; // const plugins = [...]; return { presets, // plugins }; }; 현재 폴더 구조 이런식이라고 가정하고, index.js에 es6이상의 문법을 작성해보자 const a = 'babel'; let sum = (a,b)=> a+b; console.log(sum); //터미널에 경로에 맞춰서 입력하자. npx babel index.js --out-dir outputfolder 결과 //트랜스컴파일된 결과물 "use strict"; var a = 'babel'; var sum = function sum(a, b) { return a + b; }; console.log(sum); babel webpack front config webpack babel /aws/server/%EC%84%9C%EB%B2%84/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C/%EB%AC%B8%EC%A0%9C/error/2018/11/14/aws3/ ====================================================================== aws 관련 문서 : https://aws.amazon.com/ko/premiumsupport/knowledge-center/create-and-activate-aws-account/ ====================================================================== aws 계정 생성을 순조롭게 마친 후에, 계속 이런 상태이다. “서비스 가입이 거의 완료되었습니다.” 정상적으로 전부 처리되었음에도 더 이상 솔루션을 진행할 수 없는 상태..(무려 4시간); 해결이 되고 포스팅을 이어서 해보겠다. 어떻게 해결 될지? . . 일단 거의 24시간이 다 되어갈 무렵에 가입처리가 끝났다. 진짜 오래 걸리는구나..급하게 쓸일 있을 때는 조마조마 할 듯 aws server 서버 클라우드 문제 error aws server error /d3/%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EC%8B%9C%EA%B0%81%ED%99%94/2018/05/13/d3js02/ ====================================================================== D3.JS 공식 사이트 https://d3js.org/ ====================================================================== 데이터를 시각화 해주는 데 가장 HOT한 라이브러리인 D3.JS 현재 구축중인 플랫폼도 반응형으로 D3.JS로 대쉬보드를 만드는 중인데 계속 공부할 겸 올리겠다. d3.js 라이브러리의 버전은 v5.2.0을 사용할 계획이다. 대부분 나와있는 차트들은 v3 or v4이지만 새로나온 v5로 하겠다. v3버전과 v4, v5는 사뭇 다르다. d3 d3메서드를 작성하기 위해서는 d3라고 먼저 입력 한다. 그 후에 메서드체인 형식으로 메서드를 이어서 붙여나간다. jquery의 $(document).ready(function(){ }) , $(function(){})처럼 앞에 선언함으로써, 앞으로 d3 메서드를 사용할 것이라는 것을 알려주는 역할이라고 보면 된다. ```javascript d3.select(선택할 element요소) // ex) #element, .element, element d3.select(‘#box’) .append(‘g’) .append(‘circle’) .attr(‘r’,5) ### select() --- > 특정 element요소를 선택한다. d3는 셀렉션과 바인딩이 다라고 봐도 좋을 정도로 중요한 메서드다. ```javascript //id가 box1인 div를 선택하기 d3.select('#box1') //class가 box1인 div를 선택하기 d3.select('.box1'); //svg를 선택하기 d3.select('svg'); selectAll() 특정요소 전부를 셀렉션하는 메서드다. 뒤에나올 enter(),exit()와 함께 이해해야할 중요한 메서드다. //svg의 자식 엘리먼트인 rect를 모두 셀렉션하기 d3.select('svg') .selectAll('rect'); //circle을 모두 셀렉션 d3.selectAll('circle') data(배열값) 데이터를 시각화하기 위해서는 일단은 데이터를 받을 그릇이 필요하지 않겠나? data()메서드를 통하여 값을 할당한다. 뒤에 나올 enter() 메서드 이전에 chain해주자. let incomingData = [23,4335,6,45354,23,132,99999]; d3.select('#container_box') //container_box라는 id요소를 가진 div태그에 .append('svg') //자식 요소로 svg태그를 추가한다. .selectAll('rect') // 그리고 그 자식요소인 svg가 가지고 있는 모든 rect 태그를 셀렉션하고 .data(incomingData) // data를 바인딩한다. append() d3.select(), d3.selectAll()로 셀렉션한 엘리먼트의 자식요소를 추가한다. d3.select('svg') .append('g') .append('circle') enter() d3를 사용함에 있어 가장 중요하다고 생각하는 메서드다. d3.json, d3.csv등으로 받아온 값을 동적으로 추가하기 위해 사용해야 한다. 데이터를 셀렉션(d3.select(element))에 바인딩할때 data의 값은 DOM요소의 갯수보다 많거나 적을 수 있고, 값은 계속 늘거나 줄어들 것이다. 데이터가 DOM요소의 갯수보다 많을 때 enter()메서드를 통해 자동으로 필요한 만큼의 DOM요소를 추가한다. ```javascript let incomingData = [1,2,3,4,5,6,7,8,9,10,11,12]; //12개의 값이 담긴 data가 있다고 하자, d3.select('svg') //svg요소를 셀렉션하자, 이 svg밑에는 5개의 text태그가 이미 존재한다. .selectAll('text') // 5개의 기존에 이미 있느 text태그가 셀렉션되었다. .data(incomingData) // 12개의 값이 들어있는 배열 데이터가 바인딩된다. .enter() //enter()메서드가 선언되었다는 것은 12개의 값이 들어가야 한다는 것을 의미한다. 기존의 DOM요소로 5개의 text가 이미 선언되었다. 그렇다면 7개만 넣어진다면 12개 되니, enter()는 바인딩된 배열의 length값(12) - 기존 dom요소의 length(5)만큼 호출한다. enter()를 7번 호출하는 것이다. .append('g') .append('text') .text(function(d){ return d; // incomingData의 6번째 값부터 반환된다. }); ``` exit() enter()와는 다르게 데이터의 개수가 dom요소의 개수보다 작으면 호출한다. ```javascript let incomingData = [1,2,3,4]; //이번엔 4개의 값만이 있다. d3.select('svg') //svg요소를 셀렉션하자, 이 svg밑에는 5개의 text태그가 이미 존재한다. .selectAll('text') // 5개의 기존에 이미 있는 text태그가 셀렉션되었다. .data(incomingData) // 4개의 값이 들어있는 배열 데이터가 바인딩된다. .exit() //exit()메서드는 데이터(incomingData)의 갯수가 dom요소(text)보다 작으면 실행한다. //데이터의 개수는 4개이고 기존 Dom에 선언된 text는 5개이다. 데이터의 개수가 1작다. 즉 exit() 메서드를 실행한다. select()한 svg에 g를 붙이고 g안에 text붙이고 데이터 값을 반환한다. .append('g') .append('text') .text(function(d){ return d; }); ``` attr() attribute를 조작하는 메서드다. 실코드로 보는 게 이해하기 좋다. d3.select('svg') .attr('id',"bubble_chart") .attr('width', width) .attr('height',height) d3.select('rect') .attr('width',10) .attr('height',100) .attr('x',10) .attr('y',6) style() style()메서드는 css를 조작한다. d3.select('rect') .style('fill','#ff5274') .style('stroke','#fff'); .style('opacity',.50); 그래서 위에 것들을 종합해서 써보자면 let data = [1,2,3,4,5,6,7,8,9]; d3.select('svg') //svg요소를 셀렉션 한 후에 .attr('id','selected_svg') //그 요소의 id값을 selected_svg로 변경한다. .selectAll('circle')// 그후 셀렉션된 svg의 하위 요소에 circle이 있는지 셀렉션 시도한다. .data(data) // data값을 바인딩한다. .enter() // data가 dom요소보다 많다면 enter()는 그 차이만큼 호출된다. .append('g') //g태그를 붙이고 .append('circle') //g 태그의 자식요소로 circle태그를 붙이고 .attr('r',5) // 속성들이 정의되고 .attr('cx',10) // 속성들이 정의되고 .attr('cy',5) // 속성들이 정의되고 .style('fill','black') // 속성들이 정의되고 .style('stroke','red') // 속성들이 정의되고 .append('text') //text태그가 circle태그의 자식요소 더해지고 .text('흥!'); // 흥! 이라는 글씨를 넣어준다. /**/ scaleLinear(), transiton(), delay(), domain(), range(), trent(), max() , min(), mean()에 대해서 정리해야지~ D3 데이터 시각화 D3 /d3/%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EC%8B%9C%EA%B0%81%ED%99%94/2018/04/13/d3js01/ ====================================================================== D3.JS 공식 사이트 https://d3js.org/ ====================================================================== 데이터를 시각화 해주는 데 가장 HOT한 라이브러리인 D3.JS 현재 구축중인 플랫폼도 반응형으로 D3.JS로 대쉬보드를 만드는 중인데 계속 공부할 겸 올리겠다. d3.js 라이브러리의 버전은 v5.2.0을 사용할 계획이다. 대부분 나와있는 차트들은 v3 or v4이지만 새로나온 v5로 하겠다. SVG를 잘 알고 가자.(HTML5의 가장 큰 특징 중 하나이다.) D3는 SVG를 그릴 수 있는 추상 계층을 제공한다. D3에서는 circle, rect, line, polygon, path, g, text 요소를 사용한다. circle은 cx(가로축), cy(세로 축), r(원의 반경) d3.select('#container_chart') .append('svg') .append('circle') .attr('cx','100') //가로 위치 .attr('cy','140') //세로 위치 .attr('r',10) //원의 반경 rect[rectangle(직사각형)의 약자]는 x(가로축), y(세로축), width(너비) height(높이) d3.select("#container_chart") .append('svg') .append('rect') .attr('x',10) .attr('y',90) .attr('width', 15) .attr('height', 100) .style('fill','#ff5274'); line은 말그대로 선이다. x1,y1으로 시작위치를 x2,y2로 끝나는 지점을 지정 가능 d3.select("#container_chart") .append('svg') .append('rect') .attr('x1',0) .attr('y1',0) .attr('x2', 100) .attr('y2', 100) .style('stroke','#1c1c1c'); polygon은 다각형 그래픽을 만들 때 유용하다. 시계방향으로 진행하며 다각형의 각 꼭지점의 XY좌표를 POINTS라는 속성에 포함 d3.select("#container_chart") .append('svg') .append('polygon') .attr('points',"40,60 80,50 90,110 20, 320 10, 50") .style('fill','#1c1c1c'); path요소는 d라는 속성에 좌표를 포함한다. M으로 시작한다 Z로 닫으면 종점이 연결된다.(닫힌 도형) d3.select("#container_chart") .append('svg') .append('path') .attr('d',"M 40,60 80,50 90,110 20, 320 10, 50 Z") .style('stroke','#1c1c1c') .style('stroke-width','6px'); text요소는 svg에서 텍스트를 작성할 수 있게 해준다. d3.select('#container_chart') .append('svg') .append("text") g는 svg의 요소들을 논리적으로 그룹핑한다. 내일은 enter(), exit(), scaleLinear(), transiton(), delay(), domain(), range()max() , min(), mean(), select(), selectAll(), attr(), style()에 대해서 정리해야지~ D3 데이터 시각화 D3 /%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84/syntax/thymeleaf/2018/04/13/thymeleaf5/ ====================================================================== thymeleaf 공식 API 보기 https://www.thymeleaf.org ====================================================================== Thymeleaf의 Date Api에 에 대하여 #java.util.Date 객체를 thymeleaf에서는 #dates로 쓸 수 있다. ex) ${#dates.method(date)} 값을 standard locale 포맷에 맞게 변환해주는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#dates.format(cal)} ${#dates.arrayFormat(calArray)} ${#dates.listFormat(calList)} ${#dates.setFormat(calSet)} Sat Apr 14 02:22:32 KST 2018 -> 2018년 4월 14일 (토) 오전 2시 19분 15초 값을 ISO8601 포맷으로 변환해주는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#dates.formatISO(cal)} ${#dates.arrayFormatISO(calArray)} ${#dates.listFormatISO(calList)} ${#dates.setFormatISO(calSet)} Sat Apr 14 02:22:32 KST 2018 -> 2018-04-14T02:24:31.342+09:00 지정된 패턴으로 값을 표현하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#dates.format(cal, 'dd/MMM/yyyy HH:mm')} ${#dates.arrayFormat(calArray, 'dd/MMM/yyyy HH:mm')} ${#dates.listFormat(calList, 'dd/MMM/yyyy HH:mm')} ${#dates.setFormat(calSet, 'dd/MMM/yyyy HH:mm')} Sat Apr 14 02:22:32 KST 2018 -> 14/4월/2018 02:27 calendar 객체의 특정 요소값을 얻는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#dates.day(date)} // also arrayDay(...), listDay(...), etc. ${#dates.month(date)} // also arrayMonth(...), listMonth(...), etc. ${#dates.monthName(date)} // also arrayMonthName(...), listMonthName(...), etc. ${#dates.monthNameShort(date)} // also arrayMonthNameShort(...), listMonthNameShort(...), etc. ${#dates.year(date)} // also arrayYear(...), listYear(...), etc. ${#dates.dayOfWeek(date)} // also arrayDayOfWeek(...), listDayOfWeek(...), etc. ${#dates.dayOfWeekName(date)} // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc. ${#dates.dayOfWeekNameShort(date)} // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc. ${#dates.hour(date)} // also arrayHour(...), listHour(...), etc. ${#dates.minute(date)} // also arrayMinute(...), listMinute(...), etc. ${#dates.second(date)} // also arraySecond(...), listSecond(...), etc. ${#dates.millisecond(date)} // also arrayMillisecond(...), listMillisecond(...), etc. Sat Apr 14 02:22:32 KST 2018 -> 4 Sat Apr 14 02:22:32 KST 2018 -> 14 Sat Apr 14 02:22:32 KST 2018 -> 4월 Sat Apr 14 02:22:32 KST 2018 -> 2018 자신의 요소로부터 dates 객체를 만드는 메서드 ${#dates.create(year,month,day)} ${#dates.create(year,month,day,hour,minute)} ${#dates.create(year,month,day,hour,minute,second)} ${#dates.create(year,month,day,hour,minute,second,millisecond)} 현재 시간과 날짜로 calendar객체 생성하는 메서드 ${#dates.createNow()} ${#dates.createNowForTimeZone()} 현재 날짜로 calendar객체 생성, but 시간은 0:00으로 셋팅하는 메서드 ${#dates.createToday()} ${#dates.createTodayForTimeZone()} 타임리프 SYNTAX THYMELEAF THYMELEAF SYNTAX /%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84/syntax/thymeleaf/2018/04/12/thymeleaf4/ ====================================================================== thymeleaf 공식 API 보기 https://www.thymeleaf.org ====================================================================== Thymeleaf의 Calendars Api에 에 대하여 #dates와 유사하지만 다르다. java.util.Calendar 객체를 thymeleaf에서는 #calendars로 쓸 수 있다. ex) ${#calendars.method(cal)} 값을 standard locale 포맷에 맞게 변환해주는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#calendars.format(cal)} ${#calendars.arrayFormat(calArray)} ${#calendars.listFormat(calList)} ${#calendars.setFormat(calSet)} Sat Apr 14 02:22:32 KST 2018 -> 2018년 4월 14일 (토) 오전 2시 19분 15초 값을 ISO8601 포맷으로 변환해주는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#calendars.formatISO(cal)} ${#calendars.arrayFormatISO(calArray)} ${#calendars.listFormatISO(calList)} ${#calendars.setFormatISO(calSet)} Sat Apr 14 02:22:32 KST 2018 -> 2018-04-14T02:24:31.342+09:00 지정된 패턴으로 값을 표현하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#calendars.format(cal, 'dd/MMM/yyyy HH:mm')} ${#calendars.arrayFormat(calArray, 'dd/MMM/yyyy HH:mm')} ${#calendars.listFormat(calList, 'dd/MMM/yyyy HH:mm')} ${#calendars.setFormat(calSet, 'dd/MMM/yyyy HH:mm')} Sat Apr 14 02:22:32 KST 2018 -> 14/4월/2018 02:27 calendar 객체의 특정 요소값을 얻는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#calendars.day(date)} // also arrayDay(...), listDay(...), etc. ${#calendars.month(date)} // also arrayMonth(...), listMonth(...), etc. ${#calendars.monthName(date)} // also arrayMonthName(...), listMonthName(...), etc. ${#calendars.monthNameShort(date)} // also arrayMonthNameShort(...), listMonthNameShort(...), etc. ${#calendars.year(date)} // also arrayYear(...), listYear(...), etc. ${#calendars.dayOfWeek(date)} // also arrayDayOfWeek(...), listDayOfWeek(...), etc. ${#calendars.dayOfWeekName(date)} // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc. ${#calendars.dayOfWeekNameShort(date)} // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc. ${#calendars.hour(date)} // also arrayHour(...), listHour(...), etc. ${#calendars.minute(date)} // also arrayMinute(...), listMinute(...), etc. ${#calendars.second(date)} // also arraySecond(...), listSecond(...), etc. ${#calendars.millisecond(date)} // also arrayMillisecond(...), listMillisecond(...), etc. Sat Apr 14 02:22:32 KST 2018 -> 4 Sat Apr 14 02:22:32 KST 2018 -> 14 Sat Apr 14 02:22:32 KST 2018 -> 4월 Sat Apr 14 02:22:32 KST 2018 -> 2018 자신의 요소로부터 calendar 객체를 만드는 메서드 ${#calendars.create(year,month,day)} ${#calendars.create(year,month,day,hour,minute)} ${#calendars.create(year,month,day,hour,minute,second)} ${#calendars.create(year,month,day,hour,minute,second,millisecond)} ${#calendars.createForTimeZone(year,month,day,timeZone)} ${#calendars.createForTimeZone(year,month,day,hour,minute,timeZone)} ${#calendars.createForTimeZone(year,month,day,hour,minute,second,timeZone)} ${#calendars.createForTimeZone(year,month,day,hour,minute,second,millisecond,timeZone)} 현재 시간과 날짜로 calendar객체 생성하는 메서드 ${#calendars.createNow()} ${#calendars.createNowForTimeZone()} 현재 날짜로 calendar객체 생성, but 시간은 0:00으로 셋팅하는 메서드 ${#calendars.createToday()} ${#calendars.createTodayForTimeZone()} 타임리프 SYNTAX THYMELEAF THYMELEAF SYNTAX /%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84/syntax/thymeleaf/2018/04/11/thymeleaf3/ ====================================================================== thymeleaf 공식 API 보기 https://www.thymeleaf.org ====================================================================== Thymeleaf의 Number Api에 에 대하여 number 객체의 유틸리티 메서드는 #numbers이다. ex) ${#numbers.method(num)} 정수의 최소값을 설정하는 메서드 정의한 만큼 0을 채워넣는다. zerofill같이. 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#numbers.formatInteger(num,3)} /// 0005 ${#numbers.arrayFormatInteger(numArray,4)} //00004 ${#numbers.listFormatInteger(numList,5)}// 000005 ${#numbers.setFormatInteger(numSet,6)}// 0000006 정수의 최소값 설정 후 세자리마다 구분자를 넣는 메서드 사용할 수 있는 구분자는 ‘POINT’, ‘COMMA’, ‘WHITESPACE’, ‘NONE’, ‘DEFAULT’ (by locale). 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#numbers.formatInteger(num,3,'POINT')} ${#numbers.arrayFormatInteger(numArray,3,'POINT')} ${#numbers.listFormatInteger(numList,3,'POINT')} ${#numbers.setFormatInteger(numSet,3,'POINT')} 정수와 , 소수의 최소값과 자릿수를 설정하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#numbers.formatDecimal(num,3,2)} ${#numbers.arrayFormatDecimal(numArray,3,2)} ${#numbers.listFormatDecimal(numList,3,2)} ${#numbers.setFormatDecimal(numSet,3,2)} 정수와, 소수의 최소값을 설정하고, 소수는 3자리 마다 구분자를 넣어주는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#numbers.formatDecimal(num,3,2,'COMMA')} ${#numbers.arrayFormatDecimal(numArray,3,2,'COMMA')} ${#numbers.listFormatDecimal(numList,3,2,'COMMA')} ${#numbers.setFormatDecimal(numSet,3,2,'COMMA')} 정수와, 소수 설정후에, 각각의 구분자 설정하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#numbers.formatDecimal(num,3,'POINT',2,'COMMA')} ${#numbers.arrayFormatDecimal(numArray,3,'POINT',2,'COMMA')} ${#numbers.listFormatDecimal(numList,3,'POINT',2,'COMMA')} ${#numbers.setFormatDecimal(numSet,3,'POINT',2,'COMMA')} 통화의 환율을 설정하는 메서드 ${#numbers.formatCurrency(num)} ${#numbers.arrayFormatCurrency(numArray)} ${#numbers.listFormatCurrency(numList)} ${#numbers.setFormatCurrency(numSet)} 값을 %로 설정하는 메서드 ${#numbers.formatPercent(num)} ${#numbers.arrayFormatPercent(numArray)} ${#numbers.listFormatPercent(numList)} ${#numbers.setFormatPercent(numSet)} % 포맷으로 정수와 소수의 최소값을 설정하는 메서드 ${#numbers.formatPercent(num, 3, 2)} ${#numbers.arrayFormatPercent(numArray, 3, 2)} ${#numbers.listFormatPercent(numList, 3, 2)} ${#numbers.setFormatPercent(numSet, 3, 2)} 유틸리티 메서드 x에서 y까지는 정해진 step 만큼 증가하는 연속된 정수를 나타내는 메서드 ${#numbers.sequence(from,to)} ${#numbers.sequence(from,to,step)} 타임리프 SYNTAX THYMELEAF THYMELEAF SYNTAX /%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84/syntax/thymeleaf/2018/04/10/thymeleaf2/ ====================================================================== thymeleaf 공식 API 보기 https://www.thymeleaf.org ====================================================================== Thymeleaf의 String Api에 에 대하여 String 객체의 유틸리티 메서드는 #strings다. ex) ${#strings.method(str)} 문자열 값들을 concatenation시키는 메서드 ${#strings.concat(values...)} ${#strings.concatReplaceNulls(nullValue, values...)} 문자열 비교하는 메서드 ${#strings.equals(first, second)} ${#strings.equalsIgnoreCase(first, second)} Null-safe 스트링 변환 메서드 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#strings.toString(obj)} 값(value)이 존재하는지 검사하는 메서드 스트링이 값이 있는지(혹은 null값인지) 검사한다. 체크하기 전에 trim()메서드를 사용해 앞 뒤 공백을 없애주고 실행할 것. 배열(array), 리스트(lists), 셋(sets)도 작동한다. true or false로 값을 반환한다. ${#strings.isEmpty(name)} ${#strings.arrayIsEmpty(nameArr)} ${#strings.listIsEmpty(nameList)} ${#strings.setIsEmpty(nameSet)} 디폴트 값 설정 먼저 isEmpty()메서드를 실행하여 문자열을 확인하여 false를 반환하는지 확인할 것. false가 아닌 true라면 default값으로 지정된 문자열을 반환할 것이다. 배열(array), 리스트(lists), 셋(sets)도 작동한다. ${#strings.defaultString(text,default)} ${#strings.arrayDefaultString(textArr,default)} ${#strings.listDefaultString(textList,default)} ${#strings.setDefaultString(textSet,default)} 문자열 안에 지정된 철자가 있는지 확인하는 메서드 지정된 철자가 문자열에 포함되었는지 확인한다. 배열(array), 리스트(lists), 셋(sets)도 작동. true or false로 값을 반환한다. ${#strings.contains(name,'cizz3007')} ${#strings.containsIgnoreCase(name,'cizz3007')} 값이 지정된 문자열로 시작(start)하거나 끝(end)나는지 확인하는 메서드 값이 지정된 문자열로 시작(start)하거나 끝(end)나는지 확인한다. 배열(array), 리스트(lists), 셋(sets)도 작동. true or false로 값을 반환한다. ${#strings.startsWith(name,'chang')} ${#strings.endsWith(name, 'hyeon')} Substring과 관련된 메서드. 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.indexOf(name,frag)} ${#strings.substring(name,3,5)} ${#strings.substringAfter(name,prefix)} ${#strings.substringBefore(name,suffix)} ${#strings.replace(name,'las','ler')} apeend, prepend 메서드 prepend는 문자열의 앞에 appends는 문자열의 뒤로 지정된 값을 추가한다. 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.prepend(str,prefix)} ${#strings.append(str,suffix)} 대,소문자 변경 메서드 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.toUpperCase(name)} ${#strings.toLowerCase(name)} split, join 메서드 ${#strings.arrayJoin(namesArray,',')} ${#strings.listJoin(namesList,',')} ${#strings.setJoin(namesSet,',')} ${#strings.arraySplit(namesStr,',')} // returns String[] ${#strings.listSplit(namesStr,',')} // returns List<String> ${#strings.setSplit(namesStr,',')} // returns Set<String> trim 메서드 문자열의 공백을 제거합니다. 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.trim(str)} length 메서드 문자열의 길이값을 반환한다. 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.length(str)} abbreviate 메서드 문자열의 한계치를 설정하고, length가 한계치 이상이라면 잘라낸후 …으로 표시해준다. ex) cizz3007@g… 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.abbreviate(str,10)} 첫 글자를 대문자 혹은 소문자로 변경하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.capitalize(str)} ${#strings.unCapitalize(str)} 문장에서 각 단어의 첫 글자를 대문자 혹은 소문자로 변경하는 메서드 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.capitalizeWords(str)} ${#strings.capitalizeWords(str,delimiters)} escape 메서드 문자열을 escape한다. 배열(array), 리스트(lists), 셋(sets)도 작동. ${#strings.escapeXml(str)} ${#strings.escapeJava(str)} ${#strings.escapeJavaScript(str)} ${#strings.unescapeJava(str)} ${#strings.unescapeJavaScript(str)} 랜덤 값을 리턴한다. ${#strings.randomAlphanumeric(count)} 타임리프 SYNTAX THYMELEAF THYMELEAF SYNTAX /%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84/syntax/thymeleaf/2018/04/09/thymeleaf/ THYMELEAF 설정 스프링부트 + thymeleaf로 작업 중인데, 작업하면서 잊지 않기 위해 기록해둔다. 템플릿엔진 언어 중 하나인 타임리프를 사용하기 위해 아래와 같이 해주자.html태그에 xmlns:th=”http://www.thymeleaf.org”를 추가해주고, /로 테그를 잘 닫아주자. <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Thymeleaf syntax</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> </body> </html> 메이븐 환경이라면 아래의 의존성을 추가하자. <!-- thymeleaf 의존성추가--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> application.properties에 추가해주자 spring.thymeleaf.prefix=/WEB-INF/views/ 본인의 경로에 맞게 수정 spring.thymeleaf.suffix=.html //마찬가지로 현재 본인의 템플릿엔진언어의 확장자로 변경후 사용 spring.thymeleaf.cache=false //true or false 자신의 환경에 맞게 설정 spring.thymeleaf.enabled=true spring.thymeleaf.mode=LEGACYHTML5 // legacy모드 사용시 입력 spring.thymeleaf.encoding=UTF-8 Thymeleaf는 반드시 태그를 닫아줘야 오류가 없다. 나한테는 불편함으로 느껴지는데. 다행히 해결방법은 아주 간단했다. 아래의 의존성을 추가해주자. thymeleaf-html5-legacy는 태그를 닫지 않아도 thymeleaf가 정상적으로 태그들을 인식하게 해준다. <!--thymelead-html5 legacy(메이븐)--> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> </dependency> 타임리프 SYNTAX THYMELEAF THYMELEAF SYNTAX /%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4/%EB%AC%B8%EB%B2%95/markdown/2018/04/08/markdown/ 마크다운 언어 문법에 대해 알아보자. 헤딩을 표현하는 방법 # 꽃은 피고 봄은 온다. ## 꽃은 피고 봄은 온다. ### 꽃은 피고 봄은 온다. #### 꽃은 피고 봄은 온다. ##### 꽃은 피고 봄은 온다. ###### 꽃은 피고 봄은 온다. 아래와 같이 출력된다. 꽃은 피고 봄은 온다. 꽃은 피고 봄은 온다. 꽃은 피고 봄은 온다. 꽃은 피고 봄은 온다. 꽃은 피고 봄은 온다. 꽃은 피고 봄은 온다. 줄 바꾸는 법 <br> 혹은 문장의 마지막에서 스페이스 두번 후 엔터 무궁화 꽃이 피었습니다.무궁화 꽃은 너무나 아름답게 피었습니다. 무궁화 꽃이 피었습니다.무궁화 꽃은 너무나 아름답게 피었습니다. 무궁화 꽆이 피었습니다. 문장은 엔터로 띄어서 썼으나 붙여서 출력됩니다. 밑줄을 표현하기 위해서는 문장은 <br>혹은 공백 2칸이 필요합니다. 이렇게 말입니다. <br> 혹은 문장의 마지막에서 스페이스 두번 후 엔터 무궁화 꽃이 피었습니다.무궁화 꽃은 너무나 아름답게 피었습니다.<br> 무궁화 꽃이 피었습니다.무궁화 꽃은 너무나 아름답게 피었습니다. 무궁화 꽆이 피었습니다. 문장은 엔터로 띄어서 썼으나 붙여서 출력됩니다. 밑줄을 표현하기 위해서는 문장은 <br>혹은 공백 2칸이 필요합니다. 이렇게 말입니다. 밑줄 표현하는 법 # 넣을 문장 --- 아래와 같이 출력된다. 넣을 문장 list를 표현하는 법(unordered list) list 1 list 2 list 3 list 4 list 5 list 5-1 list 5-2 list 6 list 6-1 list 6-2 - list 1 - list 2 - list 3 * list 4 - list 5 + list 5-1 + list 5-2 - list 6 + list 6-1 + list 6-2 list를 표현하는 법 2(ordered list) list 1 list 2 list 3 1. list 1 2. list 2 3. list 3 dl dt dd 표현 레시피 1.레시피를 표현하는 방법 <dl><dt>레시피</dt><dd>1.레시피를 표현하는 방법</dd></dl> table을 표현하는 법 th th th 지원 미지원 지원 미지원 지원 지원 미지원 지원 지원 | th | th | th | |---|---|---| | 지원 | 미지원 | 지원 | 미지원 | 지원 | 지원 | 미지원 | 지원 | 지원 문장 요소 표현 강조 기울기 취소선 파란나비야, 저 멀리 날아가는구나.밑줄 alert('즐기면서 하세요.') 즐기면서 길게 하세요. **강조**<br> *강조*<br> ~~ddddd~~<br> <u>파란나비야, 저 멀리 날아가는구나</u><br> `alert('즐기면서 하세요.')`<br> >즐기면서 길게 하세요. 그 외 요소들(abbr, acronym, sub, sup, etc) 일반적으로 두꺼비과의 개구리류를 통칭하기도 한다. 몸길이 60~100 mm 이다. 등면은 보통 갈색이고 피부융기의 위끝 부분은 흑색이다. 몸통과 네다리의 등면에 불규칙한 흑갈색 무늬가 있다. 몸의 옆쪽에는 흑색 세로줄이 있다. 배면은 전체적으로 연한 황갈색이지만 황색을 띤 회백색의 개체도 있으며, 암갈색의 작은 무늬가 산재한다. 머리는 몸에 비하여 크며 등면에 골질의 융기가 있다. 안비선(眼鼻線)이 현저하고 주둥이의 등면과 뺨 부분이 약간 패어 들어갔다. 고막은 원형 또는 타원형이고 작다. 귀샘은 길고 뚜렷하다. 몸통 등면에는 많은 피부융기가 있고 네다리는 보통 짧다. 암컷은 수컷에 비하여 몸길이가 길고 다리는 짧으며 피부융기는 조밀하고 무늬가 좀 더 확장되어 있다. 주로 육상에서 생활하며 곤충류나 지렁이 등을 포식한다. 산란기에는 하천이나 늪 등에 모여들고 이 시기 이외에는 습한 곳에서 생활하는 것으로 알려진다. 한국, 일본, 중국, 몽골 등지에 분포한다. 한국 민속에서는 집 지킴과 재복(업)의 상징으로 여겨지기도 한다. ㅇㅈ? 일반적으로 <sup>두꺼비</sup>과의 개구리류를 통칭하기도 한다. <sub>몸길이 60~100 mm</sub> 이다. 등면은 보통 갈색이고 <cite>피부융기의 위끝 부분은 흑색이다</cite>. 몸통과 네다리의 등면에 불규칙한 흑갈색 무늬가 있다. 몸의 옆쪽에는 흑색 세로줄이 있다. 배면은 전체적으로 연한 황갈색이지만 황색을 띤 회백색의 개체도 있으며, 암갈색의 작은 무늬가 산재한다. 머리는 몸에 비하여 크며 등면에 골질의 융기가 있다. <acronym title="안하무인 비만 선고ㅋㅋ">안비선(眼鼻線)</acronym>이 현저하고 주둥이의 등면과 뺨 부분이 약간 패어 들어갔다. 고막은 원형 또는 타원형이고 작다. 귀샘은 길고 뚜렷하다. 몸통 등면에는 많은 피부융기가 있고 네다리는 보통 짧다. 암컷은 수컷에 비하여 몸길이가 길고 다리는 짧으며 피부융기는 조밀하고 무늬가 좀 더 확장되어 있다. 주로 육상에서 생활하며 곤충류나 지렁이 등을 포식한다. 산란기에는 하천이나 늪 등에 모여들고 이 시기 이외에는 습한 곳에서 생활하는 것으로 알려진다. 한국, 일본, 중국, 몽골 등지에 분포한다. 한국 민속에서는 집 지킴과 재복(업)의 상징으로 여겨지기도 한다. <abbr title="인정?">ㅇㅈ?</abbr> 링크 표현하는 법 Google naver [Google](https://www.google.com/) [naver](https://www.naver.com/) [내가 지은 링크이름](링크주소) 이미지 표현하는 법    이미지에 링크걸기 [](https://www.naver.com/) 글 정렬하기 마크다운은 가운데 정렬만 지원한다. 가운데 왼쪽 오른쪽 <center>가운데</center> <div style="text-align: left"> 왼쪽 </div> <div style="text-align: right"> 오른쪽 </div> 인용문 표현하는 법 d d ddd dddd ddddd >d >>d >>>ddd >>>>dddd >>>>>ddddd 마크다운 문법 MARKDOWN MARKDOWN SYNTAX /photo/2018/03/18/gallery-post/ Nunc dignissim volutpat enim, non sollicitudin purus dignissim id. Nam sit amet urna eu velit lacinia eleifend. Proin auctor rhoncus ligula nec aliquet. Donec sodales molestie lacinia. Curabitur dictum faucibus urna at convallis. Aliquam in lectus at urna rutrum porta. In lacus arcu, molestie ut vestibulum ut, rhoncus sed eros. Sed et elit vitae risus pretium consectetur vel in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus turpis quis lectus rhoncus adipiscing. Proin pulvinar placerat suscipit. Maecenas imperdiet, quam vitae varius auctor, enim mauris vulputate sapien, nec laoreet neque diam non quam. Etiam luctus mauris at mi sollicitudin quis malesuada nibh porttitor. Vestibulum non dapibus magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat hendrerit viverra. Phasellus sit amet nunc mauris, eu ultricies tellus. Sed a mi tortor, eleifend varius erat. Proin consectetur molestie tortor eu gravida. Cras placerat orci id arcu tristique ut rutrum justo pulvinar. Maecenas lacinia fringilla diam non bibendum. Aenean vel viverra turpis. Integer ut leo nisi. Pellentesque vehicula quam ut sapien convallis consequat. Aliquam ut arcu purus, eget tempor purus. Integer eu tellus quis erat tristique gravida eu vel lorem. Photo consectetur