What useState에 함수를 전달할 때 괄호()를 빼는 이유 How 2500개의 객체를 담은 배열을 반환하는 createBulkTodos() 함수가 있다고 가정하자. function createBulkTodos(){ const array=[]; for(let i =1; i
프론트엔드/React
Sendbird 가 뭐임? SendBird는 실시간 채팅 및 메시징 솔루션을 제공하는 기업 SendBird를 사용하면 모바일 앱, 웹 앱 및 기타 플랫폼에 실시간 채팅 및 메시징 기능을 쉽게 통합 삽가능 (대충 직접 개발 안 해서 편하다는 뜻) 어떻게 씀? [참고자료] https://sendbird.com/docs/chat/uikit/v3/react/introduction/send-first-message 1. npm으로 sendbird 설치 npm i @sendbird/uikit-react 2. DashBoard 생성 및 AppId 복사 https://dashboard.sendbird.com/A8929746-D85A-4ABB-B8DA-AF31661199E2/overview 3. App.js에 아래 코드..
What JavaScript에서 이벤트 핸들러에 함수와 인자를 함께 전달할 때 주의해야 하는 이유는 실행 시점과 스코프에 관련이 있다. 예를 들어, 다음과 같은 코드가 있다고 가정해보자 Click me Why 이 코드는 문제가 된다. 이유는 버튼이 렌더링될 때 Selected(index)가 즉시 호출되고, 해당 함수의 반환값이 onClick 이벤트 핸들러로 설정되기 때문이다. 렌더링 될 때 함수가 즉시 호출되면 버튼을 클릭하지 않아도 Selected(index)가 이미 실행되어 상태를 업데이트하거나 다른 작업을 수행할 수 있으므로 이는 의도하지 않은 동작으로 이어질 수 있다. How 화살표 함수를 사용하면 이 문제를 해결할 수 있습니다. 화살표 함수는 함수 정의를 감싸는데, 버튼을 클릭할 때만 함수가 호..
참고자료 https://velog.io/@edie_ko/React-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-API-key-%EC%88%A8%EA%B8%B0%EA%B8%B0.env-%EC%9D%B4%EC%9A%A9 React | 환경변수 사용하여 API key 숨기기(.env 이용) 리액트 프로젝트를 하면서 API key를 발급받아 사용하는 일이 잦다.카카오 developer 혹은 google developer와 같은 API key들은본인의 고유한 key이므로 그냥 깃헙에 올리면 안된다.React CRA 기반으로 작업을 velog.io
https://kkt102.tistory.com/69 [JavaScript]github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기 안녕하세요. 사진찍는 초보개발자입니다. 오늘은 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용 kkt102.tistory.com
참고자료(배포 방법) https://codingapple.com/unit/react-build-deploy-github-pages/ 만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 codingapple.com https://velog.io/@byjihye/react-github-pageshttps://codingapple.com/unit/react-build-deploy-github-pages/ [React] 프로젝트 GitHub Pages 배포하기 React 프로젝..
import React from 'react'; import styled, { css } from 'styled-components'; const sizes = { desktop: 1024, tablet: 768 }; // 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다. // 참고: https://www.styled-components.com/docs/advanced#media-templates const media = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` @media (max-width: ${sizes[label] / 16}em) { ${css(...args)}; } `; ret..
import React, { useState } from "react"; const App = () => { // 초기 데이터 객체 리스트 const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); //입력한 텍스트 state const [InputText, setInputText] = useState(""); //추가 할 데이터 객체의 Id state const [nextId, setNextId] = useState(names.length+1); // 리스트 길이 +1로 설정 //이벤트 객체의 입력한 텍스트 감지 함수 cons..
