[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의 차이
·
Spring
Spring 프로젝트를 생성하는데 빌드 도구를 Maven으로 할지, Gradle로 할 지 선택을 해야되는데 이 두개의 차이가 뭔지 궁금해서 찾아보고 정리하기로 했다 1. 빌드(Build)란? 소스코드 및 프로젝트에 쓰인 각각의 파일 및 자원 등을 JVM이나 WAS가 인식할 수 있는 구조로 패키징하는 과정 및 결과물을 말한다. 2. 빌드 관리 도구(Build Tool) 란? 프로젝트 생성, 테스트 빌드, 배포 등의 작업을 위한 전용 프로그램 소스코드를 실행 가능한 어플리케이션으로 만들어주는 도구이다 계속해서 늘어나는 라이브러리, 프로젝트 진행 중 라이브러리 버전 동기화의 어려움을 해소해준다. 즉 빌드 과정을 자동화하여 관리해주는 역할을 한다! 특징 빌드 도구의 특징은 개발자가 스크립트를 작성하여 다양한 작..
스프링 빈(Spring Bean)이란?
·
Spring
기존의 Java Programming 에서는 Class를 생성하고 new를 입력하여 원하는 객체를 직접 생성한 후에 사용했다. 하지만 Spring에서는 직접 new를 이용하여 생성한 객체가 아니라, Spring에 의해 관리되는 자바 객체를 사용한다. 이렇게 Spring에 의하여 생성되고 관리되는 자바 객체를 빈(Bean)이라고 한다. Spring Framework에서는 Spring Bean을 얻기 위해 ApplicationContext.getBean() 와 같은 메소드를 사용하여 Spring 에서 직접 자바 객체를 얻어서 사용한다. 빈(Bean) 재사용 가능한 소프트웨어 컴포넌트이며, 스프링 컨테이너는 하나 이상의 빈(Bean)을 관리한다. 빈(Bean)은 인스턴스화된 객체를 의미하며, @Bean 어노테..
[JAVA] 자바11 설치 / 환경변수 설정 (Window11)
·
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 만들기
·
Spring
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..
[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..
[Node.js] 블로킹 / 논블로킹
·
Back/NestJS
이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다 작업에는 동시에 실행될 수 있는 작업과 동시에 실행될수 없는 작업이 있는데 기본적으로 자바스크립트 코드는 동시에 실행될 수 없다 하지만 파일 시스템 접근이나 네트워크를 통한 입출력 작업은 동시에 처리될 수 있다 블로킹이란 이전 작업이 끝나야만 다음 작업을 수행하는 것을 의미하고 논블로킹은 이전 작업이 완료될 때 까지 기다리지 않고 다음 작업을 수행함을 뜻한다 논브로킹 방식이 더 짧은 시간안에 같은 작업을 처리할 수 있다(모든 작업이 동시에 처리될 수 있는 작업이라는 전제) setTime(콜백, 0)은 코드를 논블로킹으로 만들기 위해 사용하는 기법 중 하나이다 아무리 논블로킹 방식으로 코드를 작성하더라도 코드가 전부 내가 작성한 것이..