profile
마음이 시키는 프론트엔드
post-thumbnail

[Redux] 공식문서 보면서 따라하는 Redux-toolkit 초기 세팅

너 진짜 어려워.... 오~ 히려 좋아~

2022년 5월 24일
·
2개의 댓글
·
post-thumbnail

[React] fetch 요청할때 useEffect 유의할 점

백엔드분들과 여차저차 통신을 하려던 찰나에.. 나한테 되게 조심스럽게 말 한마디를 건내셨다.요청이... 너무 많이 오는데요...?네....?최대한 당황한척하지 않고 아 ! 확인해볼게요 ! 하고 내 코드를 봤다. 당연히 API요청을 하는 부분은 useEffect 부분 밖

2022년 4월 17일
·
2개의 댓글
·
post-thumbnail

[React] Input Error

마주해버렸다... 에러와... 하지만 이제 겁내지 않고 이유를 충분히 생각해보고 차분하게 구글링을 해본다.먼저 이 오류가 나타나는 시점은 input에 입력을 했을 때 바로 나온다. 왜 그런가 생각을 해봤는데 input value에 undefined가 들어갔을 경우에

2022년 4월 17일
·
0개의 댓글
·
post-thumbnail

[React] Array.map() is a not function

백엔드분들이 정성스럽게 만들어주신 베스트 상품 API를 받아와서 내 메인에 뿌려주고 보여드릴 생각에 신이 많이 났다.하지만...Objects, {} in JavaScript does not have the method .map(). It's only for Arrays

2022년 4월 5일
·
2개의 댓글
·
post-thumbnail

[React] 스크롤에 따라 navagation fixed

부딪혔다. 프로젝트 중에. fix죄송합니다. 다시 하겠습니다.프로젝트를 진행하던 중 화면의 스크롤 값에 따라 고정 너비를 가진 header가 상단에 position:fixed로 붙는 인터랙션을 구현해야 했다. 대충 감은 오는데 jQuery에서나 오던 감으로는 React

2022년 4월 3일
·
2개의 댓글
·
post-thumbnail

[React] slide API 없이 슬라이드 구현하기

라고 했지만 진짜 slide API의 중요성을 너무나도 느끼는 일주일이었다. (물론 작업기간 3일)언제나 이론상으로 완벽한 코드지만 npm start와 새로고침 한번한번이 이렇게 무서웠던 적은 처음이다. 오류가 무서운게 아니라 이 문제가 해결되면 다음엔 어떻게 로직을

2022년 4월 3일
·
0개의 댓글
·
post-thumbnail

[React] useRef (+ useRef로 버튼 슬라이드 만들기)

일단 useRef는 앞에 use가 붙어있는걸 보아하니.... 왠지 React hool이 아닌가...했지만 정확히 맞았다. React hook이 맞다. 그렇다면 또 설명을 참을 수 없기 때문에 개념을 먼저 잡고 가보자.useState()나 useEffect()처럼 많이

2022년 4월 3일
·
0개의 댓글
·
post-thumbnail

[React] 리스트 검색 기능 / 컴포넌트 재사용

예전부터 구현해보고 싶었던 기능중에 하나가 검색했을 때 단어마다 내가 검색하고자 했던 키워드가 나오는 기능을 구현 해보고 싶었다. 하지만 무서워서(?) 시도해보지 않았지만 이번에 좋은 예제를 받아 도전을 해봤다. open API에서 useEffect와 fetch 그리고

2022년 3월 26일
·
6개의 댓글
·
post-thumbnail

[React] useState와 객체 데이터를 사용해서 map 함수 작성

이 셋의 삼각관계를 은밀히 알아보겠다... 실제로 사용해보니 놀랍기도 하면서 굉장한 녀석들이었다...(feat.갓민주님)(감동은 아님. 좀 힘들었음.)각설하고 시작한다.전에 간단하게 state에 대해 작성해본 적이 있다. 아 물론 그땐 지금처럼 사용하진 않고 기본적인

2022년 3월 22일
·
4개의 댓글
·
post-thumbnail

[React] Side Effect / useEffect / Clean up Effect

이건 설명을 듣는 순간부터 헷갈렸다.위에 말이 뭘 뜻하는가? 블로깅을 무조건 해야한다는 말이다. 마음이 시키는 블로깅됐고, 본론으로 들어간다.side effect란 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 이렇게만 말해서 알

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

[React] map 함수 적용시 key props를 부여하는 이유

map 함수를 생각없이 사용하다보면 나오는 경고 창이 있다너 key값 지정 안해줬음너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유니크한 키 prop을 줘야함 이라고 말하고 있다.\*\*예를 들어 map으로 리스트를 하나씩 뿌려준다고 가정해보자.

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

[React] React Router

비 좀 그만내려어어어어어어 제발 Router 란 ? > 그리고 최근에 react-router가 v5에서 v6로 업데이트가 되었다 ! v6 기준으로 블로그를 작성할 예정이니 참고 바래용 Creat-React-App 줄여서 CRA에는 Routing을 하는 기능이 들어있

2022년 3월 15일
·
0개의 댓글
·
post-thumbnail

[React] SPA 란?

SPA는 Single Page Application의 약자이다. 예전에 웹 페이지에서는 페이지를 보여줄 때 여러페이지로 구성이 되어있었다.A html, B html, C html ....그리고 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다.즉, 웹 어플

2022년 3월 15일
·
0개의 댓글
·
post-thumbnail

[React] <a> 태그 사용시 오류 해결

The href attribute requires a valid value to be accessible. 라는 오류가 나왔다Router를 공부하던 도중 그래도 꽤 많은 오류를 만났다고 생각했는데 아직도 빨간 글씨는 마주치면 어색하다. 피하진 말아야지.본론으로 들어가서

2022년 3월 14일
·
0개의 댓글
·
post-thumbnail

[React] LifeCycle API

constructor는 먼저 props를 파라미터로 받아오고 안에 super(props)를 해줘야하는데 용도는 원래 갖고 있던 생성장 함수를 불러와주고 하고 싶은 작업을 할때 사용된다.이 API는 주로 외부 라이브러리를 연동하거나 컴포넌트에서 필요로 하는 데이터 요청

2022년 3월 13일
·
2개의 댓글
·
post-thumbnail

[React] state

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

2022년 3월 11일
·
0개의 댓글
·
post-thumbnail

[React] props

먼저 App.js에 MyName.js를 import하고 작성해보자class App extends Component { render() { return ( ); }}export default App;자신이 받아온 props 값은 this. 키워드

2022년 3월 11일
·
0개의 댓글
·
post-thumbnail

[React] component

일단 컴포넌트라는 용어에 대해 먼저 알아보면 cs에서 다룰때는 하드웨어처럼 "독립적인 기능을 수행하는 단위 모듈"을 뜻한다.소프트웨어는 하드웨어랑 달리 독립적으로 개발되지 않는 경우가 많고, 다른 모듈과의 호환을 생각하며 개발하지 않았다. 그래서 재사용뿐만 아니라 유지

2022년 3월 1일
·
0개의 댓글
·
post-thumbnail

[React] DOM / Virtual DOM

DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법이다.DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수도 있고 동적인 UI에 최적화 되어 있지 않기 떄문에 jQuery를 사용하

2022년 3월 1일
·
0개의 댓글
·
post-thumbnail

[React] JSX

오늘은 갑자기 코드 먼저 던졌다. 뒤에 설명하기엔 이만한게 없기에 그랬으니 양해 부탁드립니다.위에 희한한 태그 문법은 문자열도, HTML도 아니다. 이걸 바로 JSX라고 하며 Javascript를 확장한 문법이다. HTMl을 공부하고 사용해 본 사람들은 이걸 굳이 이렇

2022년 3월 1일
·
0개의 댓글
·