엘리스에서 Promise, fetch, async/await, axios를 배웠는데 그 중 제일 이해가 잘 갔던 내용은 axios 였다. 문제를 풀면서도 그냥 넘어가기보다는 어느정도 이렇게 동작하는구나 하며 보고 지나갔는데, 일기장 만드는 것에서 fetch로 api를 사용하는 부분이 나왔다. fetch로 가져오는 거면 당연하게도 axios로도 가져올 수 있겠지? 배운 거 복습할 겸 작성해보자 ! 하고 작성해보았다. 바로 안떠올라서 지난번 풀었던 문제를 다시 보며 풀었다. 1. 거기에 추가로 useEffect Hook을 같이 사용했다. useEffect의 두번째 인자에 deps로 받는 부분에 빈 배열을 넣어주면 렌더링 시 한 번만 실행되기 때문에, API는 처음 한 번 불러오면 되니까 그렇게 했다. 2. ..
리스트
-
[오늘의 일기 만들기] fetch와 axios를 사용하여 API 불러오기 (feat. useEffect)IT 2022.06.21 01:36
엘리스에서 Promise, fetch, async/await, axios를 배웠는데 그 중 제일 이해가 잘 갔던 내용은 axios 였다. 문제를 풀면서도 그냥 넘어가기보다는 어느정도 이렇게 동작하는구나 하며 보고 지나갔는데, 일기장 만드는 것에서 fetch로 api를 사용하는 부분이 나왔다. fetch로 가져오는 거면 당연하게도 axios로도 가져올 수 있겠지? 배운 거 복습할 겸 작성해보자 ! 하고 작성해보았다. 바로 안떠올라서 지난번 풀었던 문제를 다시 보며 풀었다. 1. 거기에 추가로 useEffect Hook을 같이 사용했다. useEffect의 두번째 인자에 deps로 받는 부분에 빈 배열을 넣어주면 렌더링 시 한 번만 실행되기 때문에, API는 처음 한 번 불러오면 되니까 그렇게 했다. 2. ..
-
[오늘의 일기 만들기] 리액트 useState 사용&활용하기IT 2022.06.20 02:12
최근 개인프로젝트 스터디를 진행하는 중 초반 수업인데도 useState를 더욱 보기좋게 수정하는 모습을 보았다. 따라적으며 오 이렇게 되는구나 이해했다고 생각했는데, 다음날 다시 코드를 보니 내가 코드를 짜려고 하면 못할 것 같았다. 또 기록해두지 않으면 또 까먹기에 작성해보려 한다. 기본 틀을 작성하며 어떻게 함수를 개선하는지 보자. * 만약 이 글을 읽으신다면, 기본적으로 useState와 리액트가 어떤식으로 쓰이는지 쪼끔!만 이해하고 오시면 더욱 좋을 것 같습니다! 간단 소개 State란 컴포넌트 내에서 유동적으로 변할 수 있는 값. Hook이란 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect) 하기 위해 사용. Hook의 이름은 반드시 use로 시작해야한다. *..
-
엘리스SW 회고 -11주차 (많은 일이 있었네요, 많은 일이 또 있구요)생각 2022.06.20 00:10
들어가며🚪 아니 언제 11주차가 끝났지? 왜 시간 이렇게 빛이지? 나는 왜 아직도 모르는게 태산이지? ㅜ 그렇다. 내가 잠시 블로그에 손을 놨더니 어느새 1차 프로젝트 이후 2주가 지나버렸다. 1차 프로젝트 이후 잠시 쉴.. 틈 을 조금 느끼고 나니 2주가 간 것이다. 매 주마다 회고를 작성하려 했는데 1주차 쓰고 안쓰고, 프로젝트 쓰고 안쓰니 이렇게 됐다.. 바빠서라고 생각해보자^^^^ 느낀점🥲 11주차까지 오면서 많은 생각을 했고, 한다. 여전히 수업을 들으면서 솔직하게 내가 개발자가 될 수 있을까? 를 하루에도 몇 번씩 고민한다. 실시간 강의에서는 월요일 수업 후 복습을 안하고 (죄송) 수요일 수업을 듣게되면 이어지는 내용에서 잠시 기억을 되짚다 순간 수업을 놓친다? 손을 차분히 내려두고 이고잉님의..
-
리액트 설치(create-react-app)부터 깃헙으로 배포(gh-pages)까지IT 2022.06.09 01:01
월요일에 배웠는데 수요일에 복습하는데 다 까먹은 나를 보며 내 자신이 마음아파 적는 리액트 설치하고 배포까지 하는 법을 빠르게 작성해본다. (라며 다 작성했더니 2시간이 걸렸다)물론 배포는 제일 마지막에 배우는 거라고 하는데, 맛보기? 로 빠르게 할 수 있음을 알아두자. *참고로 npm은 깔려 있다고 가정했다.. npm 설치는 검색해보자..! 요약. 1. npx create-react-app@latest . 2. npm start (확인차 해봄) 3. hello world (확인차 해봄) 4. github 레포지토리 생성 5. git remote add origin 5-1. git add . 5-2. git commit -m "hello world" 5-3. git push --set-upstream o..
-
[쇼핑몰 웹 만들기] 프로젝트 2주차엘리스SW 2022.06.05 22:31
2주짜리 짧다면 짧고 길다면 긴 프로젝트가 끝났다.. 토요일 발표까지 마치고나니 4시,, 시원섭섭하게 프로젝트는 끝이 났다. 진심어린 소감은 회고 이후 맨 아래 적어보려 한다. 월요일 220530 상품 카테고리 페이지를 만들었다. 사실상 내가 작성하는 페이지에서 가장 중요한 메소드였던 건 insertAdjacentHTML 이었다. html의 요소들을 클릭하거나 화면에 보여줄 때 insertAdjacentHTML 을 사용하여 보여주는걸 자주 사용했는데, 예를 들면 이런 거다. //query String value값 선언 const [_, query] = location.href.split('?'); const [queryKey, queryValue] = query.split('='); //데이터 받아오기 ..