본문 바로가기

전체 글

 (460)
[코딩애플] js part 1-3. Arrow function은 function을 대체하는 신문법이 아님 함수 만드는 방법 (1=2) function 함수() {} var 함수 = function () {}; **ES6 Arrow function**을 이용 (function 키워드 대신) var 함수 = () => {}; 함수 사용하는 경우 함수는 그냥 쓰는 문법이 아니다. 코드들을 기능으로 묶고 싶을 때 사용 **입출력 기계**를 만들고 싶을 때 사용(input, output) ➡️ 함수 본연의 기능 var 함수 = (a) => { return a + 10 }; Arrow function의 좋은 점 입출력 나타내는데 훨씬 직관적임(쉽게 예측 가능) 파라미터 1개면 소괄호 생략 가능 var 함수 = a => { return a + 10 } 코드 한 줄이면 중괄호도 생략 가능 var 함수 = a => a + ..
[js] event.currentTarget vs event.target 보호되어 있는 글입니다.
[js] 이벤트 핸들러들 (onClick, onChange, onSubmit, onInput, onLoad, ...) 보호되어 있는 글입니다.
[코딩애플] js part 1-2. this 키워드를 알아보자 this 키워드는 뜻이 사용 용도에 따라서 3~4가지가 된다. 1. 함수와 Object에서 사용하면? => 나를 담고 있는 오브젝트가 나옴 (1) 그냥 쓰거나, 일반 함수 안에서 쓰면, 객체 {window} ❓window란 자바스크립트 기본 함수들을 담고 있는 개체 자바스크립트는 **키워드나 변수를 만나면 데이터를 바꾸고 싶어한다**. 자바스크립트의 가장 최상단에서 this 키워드는 무엇을 의미하는지 콘솔 찍어보자. window가 출력이 된다. 이게 this 키워드의 첫 번째 뜻이다. this를 출력하는 함수를 생성해보고 실행하자. 동일하게 window가 뜬다. 즉, **그냥 쓰거나 일반 함수에서 쓰면 object {window}이다**. ❗자바스크립트 strict mode에서 쓰면 'undefined'..
[코딩애플] js part 1-1. 강의 듣기 전 자바스크립트 기본 문법 총정리 JavaScript를 쓰는 이유 1. HTML 변경하려고 씀 안녕 2. HTML 누르면 뭐 실행하고 싶을 때 ➡️이벤트리스너 안녕 버튼 3. 잠깐 자료를 저장해두고 싶다면 ➡️ 변수 용도에 따라 var, let, const 사용 가능함 4. 긴 코드를 짧게 축약하려면 ➡️ 함수 안녕 버튼 5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드 안녕 버튼 화살표 함수 정확히 같은 역할을 하는 것은 아님. 후에 알아볼 것임. document.getElementById('button').addEventListener('click', () => { 작명('바보'); }) 6. 한 번에 여러 개 자료를 저장하려면 ➡️ array, object array array 속에 array나 함수를 넣을 수도 있다. 원하는 ..
Incognito Mode란? (+Next.js에서 query 값이 아직 없을 때) Incognito Mode(인코그니토 모드) Incognito Mode란? =프라이빗 브라우징 사용자들이 원치 않는 쿠키가 저장되는 일이나, 온라인 추적이 이뤄지는 것을 걱정치 않고 인터넷 서핑을 할 수 있도록 해주는 기술 크롬의 경우 '시크릿 브라우징(시크릿 모드)' 기능이 이것이다! 크롬 시크릿 모드 사용하기 오른쪽 상단에 더보기 > 새 시크릿 창 클릭 크롬 시크릿 모드에서 userRouter()에 접근하기 코드 import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); const [title, id] = router.query.params; return ( {title} )..
[js] '?.' : 옵셔널 체이닝(optional chaining) 옵셔널 체이닝 '?.' 스펙에 추가된 지 얼마 안된 문법. 따라서 구식 브라우저는 폴리필이 필요함. 옵셔널 체이닝이 필요한 이유 (with 예제) ex 1) 사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있는 경우를 생각하자. 이 때, user.address.street로 접근하면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ex 2) 브라우저에서 동작하는 코드를 개발할 때 문제가 발생하는 경우도 있다. 자바스크립트로 페이지에 존재하지 않는 요소(Element)에 접근하여 요소의 정보를 가져오려고 하는 경우다..
[작성중] [js] 정규표현식 알기 정규표현식 문자열에서 특정 문자를 찾기 위한 패턴 ReqExp의 exec(), test(), 그리고 String의 match(), matchAll(), replace(), replaceAll(), search(), split()과 함께 사용 가능 사용 방법 1. 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성 스크립트를 불러올 때 컴파일됨. 그래서 바뀔 일이 없는 패턴일 때 사용하면 성능이 향상됨 const re = /ab+c/ 2. RegExp 객체의 생성자 호출 런타임에 컴파일됨. 그래서 바뀔 수 있는 패턴이나, 사용자의 입력과 같이 외부 출처에서 가져오는 패턴일 때 사용함 const re = new RegExp('ab+c') 작성하기 단순 패턴 사용 문자열을 있는 그대로 탐색할 때 사용 ex. /a..
반응형

티스토리툴바