이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다 작업에는 동시에 실행될 수 있는 작업과 동시에 실행될수 없는 작업이 있는데 기본적으로 자바스크립트 코드는 동시에 실행될 수 없다 하지만 파일 시스템 접근이나 네트워크를 통한 입출력 작업은 동시에 처리될 수 있다 블로킹이란 이전 작업이 끝나야만 다음 작업을 수행하는 것을 의미하고 논블로킹은 이전 작업이 완료될 때 까지 기다리지 않고 다음 작업을 수행함을 뜻한다 논브로킹 방식이 더 짧은 시간안에 같은 작업을 처리할 수 있다(모든 작업이 동시에 처리될 수 있는 작업이라는 전제) setTime(콜백, 0)은 코드를 논블로킹으로 만들기 위해 사용하는 기법 중 하나이다 아무리 논블로킹 방식으로 코드를 작성하더라도 코드가 전부 내가 작성한 것이..

function run() { console.log("3초후 실행"); } console.log("시작"); setTimeout(run, 3000); console.log("끝"); 시작 끝 3초 후 실행 동작 과정 setTime의 시간이 정확하지 않을 수 있는데 이벤트 루프는 스택이 비어있을 때 만 큐에 있는 run함수를 스택에 가져오는데 스택에 함수가 너무 많다면 3초가 지난 후에도 run 함수가 실행되지 않기 때문이다

1. GraphQl Code Generator 사이트에 접속해준다. https://the-guild.dev/graphql/codegen Home – GraphQL Code Generator GraphQL Code Generator Documentation the-guild.dev 2. installation 페이지에 들어간다 https://the-guild.dev/graphql/codegen/docs/getting-started/installation Installation – GraphQL Code Generator GraphQL Code Generator is a tool for generating code from GraphQL schema and operations. It can generate ..

타입스크립트의 유틸리티 타입에는1. Pick 타입2. Omit 타입3. Partial 타입4. Required 타입5. Record 타입 이렇게 있다. 그 중에서 Record 타입에 대해 정리해 보려고 한다.Record 타입을 설명 하기 전에 Union 타입에 대해 먼저 알아야 한다. type fruit = "사과" | "배" | "딸기"이렇게 fruit이라는 타입을 만들어 놓고 변수를 만들어 타입을 fruit으로 지정하게 되면 3가지 밖에 쓰지 못한다.vsCode에서 확인하면 이렇게 사용할 수 있는 값을 미리 보여준다. Record타입은 이렇게 union 타입으로 만들어 놓은 것을 키 값과 Value로 사용할 수 있다. interface Ifruit { price: number; } type ..

html의 영역에 있는 은 반드시 넣어야 하는 태그이다. 란 html 파일의 인코딩을 알려주는 태그이다. 입력하지 않을 경우 글자가 깨져서 보일 수 있다.

지난번에 만든 등록페이지와 수정페이지 https://sy-blog.tistory.com/103 [React] 컴포넌트(Component) 재사용 BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 sy-blog.tistory.com 여기서 수정하기는 구현했지만 조금의 문제가 있었다..!! 수정페이지로 이동했을 때 하나의 input 만 채우고 수정해버리면 나머지 내용이 사라진다는 것.... 이유는 state! 코드를 살펴보면 const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); ..

vscode를 이용하다보면 파란색 밑줄이 쳐지면서 Unknown word라고 뜰 때가 있다 에러는 아니라 문제가 생기진 않지만 코드를 보는데 매우매우 불편...😣 자세히 보면 cSpell에 다루는 것 같은데 cSpell 은 Node를 설치할 때 같이 설치된 파일이다 파일을 삭제할 수도 있지만 간단하게 최상위 폴더에서 파일을 하나 만들어준다. 이름은 .cspell.json 파일을 만들었다면 아래와같이 적어주면 된다.

BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 2개를 만들 필요없이 컴포넌트를 재사용해서 만들 수 있다. export default function BoardWriteUI(props) { return ( {props.isEdit ? "수정" : "등록"}페이지 작성자: 제목: 내용: {props.isEdit ? "수정하기" : "등록하기"} ); } props를 이용하면 된다. {props.isEdit ? "수정하기" : "등록하기"} 에서 isEdit가 true면 수정하기 false면 등록하기가 뜬다. 여기서 주의할 점은 number 인데 등록하기 버튼을 눌렀을..

query와 mutation을 사용하기 위해서는 _app.js에 설정해줘야 하는 게 있다. _app.js import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client"; export default function App({ Component, pageProps }) { const client = new ApolloClient({ uri: "http://practice.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), }); return ( ); } http://practice.codebootcamp.co.kr/graphql 위 사이트에서 Back-end 개발자가 만들어놓은 API..