여러가지 여러가지

전체 글

• 6월 29일 목요일 TIL 회고록

  카테고리 없음 2023. 6. 29. 22:52

  어제 TIL을 쓰려했는데 티스토리 블로그 및 사이트를 들어가면 Http 400 에러가 나와서 티스토리 서버가 잠시 터진 줄 알았는데.. 오늘도 쓰려하니 똑같이 400에러가 나와서 혹시나 하고 구글링을 해보니 티스토리 쿠키를 지우면 해결된다고 해서 쿠키를 지워봤더니 잘 들어가진다 ㅋㅋㅋ.. 어제는 사이트를 꾸며봤다. 검색창이 맨 밑에 있어서 크롬 확대/축소를 75%까지 내려야 검색창이 보였는데 정말 불편해서 수정했다. 검색창을 위로 올리고 가운데에 정렬했다. 지도 및 스카이뷰도 오른쪽으로 옮겼다. 위로 올릴때는 비교적 쉬웠는데 가운데로 옮기려고 참 애먹었다.. 프론트는 오랜만에 만져봐서.. display: flex, justify-content: center 를 사용해서 가운데로 옮겼다. 카카오 지도도 정..

  Read More
• 6월 27일 화요일 TIL 회고록

  카테고리 없음 2023. 6. 27. 23:45

  홈페이지 만들기 키워드로 장소 검색하기 카카오 Map API를 사용해서 키워드로 장소를 검색하면 검색결과를 마커로 표시하게 만들었다. 키워드 : 검색하기 키워드를 검색할 수 있는 검색창을 만들었다. Maps API 샘플에는 키워드 부분에 value값을 넣지만 나는 넣지 않았다. (사이트를 들어가면 자동으로 검색되지 않게 하기위해) 마커를 담을 배열을 만들고 장소 검색 객체를 생성했다. // 마커를 담을 배열입니다 var markers = []; // 장소 검색 객체를 생성합니다 var ps = new kakao.maps.services.Places(); 그 후 키워드 검색을 요청하는 함수인 searchPlaces()를 만들었다. ps.keywordSearch에서 (keyword + '오락실')을 붙였는데..

  Read More
• 6월 26일 월요일 TIL 회고록

  카테고리 없음 2023. 6. 27. 00:15

  메인페이지 꾸미기 GeoLocation으로 마커 표시하기 HTML5 GeoLocation을 이용해 접속위치를 얻어오고 접속위치에 마커와 인포윈도우를 표시한다. 브라우저 호환성은 다음과 같다. (https 환경에서만 GeoLocation을 지원한다.) 전체 코드 var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 10 // 지도의 확대 레벨 }; var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 // HTML5의 ge..

  Read More
• 6월 23일 금요일 TIL 회고록

  카테고리 없음 2023. 6. 24. 00:20

  홈페이지 만들기 어제 사용하던 로그인 페이지인데 문제가 있어서... 회원가입/로그인 페이지에 각각 id를 부여해야하는데 이 로그인 페이지 html은 로그인과 Sign up 버튼이 통일되있어서 어떻게 만들어야할지 모르겠어서 로그인 페이지를 바꿨다.. https://codepen.io/technext/pen/WNpWeWw animated form ... codepen.io 초록초록한 로그인 화면으로 수정했다. 로그인 화면 회원가입 화면 로그인 및 회원가입 기능을 내 입맛대로 수정해주었다. 어제랑 같이 Postman을 사용해서 회원가입 / 로그인 기능을 적용해주었다. 회원가입을 할 시 회원가입이 완료되었다는 alert이 나오도록 만들었다. 스프링 및 h2 console에도 값이 잘 들어간 것을 볼 수 있다. ..

  Read More
• 6월 22일 목요일 TIL 회고록

  카테고리 없음 2023. 6. 22. 22:56

  웹 페이지 만들기 https://startbootstrap.com/template/the-big-picture Start Bootstrap startbootstrap.com 위에 사이트에서 템플릿을 다운받았다. 프론트엔드는 1도 몰라서 템플릿을 다운받았다. ㅋㅋㅋ 어제 만든 카카오 맵 API를 그대로 붙여넣었다. 밑에도 조금 꾸며봤다. 그 다음 로그인 및 회원가입 HTML 파일을 만들었다. 이거도 템플릿을 다운받아서 적용시켰다. https://codepen.io/chouaibblgn45/pen/zywPqy Nice Login Screen ☺️☺️☺️☺️ Nice & Clean Login Screen Design . 💪💪💪 I inspired the design from this Link : 👇 https..

  Read More
• 6월 21일 수요일 TIL 회고록

  카테고리 없음 2023. 6. 21. 22:36

  카카오 지도 API를 사용해봤다. 자꾸 지도가 안나와서 정말 고생했다.. 카카오 지도 API 사용방법 먼저 지도 API를 사용하려면 아래 과정이 필요하다. 카카오 개발자사이트에 접속한다. 여기서 시작하기를 누른 후 애플리케이션 추가하기 버튼을 누른다. 앱 이름과 사업자명을 적은 후 저장을 눌러서 애플리케이션을 만든다. 만들어졌으면 클릭해서 각종 설정을 할 수 있는 화면으로 넘어간다. 여기서 앱 키가 있는데, JavaScript 키를 사용 할 것이다. 내 애플리케이션 > 앱 설정 > 플랫폼 > Web 플랫폼 등록 버튼을 눌러서 Web 플랫폼을 등록해준다. http://localhost 등등 사이트 도메인을 적어준 후 저장 버튼을 눌러 저장한다. 이제 HTML, JS를 사용해서 API를 사용해보자. 사용법은..

  Read More
• 6월 20일 화요일 TIL 회고록

  카테고리 없음 2023. 6. 20. 22:31

  지난번에 해결을 못하고 끝낸 리이슈를 하려고 하면 나오는 jwt string argument cannot be null or empty 오류를 해결했다. 먼저 컨트롤러 부분을 보자. UserController.class // 리이슈 @PostMapping("/reissue") public TokenResponse reissue(HttpServletRequest request) { String refreshToken = jwtUtil.resolveRefreshToken(request); return userService.reissue(refreshToken); } HttpServletRequest request를 매개변수로 받고 jwtUtil 클래스에 resolveRefreshToken 메서드를 사용해서 ..

  Read More
• 6월 16일 금요일 TIL 회고록

  카테고리 없음 2023. 6. 16. 22:41

  리프레시 토큰을 만들기 위해 먼저 유튜브를 참고하며 토큰 공부를 했다. https://www.youtube.com/watch?v=9eKIYjcPXp4 https://www.youtube.com/watch?v=TlWzEr4cXfc 두개를 봤다. 먼저 로그인을 하면 액세스 토큰과 리프레시 토큰이 나오도록 코드를 수정했다. UserController.class // 로그인 @PostMapping("/login") public TokenResponse login(@RequestBody LoginRequest loginRequest, HttpServletResponse response) { TokenResponse tokenResponse = userService.login(loginRequest); respon..

  Read More