JavaScript & React
1.[JavaScript] sort()에 대해 알아보자.
sort() 메서드란? > * sort() * 메서드는 배열의 요소를 적절한 위치에 정렬한 후 배열을 반환한다. 정렬은 * stable sort * 가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다. 잠깐 ! stable sort가 뭐지?
2.[JavaScript] if문에서 중괄호를 꼭 써야 할까?
JavaScript의 if 조건문에서 중괄호를 쓰지 않으면 어떤일이 일어날까? > if문에서 조건식이 하나일 때는 중괄호를 사용하지 않아도 정상적으로 실행이 되지만, 두개 이상일 경우 코드의 실행결과를 알 수 없는 현상이 벌어진다. * 예시를 한번 보자. * 조건
3.JavaScript 시작 and 블로그 방향성
자바 스크립트 첫걸음 > 앞서 HTML과 CSS를 공부하면서 웹의 흐름과 구조, 디자인을 살짝 맛봤는데 이제 웹에서 구동되는 유일한 스크립트 언어인 JavaScript를 경험할 차례가 된 것 같아서 시작해보려고 한다. 어떻게 공부할건데? > 일단 인터넷강의를 찾아보
4.[JavaScript] var와 let의 차이 (호이스팅)
JavaScript에서 var와 let의 주요 차이점 중 하나는 변수의 * 스코프(scope, 범위)*이다. var을 사용한 예시 var로 선언한 변수 x는 함수 스코프를 가지며 블록 스코프를 무시한다. 따라서 if 블록 내에서 변수 x를 선언하고 외부에서도 접근할
5.[JavaScript] map, reduce, filter를 알아보자.
JavaScript에서 map , reduce, filter 메서드는 배열을 다룰 때 코드를 간결하고 사용자가 쓰기 편하게 해주는 아주 편리하고 강력한 메서드이다. 그렇기에 알아보고자 한다. map 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 함수의
6.[React] 리액트는 왜 쓸까?
출처 : https://www.ranktracker.com/ko/blog/is-react-seo-friendly-react-search-engine-optimization-tips/자바스크립트를 공부하고 모두가 리액트를 공부하라고 하기에 그냥 공부하는 것 보다
7.[React] JSX, 컴포넌트 (클래스,함수)
JSX란? > JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. 그렇기에 더 엄격하다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일
8.[React] setState, useState, Fragments
State란? > * React에서 State(상태)는 페이지에 동적인 부분을 담당한다. 컴포넌트가 특정 정보를 '기억'하여 표시하기를 원하는 경우에 쓴다. 컴포넌트의 상태를 관리하고 업데이트하는 데 사용되는 setState와 useState가 있다. setState
9.[React] ref , class, for
ref란? > * 리액트에서 ref란 특정 DOM을 선택해야 할 때 직접 접근할 수 있게 해주기 위해 사용한다. 클래스 컴포넌트에서는 React.createRef 함수를 사용한다. 함수 컴포넌트에서는 useRef 함수를 사용한다. 클래스 컴포넌트 예시 this.my
10.[JavaScript] WebPack 과 BaBel
WebPack이란? > * WebPack은 오픈 소스 JavaScript 모듈 번들러이다. React개발시 WebPack을 쓰게 되는데 여러개의 자바스크립트파일들을 한방에 합쳐서 하나의 자바스크립트파일로 만들어주는 역할을 한다. Create react app(CRA)를
11.[React] require 와 import
require는 node의 모듈 시스템이다. (Common js문법(노드의모듈) 이라고 부른다.) module.exports = MyComponent; 이렇게 내보내면이렇게 불러올 수 있다.😊import는 ECMAScript 6 (ES6) 모듈 시스템의 일부로, 모듈
12.[React] 반복문 map 과 key
리액트에서는 반복문을 사용할 때 map 메소드를 사용한다. why? >map은 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성합니다. 이를 이용하여 배열의 각 요소를 화면에 표시할 수 있습니다.
13.[React] Props to components
Props란? > * props는 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달해주는 객체이다. props는 리액트에서 어떠한 데이터를 전달해줄 때 리액트에선 props를 사용한다. 예시 (부모 컴포넌트) 예시 (자식 컴포넌트) 위의 코드에서 P
14.[JavaScript] concat과 spread 연산자
* 리액트에선 배열의 요소를 추가할 때 push메소드를 쓰면 배열의 변화를 감지하지 못한다. 이를 위한 해결책으로 concat과 spread opreator가 있다. Concat() > * 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할