미니 프로젝트를 시작했고, css을 전적으로 하는걸 맡았다. css부분만 담당하느라 협업을 많이 하지는 못했지만 그 때문에 tailwind를 처음 사용하게 되었다. 기존의 styled component와는 다르게 tailwind는 input안에 css를 설정 할 수 있어서 편하다고 느꼈다. 물론 tailwind를 좀 더 익혔으면 저런식으로 설정하지 않아도...

Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 설치 **yarn add axios import axios from "axios";** 사용방법 1) 리액트 프로젝트에 shared 폴더에 Request.js 파일을 만든다. 2) 리덕스 모듈에서 불러온다. 3) GET메소드 ![](h...

LifeCycle 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다. 라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거

[과제] 숙련주차 과제 답 추가하기 버튼을 클릭해도 표시 되지 않고, 기존에 존재하던 아이템도 사라짐 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. 하지만 todos.js의 63번째 줄에서는 설정되있지 않기 때문에 추가를 하면 기존의 데이터는 삭제되버리고 만다. todos: [...state.todos, a...

숙련과제인 redux를 이용해서 todolist를 작성해 로컬테스트를 해봤다. 시간이 오래걸렸지만 잘되었다. 이제 vercel로 배포만 하면 숙련주차 과제는 끝났다라고 생각했다. 하지만 그게 아니었고, 이러한 오류가 떠버리고 말았다. vercel문제라고 생각해 netlify에서도 해봤지만 같은 오류가 떠버렸고, 결국 vscode에서 구성된 폴더를 붙여넣...

같은 형태의 객체 만들기 예를 들어서 학생 성적관리 프로그램을 만든다라고 생각한다면, 학생이라는 객체가 필요하고, 그러한 학생들로부터 성적관리에 필요한 공통사항을 추출하는데 이를 추상화라고 한다. > // 객체와 배열 조합하기 // 1. 객체를 선언한다. const student = [] student.pus...

State 란? 리액트를 다루는 핵심 ! State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. props를 사용했는데도 state를 사용하는 이유는, 사용하는 ...

속성 존재 여부 확인 객체 내부에 어떤 속성이 있는지 확인해보는 코드는 자주 사용하는 코드. 객체에 없는 속성에 접근하면 undefined 자료형이 나온다.배열 기반의 다중 할당 최신 자바스크립트부터 한번에 여러개의 변수에 값을 할당하는 다중 할당기능이

ES란? 크로스 브라우징 이슈 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈 이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다. ES란 ECMA Script의 약어이며 자바스크립트의 표준 규격을 나타내는 용어이고, JavaScript를 표준화시키려고 탄생했다. 그렇다면 왜 생겨난 것인가? JavaScript의 역사는 ...

JWT JSON Web Token의 줄임말로, JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹표준이며 인증에 필요한 정보들을 암호화시킨 토큰을 뜻합니다. 위의 세션/쿠키 방식과 유사하게 사용자는 Access Token(JWT 토큰)을 HTTP 헤더에 실어 서버로 보내게 된다. 절차 사용자가 로그인을 한다. 서버에서는 계정정보를 읽어 사용자를 확인...

🐤JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 ->JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능 ex) l