JavaScript

[JavaScript] Object 속성, 값 관련 메서드

1. Object.entries 객체의 속성들을 [키, 값] 형태의 배열로 변환해 주는 메서드 객체의 열거 가능한 속성들을 순회 속성들의 순서 보장하지 않음 const person = { name: 'John', age: 30, occupation: 'Engineer' }; const entries = Object.entries(person); console.log(entries); // [ ["name", "John"], ["age", 30], ["occupation", "Engineer"] ] 위의 출력 결과처럼 'Object.etries' 메서드는 주어진 객체의 각 속성을 [키, 값] 형태의 배열로 변환하여 배열로 묶어 반환합니다. 이를 통해 객체의 속성들을 배열 형태로 순회하거나, 다른 배열과 합..

[JavaScript] 파일 업로드 기능 구현

1. HTML input 태그 input 태그의 file 타입을 사용하면 파일 선택 다이얼로그가 열리고 사용자는 로컬 파일 시스템에서 원하는 파일을 선택할 수 있습니다. 파일 업로드 : 선택한 파일은 웹 서버로 업로드됩니다. 폼태그의 'action' 속성에 지정된 URL로 파일이 전송되며, 서버 측에서는 이 파일을 처리하고 저장할 수 있습니다. 파일 형식 제한 : 'accept' 속성을 사용하여 특정 파일 형식만 선택할 수 있도록 제한할 수 있습니다. 다중 파일 선택 : 'multiple'속성을 사용하여 다중 파일 선택을 지원할 수 있습니다. 파일 정보 확인 : JavaScript를 사용하여 선택한 파일의 정보를 확인할 수 있습니다. 'FileReader' 객체를 사용하여 파일 이름, 크기, 유형등의 정..

[JavaScript] for in, for of 반복문 차이

1. for ...in 문 객체의 열거 가능한 속성(프로퍼티)에 대해 순회(반복) 객체의 key 값에 접근 가능, value 값에는 직접 접근 불가능 모든 객체에서 사용 가능 for ...in 문은 객체의 열거 가능한 속성(프로퍼티)에 대해 반복합니다. 열거 가능하다는 것은 enumerable 속성을 가지고 있다는 것을 의미합니다. keys는 열거 가능한 속성이고, valueOf는 열거 불가능한 속성이기 때문에 객체의 key 값에는 접근할 수 있지만, value 값에는 직접 접근할 수 없습니다. key값을 이용해 간접적으로 접근하는 것은 가능합니다. 예를 들어, 객체의 속성을 출력하거나 속성에 대한 작업을 수행할 때, for ...in 문을 사용할 수 있습니다. const obj = { a: 1, b: ..

[Javascript] 파일의 확장자 추출하는 함수

파일 업로드를 구현하다 보면 파일의 확장자를 체크해야 하는 경우가 많이 있습니다. 간단한 로직이지만 자주 쓰이기 때문에 함수로 만들어서 사용해 봤습니다. function getFileExtenstion(filename) { // 파일이름의 마지막 점(.)의 인덱스를 찾습니다. var dotIndex = filename.lastIndexOf("."); // 점이 없는 경우 확장자 없음으로 간주합니다. if (dotIndex == -1) { return ""; } else { return filename.substr(dotIndex + 1); } } 위 함수에 "test.jpg"라는 파일 이름을 변수로 넣으면 결과로 "jpg"를 반환합니다. 만약 파일이름에 점(.)이 없는 경우 빈 문자열을 반환합니다. fu..

[JavaScript] FileReader 객체

1. FileReader 객체란? FileReader 객체를 활용하면 파일을 읽고 서버로 업로드하는 등 다양한 파일 처리 작업을 수행할 수 있습니다. FileReader는 비동기적인 방식으로 파일을 읽기 때문에 파일이 크거나 읽는데 시간이 걸릴 수 있는 경우에도 웹 페이지의 응답성을 유지할 수 있습니다. 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체에서 파일 객체를 얻을 수 있고, 드래그 앤 드롭으로 반환된 DataTransfer 객체에서도 파일 객체를 얻을 수 있습니다. 2. 속성 FileReader 객체의 주요 속성은 다음과 같습니다. 1. result: 파일의 내용을 나타내는 데이터입니다. 파일을 읽은 후에는 해당 속성을 통해 파일 내용에 접근할 수 있습니다. 이 값은 ..

[JavaScript] 유효성 검사 (빈 값 체크)

안녕하세요 코북입니다. 글을 썼던 게.. 언제.. 였더라.. 기억도 안 나요..^^ 최근 새롭게 맡게 된 일 때문에 더 바빴던 것 같기도 하고(핑계) 오늘부터 잘하면 되죠ㅎㅎ.. 아무튼 최근에 자바스크립트 유효성 검사하면서 헷갈렸던 부분이 있어 정리하는 글을 적어보려고 합니다. 자바스크립트의 자료형에 대해서 유효성 검사(빈 값 체크)를 하는 경우가 많이 있습니다. 자바스크립트 자료형에서 빈 값을 확인하는 대표적인 방법은 not 연산자를 사용하여 처리하는 것입니다. var val = ""; if(!val){ console.log("값이 없음"); } else { console.log("값이 있음"); } 이와 같은 방법으로 유효성 검사를 할 수 있는 이유는 "", null, undefined, 0, NaN..

[Javascript] location 객체 이해하기

안녕하세요 코북입니다. 이번 개발 건 진행 중 현재 페이지의 주소를 자바 스크립트로 가져와야 하는 상황이 있었습니다. C#으로는 구현해본 경험이 있었지만 javascript로는 처음 구현해봤는데요. location객체에 대한 이해가 많이 부족하다고 느껴 정리해보려고 합니다. 자바스크립트의 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다. 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있습니다. location 객체의 프로퍼티와 메서드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다. 우리가 가장 많이 사용하는 locati..

[Javascript/jQuery] 팝업창(자식창)에서 부모창 url 얻기

안녕하세요 코북입니다. 한 달에 한 번씩 글을 쓰는 것 같네요^^.. 시간이 왜 이렇게 빠른지.. 배포 한 번 할 때마다 한 달이 지나가 있는 것 같아요.. 또 사람이 일만 할 수는 없잖아요ㅠㅋㅋㅋㅋ 놀기도 해야 하고^^... 바쁘네요ㅎㅎㅎㅎㅎ 아무튼 오늘은 팝업창을 띄웠을 경우 javascript로 자식 창(팝업창)에서 부모 창에 어떻게 접근할 수 있는지 공부했습니다. 1. $(function () { try { // window.opener가 없을 수도 있음 -> try/catch 처리 if (window.opener.location.href.indexOf("type=1") > -1) { $('#id_a').parent().css("display", "none"); $('#id_b').parent()..

[JavaScript] checkbox 한 개 이상 체크 검사

안녕하세요 코북입니다. 4월의 시작과 함께 테스트와 발표가 2번이나 있어서 정신없이 바쁘게 보내고 있습니다. 아무도 안 궁금하셨다고요?^^ 넵, 오늘은 사용자가 체크박스를 한 개 이상 체크하도록 권장하는 기능을 javascript로 구현해봤습니다. 1. 체크박스 체크박스를 검사해야 하기 때문에 먼저 체크박스가 필요하겠죠? 예시로 사용할 체크박스를 간단한 스타일로 만들어봤습니다. @{ cobook cob = ViewBag.cob; } ... 저장 2. JavaScript 자바스크립트로 조건을 걸어줍니다. querySelectorAll을 사용하면 조건에 일치하는 엘리먼트를 NodeList로 반환합니다. 그리고 .length로 NodeList의 크기를 확인할 수 있습니다. 변수에 담아서 크기가 0인 경우 경고..

[JavaScript/jQuery] html 태그 인식 이슈

안녕하세요 코북입니다. 내에 html 태그를 삽입하여 html이 렌더되지 않고 텍스트 그대로 출력되는 이슈가 있었습니다. 해결 방법 1. 를 로 변경 2-1. jQuery 문법 .val()를 .html()로 변경 2-2. innerHTML로 변경 var cobook = "제목 : HTML5 이슈 내용 : 무야호"; $('#co_id').val(cobook); // 변경 // jQuery $('#co_id').html(cobook); // JavaScript document.getElementById('co_id').innerHTML = cobook; .html()은 선택한 요소 안의 내용을 가져오거나, 이전 내용을 새로운 내용으로 변경해줍니다. 위 코드처럼 사용하면 div 요소의 내용을 제목 : HTML..