리액트 props 여러개 보내기

현재 내상황은 .. 최대값과 data 객체 안에 있는 데이터를 하나씩 보내고 싶었다. 이때까지 props는 한개밖에 안보내봐서 여러개는 어떻게 보내야할지 고민했는데, 그냥 두개 쓰면 되더라!

헤로쿠 git clone

왜 이글을 썼나? 현재 나의 문제점을 깃을 헤로쿠에 연결해 버리면, 나의 레포에 올릴 수가 없어서 노트북으로 작업할때 프로젝트를 다운로드 받을 수가 없었다. 이를 해결하기위해 만약 내가 노트북에서 작업을 하게 된다면 heroku git:clone -a passion-timer 를 통해서 헤로쿠에 배포한 프로젝트를 다운로드 받을 수 있었다.

자바스크립트 화살표 함수 그냥 함수 차이

공부한 블로그글 을 정리한 내용입니다. https://yceffort.kr/2020/05/difference-between-function-and-arrow Home yceffort yceffort.kr https://hhyemi.github.io/2021/06/09/arrow.html JavaScript - 화살표 함수와 일반 함수의 차이 - CODE:H 화살표 함수(Arrow Function)란 화살표함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한표현으로 간단하게 사용가능하다. function fun() { // 일반함수 ... } const arrFun = () => { // hhyemi.github.io this console.log(this === window) //..

자바스크립트 call, bind

제로초님 블로그 자료를 공부한 내용입니다. https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd (JavaScript) 함수의 메소드와 arguments - call, apply, bind 안녕하세요. 이번 시간에는 함수의 메소드에 대해 알아보겠습니다. 초보 강좌에서 숫자, 배열, 문자열에 대한 메소드에 대해서만 알려드렸죠. 함수에도 기본 메소드가 있습니다. 하지만 초보 강 www.zerocho.com call var example = function (a, b, c) { console.log(a + b + c) return a + b + c; }; example(1, 2, 3); // 6 example.call(null, 2..

미들웨어

미들웨어를 사용할때 서버쪽 폴더이름으로 바꿔줘야한다! 또 날 괴롭힌 버그 기존에는 "/" 으로 설정 되어 있던 것을 "/*"으로 고쳐주었다. 세상엔 천사들이 많다. 오픈채팅방에서 한분이 엄청 도와주셨다.. 아직은 다 이해하지 못했지만 spa csr ssr 을 공부하고 다시 꼭 보자. 복습이 곧 힘이다. https://proglish.tistory.com/216 SSR과 CSR의 차이 CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다. 따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요 proglish.tistory.com

vscode 터미널 powershell을 git bash로 바꾸는 방법

나는 하이퍼 터미널을 주로 사용했는데 언젠가 부터 vscode 터미널을 사용하는게 더 편해졌다. 그래서 근데 powerShell에서는 npm run build && npm run start 와 같이 한번에 여러가지 명령어를 수행할 수 없었다. 그래서 이김에 vscode powerShell을 git bash로 바꿨다. 이제 바꾸는 방법을 소개하겠다. terminal.integrated.shell.window 입력 Git Bash 선택 끝!

공부시간 측정 어플리케이션

Teachable Machine https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle.com Teachable Machine은 구글에서 머신러닝 모델을 쉽고 빠르고 간단하게 만들 수 있도록 제작된 웹 기반 도구 입니다. https://www.youtube.com/watch?v=USQGT..

React NodeJs proxy

리액트의 프론트에서 백엔드의 정보를 가지고 오고 싶었다. proxy를 이렇게 package.json에 적용하면 된다고 한다. 하지만.... 나는 안된다. 나는 왜 저주 받았을까. 암만 해도 안되어서 차선책으로 middleware를 들고 왔다. 프론트 단에 src 아래에 setupProxy.js 파일을 만들어준다. 다음 코드를 붙여넣기한다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'http://localhost:5000/', changeOrigin: true }) ) }; 그리고..

react code snippet

https://react.vlpt.us/basic/27-useful-tools.html 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet 이번에는 리액트 개발을 할 때 사용하면 편리한 도구들에 대하여 알아보도록 하겠습니다. 이번에 다루게 되는 도구들은 모두 react.vlpt.us 템플릿 코드를 저장해서 귀찮게 안쳐도 되게끔 만든다. 나같은 경우에는 rfc를 치면된다. className을 귀찮게 치지 않아도 되게끔 해준다. 이미지를 가져오는 방법에는 여러가지 방법이 있는데 나는 import를 하는 방법을 사용했다. 여기서 주의할점은 이미지..

리액트 클래스형 컴포넌트 함수형 컴포넌트

https://codechasseur.tistory.com/98 [React] 클래스형 컴포넌트와 함수형 컴포넌트를 알아보자 - (1) props, state 해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 생활코딩을 통해 리액트의 기초를 배우고, 더 심화된 벨로퍼트님의 강의를 듣는 과정에서 클 codechasseur.tistory.com