전체 글 94

[React - Hook] useEffect을 사용해 시계만들기

useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook react에서의 Side effect란? → 서버에서 데이터를 불러오거나, 수동으로 Dom을 변경하는 등의 활동 → 즉 해석을 영향이라고 하면된다, - 사용법 useEffect(이펙트 함수()=>{ //작업.. return () =>{ //컴포넌트가 언마운트될 때, 또는 다음 렌더링시 불릴 useEffect가 실행되기 이전에 실행 } },[의존성 배열]); 의존성 배열? 말 그대로 effect가 의존하는 배열! 이 배열이 변경되면 effect 함수가 실행된다. Q1 .의존성배열을 생략하면 ? - 컴포넌트가 업데이트 될 때마다 호출 Q2. 이펙트 함수를..

FE/REACT 2022.06.09

[React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까?

Hook을 공부하며 useState를 사용중 State에 대해 좀 더 자세히 알고 싶어 졌다. react에서 말하는 State는 무엇인지 알아보자 ! State ? - 리액트 Component의 상태 ( 이때 말하는 상태는 리액트 Component의 데이터와 가까운 말이다.) 즉, 리액트 Component의 변경가능한 데이터를 State라고 한다. - state는 렌더링이나 데이터 흐름에 사용되는 값만 포함해야한다. ( 그렇지 않으면 불필요한 재렌더링이 발생하여 성능저하가 발생한다. ) - state는 JavaScript 객체이다. - state는 직접 수정하지 않는다 ! (setState 함수를 통해 사용해야한다.) - state가 변경되어 재렌더링 하는 과정에서 Virtual DOM이 생성된다. 이때..

FE/REACT 2022.06.09

[React - Hook] React에서 변하는 데이터 처리하는방법 ( Hook이 뭐고 useState는 뭐야? )

버튼을 누를때마다 숫자가 증가하게 보이고 싶은데 ... 어떻게 해야하지 ...? Hook을 알기위해 알아야 할 내용 컴포넌트에는 두가지 종류가 있다. 1. Class Compoent 2. Fuction Compoent Class Compoent는 ? - 생성자에서 State를 정의한다 - setState() 함수를 통해 state를 업데이트 한다. - 컴포넌트의 생명주기 함수가 명확히 정의되어 있어 가져다 사용하면 된다. Q. state가 무엇인지 궁금하다면? https://mandelina-code.tistory.com/79 [React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까? Hook을 공부하며 useState를 사용중 State에 대해 좀 더 자세히 알고 싶어 졌다. r..

FE/REACT 2022.06.09

[React] 리액트란 무엇일까? (React 특징들)

React.js란 ? - 자바스크립트 라이브러리이다. - facebook에서 주도하고 있는 오픈소스 프로젝트로, facebook과 instagram에 사용된다. React의 특징 1. MVC패턴중 V(View)를 구현하는 라이브러리이다. 참고 : 하지만 MVC패턴을 사용하여 대규모 애플리케이션을 사용하면 너무 빠르고 복잡해진다는 단점이 있다. 이를 해결하기 위해 Fulx 아키텍처를 적용하여 보안한다. (Fulx 부분은 나중에 다뤄보도록 . . .) 2. 가상돔(Virtual DOM)을 사용하여 웹 애플리케이션의 성능을 극대화 시킨다. Q. 어떻게 성능을 극대화 시킬까 ? 리액트는 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고, DOM ..

FE/REACT 2022.06.08

웹 접근성

웹접근성이란? 정보통신접근성 (Web 접근성)은 지능정보화 기본법에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적 의무 사항이다. 웹접근성 준수 고려사항 1. 시각 : 다양한 형태의 시각장애 2. 이동성 : 손을 쓰기 어렵거나 쓸수 없는 상태 3. 청각 : 음성콘텐츠에 인식이 불가능한 상태 4. 인지 : 문제 해결과 논리 능력, 집중력 , 기억력에 문제가 있는 정신 지체 및 발달 장애 , 학습 장애 (난독,난산증 등) [ 참고 사이트 ] http://www.wa.or.kr/m1/sub1.asp 웹접근성이란? > WA : 한국웹접근성인증평가원 웹접근성이란? > WA > 웹접근성이란? 정보통신접근성(Web접근..

FE필수개념 2022.06.07

[Node] Node.js란 ?

자바스크립트로 서버를 구현한다고 ?! Node.js ? - 확장성 있는 네트워크 애플리케이션 개발에 사용되는 sw플래폼 - JavaScript 런타임 환경 (Node.js가 나오기 전까진 JS를 실행하는 환경(런타임)은 브라우저 뿐이였다!) - Node.js는 브라우저 외부에서 구글 크롬의 핵심인 V8 자바스크립트 엔진을 구동한다. - 특히 서버 사이드 개발에 많이 사용된다. 서버 사이드 ? - 네트워크의 한 방식인 클라이언트-서버 구조의 서버 쪽에서 행해지는 처리 - 사용자 유효성, DB관련 등의 일을 수행한다. - 대표적인 언어로 Java , PHP , Rudy , Python , Node.js 등이 있다. V8 ? - 웹 브라우저를 만드는 데 기반을 제공하는 오픈소스 자바스크립트 엔진 - 구글 크롬..

BE/Node 2022.06.07

[HTTP] HTTP란 ? (특징,구조,메시지)

모든것은 HTTP 이다. ✔️ HTTP (Hyper Text Transfer Protocol) - 모든것을 전송할 수 있다 - 이미지, 음성 ,영상 ,파일 - JSON , XML - 서버간 데이터 주고 받을 때도 대부분 HTTP 사용 - HTTP/1.1 : 가장 많이 사용 ✔️ HTTP 특징 1 ) 클라이언트 서버 구조 2 ) 무상태 프로토콜 (Stateless) , 비연결성 3 ) HTTP 메시지를 이용하여 통신한다. 4 ) 단순하고 , 확장가능하다. HTTP 특징들 1 ) 클라이언트 서버 구조 - 클라이언트는 서버에 요청을 보내고 응답을 대기한다. - 서버가 요청에 대한 결과를 만들어 응답한다. - Request Response 구조 - 서버와 클라이언트는 서로 독립적 2 ) 무상태 프로토콜 (Sta..

BE/HTTP 2022.05.28

[JS] Fetch

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 인 fetch Fetch ? - 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API - HTTP 요청 전송 기능을 제공 - Ajax를 지원하는 비교적 최신 기술 - IE를 제외한 대부분 브라우저에서 제공 Fetch 함수의 기본 구조 const promise = fetch(resource, [options]) resource : HTTP 요청 보낼 URL (필수) options : method , headers , body (선택) default값은 GET Fetch 함수 동작 과정 - fetch 함수는 promise 객체 + 응답 헤더 + 응답몸체 반환 - promise 객체엔 HTTP 응답에 관한 정보가 있는 Response ..

FE/JavaScript 2022.05.25

[JS] async / await

콜백 지옥 탈출을 위해 Promise 가 나왔는데 async / await 는 뭐야?! Promise는 비동기 작업이 많아져도 콜백 함수처럼 코드의 깊이가 깊어지지 않는다. 하지만 다른 문제점이 있다. 1. 특정 조건에 따라 분기를 나누기 어렵다. 2. 어떤 부분에서 에러가 발생했는지 파악하기가 어렵다 3. 프로미스 체이닝도 반복되면 가독성이 떨어져 .then 지옥이 발생할 가능성이 있다. → 따라서 async/await가 등장하였다. async/await - 프로미스보다 가독성이 좋고 동기 프로그래밍을 작성하는 방식과 유사 - Promise 기반으로 동작 async선언 - async 키워드를 함수 앞에 붙여 사용한다. async function 함수이름() { return 결과 값; } - async가..

FE/JavaScript 2022.05.23

[JS] Promise (feat. 동기,비동기가 뭘까?)

Promise를 들어가기 앞서 , 우리가 알아야할 것은 비동기 이해이다. 비동기 - 비동기 실행이란 순차적으로 수행이 완료되면 다음수행이 실행되는 것이 아니라 동작이 완료되지 않아도 다음코드가 실행되는 것을 의미 한다. - 자바스크립트 엔진은 한 번에 하나의 태스크만 실행 할 수 있는 싱글 스레드 방식으로 동작한다. - 싱글 스레드를 가지면서도 비동기로 동작할 수 있는 원리는 브라우저에 있는 Web API가 멀티 스레드로 동작하기 때문이다. 1. JS엔진의 콜 스택에 실행될 함수가 쌓인다. 2. 비동기로 실행될 경우 Web API를 호출한다. 3. Web API에선 콜 스택이 비면 콜백 큐 함수를 꺼내 콜 스택에 넣는다. 4. 이벤트루프와 콜백 큐 때문에 콜 스택이 하나여도 비동기 동작이 가능하다. 비동..

FE/JavaScript 2022.05.23