능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 브라우저 이벤트, 이벤트 핸들러 가령 사용자가 웹사이트 상에서 버튼을 클릭했다면, 그때는 click 이벤트가 발생하고, 우리는 이 click 이벤트가 발생했을 때 실행할 코드를 설정할 수 있다. 이벤트 발생에 따라 실행될 함수를 설정하는 것을, 이벤트 핸들러 를 할당한다고 말한다. 자바스크립트에서 이벤트 핸들러의 할당은 html 태그에 on이벤트 = "실행될함수" 속성을 설정해주는 것으로 할 수 있다. // JS에서 사용하는 방법 Alert Button in JS // React에서 하는 방법 Alert Button in React 코드블럭을 비교 했을 때 React의 특징은 아래와 같다 jsx 형태..

✍️✍️✍️ 위 글은 작성자의 개인적인 경험+일기에 가까우니 가볍게 읽어주시길 바랍니다. JS로만 구현 해 프로덕트를 배포하는 한달짜리 프로젝트가 지난 3일로서 공식적으론 끝이 났지만, 우리 팀은 끝까지 보완하고 싶은 부분을 배포에 반영하기 위해 주말에도 시간내어 작업을 했다. 아래는 배포를 완료한 사이트이다. 오늘의집사 바로가기 오늘의 집사 반려동물 전문 라이프 서비스 오늘의 집사입니다. todayzipsa.netlify.app 팀 레포지토리 바로가기 GitHub - today-zipsa/TodayZipsa Contribute to today-zipsa/TodayZipsa development by creating an account on GitHub. github.com 우리팀은 깃허브에서 제공하는 ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 리액트 컴포넌트에는 Life Cycle(생명주기)라는 것이 있다. 컴포넌트가 표시되고 사라지는 순간까지를 나타낸 표현 인데, react에서 사용할 시점은 크게 mout → update → unmount로 나뉜다. 0. mount(컴포넌트가 표시될 때) useEffect(컴포넌트가 표시될 때 실행할 함수, [빈 대괄호]); 1. update (컴포넌트 내부 요소가 업데이트될 때) useEffect(요소들이 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수/State]); 2. unmount (컴포넌트가 사라질 때) useEffect(() => {return () => 컴포넌트가 사라질 때 실행..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 프로젝트 생성 yarn create vite 프로젝트이름 --template react 1. 모듈 설치 및 실행 yarn ↓ yarn dev 2. React 의 변수와 상태 (props, state) 최종적으로 보여주는 페이지인 app.jsx에서 css 초기화 만들어 놓고 진행하기 import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot(document.getElementById('root')).render( , ) 2 - 1. props 비구조화 할당 props..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 협업에서 소스코드 관리를 위해 가장 필요하고 중요한 git과 github. 생각보다 제대로 초기 세팅을 해두지 않으면 실수를 했을 때 꼬인 내용을 풀고 헤매느라고 git과 github로만 2~3시간을 허비 할 수도 있다. 프로젝트를 포크뜨고 난 후, 내 작업을 편하게 push하고 pr하기 위해 origin인지, upstream인지에 따른 remote주소 변경 및 추가에 대한 내용을 적어두려 한다. 0. 기존 remote origin 주소를 변경해보기 가령 배포용 프로젝트 레포, 이름은 (build-product)가 있고, 그 레포를 내가 포크 떠와서 작업 푸시는 develop을 기준으로 한다고 가정해보자...