서버에서 데이터를 가져오는 경우에 쓰는 걸로 접하였고, 정확히 알고 넘어가고자 공부를 하였다. 어디서? 여기서 비동기 async 함수 function() 앞에 async 키워드를 추가하여 사용하며, await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 async function hello() { return "Hello World" }; let hello = async function() { return "Hello World" }; let hello = async () => { return "Hello World" }; 실제로는 fulfil Poromise가 반환되기에 반환 값을 사용하기 위해서는 .then() 을 사용 해야 한다. await : can be put in front of any..

VSCode React 환경 생성을 위해, npm install -g yarn 설치를 하는 도중 yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없다는 문구와 함께 오류가 발생 about_Execution_Policies을 참고하라는데, 보안관련 해서 안된다는 말로서, 관리자 권한으로 powershell에서 Set-ExecutionPolicy Unrestricted을 입력 후, 확인을 위해 ExcutionPolicy를 입력하면 Unrestricted가 나오는 지 확인 이제 다시 yarn -v 혹은 yarn --version 으로 되는 지 확인하여 버전이 나온다면 이제 시작이다. yarn create react-app todo-frontend(프로젝트명) axios : 브라우저,..

이틀동안 노트북에 가상화 세팅을 하기 위해 여러 방법을 동원했지만, 아마도 가상화 환경이 충돌이 일어나서 발생하지 않을까? 하는 게 추론이고 포맷을 하고 다 해봐도 결국 무한 부팅으로 다시 포맷을 하게 되었다. 그렇게 시작된 프로젝트 세팅은 데스크탑에서 따로 진행을 하게 되었고, Docker를 사용하기 위한 삽질이었다. 결국 데스크탑에서 설치는 완료를 하였고, Docker : 애플리케이션을 환경에 구애 받지 않고 실행하는 기술 windows powershell에서 을 입력하였으나 Unable to find image 'images:latest' locally docker: Error response from daemon: pull access denied for images, repository does..

Weather API [여기] 로그인을 하여 current weather API 사용을 위해, API key 발급 사용을 위해서는 왠만한 API의 경우에는 해당 사이트에 정리가 잘 되어 있다. Fetch : Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것 간단하게 API를 사용하기 위해서 정보를 받아오는 역할이다. (물론 post 역할도 있지만, 지금 당장에는 get) fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환, 보..

알아두어야 하는 것 querySelector preventDefault classList addEventListener localStorage querySelector 문서 내에서 일치하는 querySelector() 첫 번째 항목을 반환 "#idName" : id 가 idName과 일치하는 ".className" : class가 className과 일치하는 "input" : input과 일치하는 preventDefault [여기] 이벤트가 명시적으로 처리되지 않으면 기본 작업이 정상적으로 수행되지 않아야 한다고 사용자에 알려줌 classList 클래스를 조작하는데 사용, add() remove() replace() 그리고 toggle() 메서드가 있다. addEventListener [여기] Event..

글을 조금 편하게 쓰기 위해 부모 Component와 자식 Component는 부모/자식으로 쓰도록하겠다. 리액트를 쓰게되면 부모가 값을 전달하고 자식은 그 값을 사용하는 게 일반적이지만 반대로 자식이 부모에게 데이터를 올릴 수는 없는 걸까? 한 페이지에서 데이터를 받아 왔고 어떠한 버튼을 누르게 되면 페이지가 전환되면서 데이터를 보여주는 방식을 바꾸려고 한다. 하지만 주소가 변경되는 것이 아닌 보여주는 것만 다르게 하고 싶었는데, 보여주는 것까지는 state를 내리는 걸로 해결이 가능했지만 하고자 하는 것은 자식컴포넌트에서 버튼을 누르게 되면 돌아오게끔 하고 싶었다. 지금 하려는 게 맞는 방법인지는 모르겠지만, 일단 해결을 위해서는 함수형 Component에서 State를 올리는 방법으로 접근을 하였다..

props를 여러개 받으려고 하니 어제와 같은 상황(이전 글)과 같은 상황으로는 해결이 되지 않았다. 그리고 이러한 과정을 하는 이유는 태그별로 같은 prop을 받을 예정이다. Cards의 경우는 Card(사용하고자 하는 데이터의 모음)의 배열이다. 이것을 기본적으로 받을 예정이며, Cards가 없다면 없다는 문구를 표시하고자 하였다. 태그로는 사용자가 찜하거나 참여를 하여 완료된 혹은 참여를 하고 있는 3종류의 옵션이 존재를 할 것이기 때문에 한 가지 함수를 여러가지로 이용하기 위해서 만드는 작업이다. 1. 문제점 Typescript의 경우는 타입을 정해서 사용을 해야 하는데, Cards는 Card 타입의 배열이다. 2. Props를 여러개 받을 때에는 어떻게 해야하는가 이럴 때 느끼는 거는 제대로 배..

해당 배열을 props 로 전달하기 위해서 아래와 같이 전달을 하였고, 의도한 것은 받은 배열을 map 함수를 이용해서 표현을 하려고 했으며 VSCode에서는 문제가 없이 작동이 되었으나, 로컬로 돌리는 해당 주소에서는 Child.tsx 에서 likedRoutine.map is not a function 이라는 TypeError 문구가 뜨게 되었다. 문제 해결을 위해 console.log로 확인하니 배열이 아닌 object로 데이터가 들어오면서 오류를 작동했던 것이었기에, 여러 방법으로 하려고 하였으나 다 실패를 하였고.. 결국 해결하고자 방법을 찾은 것은 Object를 map 함수로 사용할 수 있게 만드는 것이었다. 이와 같은 방법으로 사용하여서 만들었다. 결국 원하는 것을 띄울 수 있었으나 오류가 남..