본문 바로가기

전체 글

 (88)
[JS ES6+] spread 연산자 spread 연산자라고하는 ES6 문법이다. array나 object 자료형에 사용할 수 있으며 의미는 중괄호나 대괄호를 벗겨주세요~ 라는 뜻이다. 다시말해 …[1,2,3] 이런식으로 쓰면 그 자리에 1,2,3 이 남는다. 괄호 벗기기용 연산자이다. 그런데 이걸 이용하는 두번째 용도도 있는데 array나 object 자료형을 shallow/deep copy할 때 많이 사용한다. React state를 수정할 때 많이 쓰인다. deep copy를 해야지만 원본 상태에 영향을 전혀 미치지않기 때문이다. let data1 = [1,2,3]; let data2 = ...data1; // 1,2,3 let data3 = [...data1]; // [1,2,3] data1에 있던 자료들을 괄호 벗긴 다음에 다시 a..
[React] state의 값을 변경하고 렌더링 시켜보자. import React, { useState } from 'react'; // useState를 사용하기 위해 import import './App.css' function App(){ let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정 return ( 개발 blog { 글제목[0] } // 위 글제목에서 [0] 인덱스가 출력 2월 17일 발행 { 글제목[1] } 위 글제목에서 [1] 인덱스가 출력 2월 17일 발행 ) } state 값을 변경하고 렌더링 시키는 방법 위 코드에서 '남자 코트 추천'을 여자 코트 추천으로 변경하고 싶다. function 제목바꾸기() { let newArray = 글제목;..
[React] state 사용법 및 사용하는 이유 import React, { useState } from 'react'; // useState를 사용하기 위해 import import './App.css' function App(){ let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정 return ( 개발 blog { 글제목[0] } // 위 글제목에서 [0] 인덱스가 출력 2월 17일 발행 { 글제목[1] } 위 글제목에서 [1] 인덱스가 출력 2월 17일 발행 ) } 먼저 위 코드를 입력하고 구동시키면 useState로 데이터 바인딩을 한 결과를 볼 수 있다. state에는 Array, Object 어떤 타입이든 대입할 수 있다. 변수 말고 sta..
[JS ES6+] destructuring(구조 분해 할당) array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을때 사용하는 문법이다. [‘Kim’, 20] 이라는 array Kim이랑 20이라는 값을 각각 변수에 저장하고 싶으면 어떻게 하는가? let array = ['Kim', 20]; let name = array[0]; // 'Kim' let age = array[1]; // 20 이런 반복적인 할당 방법이다. 물론 문제는 없다. 이런 반복적인 작업을 개선시켜준 문법이 구조 분해 할당이다. let [name, age] = ['Kim', 20] console.log(name); // 'Kim' console.log(age); // '20' 각각 name = ‘Kim’, age = 20 이라는 변수가 생성된다. 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으..
[React] JSX 문법과 데이터 바인딩 본격적으로 리액트를 이용해 HTML 페이지를 개발해보자. 그러기 위해선 리액트에서 HTML 대신 이용하는 JSX 라는 문법을 사용하여야한다. 생긴건 HTML과 유사한데, 유의점이 몇개 있다. React를 프로젝트 셋팅이 완료되었으면 App.js로 들어가보자. App.js가 메인페이지 역할을 하는 파일이다. App.js를 잘 보면 div가 여러개 등장하는 HTML 부분이 있다. 필요없는 HTML 내용들은 다 지우고 div 하나만 남기고 시작해보자. import logo from './logo.svg'; import './App.css'; function App() { return ( // 코딩할 공간 ); } export default App; 코딩을 하기전에 먼저 Visual Code를 세팅해주어야 한다..
[React] React 간단하게 프로젝트 설치 방법 1. Node.js 설치 및 에디터 설치 (nodejs.org/ko/), (code.visualstudio.com/) 2. 프로젝트를 작업할 폴더 생성 3. Visual Code 실행 후 터미널에 아래에 입력 npx create-react-app 설치할 디렉토리명 4. 설치한 프로젝트를 확인하려면 아래 명령을 터미널에 입력 npm start
[JS ES6+] 화살표 함수 (=>) 사용법 화살표 함수 바로 코드부터 보자. let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다. 아래 함수의 축약 버전이라고 할 수 있다. let func = function(arg1, arg2, ...argN) { return expression; }; 좀더 예를 들어보면 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3..
[CSS] BEM이 뭘까 BEM BEM은 CSS 방법론이다. 말이 어렵지만 풀어 말하면 'CSS 클래스네임을 어떻게 지으면 좋을지' 개발자들이 머릴 맞대고 고민한 결과이다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용 X 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용하기 위해!) 색상이나 크기 등을 묘사하는 이름 X 구조적으로 의미 있는 이름으로 짓기 ex) .btn{} Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 "block-name__element-name"로 나타낸다. 독립적으로 존재x 블록 내부에서 ..

티스토리툴바