전체 글 썸네일형 리스트형 javascript callback function 자바스크립트 콜백함수에 대해 알아보겠습니다 콜백함수란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수입니다 forEach를 이용한 콜백함수 // 예제 let ary = ["사과", "배", "딸기", "오렌지"]; ary.forEach(function(item) { console.log(item); }); // 결과 "사과" "배" "딸기" "오렌지" Arrow function // 예제 let ary = ["사과", "배", "딸기", "오렌지"]; ary.forEach((item) => { console.log(item); }); 콜백함수 사용 원칙 익명의 함수 사용 콜백함수는 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 되는 익명의 함수를 사용합니다 더보기 교차 출처 리소스 공유(CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 출처란? 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의 됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다. 일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다. CORS 정책은 우리가 가져오는 리소.. 더보기 자바스크립트 replace() replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. replace() // 1 const str = "hello superman"; console.log(str.replace("superman","batman")); // "hello batman" // 2 const str = "hello superman"; const a = "superman"; const b = "batman"; console.log(str.replace(a, b)); // "hello batman" array replace() // 1 const str = [.. 더보기 Javascript 호이스팅에 대해 알고 계신가요? 호이스팅은 코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.) *실행 컨텍스트는 실행 가능한 코드가 실행되기.. 더보기 기존의 React에서 Typescript 적용하기 package.json 라이브러리 추가 yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev Typescript 설정 (tsconfig.json) tsc --init 스크립트 수정 .js 파일을 .tsx파일로 수정한다 App.js => App.tsx 더보기 자바스크립트 ES6 문법을 통한 입력값 주기 Feat. React 최근 프로젝트를 하며 알게 된 내용 중 하나를 공유하고자 합니다 React에서 input 태그의 입력값을 구해와야 할 때 일일이 한 개의 input 태그의 입력값을 구해왔던 분들이 있을 겁니다 물론 저도 지금까지 그래 왔습니다 예를 들어 클릭 이벤트를 발생시킬 때 함수를 한 개씩 만들었던 것처럼 말이죠 한 개의 함수로도 쉽게 여러 개의 input값을 가져올 수 있습니다 예시와 함께 바로 보도록 하겠습니다 const onPostChange = (event) => { const { target: { value, name }, } = event; } onPostChange라는 함수 안에 파라미터로 event를 받고 있습니다 함수안 객체를 선언후 프로퍼티로 target이라는 이름의 키값과 객체 value, na.. 더보기 Typescript 기본타입(문법) Javascript의 다소 특이한 런타임 의미 체계와 더불어 언어와 프로그램 복잡성 간의 불일치는 Javascript 개발을 규모에 맞게 관리하기 어려운 작업으로 만들었습니다 프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다 Typescript의 목표는 Javascript 프로그램의 정적 타입 검사자입니다 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)입니다 Typescript의 기본 문법을 알아보겠습니다 가장 기본적인 데이터 타입은 Javascript, Typescript에서 boolean 값이라고 일컫는 참/거짓(true/false) 값입니다 이러한 타입들을 쭉 살펴보자면 불리언(boolean) 숫자(number) 문자열(string) 배열 숫자.. 더보기 Javascript function(함수) 사용 해보기 아무것도 모르고 블로그에 적었던 옛날 자바스크립트 관련 글을 새로 작성하려고 합니다 그중 첫 번째는 함수입니다 누군가에게 설명하고 이해시키는 것은 굉장히 어렵습니다 제가 이 글 이후부터는 존대를 사용하는 것 또한 나만 보려고 쓰는 글이 더 이상 아니기 때문입니다 함수는 자바스크립트의 개념 중에서도 핵심개념입니다 수학에서의 함수와 매우 흡사하고 입력받아 출력을 내보내는 방법 또한 일치합니다 프로그래밍에서의 함수도 같은 개념 입니다 자바스크립트 함수 함수를 사용하는 이유는 재사용성이 좋습니다 위와 같이 한번 함수를 만들어 놓으면 함수를 여러 번 호출하여 원하는 값을 각각 할당해 줄 수 있습니다 함수의 재사용 함수는 return(반환 값)을 받지 않고도 사용할 수 있습니다 또한 매개변수가 없더라도 함수 안에서.. 더보기 이전 1 2 3 4 5 ··· 13 다음
