학습 (39) 썸네일형 리스트형 [React]리액트 간단 요약 1. 단축키 및 실행커맨드 vscode 터미널 ctrl + ` 1-1. create-react-app 리액트 프로젝트 생성 npm init react-app // 현재 폴더는 . 1-2. npm install classnames >> classNames() 메소드 사용할 수 있는 라이브러리 설치 1-3. npm run start 프로젝트 실행(개발모드 실행) 1-4. ctrl + c 개발 모드 종료 1-5. npm run build >> 빌드 생성 1-6. npx serve build >> 빌드 서버에서 실행 2. JSX(JavaScript XML) 리액트에서 html을 작성하게 해주는 자바스크립트 확장 문법 .render() 안의 html 코드는 하나의 태그로 감싸져있어야한다. * 태그로 감싸지 않으려.. [JS]promise Promise 객체 1. fetch 함수 pending 후 fulfilled 또는 rejected의 작업결과를 promise객체로 반환한다 2. .then (콜백1, (콜백2)) fulfilled 상태일 때 callback 함수를 실행 후 promise 객체를 반환한다. 두번째 파라미터는 reject 상태일 때 실행되는 callback 함수 .catch rejected 상태일 때 callback 함수를 실행 후 promise 객체를 반환한다. Promise 객체를 반환할 경우: 이 Promise 객체가 성공적으로 처리되면 (즉, fulfilled 상태가 되면) 다음 .then으로 체이닝됩니다. 이 Promise 객체가 거부되면 (즉, rejected 상태가 되면) 다음 .catch로 체이닝됩니다. 다른 .. [JS]모듈 1. 모듈이란? 하나의 파일이 아닌 기능별로 여러개의 파일로 분리해서 관리하는 것이 좋다. 분리한 파일이 모듈 코드를 효율적으로 관리 다른 프로그램에서 재사용 가능 ES2015에서 모듈화를 지원하는 표준 문법 지원 2. 모듈 파일의 조건 모듈 스코프 파일만의 독립적인 스코프 코드의 실행이 하나의 파일 안에서만 사용이 가능해야한다. 변수 등을 자바스크립트 파일이 공유할 위험이 있다. 모듈 스코프를 정해줘야한다. > 와일드카드 문자 export 한번에 하기 export { var1, fun1, fun2, ...}; export 할 때도 as 사용가능하다. 5. default export 파일에서 단 한번만 지정할 수 있다. const example; const example2; export default e.. [JS] 배열과 관련된 메소드 1. forEach 와 map 배열 메소드 인수로 콜백 함수를 받는다. const members = ['철수', '영희', '미선', '영수']; 1-1. forEach members.forEach(function (member) { console.log(`${member}님이 입장하셨습니다.`); }); * 두번째 파라미터로 index 접근, 세번째 파리미터로 반복 중인 배열 자체에 접근한다. ** 세번째 파라미터의 반복 중인 배열은 굳이 왜 필요한가 생각할 수도 있지만, 변수로 선언되지않은 배열에서 사용 가능하다. ex) [1,2,3].forEach( .......); // 자주 사용되지는 않다. 1-2. map const newArr = members.map(function (member) { /*.. [JS]자바스크립트의 문법과 표현 1. 문 최소 문법 단위 토큰으로 구성된 동작의 최소크기 2. 표현식 값으로 평가되는 식 3. Spread 구문 Es2015에서 새로 등장한 문법 배열을 다룰 때 유용하다. 배열의 요소들을 펼칠 때 사용 const arr = [1,2,3]; console.log(...arr); 출력결과 /// 1 2 3 Rest Parmeter 문법은 비슷하지만 작동이 다르다. 사용예) const webPublishing = ['HTML' 'CSS']; const interactiveWeb = [...webPublishing, (추가요소)]; .slice() 메소드를 사용하지 않고도 배열을 복사할 수 있다. 배열을 합쳐 새로운 배열을 만들 때도 좋다. 인수로도 사용할 수 있다. * 스프레드 구문 자체가 하나의 '값'이 .. [JS]함수 다루기 31. 함수 선언 function 함수이름(파라미터) { 동작; return 0; } 2. 함수 표현식 함수 선언을 '값'처럼 사용 ex) const myFunction = function () { } 콜백함수 또한 함수표현식이라고 할 수 있다. 3. 함수 선언과 함수 표현식의 차이 함수 선언은 호이스팅에 의해서 함수 선언 전에 함수를 사용해도 함수의 동작을 한다. 함수표현식은 변수에 대입했을 때, 변수는 호이스팅 되지만 함수부분은 호이스팅 되지 않는다. 함수 선언은 변수의 var 키워드처럼 함수 스코프를 가진다. >> 함수에서 선언된 함수를 제외하고는 전역적으로 사용가능하다. 4. 즉시 실행 함수 (function () { 동작 })(); 함수부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄.. [JS] 자바스크립트 작동 원리 간단요약 1. typeof 가 모든 자료형을 리턴하지 않는다. typeof null >>> object를 반환 typeof function >>> object가 아닌 function 반환 2. && 와 ||의 연산방식 && 왼쪽 값이 true일 때, 오른쪽 값을 반환 왼쪽 값이 false일 때, 왼쪽 값을 반환 || 왼쪽 값이 true일 때, 왼쪽 값을 반환 왼쪽 값이 false일 때, 오른쪽 값을 반환 and연산과 or 연산을 같이 할 때는 주의해야한다. &&연산이 || 연산보다 우선순위가 높다. a || b && c 의 연산에서 a와 b의 || 연산을 우선으로 하고 싶다면 (a || b) && c 로 괄호를 사용해야한다. 3. null 병합 연산자 ?? ES2020에서 새롭게 추가된 연산자 null 또는 un.. [JS]ECMAScript와 모던 자바스크립트 1. ECMAScript 자바스크립트 프로그래밍 언어의 표준 JS의 발전? ECMA international 이라는 국제 표준화 기구에서 관리함 JS 규칙 ECMA-262 라는 문서로 관리함 이 내용이 ECMAScript 2015년 ES6 >> 1년마다 버전 업을 하기로 함. ES6의 공식명칭 ES2015 그 이후로 년도 ES6에서 많은 변화를 가져왔다. 웹브라우저가 새로운버전을 바로바로 지원하지 못한다는 문제점이 있다. 2. 모던 자바스크립트란?? 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트 이전 1 2 3 4 5 다음