You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🐘 php ↔ javascript 변수 전달하는 법
php → javascript 전달 1. echo() 사용 script 태그 내에서 php 섹션으로 변수를 정의하는 코드 자체를 문자열로 echo 하면, 곧 자바스크립트 코드 실행이 되게 된다. 2. form으로 지정 input 태그의 value 속성 부분에 문자열로 php 섹션 변수를 쓰면 html 값으로 들어가게 된다.
🐘 PHP 파일 처리 (열기 / 읽기 / 쓰기)
PHP 파일 열기 파일 모드에 't' 플래그를 추가하면, 해당 파일을 텍스트 모드(text mode)로 열게 됩니다. 텍스트 모드로 열린 파일은 파일 내부에 존재하는 줄 바꿈 문자('\n', '\r\n')를 해석하여 실제로 줄 바꿈 된 상태로 전달할 것입니다. 파일 모드에 'b' 플래그를 추가하면, 해당 파일을 바이너리 모드(binary mode)로 열게 됩니다. 바이너리 모드로 열린 파일은 파일 내부에 존재하는 줄 바꿈 문자('\n', '\r\n')를 해석하지 않고 그대로 전달할 것입니다. $fp = fopen("list.txt", 'a'); 파일 모드 설명 r 파일을 읽기 전용으로 열고, 파일 포인터는 파일의 시작 부분에 위치함. r+ 파일을 읽고 쓰기 위해 열고, 파일 포인터는 파일의 시작 부분에 ..
🐘 PHP 폼 요소 데이터 처리하기
HTTP 요청 방식 HTML form 요소가 전송한 데이터를 처리하기 위해서는 PHP와 같은 서버 사이드 스크립트 언어를 사용해야 합니다. 클라이언트인 브라우저가 서버에 HTTP 요청을 보낼 때는 다음 방식 중 하나를 사용합니다. GET 방식 POST 방식 두 방식 모두 form 요소를 통해 입력받은 데이터를 연관 배열에 담아 전송합니다. 이 연관 배열의 키값은 input 요소의 name 속성값이 되며, 값은 사용자가 입력한 데이터가 됩니다. 또한, 미리 선언된 전역 변수인 슈퍼 글로벌 배열($_GET, $_POST)을 사용하므로, 어디에서든 제약 없이 접근할 수 있습니다.
🌐 MutationObserver - DOM의 변화를 감시
MutationObserver 동적으로 페이지를 구성할 때 페이지의 변경여부를 실시간으로 확인해야 하는 경우가 있다. 예를 들어, ajax로 DOM 엘리먼트를 추가/삭제 할 경우 그 변화를 감지해야 한다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었다. setTimeout이나 setInterval을 사용하여 주기적으로 체크하는 방법도 있지만, 그것보다는 대체로 사용할 수 있는 것이 MutationObserver다. MutationObserver는 DOM의 변화를 주기적으로 감시한다. DOM의 속성, 텍스트, 자식 노드들에 대한 변경을 감지할 수 있다. Mu..
🐘 PHP 배열 종류 정리 (연관 배열)
1차원 배열 1차원 배열은 가장 기본적인 배열로 다음과 같은 문법에 따라 선언됩니다. $배열이름 = array(); PHP에서는 array()라는 함수를 이용해 배열을 생성합니다. 배열 이름은 배열을 선언한 후에 해당 배열에 접근하기 위해 사용합니다. $arr = array(); // 배열 생성 $arr[0] = "apple"; // 배열 요소 추가 $arr[1] = "banana"; $arr[2] = "orange"; $arr = array("apple", "banana", "orange"); // 배열 생성과 동시에 초기화 만약 해당 배열이 존재하지 않으면, 해당 이름으로 새로운 배열을 만든 후에 배열 요소를 추가합니다. $arr[0] = "apple"; // 배열이 존재하지 않으므로, 먼저 배열을 ..
📚 && 논리 연산자로 if문 단축하기
&& 연산자 조건문 표현 자바스크립트의 &&(AND) 연산자는 양쪽 피연산자가 모두 true일 때 true를 반환하고, 그렇지 않을 때는 false를 반환한다. 이 특성을 이용하여 자바스크립트의 if문을 한줄로 단축시킬 수 있다. if (num !== 0) { console.log('num is not zero'); } num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한줄로 단축 num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이때는 첫번째 식이 false 일때만 다음 식이 실행된다 && 연산자 와 (소괄호) 표현 그런데 만일 console.log() 와 같은 함수 호출..
🌐 자바스크립트 URL 객체 사용법
URL 객체 이전에는 window.location.href를 통해 url문자열을 얻어와 문자열 파싱을 통해 쿼리 스트링을 사용했었다. 하지만 이제 url 정보값들을 객체로 받아와 간편하게 사용할수 있게 되었다. 기본 제공 URL 클래스는 URL 을 만들고 구문 분석하기 위한 편리한 인터페이스를 제공한다. // 사이트 주소 얻기 const link = window.location.href; // "http://testurl.co.kr:8080/path/main.html?param1=1¶m2=3#top" var url = new URL(link); /* url 객체 정보 */ { protocol: "http:" // 프로토콜 hostname: "testurl.co.kr" // 도메인, 아이피 port..
![[JS] 📚 자바스크립트 커스텀 이벤트 다루기 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F53eYm%2FbtriX8y8Mui%2FPGGCFdt9JQgQtQNNPYmfj1%2Fimg.png)
[JS] 📚 자바스크립트 커스텀 이벤트 다루기 💯 정리
이벤트 디스패치 자바스크립트를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수도 있습니다. 새로운 커스텀 이벤트뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 이벤트들은 테스팅을 자동화할 때 유용합니다. Event의 생성자 내장 이벤트 클래스는 DOM 요소 클래스같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 있습니다. Event 객체는 다음과 같이 생성할 수 있습니다. let event = new Event(type[, options]); type – 이벤트 타입을 나타내는 문자열로 "click"같은 내장 이벤트, "my-event" 같은 커스텀 이벤트가 올 수도 있습니다...
![[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJg1v4%2FbtrgWDP1xj8%2FHzvrvrotIm0OzG3aWCmOaK%2Fimg.jpg)
[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리
자바스크립트 모듈 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈 export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. export에는 Named exports와 Default exports 두가지 방법이 있습니다. // 변수, 함수 선언식을 하..
![[JS] 📚 자바스크립트 실행 컨텍스트 원리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWuLYP%2FbtrfU41mHjv%2FqFww4qi7966Hikg9QLsOJ1%2Fimg.webp)
[JS] 📚 자바스크립트 실행 컨텍스트 원리
실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다. 자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다. 실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(Scope) this 이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 아래의 코드를 살펴보자. var x..
![[JS] 📚 제너레이터 - 이터레이터 강화판](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEHEcr%2FbtrgMATDqp6%2FYB5KE0M4S5MikxmOEYtUZ1%2Fimg.jpg)
[JS] 📚 제너레이터 - 이터레이터 강화판
제네레이터란? 이터러블이며 동시에 이터레이터 = 이터레이터를 리턴하는 함수 (async가 Promise를 리턴하는 함수듯이, 제너레이터는 이터레이터를 리턴하는 함수다.) 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 구현할 수 있다. (Promise와 async 관계와 비슷하게 보면 된다.) 이터러블 프로토콜 방식 let range = { from: 1, to: 5, [Symbol.iterator]() { return { current: this.from, last: this.to, next() { if (this.current generatorObj.next() -> yield 2 -> ... -> end ● 제너레이터의 실행 결과가 이터레이이터..
![[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbN5cj4%2FbtrgXqVWxha%2FaPP3oGTyORu4fjRd76NUck%2Fimg.jpg)
[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해
이터러블(interable) 이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다. 그럼 만일 이 배열에게 이터러블 표식을 없애버리면 어떻게 될까? let arr = [1,2,3] for(const a of arr) console.log (a) // 정상작동 1,2,3 arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다 for(const a of arr) console.log (a) // Uncaught TypeError: arr is not iterable 멀쩡한 배열임에 불구하고 for..of로 순회할수가 없게 되었다. 저 [Symbol.iterator] 라는 코드가 눈에 띈다. 이제 저것이 ..
