전체 글

목표 Front-End로는React, Back-End로는 Spring Boot를 쓰려고한다. 이 때, 둘 사이에서 데이터를 주고 받을 수 있도록 연동시킨다. 연동 과정 1. 스프링 부트 프로젝트 생성 Spring Web Dependency가 추가된 상태로 이클립스로 File->New->Spring Starter Project를 실행한다. 자신의 취향대로 설정하면 된다. 나는 Maven에 Java11을 선택하겠다. Spring Web을 추가하고 Finish 프로젝트를 실행시키고 위와 같은 화면이 콘솔창에 출력되면 프로젝트가 성공적으로 생성된 것이다. localhost:8080 에 접속하면 위와 같은 화면이 출력된다. 다른 화면이 출력되길 원한다면 src->main에 index.html 파일을 생성해주면 된..

리액트와 스프링 연동을 위해 리액트 설정을 하는 와중, create-react-app의 종속 설정을 꺼내기 위해 npm run eject 명령어를 실행했는데 아래와 같은 오류가 발생했다. git과 관련된 오류로 현재 폴더를 커밋해줘야 문제가 해결된다. 커밋 방법은 아래와 같다. git add . git commit -m "쓰고싶은 내용" 전과 달리 성공적으로 npm run eject 명령어가 실행되는 것을 확인할 수 있다.

https://www.acmicpc.net/problem/19598 19598번: 최소 회의실 개수 서준이는 아빠로부터 N개의 회의를 모두 진행할 수 있는 최소 회의실 개수를 구하라는 미션을 받았다. 각 회의는 시작 시간과 끝나는 시간이 주어지고 한 회의실에서 동시에 두 개 이상의 회의 www.acmicpc.net 풀이 사용한 알고리즘 : 라인 스위핑 풀이전략 1. 시작점과 끝점에 대한 튜플 배열을 별개로 생성한다. 시작점의 튜플은 (시작점 위치, 1) 끝점의 튜플은 (끝점 위치, -1)로 만든다. 위 문제에서 주어진 예제 입력 1번을 예로들면 아래와 같다. 시작점 배열 = [ [0,1], [15,1], [5,1] ] 끝점 배열 = [ [40,-1], [30,-1], [10,-1] ] 2. 시작점 배열과..

목표 서버에 새로고침 없이 데이터를 주고 받을 수 있는 브라우저 기능을 ajax라고 한다. ajax로 get/post를 요청하는 방법 중 axios 라이브러리를 통한 요청방법에 대해 알아본다. 기본설정 및 사용법 1. 라이브러리 설치 npm install axios 터미널에서 프로젝트 폴더 경로로 이동한 후, 위 명령어를 입력해 라이브러리를 설치한다. 2. axios import 및 기본 사용법 import axios from 'axios' function App(){ return ( { axios.get('서버URL/데이터이름.json') .then((result)=>{ console.log(success) }) .catch(()=>{ console.log('fail') }) }}>버튼 ) } axio..

컴포넌트 Lifecycle 컴포넌트는 위 그림에서처럼 생성될 떄, 업데이트 할 때, 제거할 때 3가지로 Lifecycle이 나뉜다. 과거 클래스로 컴포넌트를 만들었을 때는 아래와 같은 방법으로 lifecycle마다 다른 동작을 수행토록 했다. class Modal extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 } } 하지만 현재는 class보다 function올 통해 컴포넌트를 생성하기 떄문에 function에서의 ..

목표 CSS를 사용하지 않고도 자바스크립트 파일 내부에서 스타일을 적용시켜본다. 기본설정 1. 터미널을 연 뒤 프로젝트 폴더 경로로 이동하고 아래 명령어를 입력한다. npm install styled-components 2. 사용할 컴포넌트 파일 위에 styled import import styled from 'styled-components' 사용 방법 1. styled.적용시킬태그`` let YellowBtn = styled.button` background : ${props => props.bg}; color : ${props => props.bg =='blue'?'white':'black'}; padding : 10px; ` let Box = styled.div` background : grey;..

find, findIndex, filter 함수 let data=[ { id : 2, title : "iPhone 14 Pro", content : "Born in States", price : 12000000 }, { id : 1, title : "Apple watch", content : "Born in Seoul", price : 11000000 }, { id : 0, title : "iPad", content : "Born in the States", price : 13000000 } ] 라는 데이터가 있을 때, 각 함수를 적용시켜보겠다. 1. find 특정 조건에 맞는 값들 중 가장 먼저 나오는 값을 반환해준다. var returnValue = data.find(function(val){ ret..

목표 URL로 부터 파라미터 값을 받으면, 파라미터에 따라 대응되는 페이지를 하나의 라우터로 다중 생성하고 파라미터에 따라 각자 다른 페이지를 출력하도록 한다. 라우터로 다중 페이지 만들기 '/:id' 를 붙임으로서 /detail 페이지 뒤에 어떤 파라미터를 입력했을 때, 이 URL에 따라 기존에 작성해둔 페이지가 없더라도 404error가 발생하지않고 페이지가 정상적으로 출력된다. 예로 localhost:3000/detail/0 , localhost:3000/detail/1 , localhost:3000/detail/2, ... localhost:3000/detail/999999 모두 기존에 생성해둔 페이지가 없더라도 404 error 가 발생하지 않고 페이지가 출력된다.(물론 해당 페이지에서 파라미터..

https://www.acmicpc.net/problem/17266 17266번: 어두운 굴다리 인하대학교 후문 뒤쪽에는 어두운 굴다리가 있다. 겁쟁이 상빈이는 길이 조금이라도 어둡다면 가지 않는다. 따라서 굴다리로 가면 최단거리로 집까지 갈수 있지만, 굴다리는 어둡기 때문에 빙 www.acmicpc.net 풀이 사용한 알고리즘 : 라인 스위핑 풀이 전략 1. 맨처음 시작 위치인 0과 첫 가로등 사이의 거리를 구한다. 2. 각 각로등 사이의 거리를 구하되 짝수 거리만큼 떨어져 있으면 나누기 2한 몫을, 홀수 거리만큼 떨어져 있으면 나누기 2한 몫에 1을 더한 값들 중 가장 큰 값을 저장한다. 3. 마지막 가로등의 위치와 굴다리 맨 마지막 위치 사이의 거리를 구한다. 4. 1~3번에서 구한 값들 중 가장 ..

목표 리액트 라우터의 기능들 중 navigate, nested routes, outlet 사용법을 익힌다. 기본 설정 import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom' App.js 상단에 위 내용을 import한다. 페이지 이동기능 useNavigate {navigate('/')}}>Home {navigate('/detail')}}>Detail {navigate(-1)}}>Back / 는 홈으로 이동, -1은 이전 페이지로 이동이다. 만약 파라미터로 2가 들어간다면 다음 2 페이지로 이동을 의미한다. 404 페이지 만들기 Route 태그들 중 가장 밑에 사용해야 하는 태그이다. 윗 태그들 중 알맞은 url이 없는 주소를 사..