
router.get('/about/:name?', (ctx) => { // about 뒤에 name이 오는지 여부에 따라 결정 //'/about/:name' 와 같이 ?를 빼버리면 name이 없을 때 not found를 들고옴. const { name } = ctx.params; // 라우트 경로에서 :(파라미터명) 으로 정의된 값이 ctx.params 안에 설정됨 console.log(name); ctx.body = name ? `${name}입니다` : 'Introduce'; }); router.get('/posts', (ctx) => { // id의 존재 여부에 대하여 출력 const { id } = ctx.query; // 쿼리를 들고옴 ctx.body = id ? `포스트 ${id}` : `포스..

context API를 통하여 상위 컴포넌트에서 원하는 컴포넌트까지 줄줄이 전달하지 않아도 바로 전달할 수 있게 되었지만 이전 버전에서는 사용이 불편했다. context API가 예전보단 사용하기 편해졌지만 그 대책이었던 Redux가 큰 프로젝트에서 효율적이고 상태를 한눈에 보기 편해서 여전히 잘 쓰인다. Store 스토어에는 애플리케이션의 상태 (state)와 리듀서들이 들어가있다. 스토어는 프로젝트에 단 하나만 존재할 수 있으며 내장함수로 dispatch와 subscribe를 가진다. dispatch : 파라미터로 넘어온 액션 객체 (함수)를 리듀서에 전달하여 상태를 업데이트한다. subscribe : 리스너 함수를 넣어서 호출해주면 리스너 함수가 상태가 업데이트될 때마다 호출된다 Reducer 리듀..

동기적 (Synchronous) 작업을 요청이 끝날 때 까지 기다렸다가 완료가 되서야 다음 작업을 실행하는 방식. 익숙한 방식이지만 웹에서는 비효율적이다. 비동기적 (Asynchronous) 그래서 앞선 작업이 끝나건 말건 다음 작업을 실행해서 동시에 여러 요청을 처리할 수 있다 (병렬처리인가) 그래서 순차적으로 실행되길 원한다면 콜백지옥을 구현해야 했지만 ES6부터 Promise가 도입되었다. const Promise_async_await = () => { function increase(number) { // 성공 : resolve, 실패 : reject const promise = new Promise((resolve, reject) => { setTimeout(() => { const result..

이유는 알 수 없지만 News-API를 이용하여 실습하던중에 틀린 부분도 없이 실행이 안되서 고생했다. HTTP 426 error 였는데 protocol update가 필요하다는 내용이었다. 좀 더 알아보니 자신의 localhost에서 나오지 않는 request는 죄다 reject 해버린다는 내용이었는데,,, 이러면 구름IDE를 이용할 수 없었다. (구름 IDE는 localhost가 아닌 IDE상에서 지정한 웹페이지로 띄워버리기 때문이다) 덕분에 2시간 날려먹고 이렇게 글을 쓰면서 정리하게 되었다.
- Total
- Today
- Yesterday