배열을 다룰 때 유용한 Javascript 함수들을 알아보겠습니다. 대표적으로 Map, Filter, reduce, find, find index 와 같은 함수들이 있습니다. (1) Map Map 은 배열의 각 데이터들에 명령이나 반영할 내용들을 매핑시켜 적용하고자 할 때 사용하는 함수입니다. Map() 함수 내부에는 동작되는 내부 함수가 존재하므로 Map 에 반영할 내용들을 넣기만 하면 모든 데이터에 동일하게 적용되게 됩니다. 예시 var numbers = [3, 56, 2, 48, 5]; function double(x){ return x * 2; } console.log(numbers.map(double)); 배열의 데이터가 존재하고, 매개변수를 두 배로 만들어주는 함수를 만들어 map을 통해 모든..

Spring 에서 페이지로 이동할 때 여러가지 방법이 있습니다. 내부 페이지 뿐만 아니라 외부의 Url 주소를 통해 이동할 수도 있습니다. 그 중 몇 가지를 간단하게 알아보겠습니다. @Controller public class ExRedirectController { // return string @GetMapping("/ex_redirect1") public String exRedirect1() { return "redirect:http://www.naver.com"; } // return ModelAndView @GetMapping("/ex_redirect2") public ModelAndView exRedirect2() { String projectUrl = "redirect:http://www.n..

이전까지는 동일한 태그에 각자 다른 정보를 넣으려면 Props를 일일히 다르게 지정해서 컴포넌트를 호출해야 했습니다. 규모가 작은 프로젝트 같은 경우에는 괜찮겠지만 이외의 프로젝트 규모에 따라서 기존의 방식대로 하는 것은 비효율적이라고 볼 수 있습니다. 이를 보완하기 위해 Mapping 시키는 다른 방법이 있으므로 이번에는 그 방법에 대해서 알아보겠습니다. 기존의 방식 import React from "react"; import Card from "./Card"; import contacts from "../contacts"; function App() { return ( My Contacts ); } export default App; Card 컴포넌트를 수동으로 반복 호출하는 다소 비효율적인 방식이라..

이번에는 React App을 좀 더 작은 구성 요소로 분리하면서 개발자 도구(DevTools)로 확인하는 과정에 대해서 알아보겠습니다. 그 과정에서 반응하는 개발자 도구(DevTools) 사용법을 배워서 이 모든 구성 요소를 디버그하고 관리할 수 있습니다. 예시 코드 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); contacts.js const contacts = [ { id: 1, name: "Beyonce", imgURL: "https://blackhistorywall..

[Reason] React Router Dom 에 Link를 import 받아 사용할 때 발생된 에러이다. 나는 Link 태그로 감싼 Button 태그를 누르면 Route 태그에 지정해준 Path로 넘어가게끔 만들었었는데 넘어가지 않고 해당 에러가 발생하였다. 알고보니, Link 태그를 사용하려면 Route 에 감싸져있어야 하는 것이였는데 나는 LInk 태그를 독단적으로 빼서 다른 곳에 적용시키고 있었다. [Solution] 해결 전 // MainPage 컴포넌트 function MainPage() { return ( 3D immersive design for Web3.0 Metaverse the world first virtual experience inside realistic immersive me..

[Reason] React 에서 Router를 사용할 때는 Routes 안에 Route 요소가 들어가야 하고 Route에는 element 속성을 통해 컴포넌트를 넣거나 해주어야 하는데 그렇지 않았다. 1차적으로 Routes 요소 자체를 빼먹어서 발생되었다가 Route 내에 element 속성을 넣지않고 바로 이런식으로 컴포넌트를 넣어버려서 발생된 에러였다. [Solution] 해결 전 function App() { return ( ); } 해결 후 function App() { return ( ); } 이런식으로 Route 요소 안에 element 속성을 사용하여 컴포넌트를 넣어주어 해결하면 된다.