전체 글 (47) 썸네일형 리스트형 [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 코드는 하나의 태그로 감싸져있어야한다. * 태그로 감싸지 않으려.. 코드의 결과? // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 위 코드의 실행 결과는 3이 출력되게 된다. 1번 코드에서 num의 선언과 값을 1로 초기화 하였으며 순서대로 2,3,4 코드가 실행이 되는데 2번 코드에서 setTimeout의 실행이 0초 뒤에 실행이 되지만 비동기 실행이기에 콜백함수가 실행 되기 이전에 함수 외부에 코드가 우선적으로 실행된다. 이후 3번 코드에서 num에 3을 대입하게 되고 4번 코드가 실행되서 3이 출력되며 마지막으로 다시 2번 코드의 콜백함수가 실행되어 num에 2가 대입되게 된다. HTTP 메소드 HTTP(HyperText Transfer Protocol)는 클라이언트와 서버 간에 데이터를 주고받는 데 사용되는 프로토콜이다. HTTP 메소드는 클라이언트가 서버에 요청을 보낼 때 수행하고자 하는 동작을 지정한다. 가장 널리 사용되는 HTTP 메소드에는 다음과 같은 것들이 있다 GET: 서버로부터 정보를 요청. 주로 데이터를 요청하고 가져올 때 사용. 예를 들어, 브라우저에서 웹 페이지를 요청할 때 GET 메소드를 사용. POST: 서버에 새로운 데이터를 제출. 주로 데이터를 생성하거나 서버에 정보를 전송할 때 사용. 예를 들어, 로그인 정보를 전송하거나 새로운 블로그 글을 작성할 때 POST 메소드를 사용할 수 있다. PUT: 서버에 데이터를 저장하거나 업데이트. 보통 특정 리소스를 생성하거나 업데.. [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 () { 동작 })(); 함수부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄.. 이전 1 2 3 4 ··· 6 다음