본문 바로가기

분류 전체보기182

[한 입 리액트] PAGE ROUTING PAGE ROUTING ROUTER 데이터의 경로를 실시간으로 지정해주는 역할을 함 ROUTING이란? 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말, 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 PAGE ROUTING이란? 요청(에 명시되어 있는 경로 ex. /home)에 따라서 어떤 페이지를 응답(ex. Home.html)해줄지(돌려줄지) 결정하는 과정 여러 페이지를 준비하고 있다가 요청된 경로에 따라 적절한 페이지를 보내주는 방식을 MPA(Multi Page Application) 반면, 리액트는 SPA(Single Page Application) 방식을 따르고 있다. 이 때의 Web Server는 Node.js, 전달받는 페이지는 index.html !.. 2022. 8. 19.
[한 입 리액트] 배열 사용하기 - 데이터 추가, 삭제, 수정하기 state인 data를 DiaryList 컴포넌트에서 사용하고자 data를 prop으로 받아와 사용하는 것을 볼 수 있다. 새로운 일기 추가할 함수 onCreate를 DiaryEditor 컴포넌트에서 사용하고자 onCreate 함수를 prop으로 받아오는 것을 볼 수 있다. 2022. 8. 19.
JSX 문법 작성시에도 VSCode에서 EMMET 기능 사용하고 싶을 때 저 파란색 박스 부분의 아이콘을 누르면 바로 settings.json으로 이동이 가능하다. 리액트에서 JSX 문법 작성시에도 EMMET 기능 사용하고 싶다면, settings.json 파일에서 다음과 같이 추가해 작성하면 된다 ! 2022. 8. 19.
[알고리즘] 강의복습 - 배열 2022. 8. 18.
[알고리즘] 강의 복습 - 해싱 숫자를 count 할 때는 해싱을 사용할 필요없이 배열을 사용하면 된다. 하지만, 문자나 문자열을 count 해야할 때는 문자열을 key로 하고 int를 value로 할 수 있는 해시라는 기능을 사용한다 ! 해시를 지원해주는 자바스크립트의 자료구조는 map이다 ! nums의 원소가 1000을 넘지 않는 자연수이라고 할 때, 배열의 크기는 숫자 0부터 카운트를 할테니 1001이어야 한다. >> Array(1001) 이라고 작성 2022. 8. 18.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 뭘 설치하거나 명령할 때 계속 저 메세지가 떠서 왜 그런가 했는데, 정말 저 말 그대로 하면 되었다. npm.cmd와 npm 파일로 가서 저렇게 바꿔주니 더 이상 저 메시지가 터미널에서 뜨지 않았다. https://stackoverflow.com/questions/72401421/message-npm-warn-config-global-global-local-are-deprecated-use-loc Message "npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead" I already installed Node.js on my machine, but when I try to run npm in.. 2022. 8. 17.
[리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 모든 리액트 컴포넌트는 라이프사이클(생명주기)이 존재하고, 이 수명은 페이지에 렌더링되기 전의 준비 과정에 시작해 페이지에서 사라질 때 끝난다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드는 총 9 가지이다. Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되는 메서드, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 총 3 가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. 마운트 DOM이 생성되고 페이지에 컴포넌트가 나타나는 것을 말한다. 컴포넌트 만들기 → constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생.. 2022. 8. 16.
[리액트를 다루는 기술] 컴포넌트 반복 데이터 배열을 컴포넌트 배열로 변환하기 const numbers = [ 1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); // [1, 4, 9, 16, 25] import React from 'react'; const IterationSample = ( ) => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map(name => {name}); return {nameList}; }; export default IterationSample; map으로 생성된 배열 값을 사용하여 JSX 코드로 된 배열을 새로 생성한 뒤 nameLIst에 담았.. 2022. 8. 15.
[리액트를 다루는 기술] ref: DOM에 이름 달기 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref의 개념이다. 리액트 컴포넌트 안에서 id를 사용할 수 있기는 하지만, 같은 컴포넌트를 여러 번 사용할 경우, 중복 id를 가진 DOM이 여러 개 생기는 상황이 되기 때문에 권장하지 않는다. 하지만, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 경우에는 컴포넌트를 만들 때마다 id 뒷 부분에 추가 텍스트를 붙여서 (ex. button01, button02, ...) 중복 id가 발생하는 것을 방지해야 한다. ref는 DOM을 꼭 직접적으로 건드려야 할 때 사용한다 !.. 2022. 8. 14.

티스토리툴바