- 전체보기(30)
- React(13)
- 리액트(13)
- JavaScript(12)
- 전역상태관리(3)
- node.js(2)
- axios(2)
- REST API(2)
- 배열(2)
- Sequelize(2)
- sql(2)
- mysql(2)
- redux(2)
- 리덕스(2)
- array(2)
- push(1)
- redux-logger(1)
- redux thunk(1)
- 이벤트전파(1)
- 상태(1)
- patch(1)
- 호이스팅(1)
- for문(1)
- atom(1)
- lifecycle(1)
- 리덕스 툴킷(1)
- 객체(1)
- 컴포넌트(1)
- 라우팅(1)
- 매개변수(1)
- 함수 호출(1)
- Recoil(1)
- await(1)
- useEffect(1)
- useState(1)
- async(1)
- return(1)
- unshift(1)
- Axios API(1)
- selector(1)
- 문자열(1)
- redux-toolkit(1)
- const(1)
- let(1)
- var(1)
- 객체 복사(1)
- filter(1)
- foreach(1)
- put(1)
- delete(1)
- String(1)
- 프롭스(1)
- State(1)
- useRef(1)
- 함수(1)
- 메서드(1)
- api server(1)
- 이벤트핸들러(1)
- shift(1)
- reduce(1)
- splice(1)
- Pop(1)
- 에러 페이지(1)
- new Map()(1)
- params(1)
- 얕은 복사(1)
- setState(1)
- components(1)
- Web Server(1)
- express(1)
- next.js(1)
- slice(1)
- new Set(1)
- Map(1)
- Props(1)
- callbackRef(1)
- new promise(1)
- react router(1)
- redux-devtools(1)
- function(1)
- object(1)
- forwardRef(1)
- 깊은 복사(1)
- promise(1)
- 함수 정의(1)
- useRecoilState(1)
- ORM(1)
- GET(1)
- POST(1)
[JavaScript] REST API 백엔드에서 만들고 프론트엔드에서 사용하기
REST API 프론트엔드에서 써보기만 했는데, 백엔드에서 어떻게 만들어 지는 걸까? 백엔드에서 직접만들어보고 프론트엔드에서 사용해보자!!
[SQL] 프론트엔드 개발자도 sequelize, SQL 궁금해!
Node.js에서 데이터를 관리하는 방법에 관심이 생겼는데, 어떤 것부터 공부해야 할까? 우리는 SQL로 코드를 작성할 수 있고, sequelize를 이용해서 코드를 작성할 수도 있다. 그럼, sequelize랑 SQL은 무슨 차이가 있을까?
[Node.js] Node.js로 백엔드 개발자와 소통하는 프론트엔드 개발자 되기
서버 코드를 보내줬는데.. 읽을 줄을 몰라요.. 서버단의 코드를 보며 클라이언트 단 코드를 짜야했을 때 당황하지 말자! Node.js의 기본설명을 통해 간단한 코드를 만들어 보자
[JavaScript] async await 어떻게 사용할까?
API를 호출할 때 매번 사용하는 async와 await. 그냥 쓰지말고 왜, 어떻게 사용하는지 제대로 알고 사용하자!
[JavaScript] Promise 객체 한 번에 이해하자!
Promise 객체는 무엇일까? 더 이상 눈치로 넘기지 말자! 기본 정의부터 프로미스 객체를 생성하는 new Promise까지 모두 알아보자!
[React] useEffect(콜백 함수, 배열)
useEffect는 함수 컴포넌트에서 라이프사이클로 사용합니다.useEffect에 첫번째 인자로 콜백 함수를 넣고 두번째 인자로 배열을 넣는데, 빈 배열을 넣으면 컴포넌트가 최초 렌더링 됐을때 1번만 실행됩니다.배열에 변수명을 넣으면, 변수명에 넣은 값이 업데이트 될
[React] Redux Toolkit 이 그렇게 편해?
Redux 가독성 어떻게 해결하지? 보일러 플레이트 코드들 때문에 너무 복잡해! 좀 더 편리하게 사용할 수 있는 방법 없을까?
[React] redux-thunk (전역상태관리 비동기 처리) + redux-logger, Redux DevTools
비동기 처리를 위한 redux-middleware 라이브러리dispatch(thunk함수)action type & action 생성자함수, (thunk 함수), reducer 함수를 1개의 파일 내에서 정의해서 사용하는 방식.
[React] Redux 전역상태관리
Redux는 단일 스토어이다. reducer가 여러개인 것!react 컴포넌트에서 유동적으로 바뀌는 값. store에서 저장되어 있는 값.initialState가 state. (recoil에서 atom 느낌?)1) 2가지 형태로 나뉜다.payload 없는 액션 { ty
[React] Recoil 전역상태관리
atom 이란?atom은 상태를 정의하는 방법. atom이 set되면, 해당 atom을 구독하고 있던 '모든 컴포넌트들의 state가' 새로운 값으로 리렌더링 된다!즉, 값을 바꾸면 재할당 해줄 필요없이, 바로 적용이 된다.But, atom을 사용하고 있던 함수가 자동
[React] axios (컴포넌트에서 API 호출하기 방법 2)
JSON 데이터를 자동으로 변환해주기 때문에, fetch에서 사용해야했던 await result.json();을 할 필요 없다.대신, fetch API는 내장되어 있기 때문에 따로 설치해줄 필요가 없지만, axios는 추가적으로 설치해야만 사용가능하다.
[React] react-router (React 라우팅 라이브러리)
페이지를 바꿀 때마다 서버에서 받지말고 -> 첫 페이지 요청시에만 서버에서 html을 내려주고 -> 다른페이지는 페이지에 필요한 부분만 변경해서 보여준다.즉, html은 하나지만, url은 여러개. 이때 필요한 것이 라우팅 처리.라우팅: 어떤 url로 들어왔을때, 특정
[React] useRef() 특정태그 선택하기, 변수를 관리하기
변경을 관리. 하지만 리렌더링을 발생 시키지 않는다. (ustState처럼 값이 변화할때마다 리렌더링 하는거 X)즉, 값은 바뀐다. 리렌더링이 안되서 반영이 안되어 보이는 것일뿐. (.current가 변경되었다고 리렌더링 되는 것 X)useRef 용도는 2가지useRe
[React] React 이벤트 처리하기 (함수 컴포넌트 ver)
지키지 않으면 문법적으로 오류. 작동하지 않는다.기존 htmlReact JSX기존 htmlReact JSX기본 설명기존 html vs React JSX기본 예시
[React] State 상태
setState는 전후비교로 리렌더링(업데이트) 되기때문에, state 원본을 훼손해서는 안된다!!기본 예시원시타입: 불변성O. 변수에 원시타입의 값을 할당하면, 메모리에 값 자체가 저장된다.setState(업데이트 값)기본 예시참조타입(객체타입): 불변성X. 변수에
[React] Props(프롭스) 란?
리액트에서 컴포넌트를 재사용하는데 특정 값만 바꿔서 사용할 수 있나요? 있어요! 프롭스의 정의부터 코드 작성까지 한 번에 알아보자