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

https://supawer0728.github.io/2018/03/30/spring-websocket/ Spring WebSocket 소개 서론Web Browser에서 Request를 보내면 Server는 Response를 준다. HTTP 통신의 기본적인 동작 방식이다. 하지만 Server에서 Client로 특정 동작을 알려야 하는 상황도 있다. 예를 들어 Browser로 Facebook에 접속해 supawer0728.github.io WebSocket이란 HTTP 환경에서 전이중 통신(full duplex, 2-way communication)을 지원하기 위한 프로토콜로, RFC 6455에 정의되어 있다. HTTP 프로토콜에서 Handshaking을 완료한 후, HTTP로 동작을 하지만, HTTP와는..

https://kamsi76.tistory.com/entry/Spring-RequestParam%EC%9C%BC%EB%A1%9C-%EB%B0%B0%EC%97%B4-%EC%B2%98%EB%A6%AC [Spring] RequestParam으로 배열 처리 - ajax로 보낼 경우@RequestParam(value="arr[]" String[] arr) - get 또는 post로 보낼 경우@RequestParam(value="arr" String[] arr) kamsi76.tistory.com 뷰에서 여러 인풋을 만들어두고 그 인풋을 배열로 받아 백단에서 메일을 전송하려 한다 이를 배열로 받으려면 @RequestMapping(value = "/joinus/emailAuth", method = RequestMet..

기존에 리액트를 사용하면서 컴포넌트가 많아짐에 따라 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..

SMTP를 이용한 메일 실습 중에 바보같이 온라인에 이메일과 비밀번호를 기재하는 바람에 해킹을 당했었다... 그 때 해킹범이 내 메일로 피싱 메일을 4000여통 보냈는데 오늘 해당 이메일로 SMTP 실습을 하려 하니 구글링을 해도 딱히 결과가 많지 않은 에러가 나왔다. com.sun.mail.smtp.SMTPSenderFailedException: 550 5.7.0 Restricted by spam policy 희안한 콘솔창... 혹시 해서 다른 이메일로 해보니 전송이 잘 되길래 네이버에서 직접 메일 작성을 해보니 예외가 발생한 해당 이메일은 발신 제한이 걸린 상태였다;; 별 일이 다 있다...

javamail의 mailSender를 설정해주는 중에 에러가 났다. root-context에도 pom에도 문제가 없어 보이는데, 자바 클래스 파일에서 import를 할 수가 없었다. servlet-context.xml에 이미 등록된 bean에 대해서만 Annotation을 활성화한다. 어딘가에 bean을 등록해놓으면 @Autowired와 @Qualifier Annotation을 해석해서 가져다 쓰겠다는 의미이다. @Autowired와 @Qualifier 두 가지만 해결한다. 따라서 위 태그를 사용하더라도 xml에 bean을 반드시 선언해야 한다.

useNavigate훅 react-route-dom styled-components useEffect ... return... setTimeout * react-route-dom 기본적으로 웹페이지는 내부에서 url을 요청할 때 페이지를 새로고침한다. 이는 화면 모든 부분을 리로드하므로 시간이 오래 걸림 SPA는 변경된 컴포넌트만 라우팅하여 부분적으로 렌더링해야 하므로 이를 위해 react-route-dom을 사용한다. npm install react-route-dom@6 6버전을 깔아줌 import { BrowserRouter, Route, Switch, Link } from "react-router-dom"; js에서 상단 내용을 import해줌 react-router-dom의 라우터는 와 두 가지가..

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로 주는 것을 리액트는 지양한다고..