아싸지만 1일1글 하고싶어

목차 useEffect useEffect는 컴포넌트가 랜더링 될 때마다 지정 작업을 하게 하는 함수이다. useState가 해당 변수가 변화할 때마다, 컴포넌트가 랜더링 하게 만들었다면, useEffect는 랜더링 했을때의 행동을 지정할 수 있다. 좀 더 대단하게 말하자면 useState가 데이터 유형 state를 대체한다면, useEffect는 lifecycle를 대체할 수 있다. life Cycle 목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 sirong.tistory.com 구성 import React, { useState, u..

목차 드디어 훅을 포스팅하게 되었다. 훅이 좀 개수가 되니깐 한동안은 포스트 아이템 걱정을 안해두 되겠다 Hooks란 Hooks란 함수컴포넌트의 state(컴포넌트 안의 자료형)을 Lifecycle과 연동해주는 함수이다. 클래스형 컴포넌트에서는 작동하지 않는데, 그도 그럴게 클래스형에서는 state와 lifecycle 함수가 있어 그냥 직접 사용하면 된다. life Cycle 목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 sirong.tistory.com 또한 if / while 등 분기문에서 사용할 수 없다. useState useS..

목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 브라우저로 출력하는 랜더링 과정이 진행될때의 순서를 말한다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl React 공식 홈페이지의 링크를 타면 정리가 잘 된 사이트를 볼 수 있다. 우리가 자주 쓰는 생명주기는 과정 끝의 componentDidMount componentDidUpdate 이 두가지이다. ComponentDi..

목차 저번에 가상셀렉터에 대하여 포스팅했었는데 가상셀렉터 목차 가상셀렉터 우리가 css에서 콘텐츠 를 선택 하는 것을 모두 셀렉터 라 한다. *, body, .class, #id, .class::nth-of-type(2){ padding:0; } 여기서 가상이 붙은 것이 가상셀렉터 인데, 말 그대로 실제 하지.. sirong.tistory.com 가상셀렉터는 icon 생성하는데 많이 쓴다. 호버나 클릭 시 같은 건 Js 배우면 eventListener에서 좀 더 세세한 설정이 가능해서 그걸 많이 쓴다고 생각한다. eventlistener 목차 EventListener 사용자가 어떤 행동(event)을 했을 때, 반응하여(listener) 지정된 행동을 하는 것을 eventlistener라 한다. Even..

목차 후후... promise 다음에 바로 Async / await 써버리기!! 이렇게 연계되는 건 바로바로 써주는 게 독자에 대한 배려 아니겠슴까!! Async / await Async는 비동기 작업 그 자체인 문법이다. Async함수 안에 await를 쓰고 비동기 작업을 시작하면, 해당 await 비동기 요청까지만 코드가 진행된 뒤, 다른 작업을 진행한다. 비동기 작업이 끝난 뒤 다시 이어서 Async함수가 재개된다. 이거 모를 때는 플래그를 썼었는데... 플래그 변수 선언이 하나둘씩 늘어갈수록 보기 안 좋다. 초기화도 시켜줘야 하고ㅜ 무엇보다 if문으로 너저분해진다. function After2s() { return new Promise(resolve => { setTimeout(() => { re..

포스트할 아이템들이다 글쓰면서 아 내일 따로 포스팅해야지!! 했는데 까먹는경우가 많아서..ㅜ 혹시나 댓글로 주제를 남겨주신다면 우선 포스팅해보겠습니다! map 함수 애니메이션 훅스 크롬 기본브라우저 설정하기 포토샵 설정 초기화 fontawosme 가상셀렉터로 추가 node.js 모듈화 react-routing Mac 폴더에서 바로 Vscode 열기 햄버거태그에 대한 이슈 res.write를 썼을땐 res.end를 써야함 res.send는 안써두됌

목차 async / wait 함수에 대하여 자세하게 다룰 예정이었는데, 구글링 하다 보니 promise에 대하여 다루다가 본제로 넘어갈 것 같아서 그냥 promise를 먼저 다루기로 했다. Promise Promise란 비동기 작업의 결과를 나타내는 object이다. 비동기란 간단하게 말하면, 작업을 요청한 뒤 응답이 올 때까지 다음 코드를 진행하는 방식을 뜻한다. promise는 요청에 대한 응답으로써, 두 가지로 구성되어있다. 상태 상태에는 세 가지가 있다. Pending(대기) : 작업이 완료되지 않았을 때, 진행중일때 Fulfilled(이행) : 작업이 완료되어 응답을 했을 때 Rejected(실패) : 작업을 실패하였을 때 그림을 살펴보면 대기상태에서 작업이 처리(settled) 됐을 때, 성공..

목차 음.. 개인적으로 깔끔하게 쓰는걸 남들보다 더 좋아한다. 뭔가 절제된 느낌이 간단한 코드에서도 격을 나타내주는 느낌이랄까 좀 더 간편하게, 하지만 따라하기 힘든 그런느낌이 좋다. 모듈화 프로그램 볼륨이 커져서 여러가지 함수가 생길 시, 파일을 나눠주는게 좋다. 특히 CRUD(post, get, delete, put)에서 더 느껴지는게, CRUD 함수들이 전체적인 흐름을 가진게 아니라, 하나하나 필요할때 실행되는 구조라 함수가 어디있는지 찾을려면 흐름으로 찾는다기보다 그냥 하나하나 찾게된다. 게다가 코드도 함수하나하나에 작동결과에 따른(양호, 에러) 코드도 넣어줘야하기에 하나하나가 기본적인 코드 양이 많다. 원본 const express = require('express'); const cors = ..