[React] 동기 / 비동기 통신
·
Front/React
오늘은 동기 비동기 통신에 대해 공부했다 간단하게 동기 통신은 서버 컴퓨터가 작업이 끝날 때 까지 기다리는 통신이고 비동기 통신은 안기다리는 건데 비동기 통신은 요청(request)들이 서로 기다릴 필요가 없을 대 사용한다. 비동기 통신이 더 효율적이며 동기 통신은 필요할 때 사용하면 된다. JavaScript는 기본적으로 동기적으로 작동하지만, 최신 라이브러리(설치해서 쓰는 애들)들은 기본적으로 비동기로 작동한다. (비동기가 더 효율적이기 때문에) VS code에서 동기 / 비동기 통신 사용하기 실습을 위해 아래 페이지의 API를 사용할 것이다 https://koreanjson.com/ Korean JSON { Korean JSON } Super simple JSON API in Korean. Requ..
[Spring] 빌드 관리 도구 : Maven과 Gradle의 차이
·
Back/Spring(Springboot)
Spring 프로젝트를 생성하는데 빌드 도구를 Maven으로 할지, Gradle로 할 지 선택을 해야되는데 이 두개의 차이가 뭔지 궁금해서 찾아보고 정리하기로 했다 1. 빌드(Build)란? 소스코드 및 프로젝트에 쓰인 각각의 파일 및 자원 등을 JVM이나 WAS가 인식할 수 있는 구조로 패키징하는 과정 및 결과물을 말한다. 2. 빌드 관리 도구(Build Tool) 란? 프로젝트 생성, 테스트 빌드, 배포 등의 작업을 위한 전용 프로그램 소스코드를 실행 가능한 어플리케이션으로 만들어주는 도구이다 계속해서 늘어나는 라이브러리, 프로젝트 진행 중 라이브러리 버전 동기화의 어려움을 해소해준다. 즉 빌드 과정을 자동화하여 관리해주는 역할을 한다! 특징 빌드 도구의 특징은 개발자가 스크립트를 작성하여 다양한 작..
스프링 빈(Spring Bean)이란?
·
Back/Spring(Springboot)
기존의 Java Programming 에서는 Class를 생성하고 new를 입력하여 원하는 객체를 직접 생성한 후에 사용했다. 하지만 Spring에서는 직접 new를 이용하여 생성한 객체가 아니라, Spring에 의해 관리되는 자바 객체를 사용한다. 이렇게 Spring에 의하여 생성되고 관리되는 자바 객체를 빈(Bean)이라고 한다. Spring Framework에서는 Spring Bean을 얻기 위해 ApplicationContext.getBean() 와 같은 메소드를 사용하여 Spring 에서 직접 자바 객체를 얻어서 사용한다. 빈(Bean) 재사용 가능한 소프트웨어 컴포넌트이며, 스프링 컨테이너는 하나 이상의 빈(Bean)을 관리한다. 빈(Bean)은 인스턴스화된 객체를 의미하며, @Bean 어노테..
[JAVA] 자바11 설치 / 환경변수 설정 (Window11)
·
Language/Java
1) 자바 11 다운로드 (JAVA SE JDK 설치) https://www.oracle.com/java/technologies/downloads/archive/ Looking for an Older Java Release? Access the historical java release archive that includes JRE and JDK to help developers debug issues in older systems. www.oracle.com SE는 Standard Edition으로 기본 에디션이라는 뜻으로 기본 에디션을 설치해 주면 된다. EE는 Enterprise Edition으로 기업용환경을 구성해주는 에디션이다. 2) 자바 환경변수 설정 이미 자바 8을 설치해 사용하고 있었기 때..
[SpringBoot] 이클립스에서 Test Case 만들기
·
Back/Spring(Springboot)
package hello.hellospring.service; import java.util.List; import java.util.Optional; import hello.hellospring.domain.Member; import hello.hellospring.repository.MemberRepository; import hello.hellospring.repository.MemoryMemberRepository; // 회원 서비스 만들기 public class MemberService { // 회원 레포지토리 private final MemberRepository memberRepository = new MemoryMemberRepository(); // 회원가입 public Long join..
[JSP] scope란?
·
Back/JSP
Application 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 사용 Session 웹 브라우저 별로 변수가 관리되는 경우 사용 웹 브라우저별로 변수를 관리하고자 할 경우 사용한다. 웹 브라우저간의 탭 간에는 세션정보가 공유되기 때문에, 각각의 탭에서는 같은 세션정보를 사용할 수 있다. HttpSession 인터페이스를 구현한 객체를 사용한다. JSP에서는 session 내장 변수를 사용한다. 서블릿에서는 HttpServletRequest의 getSession()메소드를 이용하여 session 객체를 얻는다. 값을 저장할 때는 session 객체의 setAttribute()메소드를 사용한다. 값을 읽어 들일 때는 session 객체의 getAttribu..
[SVN] Subversion
·
Devops/Git & SVN
SVN이란? SVN은 Subversion의 줄임말로 형상관리/소스 관리 툴이다 하나의 서버에서 소스를 쉽고 유용하게 관리할 수 있게 도와주는 툴 프로젝트 소스는 SVN 서버의 Trunk라는 곳에 위치, 자신의 Local에 Trunk의 소스를 다운받아(update) 수정 및 추가 후 다시 업로드(commit)하는 방식 자신만의 소스를 다른 개발자들과 떨어져서 작업하려면 Branch를 만들어 작업 후 자기 자신만 접근하여 개발하며, 완성되면 Merge 기능을 사용하여 Trunk와 소스를 합치면 된다 용어 Repository - 파일들이 저장되는 원격 저장소 Revision - 0부터 1씩 증가하는 유일한 값 - 저장소 내 변경이 발생했을 때 마다 증가한다 - Merge 등을 할 때 기준이 될 수 있다 - 가..
[React] 카카오 지도 구현
·
Front/React
React + JavaScript를 사용해 카카오지도를 구현했다. 전체코드 import React, { useEffect, useState, useMemo } from "react"; import Marker from "../components/Marker"; const { kakao } = window; export default function StudyMap() { // 현재위치 담는 곳 const [location, setLocation] = useState(""); const [map, setMap] = useState(); // 현재위치 세부조정 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; // 현재 위치..
Next.js 리렌더링하면 Styled-Components 적용 안됨
·
Front/React
문제 새로고침을 했더니 'className did not match' 에러가 뜨며 css가 모두 사라져 버리는 현상 발생 이유는 서버에서 받은 해시 + 클래스명과 새로고침 후 클라이언트에서 받은 해시+클래스명이 달라서 발생하는 문제였다. 해결방법 1. 바벨 플러그인 설치 yarn add babel-plugin-styled-components 2. .babelrc설정 파일 생성 후 아래 코드 작성 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 참고 https://velog.io/@hongdol/Next.js-TS-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%8B%9C-Styled-Compo..