분류 전체보기

초기 전체 코드import React, { useState } from "react";import SelectBox from "../SelectBox/SelectBox";import { getIncomeCategories, getSpendingCategories } from "../../Api/api.categories";export default function AccountTable({ categories }) { const [selectedCategory, setSelectedCategory] = useState(""); const [selectedSubCategory, setSelectedSubCategory] = useState(""); const [subCategories, s..

위 회원가입에서 필요한 주소를 입력하기 위해 주소 찾기 api를 끌어왔다.원래 행안부에서 제공하는 주소찾기를 사용하려 했으나다음이 더 간편하다는 말을 듣고 머리를 싸매던 중 옮기게 되었다... 공식 문서 사이트: https://postcode.map.daum.net/guide  1. react-daum-postcode 설치yarn add react-daum-postcode  위 명령어로 설치한 다음 원하는 컴포넌트에서 import하여 사용이 가능하다.import DaumPostCode from "react-daum-postcode";  2. onComplete 메서드 사용onComplete 메서드는 값을 선택했을 때 발생하는 이벤트이다. 아래와 같은 정보를 받아볼 수 있다. 이 중에서 내가 필요한 건 표..

01. 오라클 spring: datasource: driver-class-name: net.sf.log4jdbc.sql.jdbcapi.DriverSpy url: jdbc:log4jdbc:oracle:thin:@오라클 클라우드 경로 username: 사용자 이름 password: 비밀번호   build.gradle에 의존성 주입 runtimeOnly 'com.oracle.database.jdbc:ojdbc8' implementation 'com.oracle.database.security:osdt_cert' implementation 'com.oracle.database.security:oraclepki' implementation 'com.o..

사이드 프로젝트를 시작했는데, 프론트 엔드는 리액트로 만들고 백엔드는 인텔리 제이를 이용한 스프링 부트로 설정했다.따라서 프론트와 백이 완전히 분리되어 두 개의 프로젝트가 되었다.이제 둘을 연동하는 작업을 해보자.  Window서버: Spring Boot v3.2.4언어: Java 17빌드: GradleIDE: IntelliJ Community프론트: React, VS Code   1. 리액트 폴더 내의 package.json 파일 안에 아래 한 줄을 추가한다.내 포트 번호는 따로 바꾸지 않아 8080 그대로이다. 만약 다른 번호라면 바꾸도록 하자. "proxy": "http://localhost:8080",   2. Spring Boot 안에 테스트 컨트롤러 생성하기. @RestControllerpub..

기존 DOM은 한 구석을 바꾸려면 화면 전체를 다시 불러와야 했지만 리액트/뷰는 가상 돔으로 바꾸고자 하는 부분만 건드릴 수 있다.가상 돔은 2개가 있는데, 바뀌기 전 / 후로 나뉘어진다. 라이프사이클: 생명주기. 한 컴포넌트가 나타나고 사라지기까지의 과정 useEffect(() => { }, [ ]) :: {컴포넌트가 처음 실행됐을 때 이러한 것을 실행시켜주세요} useEffect(() => {  action}, [ value1, value2 ]) :: value 변수가 변할 때 useEffect의 action함수를 실행해 주세요 useEffect(() => {  return ( )}, [ value1, value2 ]) :: 컴포넌트가 닫혔을 때 return 안에 있는 것을 실행해 주세요 useEff..

이곳에 많은 예제가 있다. 그 중에서 도넛 차트를 가져와보자. 10 Chart.js example charts to get you started A list of 10 graphs (bar chart, pie, line, etc.) with data set up to render charts that you can copy and paste into your projects tobiasahlin.com 1. CDN 방식으로 chart.js 사용 2. chart 영역 생성 3. 기본 차트 생성 //JavaScript new Chart(document.getElementById("doughnut-chart"), { type: 'doughnut', data: { labels: ["Africa", "Asia",..

1. https://www.data.go.kr/iim/api/selectAPIAcountView.do 를 방문한다. 2. 원하는 데이터 검색 3. 회원가입 및 로그인 후 활용 신청 하기 (목적은 간단하게 웹 사이트에 넣어보고 싶다고만 써도 된다) 4. 그럼 아래의 그림과 같은 인증키를 발급받을 수 있다   5. 인증키가 제대로 발급 되었는지 확인하는 방법 가이드 워드 파일을 열어보면 이런 항목이 보인다. 그럼 서비스키 앞의 '=' 까지 복사한 다음 주소창에 붙여 넣고, 위에서 발급받은 Encoding 일반 인증키를 붙인다성공적으로 발급되었다면 아래와 같은 화면이 보인다  기본 URL: http://apis.data.go.kr/B090041/openapi/service..

보호되어 있는 글입니다.

알림 번호: 알림의 번호로 primary key 알림 보낸 사람: 알림을 보낸 유저 알림 받은 사람: 알림을 받은 유저(알림의 대상이 되는 유저) 리뷰 번호, 게시글 번호, QNA: 어떤 번호를 가진 리뷰 또는 게시글에 알림이 왔는지 나누기 위함 알림 확인 여부: 해당 알림을 확인 했는지, 하지 않았는지 확인 알림이동 주소: 해당 알림이 가리키는 곳으로 이동하는 주소 알림 내용: 알림함에 보이는 내용 쪽지 알림의 경우 쪽지가 왔다는 알림만 존재하며 알림이동 주소는 쪽지함의 주소로 고정하였다. 또한 알림이동 주소는 컨트롤러에 주소의 구조를 저장한 후 js로 댓글 또는 좋아요가 달린 게시글이나 큐앤에이, 리뷰의 번호를 받아와 이동할 수 있도록 했다.

받은 쪽지와 보낸 쪽지는 불러오는 내용과 '답장' 버튼의 유무 정도 차이만 있다. 우선 네비바에 있는 '쪽지함'의 경로는 mypage/message 로 받은 쪽지 목록이 바로 출력되게 만들었으며, 다른 사용자에게 보낸 쪽지의 경우 '보낸 쪽지' 버튼을 클릭할 시에만 활성화되도록 설정했다. 1. JSP, JavaScript 2. Controller 3. Service (DAO) 4. DTO 5. SQL (Mapper) 1. JSP, JavaScript 쪽지 목록 불러오기 받은 쪽지 보낸 쪽지 버튼을 누르게 되면 ready 함수 안에 있는 아래의 JavaScript가 실행된다. JavaScript //받은 쪽지 $("#btn-recv").click(function() { $.ajax({ url: '/mypa..