Front-End14 파일 업로드 및 저장 - 01, html 개요 수작업으로 게시글처럼 보이도록 개행문자를 기준으로 나눠 태그를 작성하던 중 우연히 위그지그 를 발견하게 되어 관련 에디터 CKEditor의 이미지 업로드를 구현하기 위해 공부한 파일 업로드 부분을 정리하기 위해 작성하게 되었다. 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 간단한 예제를 통해 어떻게 동작하는지 알아보도록 한다. html form enctype 속성(application/www-form-urlencoded) 작성자 파일 파일설명 enctype은 폼 데이터가 서버로 .. 2023. 9. 16. [JavaScript] 생성자 함수 생성자 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 인스턴스를 생성, 생성된 인스턴스를 초기화 한다. 인스턴스를 생성하고 반환하는 코드가 없어도 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환한다. 암묵적으로 빈 객체가 생성된다. 이 객체는 this에 바인딩 된다. 이 처리는 런타임 이전에 실행됨 this에 바인딩 된 인스턴스는 생성자 함수에 기술된 코드가 한줄씩 실행되며 프로퍼티나 메서드를 추가하며 초기화 된다. 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. this가 아닌 다른 객체를 명시적 반환하면 암묵적 this 객체는 반환되지 못하고, return문에 명시한 객체가 반환된다. function Circle(radius){ this.. 2022. 10. 29. [JavaScript] 객체 변경 방지 객체 변경 방지 메서드 구분 메서드 추가 삭제 값 읽기 값 쓰기 어트리뷰트 재정의 객체 확장 금지 Object.preventExtensions X O O O O 객체 밀봉 Object.seal X X O O X 객체 동결 Object.freeze X X O X X Object.preventExtensions 프로퍼티 추가만 금지 const person = {name:'Lee'}; console.log(Object.isExtensible(person)); // false Object.preventExtensions(person);// 프로퍼티 추가만 금지된다. console.log(Object.isExtensible(person));// true person.age = 20; console.log(pers.. 2022. 10. 28. [JavaScript] 프로퍼티 어트리뷰트 , 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태 프로퍼티의 값(value) 값의 갱신 가능 여부(writable) 열거 가능 여부(enumerable) 재정의 가능 여부(configurable) 을 말한다. 프로퍼티 어트리뷰트 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태값인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 이다. 직접 접근은 불가능하지만, Object.getOwnPropertyDescriptor 메서드 사용해 간접 확인 가능 const person = { name: 'Lee'}; console.log(Object.getOwnP.. 2022. 10. 28. [Javascript] 객체, 생성자 함수 숙지사항 객체 객체는 키와 값으로 구성된 프로퍼티의 집합이다. 당연히 null인 객체의 프로퍼티 참조 시 에러발생 for-in 객체의 문자열 키를 순회하기 위한 문법이다. 순서보장 x + 추가적인 프로퍼티까지 순회하기 때문에 배열에 사용 부적합 객체 순회 적합 for-of 위의 문제점 때문에 배열 순회 시 맞춤형 문법 만들어짐 순서보장 o + 배열 요소들만 순회함 배열 순회 적합 얕은 복사 객체의 복사는 참조이다. Object.assign(target, ...source) 얕은복사는 Object.assign(target, ... source)를 이용해 복사 가능 const original = {name: '철수', age: 12}; const clone = Object.assign({}, original); cl.. 2022. 10. 26. [Javascript] 타입 관련 예외사항 null의 타입 null의 타입은 object 타입이다. 자바스크립트 설계 오류이다. 따라서 null 타입 검사 시 typeof null을 하게되면 object로 나오게 됨 비교하려면 null === null로 비교해야함 심볼(Symbol) 타입 변경 불가능한 원시타입의 값이다. 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용됨 var key = simbol('key'); var obj = {}; obj[key] = 'value'; console.log(obj[key]);// 'value' 값에 의한 전달 방식 원시타입은 모두 값에 의한 전달 방식이다. 원시타입을 제외한 나머지 값들은 모두 객체이고, 객체는 참조에 의한 전달 방식을 사용한다. 변수 중복 선언 var 키워드로 선언한.. 2022. 10. 26. 이전 1 2 3 다음
