본문 바로가기

분류 전체보기346

React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 useRef를 사용한다. 특정 DOM을 선택? 구체적으로 무슨말이죠? 말 그대로 특정 태그만 지정해서 그것만 사용할 때 useRef 를 쓴다는 말이다. (only for you💛) 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등이 있다. 또한 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다. .. 2021. 3. 10.
React - npm start 에러 4058 ENOENT: no such file or directory 문제상황 create-react-app 을 하여 리액트를 설치하고 npm start로 실행시키려 할 때 에러가 떴다. 예전에 똑같은 에러가 났을 때는 install 명령어 오타로 인한 문제였는데 이번에도 같은 에러이다. 왜 나에게 이런일이? 하나하나 따져보았다. - 오타가 났는가? 아니다. - package.json 를 열어 확인? 파일은 잘 있다. 문제가 없다. - 해당 경로에 package.json이 있는가? 하위폴더에 들어있군.. 그렇다면 npm 설치과정을 한번 더 살펴보자. 다른 분의 블로그에서 참고한 react-app 설치과정이다. - 2번의 과정을 생략 해버렸다. 미리 경로를 변경한 뒤 설치하면 괜찮은 줄 알았기 때문이다. 문제해결 cd my-app을 해주고 실행명령어를 입력해주니 실행성공! .. 2021. 3. 10.
React(26) 리액트 훅 Context API 란 Updated 2021/05/07 Context API를 사용하는 이유 React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다. 보통 상위에서 → 하위컴포넌트로 props를 통해 속성값을 전달하는데 상위 → 하위 → 하위 → .... → 하위 처럼 많은 수의 컴포넌트를 거쳐 전달하게 되면 코드를 계속 하위로 toss 해줘야 한다. 이 방식은 Level이 깊어질수록 불편함을 야기한다. 이때 Context API를 이용하면 상위 컴포넌트에서 직접 하위 컴포넌트로 데이터를 전달할 수 있다. 중간에 있는 컴포넌트는 콘텍스트 데이터의 존재를 몰라도 되므로 속성값을 반복해서 내려주던 문제가 사라진다. 1. 선언하기 createContext 함수를 호출하면 콘텍스트 객체가 생성된다. 괄호 .. 2021. 3. 8.
React(25) 리액트 훅 useEffect란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. useEffect 함수형 컴포넌트 안에서 useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?) useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다. 그래서 클래스형 컴포넌트의.. 2021. 3. 5.
JavaScript - 동기(Sync)와 비동기(Async) Updated 2021/05/14 자바스크립트는 싱글 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일만 처리할 수 있다. 그러므로 자바스크립트는 동기 방식으로 진행이 된다. 하나의 호출 스택만 있어 함수를 순서대로 줄세우고 하나씩 처리한다. - 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식 - 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식 자바스크립트에서 비동기가 필요한 이유 웹 페이지를 로딩할때, 우선 웹 페이지의 기본 레이아웃을 보여주고 보여줄 수 있는 것만 우선 보여주는 것이 더 바람직할 것이다. 사용자가 지루하지 않도록 먼저 떡밥을 던저주는 것이다. 자바스크립트에서 비동기방식을 사용하는 방법 비동기적 callback 함수 사용 ES6 Promis.. 2021. 3. 5.
React(24) 리액트 훅 useState란 Updated 2023/02/23 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? 사용자가 웹에서 뭔가 클릭도하고 입력도 하고 이것저것 하면서 일어나는 모든 동작이 상태라고 뭉뚱그려 이해를 하였다. 웹이랑 사용자랑 데이터로 핑퐁하는 와중에 당연히 값을 데이터에 넣어서 보내겠지. 그게 상태값인 것 같다. useState - useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다. - 하나의 useState 함수는 하나의 상태 값만 관.. 2021. 3. 3.
http와 https의 차이 URL과 HTTP URL은 웹사이트 주소와 동일하게 생각할 수 있지만 다르다. URL은 웹사이트주소를 포함하는 더 큰 개념이다. 그래서 URL에 접속할때는 맞는 프로토콜을 사용해야 한다. HTTP는 웹브라우저를 사용해 접속한다. HTTP(HyperText Transfer Protocol) 인터넷에서 웹서버 - 웹 브라우저 사이 텍스트 문서를 전송하기 위한 통신규약이다. 즉, 하이퍼텍스트(HyperText)를 전송(Transfer)하기위한 통신규약(Protocol)이다. → 바로 이때 !! 모든 데이터를 텍스트로 주고 받아 보안상 원치않는 데이터 유출이 발생할 수 있다. 더보기 HTTP 서버는 기본 80번 포트에서 서비스 대기 중이며 ↓ 클라이언트(웹브라우저)가 TCP 80 포트를 사용해 연결하면 ↓ 서버.. 2021. 3. 2.
React(23) 리액트 훅이란? side effect를 알아야 react hook개념이 이해가 되고 그 hook 안에 useState와 useEffect가 속해있는 것이다. 01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 sid.. 2021. 2. 25.
JavaScript - var / const / let 세 변수의 차이점 자바스크립트의 변수선언 방식에는 var, let, const가 있다. 이 차이를 알아보자 var 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 같은 변수를 여러번 선언하면, 에러가 나야 하는데 어디서든 사용가능하다. 그래서 코드가 길어지면 처음에 사용한 변수명을 잊어버리고 실수로 같은 것을 쓰기라도 하면 꼬이게 된다. var name = 'JS'; // 처음에 선언하고 name = 'React'; // 재할당(그위에 다른 값 덮어씌우기) 가능하다. var name = 'Java' // 모든게 다~~가능 그래서 ... !! ES6 이후, 이를 보완하기 위해 추가 된 변수타입이 let 과 const 이다. (immutable 여부의 차이, 즉 변경가능하냐 아니냐) let 은 변수에 재할당이 가능하다. l.. 2021. 2. 24.
반응형

티스토리툴바