본문 바로가기

분류 전체보기

 (179)
[#. React] React 기본 실행 3000 port 변경하기 React는 npm run start 명령어로 실행하게 되면 기본적으로 3000 port에서 실행된다 이 3000 port를 다른 port로 바꿔보자 ① 명령어로 실행하기 PORT=3002 npm run start 이렇게 실행하면 일회성으로만 적용된다 ② package.json 수정하기 ⑴ Mac, Linux ... "scripts": { "start": "export PORT=3002 && react-scripts start", } ... ⑵ Window ... "scripts": { "start": "set PORT=3002 && react-scripts start", } ... ③ 프로젝트명/node_modules/react-scripts/scripts/start.js 수정하기 const DEFAU..
[#. ETC] Github와 Slack 연동하기 협업할 때 Git에서 commit, pull request, comment 등 여러 기능을 사용하게 되는데 Slack에서 알림이 와야 확인이 용이하기 때문에 연동하려고 한다 ① Slack 앱에서 Github 추가 앱->앱 추가->Github 검색 후 추가 ② 알림 받을 Slack 채널 설정 및 payload URL 확인 ③ Github에서 Webhook 설정 Repository -> Settings -> Webhooks ②에서 가져온 URL을 입력하고 Content type은 application/json으로 설정한 후 Add webhook 해준다 이렇게 하면 git에 commit 후 알림이 잘 오는 것을 확인할 수 있다
[#. React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js www.npmjs.com ① react-scroll 설치 npm install --save react-scroll ② src/components/Main/Main.js 먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다 import React from "react" import styled from "styled-components" import Middle from "./Sections/Middle" import Side from "./Sections/Side" const M..
[#. React] React Form에서 Enter 엔터키 눌렀을 때 버튼 클릭 이벤트 실행하기 이메일 주소와 비밀번호를 입력하는 Form이 있는데 Enter 키를 눌러도 가입하기로 넘어가지 않는다 Form에서 onKeyPress 이벤트가 발생할 때 그 키가 Enter일 경우 onSignup() 가입하기 버튼이 동작하도록 하면 된다 // 입력한 키가 Enter일 경우 가입하기 버튼 클릭한 것과 동일한 동작 실행 const onCheckEnter = (e) => { if(e.key === 'Enter') { onSignup() } } import React, { useState } from "react" import { Form, Input, Button } from "antd" const Signup = (props) => { const [email, setEmail] = useState("") c..
[#. JavaScript] event.stopPropagation(), event. preventDefault()의 차이 event.stopPropagation() 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다 이벤트가 상위 엘리먼트에 전달되지 않게 막아준다 table row 클릭 시에 페이지를 이동하도록 click 이벤트를 적용해 놨고, column에도 delete 아이콘 클릭 시에 click 이벤트를 적용해 놨다 e.stopPropagation() 적용 전에는 delete 아이콘을 클릭하면 column onClick => row onClick 순으로 둘다 진행된다 => console에 test 출력 후 페이지 이동 import React from "react" import { Table } from "antd" import { DeleteOutlined } from "@ant-design/icons" ..
[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기 파일(이미지), 제목, 내용을 입력하고 DB에 저장하는 페이지가 있다고 하자 formdata에 "file", "data"에 각각 파일과 제목, 내용 데이터를 담아서 보내려고 한다 FormData 객체는 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공한다 이를 이용하면 데이터를 multipart/form-data 형식으로 전송할 수 있다 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다 file은 multipart/form-data, data는 application/json 형식으로 보내기 위해 Blob을 사용했다 let blob = new Blob(array, options) ① Cre..
[#. JavaScript] Date()를 YYYY-mm-ddT, 2021-06-04T00:47:25.919Z 형식으로 변환하기 보통 new Date()를 통해 현재 시간을 가져오면 Mon Jun 07 2021 08:59:03 GMT+0900 (대한민국 표준시) 위와 같은 형식으로 가져온다 근데 YYYY-mm-ddT~ 형식으로 변환하고 싶다 2021-06-06T23:59:03.927Z 단순화한 확장 ISO 형식(ISO 8601)의 문자열을 반환하는 toISOString()을 이용하면 된다 var date = new Date() console.log(date)// Mon Jun 07 2021 09:25:35 GMT+0900 (대한민국 표준시) date.toISOString()// 2021-06-07T00:25:35.128Z 이렇게 잘 뜬다
[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기 추가 버튼을 클릭하면 input, textarea 영역이 생겼으면 좋겠다 근데 react에서 return문 안에서 for문은 사용하지 못 하기 때문에 어떤 방법을 사용할지 고민하다가 버튼 onClick 이벤트가 발생할 때마다 counter에서 숫자가 1씩 증가하도록 하고 그걸 state에 배열로 담을 것이다 그리고 배열에 담긴 Item 개수만큼 div를 생성할 것이다 ① 프로젝트명/src/components/CreateListPage/CreateList.js import React, { useState } from "react" import styled from "styled-components" import { Button } from "antd" import { Link } from "react-ro..

티스토리툴바