post-thumbnail

event.preventDefault() - form submit시 페이지 reload 안하기

프로젝트 중 버튼을 누르면 form태그에 입력한 데이터를 서버에 전송하기 위해 post 요청을 하는데 요청 전에 페이지가 reload 돼서 요청을 막는 이슈가 발생했다. event.preventDefault() 함수는 html에서 a태그나 submit 태그는 고유의

2022년 7월 26일
·
5개의 댓글
·
post-thumbnail

react-intersection-observer 라이브러리로 무한스크롤 페이지 구현하기

버킷리스트 커뮤니티 사이트 글 목록 페이지를 구현하던 중 무한스크롤 기능을 구현하기로 했고, https://slog.website/post/8 블로그의 글을 참고하여 매우 쉽게 구현했다.npm install react-intersection-observerdi

2022년 7월 26일
·
2개의 댓글
·
post-thumbnail

리액트 - Redux : Redux Toolkit state 변경

store의 state를 변경하는 법store.js 안에 state 수정해주는 함수부터 만든다.다른 곳에서 쓰기좋게 export 해둔다.원할 때 import 해서 사용한다. 근데 dispatch() 로 감싸서 써야함 예를 들어 Cart.js에서 버튼하나 만들고 클릭하면

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

리액트 - Redux : Redux Toolkit state 등록 및 사용

리액트를 사용하다 보면 서로 다른 컴포넌트 끼리 state를 주고 받기가 까다롭다. Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. Redux를 사용하면 js파일 하나에 모든 state를 저장하고 이를 필요로 하는 모든 컴포넌트에서 i

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

리액트 - 서버와 통신하기 AJAX

AJAX란?서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다. AJAX로 GET/POST요청을 하려면 3개의 방법이 있다. XMLLHttpRequest라는 옛날 문법 쓰기fetch()라는

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

리액트 - Lifecycle & useEffect()

컴포넌트에는 Lifecycle이라는 개념이 있다. 컴포넌트는 생성(mount)되고 리랜더링(update)되며 삭제(unmount)된다. 우리는 이러한 순간들 마다 함수를 호출하거나 무언가를 실행할 수 있다. "Detail 컴포넌트 등장 전에 이것좀 해줘" "Det

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

리액트 - styled-components

컴포넌트가 많은 경우 스타일링을 하다보면 중복된 class를 만든다거나 CSS 파일이 길어지는 등 불편함이 생긴다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들수 있는 라이브러리가 있는데 바로 styled-components 이다.우선 다른 라이브러리와 마찬가지로 터미

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

리액트 - 라우터

페이지를 나눌 때 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 리액트는 html 파일을 하나만 사용한다. 'react-router-dom' 이라는 외부 라이브러리 설치해서 구현하면 쉽게 페이지를 나눌 수 있다.사용 전에

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

리액트 - export / import

서버에서 위와 같은 데이터를 가져왔다고 하자. 이를 데이터바인딩 하려면 state에 보관해야하는데 useState()안에 다 적기에는 너무 길다. 그럴땐 다른 js파일에 저장해놓고 import하면 된다.위처럼 'data.js'에서 data라는 변수에 object 데이터

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

리액트 - bootstrap

CSS 짜기 귀찮으니 react-bootstrap으로 레이아웃을 간편하게 짜보도록 하자.사용 전 준비우선 터미널을 켜고 react-bootstrap 라이브러리를 install 해주고index.html 파일의 <head> 태그 안에 위의 코드를 복붙해주면 된다.이렇

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

리액트 - Input 다루기

리액트에서 유저가 입력한 input 데이터를 처리하는 방법에 대해 알아보자유저가 뭔가를 입력했을때 이를 처리하고 싶은 경우 onChange(), onInput() 이벤트 핸들러를 이용하면 된다.onChange와 onInput은 input태그에 유저가 뭔가를 입력할 때

2022년 6월 24일
·
0개의 댓글
·
post-thumbnail

리액트 - props

위의 코드를 실행하면 '글제목'이라는 변수에 undefined 에러가 나온다. 왜냐면 글제목이라는 state 변수는 App에서 정의했는데 Modal에서 사용하려고 했기 때문이다. 이처럼 자바스크립트에선 다른 지역에 있는 변수를 마음대로 사용할 수 없지만 props문법을 사용하면 가능하다. 위의 사진처럼 두 컴포넌트가 부모/자식 관계에 있는 경우 부모...

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

리액트 - Component

리액트는 긴 HTML을 한 단어로 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다. 컴포넌트 사용 방법 > 함수를 하나 만든다. 그 함수의 return으로 원하는 HTML태그를 담는다. 사용을 원하는 곳에 을 입력하면 HTML이 등장한다. 이렇게 축약한 HTML덩어리를 Component 라고 부른다. Component를 만들 ...

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

리액트 - State

리액트에서는 state에 데이터를 저장할 수 있다.위처럼 맨 윗줄에 import {useState} from 'react' 하고 컴포넌트 내에서 useState();를 통해 데이터를 저장할 수 있다." a,b = useState('남자 코트 추천'); " 과 같이 데이

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

리액트 - JSX 문법

리액트에서 레이아웃을 만들때 html과 다른 세가지 문법 JSX - JavaScript Xml의 줄임말로 쉽게 말해 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다. JSX문법 1. 부모요소 하나만을 return한다. 위의 코드와 같이 요소 하나만

2022년 6월 17일
·
0개의 댓글
·

[자바스크립트] 객체

[참고 문헌📚 : 혼자 공부하는 자바스크립트] 객체 기본 객체(object)란 '실제로 존재하는 사물'을 의미하고, 이름과 값으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입이다. 배열도 객체이다. 속성과 메소드 객체 내부에 있는 값을

2021년 10월 4일
·
0개의 댓글
·
post-thumbnail

[자바스크립트] 함수 (고급)

참고 문헌📚 : 혼자 공부하는 자바스크립트자바스크립트에서 함수는 하나의 자료형이다. 따라서 매개변수로 전달할 수 있는데 이렇게 매개변수로 전달하는 함수를 콜백(callback) 함수라고 한다. 위의 코드에서 callThreeTimes함수의 매개변수로 print함수를

2021년 8월 31일
·
0개의 댓글
·
post-thumbnail

[자바스크립트] 함수 (기본2)

나머지 매개변수 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다. 자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수(rest parameter)라는 문법을 사용한다. 사용 방법은 다음과 같다. > function 함수이름

2021년 8월 26일
·
0개의 댓글
·
post-thumbnail

[자바스크립트] 함수 (기본1)

[참고 문헌📚 : 혼자 공부하는 자바스크립트] 함수 함수는 '프로그래밍 문법의 꽃'이라고 부를 정도로 중요하다. 문법이 조건문이나 반복문에 비해 어렵진 않으나 만드는 방법이 다양해 이해가 힘들 수 있는 반면 이를 활용할 방법은 무궁무진하다. 함수를 사용하는 것을 함수 호출 이라고 표현한다. 함수를 호출할 때 괄호 내부에 자료를 넣는데 이 자료를 매개변수...

2021년 8월 22일
·
0개의 댓글
·
post-thumbnail

[자바스크립트] 반복문

참고 문헌📚 : 혼자 공부하는 자바스크립트컴퓨터에게 반복 작업을 시킬 때 작업 코드를 하나하나 복사해서 붙여 넣는 것은 번거로운 일이다. 이럴 때 활용하는 것이 바로 반복문이다.for in 반복문은 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다. 반복

2021년 8월 20일
·
0개의 댓글
·