시작은코딩이지만끝은뭐가될지모르는 시작은코딩이지만끝은뭐가될지모르는

엘리스에서 Promise, fetch, async/await, axios를 배웠는데 그 중 제일 이해가 잘 갔던 내용은 axios 였다. 문제를 풀면서도 그냥 넘어가기보다는 어느정도 이렇게 동작하는구나 하며 보고 지나갔는데, 일기장 만드는 것에서 fetch로 api를 사용하는 부분이 나왔다. fetch로 가져오는 거면 당연하게도 axios로도 가져올 수 있겠지? 배운 거 복습할 겸 작성해보자 ! 하고 작성해보았다. 바로 안떠올라서 지난번 풀었던 문제를 다시 보며 풀었다. 1. 거기에 추가로 useEffect Hook을 같이 사용했다. useEffect의 두번째 인자에 deps로 받는 부분에 빈 배열을 넣어주면 렌더링 시 한 번만 실행되기 때문에, API는 처음 한 번 불러오면 되니까 그렇게 했다. 2. ..

최근 개인프로젝트 스터디를 진행하는 중 초반 수업인데도 useState를 더욱 보기좋게 수정하는 모습을 보았다. 따라적으며 오 이렇게 되는구나 이해했다고 생각했는데, 다음날 다시 코드를 보니 내가 코드를 짜려고 하면 못할 것 같았다. 또 기록해두지 않으면 또 까먹기에 작성해보려 한다. 기본 틀을 작성하며 어떻게 함수를 개선하는지 보자. * 만약 이 글을 읽으신다면, 기본적으로 useState와 리액트가 어떤식으로 쓰이는지 쪼끔!만 이해하고 오시면 더욱 좋을 것 같습니다! 간단 소개 State란 컴포넌트 내에서 유동적으로 변할 수 있는 값. Hook이란 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect) 하기 위해 사용. Hook의 이름은 반드시 use로 시작해야한다. *..

월요일에 배웠는데 수요일에 복습하는데 다 까먹은 나를 보며 내 자신이 마음아파 적는 리액트 설치하고 배포까지 하는 법을 빠르게 작성해본다. (라며 다 작성했더니 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주짜리 짧다면 짧고 길다면 긴 프로젝트가 끝났다.. 토요일 발표까지 마치고나니 4시,, 시원섭섭하게 프로젝트는 끝이 났다. 진심어린 소감은 회고 이후 맨 아래 적어보려 한다. 월요일 220530 상품 카테고리 페이지를 만들었다. 사실상 내가 작성하는 페이지에서 가장 중요한 메소드였던 건 insertAdjacentHTML 이었다. html의 요소들을 클릭하거나 화면에 보여줄 때 insertAdjacentHTML 을 사용하여 보여주는걸 자주 사용했는데, 예를 들면 이런 거다. //query String value값 선언 const [_, query] = location.href.split('?'); const [queryKey, queryValue] = query.split('='); //데이터 받아오기 ..

기록의 중요성을 앎에도 꾸준히 적지 못했다. 하루하루 따라가기에 바빠서,, 는 핑계라고 할 수 밖에 없으려나. 그래도 프로젝트에 대한 기록은 짧게라도 해야겠다. 엘리스의 커리큘럼 상 8~9주차는 프로젝트 기간이다. 레이서들 4명, 5명이 짝을 짓고 한 팀이 되어 제시하는 프로젝트를 하는 주이다. 프로젝트 해! 하고 던져주는 게아닌, 7주동안 배웠던 HTML, CSS, JS 및 Node, Express, Mongoose 등을 이해하고 활용하는 기간이라고 보는 게 좋다. 이미 기본 틀을 갖춰두고 시작을 하는데, 그 안에서 각자 스스로 구성을 하는 것이다. 우리 팀은 전공자 2 , 복수전공 1, 비전공 2명으로, 그 중 2명은 백엔드, 3명은 프론트엔드로 구성됐다. 월요일 처음 뼈대 코드(스켈레톤 코드)를 받..

자바스크립트의 this 레이서 한 분이 질문했는데, 튜터님의 답변이 너무나 이해하기 쉬워 따로 적어놓는다. 우선 아래 3가지 규칙이 this와 관련한 규칙 전부입니다. 이 이외에는 없습니다. 1. 객체(object)의 메소드(객체 내의 함수)가 일반 함수인 경우, this는 그 객체가 된다. 2. 객체의 메소드가 화살표 함수인 경우, this 는 lexical context (화살표 함수 밖 컨텍스트) 이다. - 2번 규칙은 사실, 화살표 함수가 객체에서 쓰이든, 객체의 함수에서 쓰이든, 함수의 함수에서 쓰이든, 언제든지 적용될 수 있는 규칙입니다. 어느 경우든, lexical context의 this가 화살표 함수의 this가 됩니다 3. 1번도 2번도 아닌 경우의 this는, window (stric..

엘리스 SW엔지니어 트랙 2기 DAY_14 자바스크립트의 객체 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용 프로퍼티 프로퍼티 키(이름)와 프로퍼티 값으로 구성 메소드 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미 생성자(constructor) 함수 new 키워드와 함께 객체를 생성하고 초기화하는 함수 인스턴스(instance) 생성자 함수를 통해 생성된 객체 이번주 해야할 일 - map, filter , reduce, closer, this,실행컨텍스트 ..

엘리스 SW엔지니어 트랙 2기 DAY_13 📝 목차 오늘의 잡담 Rest Operator (나머지 매개변수) 인상깊었던 문제 이고잉님의 수업이 나날이 어려워지면서, 주말에 시간잡고 차근차근 따라해보기로 마음먹었다. 온라인강의의 장점은 수업이 녹화됐기에 녹화수업을 다시 꺼내볼 수 있는점 아닐까 코치님 시간에 같이 푼 문제 중 개념 정리가 필요한 것 일부만 정리해보려 한다. 사실 코치님 틱택토 설명 열심히 해주시는데 잘 못따라가는중 ㅎ;; 어떤 분들은 틱택토를 제대로 이해해서 더더 바꿔나가는 모습보니 부러울 따름~~ Rest Operator(나머지 매개변수) Rest Operator(나머지 매개변수)는 함수의 나머지 인자를 가리키며 여러 개의 매개변수를 하나의 배열로 묶어서 전달받을 수 있습니다. 제일 이해..