뚱노트 뚱노트

개발

• [클린코드 자바스크립트] 전역공간 사용 최소화

  개발/javascript 2022. 3. 3. 22:12

  * 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. 전역 공간 사용 최소화 전역공간 사용은 최소화해서 사용해야 한다. 지역변수만 사용하도록 한다. window, global 에 접근해서 직접 조작하지 않는다. IIFE, module, closure, 스코프를 나누는 방법등을 사용하도록 한다. 전역공간 window: 브라우저 환경에서 최상위 객체, 웹 API 인터페이스들을 가지고 있음 global: node.js 에서 최상위 객체 # 하나의 html에 두개의 자바스크립트 파일을 사용하는 경우 # 전역공간을 사용하면 서로 다른 파일에서 변수 사용이 겹칠 수 있기 때문에 위험함 # index.js var globalVar = 'global'; console.log(globalVar) // glob..

  Read More
• [클린코드 자바스크립트] 함수 스코프 & 블럭 스코프 (function scope, block scope)

  개발/javascript 2022. 3. 2. 21:13

  * 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. function scope & block scope 함수단위 스코프 : var 블럭단위 스코프 : const, let var 사용은 지양한다. 왜 ? 잦은 변수 사용을 하면 값이 바뀌는 경우가 생길 수도 있음. 짧은 소스코드는 괜찮지만 소스코드가 더 길고 복잡할 수록 버그 발생이 생기기 쉬움. const는 재할당만 금지한다. 객체, 배열의 조작은 가능하다. # var 사용을 지양하는 이유 var global = '전역'; if(global === '전역') { var global = '지역'; console.log(global) // 지역 } console.log(global) // 지역 -> 값이 바뀌는 불안요소가 있음. # 함수단위 스코..

  Read More
• [jquery] 이미지 파일 미리보기 (file, image)

  개발/jquery 2022. 1. 7. 17:35

  웹에서 input type='file' 인 입력 항목에 이미지 파일을 선택했을 때 이미지 파일이 바로 화면에 보이게 하는 미리보기 기능을 사용할 때가 있다. 구현 방법은 간단하다. file 태그에 변경이 이루어지면 image 파일인경우 미리보기를 하려는 img 태그에 파일 정보를 넣어주면 된다. 이미지를 미리 보여주기 전에 파일의 확장자를 체크하거나 파일의 용량을 확인하는 사전 작업이 수행되면 더 좋은 코드가 될 것 같다. 구현 코드 # html 화면 $("#imageFile").on("change", function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { $..

  Read More
• [RESTful Service] Validation 사용

  개발/Spring boot 2021. 7. 14. 21:48

  도메인에 적절한 validation 어노테이션을 추가하여 사용한다. @AssertFalse: false 이어야 한다. @AssertTrue: true 이어야 한다. @DecimalMax(value=, inclusive=): inclusive=false 이면 지정된 최대값 보다 작은지 확인, inclusive=true 이면 값이 지정된 최대값보다 작거나 같은지 확인한다. @DecimalMin(value=, inclusive=): inclusive=false이면 지정된 최소값 보다 큰지 확인, inclusive=true 이면 값이 지정된 최소값보다 크나 같은지 확인한다. @Digits(integer=, fraction=): integer=와 fraction=에 의해 지정된 자리수의 숫자인지 확인합니다 @Em..

  Read More
• [jQuery] 선택자를 사용하는 방법

  개발/jquery 2021. 5. 28. 22:06

  jQuery를 사용하여 DOM 객체를 선택하는 경우가 많은데 항상 헷갈리고 실전에서 많이 사용했던 선택자에 대해서 정리해 보았다. 1. 자손 선택자 / 후손 선택자 - 자손 선택자: 기준이 되는 태그 바로 하위에 위치한 선택자를 칭하며 '요소A > 요소B' 로 사용한다. $("body > div").css("color", "red"); - 후손 선택자: '요소A 요소B' 로 사용하며 요소A의 후손을 범위로 선택한다. $("body *").css("color", "blue"); // body 태그 아래 모든 태그들을 범위로 칭한다. 2. 속성 선택자 - 요소[속성=값]: 속성과 값이 같은 문서 객체를 선택한다. - 요소[속성|=값]: 속성 안의 값이 특정 값과 같은 문서 객체를 선택한다. - 요소[속성~=..

  Read More
• [jQuery] input file을 form 데이터로 전송하는 방법

  개발/jquery 2021. 5. 26. 23:53

  Spring 기반 웹 어플리케이션을 개발하면서 MultipartFile 형태로 파일을 전달 받고 싶은 경우가 있었다. 그 때 이 방법을 통해 file을 잘 전달 할 수 있었다. jsp 에서 ajax를 이용하여 form 데이터를 서버로 보내기까지의 과정을 간단하게 아래와 같이 기술한다. 1. HTML 2. Javascript - 버튼이 존재한다면 버튼을 작동 시키는 onclick 함수를 생성하여 아래와 같은 코드를 적절히 추가하여 사용하도록 한다. - 서버로의 전송은 ajax를 사용하였다. 자세한 ajax의 옵션과 사용방법은 다음에 기술 할 예정이다. (공부할게 참 많다.) var imageFile; // 첨부파일을 변경할때 마다 실행되는 이벤트 $("#image").on("change", function..

  Read More
• [jQuery] 화면 개발에 유용한 checkbox, radio 사용법

  개발/jquery 2021. 5. 16. 23:12

  jQuery를 사용하여 화면을 개발할 때 항상 까먹고 헷갈리는 문법들을 정리 하고자한다. 특히 체크박스와 라디오 버튼은 화면 개발시 많이 사용하게 되는데 자바스크립트 영역에서 이 두가지를 제어하는 방법에 대해 설명하도록 한다. # 추가로 메모할 내용은 해당 페이지에 계속 추가할 예정이다. 체크박스 (checkbox) - 체크박스 name, id를 선택자로 사용 > $("input[name='check']); $("input:checkbox[name='check']") // name 으로 체크박스 지정 > $("#check") // id로 체크박스 지정 - 체크박스 체크/해제 > $("#check").prop("checked", true); > $("#check").prop("checked", false)..

  Read More
• ionic 5 기반 하이브리드 앱 프로젝트 생성

  개발/Ionic 2020. 6. 15. 03:51

  1.ionic 설치 - pc에 node를 설치합니다. (다운로드 URL : https://nodejs.org/ko/download/) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - node 설치 후 터미널을 열고 npm install -g ionic cordova 를 입력합니다. ionic과 cordova가 다운로드 완료되면 아래와 같이 설치가 잘 되었는지 확인합니다. (버전 정보 확인 : ionic -v, cordova -v) 2. Project 설치 - ionic 설치가 완료되면 프로젝트를 생성합니다. 프로젝트 유형은 blank, tabs, sidemenu 등 세가지로..

  Read More