전체 글 338

Router 기초

1. 리액트 라우터 DOM2. 라우터 설치 및 실행3. Link to4. HashRouter5. NavLink6. useParams 전체코드더보기import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import reportWebVitals from './reportWebVitals';import { HashRouter, Routes, Route, NavLink, useParams } from 'react-router-dom';var contents = [  {id: 1, title: "html", description: "html is..."},  {id: 2, title: "js", descriptio..

React 기초

React를 거의 몇 달만에 다시 만지면서 기초부터 다시 해보자는 생각에 기록하게 되었다. 순서1. 태그의 대소문자2. 사용자 정의 태그(컴포넌트)의 위치3. prop(속성) - props(속성들)3.1 속성 배열 사용4. 초기화하지 않은 함수의 일반형과 람다형5. prop으로 이벤트 전달6. state7. useState8. useState29. Create10. Update11. delete 전체 코드더보기import './App.css';import { useState } from 'react';//App================================================================================function App() {  // 변수  let c..

20240519_퍼센트 인코딩

이전 미세먼지 API를 사용했을 때 URL을 생성하기 위해서는 지역 이름을 퍼센트 인코딩해야 하는 경우가 발생했다. 왜 이런 작업이 발생하는지 확인하고 기능을 구현하는 시간을 가졌다.  1. 퍼센트 인코딩- 글자를 url에서 인식할 수 있는 아스키코드로 변환하는 것- %OO이라는 형태를 가진다. 2. 퍼센트 인코딩을 하는 이유- 인터넷을 통해 전송할 수 있는 문자는 오직 ASCII 문자이기 때문--> 안 그러면 수만 개의 언어를 대응하는 비효율성이 발생한다- 한글을 변환하는 규칙은 UTF-8을 따른다.- 한글은 문자 1개 당 3바이트로 인코딩  3. 예시 4. 퍼센트 인코딩 하기자바에서 자체적으로 기능을 지원해준다. A. jsconsole.log(`[경기] 글자의 퍼센트 인코딩: ${encodeURICo..

20240519_여러 기능 구현(아이디찾기/비밀번호변경/이메일변경/회원탈퇴 등)

1. 아이디 찾기 더보기컨트롤러@PostMapping("/FindUsernameByEmail")public ModelAndView FindUsernameByEmail(String email) { String username = memberService.FindUsernameByEmail(email); ModelAndView view = new ModelAndView(); view.addObject("username", username); view.setViewName("Member/ViewUsername"); return view;} 서비스//유저 아이디 찾기public String FindUsernameByEmail(String email) { Member..

20240518_에러페이지

아주 간단하고 사소한 기능이다.그런데 MSA랑 합쳐지니 이런 금쪽이도 따로 없다... 원래 설계는 이러하다1. 사이트는 공통된 에러페이지를 써야지2. 에러페이지는 core 모듈에 넣어도 되지 않을까?3. 안 되네? 우선 Core 모듈은 가동되지 않고 사용하고 있기 때문에 jsp를 못 불러오는 것 같다...(사실 잘 모르겠다)msa와 spring boot 전반에 대한 지식과 이해를 해야 알 수 있는 부분인데 아직 공부가 부족하다.Thymeleaf로 구현하려고 했으나 왜인지 이미지가 절대로 불러와지지 않는다. weather 모듈의 에러가 core 모듈의 Thymeleaf로 연결되긴 하는데 이미지가 아예 인식이 되질 않는다... 결국 주먹구구식 설계가 되고 말았다.1. 공통된 에러 페이지를 연결하는 컨트롤러와..

20240518_로그인 실패 ajax + 위치 자동 출력&위치에 따른 지역 자동 출력

아주 간단하고 사소한 기능이다.Spring Security Passencoder의 matches에 jpa가 더해졌다는 것 빼고는 팀프로젝트 당시와 동일 더보기컨트롤러@PostMapping("/loginAjax")public boolean loginAjax(String username, String password) { String encodedPassword = memberRestService.findPasswordByUsername(username); if(encodedPassword == null || encodedPassword.isEmpty()) { return false; } return passwordEncoder.matches(password, encoded..

20240518_GPT 답변 구현하기(MSA(3))

더보기GptControllerpackage org.gpt.ask;import com.fasterxml.jackson.core.JsonProcessingException;import lombok.RequiredArgsConstructor;import lombok.extern.slf4j.Slf4j;import org.gpt.GptanswervoDto;import org.gpt.saveAnswer.SaveAnswerService;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import java.util.List;@RequiredArgsConstructor@Slf4j@Controll..

20240518_MSA에서 Kafka 설정하기

다만 만들다 보니 아직은 기능이 필요 없어, configuration만 만들어보았다.  전체코드 build.gradle//Kafkaimplementation 'org.springframework.kafka:spring-kafka' 이하 core 모듈applciation.properties# Kafkaspring.kafka.bootstrap-servers=localhost:9092spring.kafka.consumer.group-id=consumer-group-1spring.kafka.consumer.auto-offset-reset=earliestspring.kafka.consumer.key-deserializer=org.apache.kafka.common.serialization.StringDeseria..

20240517_MSA(2)

1에서는 하위모듈 프론트가 다른 하위 모듈 백엔드와 연결했다. (좀 이상하긴 하지만)2에서는 하위모듈 백에서 다른 하위 모듈 백엔드와 연결했다.계속 안 돼서 Kafka로 처리할까 하다가 결국에는 됐다.  문제는 Member 모듈 백엔드에서 Weather 모듈 백엔드로 데이터가 안 넘어가는 문제였다. 원인은 2가지였다.1. 데이터를 넘길 때는 JSON / XML로 넘겨야 하는데 WeatherareavoDTO로 넘기려고 했다는 것  @PostMapping("/viewGptAnswer") public String viewGptAnswer(WeatherareavoDTO weatherareavoDTO, Integer userid) throws JsonProcessingException { Str..

20240517_Kafka 사용하기

Zookeeper 설치 https://www.apache.org/dyn/closer.cgi/zookeeper/ We suggest the following location for your download: https://dlcdn.apache.org/zookeeper/ Alternate download locations are" data-og-title="Apache Download Mirrors" data-og-type="website" data-ke-align="alignCenter" data-ke-type="opengraph"> Apache Download Mirrors We suggest the following location for your download: https://dlcdn.apach..