23층집

미니 프로젝트를 하게 됐다. 조금 막연하기도 했지만 좋은 기회였던 것 같다! 각자의 방법으로 자신이 좋아하는 햄버거 프랜차이즈를 소개하는 페이지를 만들기로 했다. 코딩하면서 겪었던 난관을... 수시로 메모해놔야 하는데 스프링이면 모를까 자바스크립트는 더더욱 산발적으로 발생하는 오류를 일일이 기록하기가 참 번거로운 것 같다. 앞으로는 습관을 들여야지...😢 리액트 부트스트랩의 Form https://stackoverflow.com/questions/37239799/can-not-submit-form-react-bootstrap Can not submit form react-bootstrap I have the following react-bootstrap component:

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임 서버... 실습에서는 더 편리한 사용을 위해 express를 이용했다 https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/ Node.js 노드 개념 이해하기 자바스크립트 JavaScript 런타임 이벤트 Node.js 노드 개념 이해하기 JavaScript 런타임 - 노드는 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는데 제일 많이 사용된다. 이벤트 기반 이벤트 루프 논블로킹 I/O 싱글 hanamon.kr 리액트 배포 https://gocoder.tistory.com/2190

기존에 리액트를 사용하면서 컴포넌트가 많아짐에 따라 state 관리가 힘들어진다는 걸 느낀 적이 있다. 여러 컴포넌트에서 같이 사용하거나, 부모의 부모 컴포넌트에서 사용되는 state를 물려 받아야 한다면 이를 props로 전달해주는 것은 무척 번거롭다...(예전에 투두메이트 클론코딩을 하다가 집어던진 이유도 이거였다ㅠ) Redux는 전역적으로 state를 관리하게 도와준다. https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/Redux-%EC%A0%95%EB%A6%AC/ Redux 정리 Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일..

https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org class App extends React.Component { render() { return ; } } function Toolbar(props) { // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서 // ThemeButton에 전달해야 합니다. // 앱 안의 모든 버튼이 테마를 알아야 한다면 // 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다. return ( ); } class ThemedButton extends React.Component { rende..

1. {title.map((item, index) => {return {item} {let copy = [...like]; copy[index]++; setLike(copy)}}>👍{like[index]} {day[index]} })} Warning: Each child in a list should have a unique "key" prop. 만약 key 없이 배열을 렌더링한다면, 배열에 1개의 데이터가 더 추가되는 상황이라도 React는 N+1개의 전체 요소를 처음부터 리렌더링한다고 한다. 하지만 key를 지정하면 기존 요소가 바뀌지 않으면 그대로 두고, 새로 생기는 요소만 리렌더링한다고 한다. 따라서 와 같이 key를 넣었다. 찾아보니 array index를 key로 주는 것을 리액트는 지양한다고..

위와 같은 간단한 블로그 예제 좋아요를 눌렀을 때 각 게시글에 따라 좋아요가 각각 올라가게 하라는 과제를 받았다. import { useState } from 'react'; import './App.css'; function App() { let nickName = "kglim"; let [title, setTitle] = useState(['혜화 갈비 맛집', '홍대 라멘', '강남 소주 맛집']); let [like, setLike] = useState([0, 0, 0]); let [day, setDay] = useState(['2월 11일', '8월 18일', '12월 26일']) let [count, setCount] = useState(10); function change(){ setLike(..