JS

00. 리액트 컴포넌트 스타일링 방법- 컴포넌트를 스타일링 할 때 자주 사용되는 기술1) Sass2) CSS Module3) styled-components 01. Sass- CSS pre-processor- 복잡한 작업을 쉽게 할 수 있도록 해주고, 코드의 재활용성 및 가독성을 높여줌- 두 가지 확장자 (.scss/.sass) 를 지원01-1 시작하기1) 새로운 리액트 프로젝트 만들기$ npx create-react-app styling-with-sass 2) 해당 프로젝트 디렉터리에 node-sass(Sass를 CSS로 변환해주는 역할) 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass 01-2 Button 컴포넌트 만들기1) src 디렉터리에 componen..

01. 리액트 훅이란?- 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리- 클래스형 컴포넌트의 단점(컴포넌트의 재사용 어려움, 컴파일 단계에서의 코드 최적화 어려움 등)을 보안 02. 리액트 훅 규칙02-1  최상위에서만 Hook 호출 가능- 리액트 훅은 순서에 의존하므로 조건문, 반복문 안에서 실행하게 될 경우, 해당 부분의 순서가 꼬일 가능성이 있음02-2 리액트 함수 내에서만 호출 가능- 일반적인 js 함수에서는 호출 불가- 함수형 컴포넌트, custom hook 에서 호출 가능02-3 같은 훅 여러번 호출 가능const Form = () => { // useState 여러번 호출 가능 const [name, se..

10. useRef로 특정 DOM 선택하기- ref : DOM을 선택해야 하는 상황에서 사용- useRef : 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리액트 훅- 리액트 훅 : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리▷리액트 훅 설명자료 : https://taei1.tistory.com/30 리액트 훅(React Hook)01. 리액트 훅이란?- 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리- 클래스형 컴포넌트taei1.tistory.com ▼초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사용..

01. 리액트가 만들어진 배경- 처리해야 할 이벤트, 상태값, DOM이 다양해질때 코드가 복잡해지는 것을 해결하기 위함- 어떠한 상태가 바뀔 때, 업데이트를 작업하는것이 아닌 모든걸 새로 만든다는 발상에서 출발- Virtual DOM을 통해 실현 (업데이트에 대한 고민해결 + 빠른 성능) 01-1 Virtual DOM- 브라우저에 실제로 보여지지 않는 가상의 DOM- 업데이트가 필요한 곳의 UI를 Virtual DOM 을 통해서 렌더링- 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치 02. 작업환경 준비- Node.js : 자바스크립트 런타임 (Webpack, Babel 등의 도구들을 사용하기위해 설치)- Yarn : 개선된 버전의 npm ..

01. async & await 란?- 자바스크립트의 비동기처리 패턴- 기존의 비동기 처리 방식인 콜백함수와 프로미스의 단점 보완 02. async & await 기본 문법1. 함수 앞에 async 예약어 붙임2. 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙임async function 함수명() { await 비동기_처리_메서드_명();} 03. async & await 예제 코드function fetchItems() { return new Promise(function(resolve, reject) { var items = [1,2,3]; resolve(items) });}async function logItems() { var resultItems..

01. 프로미스(Promise)란?- 자바스크립트 비동기 처리에 사용되는 객체 02. 프로미스(Promise) 필요 이유- 비동기 연산이 종료된 이후 결과 값과 실패 사유를 처리하기 위한 처리기 연결 가능- 비동기 메서드에서 마치 동기 메서드처럼 값 반환 가능 03. 프로미스(Promise) 상태1. 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태2. 이행(fulfilled) : 연산이 성공적으로 완료됨3. 거부(rejected) : 연산이 실패함※ 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대기열에 추가된 처리기들이 호출됨 04. 프로미스(Promise)코드 예제new Promise((resolveOuter) => { resolveOuter( new Promise((..

01. 비동기처리- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 특성 01-1 ajax- 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할때 사용- $.get() : ajax 통신을 하는 부분function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData;}console.log(getData()); // undefined↑위 코드는 $.get으로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 retrun tableData;를 실행했으므로 undefined가 출력됨 0..

08. 모듈화 구문08- 1 Import & Export - 자바스크립트의 코드를 모듈화 할 수 있는 기능- 모듈화 : 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미 1. Export & Import 기본 문법//math.jslet pi = 3.14;export {pi};//index.jsimport {pi} from "./math"; //math라는 파일에서 pi라는 변수를 꺼냄console.log(pi);  2. 여러개 꺼내기- 파일 안에서 선택적으로(개수에 상관없이) 꺼내 쓸 수 있음//math.jslet pi = 3.14;fuction sum(a,b) { return a + b;}export {pi, sum};//index.jsimport {pi, sum} fr..

01. 템플릿 리터럴 (Template Literal)- 자바스크립트에서 문자열을 입력하는 방식- 백틱(`)이라는 기호를 사용하여 정의let a = 'hi';let message = a + ' 윙크';//백틱을 이용하여 표현let message = `${a} 윙크`;  02. 구조 분해 문법 (Destructuring)- 구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당- 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용//배열let arr = ['apple', 10];let myFruit = arr[0];let myNumber = arr[1];//디스트럭처링을 사용하여 코드 간단화let [myFruit, myNumber] = arr;//객체let josh =..

00. 자바스크립트란- 웹 페이지를 동작시키기 위해 필요한 프로그래밍 언어(html, css, JavaScript)- 클릭 등과 같이 사용자의 인터랙션에 의해 반응하게 만들어주는 것 (-화면을 동작시키기 위한 언어)- 모든 웹페이지에서 자바스크립트가 지배적으로 사용되고 있음- 웹개발 뿐만 아니라 서버, 게임, 머신러닝 등등 다양하게 사용됨 ※모든 브라우저에는 자바스크립트를 실행할 수 있는 환경이 마련되어 있으므로 별도의 툴을 설치하지 않고도 콘솔 메뉴에서 자바스크립트 코드 실행 가능 01. 변수- 숫자, 문자열 등 어떤 값을 저장하기 위해 사용 01-1 변수의 종류1. var- 초창기 자바스크립트 문법 var message = 'hi';  2. const - 값을 정의한 이후에 변경 불가 (상수)cons..