H_Develop

//카카오톡 외부 브라우저 접근 var inappdeny_exec_vanillajs = (callback) => { if(document.readyState != 'loading'){ callback(); }else{ document.addEventListener('DOMContentLoaded', callback); } }; inappdeny_exec_vanillajs(() => { /* Do things after DOM has fully loaded */ function copytoclipboard(val){ var t = document.createElement("textarea"); document.body.appendChild(t); t.value = val; t.select(); docume..

FrontEnd/JavaScript 2023. 9. 15. 18:00

글, 정말 잘쓰셨다. REACT 와 BOOT 연동 시키며, 동시에 빌딩하는걸 해보고 싶었는데 정말 잘 정리 되어있다. https://7942yongdae.tistory.com/136 이 글에서는 실무에서 사용할 수 있는 React + SpingBoot 프로젝트 구조를 만드는 과정을 알아보겠습니다. 이전에 Vue + SpringBoot 프로젝트를 만드는 방법을 알아보았는데요. 이 방법은 전문가처럼 React나 Vue 같은 Javascript 프레임워크를 사용할 수 있는 구조가 아니기 때문에 토이 프로젝트 혹은 간단한 팀 프로젝트에서 이용할 수 있는 구조이지 실무에서는 사용하기 부적합한 구조입니다. 이번 글에서는 프론트엔드 전문가처럼은 아니지만 그에 준하는 수준으로 React를 사용할 수 있는 SpringB..

FrontEnd/react 2023. 6. 28. 15:33

도대체 React랑 Node.js랑 무슨 관계가 있는 것일까?? Node.js가 React를 사용하기 쉽게 해주는 오픈소스이자 JavaScript runtime environment이기 때문입니다. Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데 이 NPM이란 것을 통해 React 개발에 필요한 다양한 모듈들을 다운받아 사용할 수 있습니다. 다운로드는 npm cli를 이용해 간단한 명령어를 입력하면 npmjs.com 사이트의 npm registry에 접근하여 이루어집니다. cli를 통한 명령어 입력 방법 예시 $ npm install React개발자들은 다른 개발자들이 구현해 놓은 간편하고 필요한 모듈 및 라이브러리들을 다운받기 위해서 node.js를 설치해..

FrontEnd/react 2023. 5. 27. 10:14

csIdLsit(dataId, callback) { var than = this; var Area = $(node); //상세영역 var param = { dataId : dataId } ajaxGet(Url + "getList.do", param, function(data, status) { var Body = area.find('select[name="id"]'); if(data.list && data.list.length > 0){ for(var o in data.list){ Body.append(''+data.listCs[o].name+''); } } callback(); }); }, List(data, function() { Area.find("select[name='id']").val(data..

FrontEnd/JavaScript 2023. 2. 20. 16:03

// of for(var o of getDeptList) { if(o.name === 'AI') { console.log(o.people); for(var obj of o.people) { if(obj.name === '박') { console.log(obj); } } } } // in for(var idx in getDeptList) { if(getDeptList[idx].name === 'AI') { console.log(getDeptList[idx].people); for(var obj of getDeptList[idx].people) { if(obj.name === '박') { console.log(obj); } } } } // forEach getDeptList.forEach(function(o..

FrontEnd/JavaScript 2023. 1. 6. 16:10

var a = [ {dept:{ 'AI':{name:['H','Y'],age:[32,21]}, 'Sales':{name:['Z','X'],age:[42,13]} }} ] 1. 리스트 안에 리스트 쓰지 말것 ! [ [ {obj:'HI'} ] ] 뭐가 뭔지 모름 2. Value 값을 Array 리스트로 담지 말것 ! {name : [ {'Hwang': 'handsome'} ]} 그냥 안돼 이놈아 3. Array면 변수 이름에 List를 적어줄 것 ! var SomethingList = [ ] var Something = { } 4. o.people[1] 이런식으로 데이터 가져오지 말것 ! for문을 두개 돌려서라도 직접가져오지 마라 5. List.push로 넣을 때, 기존 데이터와 동일한 구조를 유지할 것 ..

FrontEnd/JavaScript 2023. 1. 6. 14:20

script 에서 변수를 선언하고 대입하는 값에 || [] 를 입력하면, 변수값이 null, false, undefined 라면 오른쪽 값이 들어가게 된다. var a = undefined; a = a || {}; console.log("a : "+ a); // "a : [object Object]" var a = 0; a = a || {}; console.log("a : "+ a); // "a : [object Object]" var a = 1; a = a || {}; console.log("a : "+ a); // "a : 1" var a = true a = a || {}; console.log("a : "+ a); // "a : true" var a = "ㅇㅁㅇㄴㅁㄴㅇ"; a = a || {}; c..

FrontEnd/JavaScript 2022. 12. 15. 09:09

CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다. overflow 에 사용할 수 있는 값은 네가지가 있습니다. - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가 자동 결정됩니다..

FrontEnd/CSS 2022. 12. 9. 08:40