분류 전체보기

[SpringBoot] 이미지 파일 다운로드

https://ssdragon.tistory.com/99?category=1008700 [Spring] 스프링에서 파일저장하기 https://ssdragon.tistory.com/82 [Spring] IntelliJ 파일 업로드 주의사항 @PostMapping("/filetest") public String addImage2(@RequestParam("Photo") MultipartFile uploadFile, HttpServletRequest request).. ssdragon.tistory.com 파일을 저장했으니 다운로드를 만들어보자. 우선 파일을 어떻게 저장했는지 살펴보자. 저번 게시글에서는 파일을 저장하는 것까지 했었는데 여기서 우리는 경로를 알고 있다. 따라서 이름이 중복되지 않게 저장할 파일..

[스프링시큐리티] Spring Security 5.7 (WebSecurityConfigurerAdapter 에러해결방법)

대학교 과제에서 게시판 만들기가 있어서 회원기능을 Spring Security(스프링 시큐리티)를 적용하여 사용했는데 아래와 같은 방법으로 더이상 사용되지 않는다고 표시됐다. 더 이상 WebSecurityConfigurerAdapter 를 상속받아서 스프링 시큐리티를 설정하지 않는다고 나와있다. 그렇다면 공식 홈페이지에서는 뭐라고 나와있는지 살펴보자. 스프링 공식문서 사이트에서 스프링 시큐리티를 검색해서 만드는 방법을 찾아보면 여기는 WebSecurityConfigurerAdapter를 사용하고 있었다. 그래서 다른 공식문서를 찾아보던 와중에 아래 게시글을 발견하였다. WebSecurityConfigurerAdapter가 없는 스프링 시큐리티라는 제목이다. 스프링 시큐리티 5.7.0-M2 버전부터는 We..

Kotlin(코틀린) - var 와 val

https://kotlinlang.org/docs/basic-syntax.html#variables Basic syntax | Kotlin kotlinlang.org 코틀린을 시작하면 기본적으로 사용하는 타입이 있다. 바로 var 와 val 이다. Variables (변수) variables를 뜻하는 var는 여러 번 값 할당이 가능하다. Values (값) values를 뜻하는 val은 이름 그대로 한 번만 값 할당이 가능하다. 이렇게 외우면 편하지만 공식문서에서는 다음과 같이 정의한다. val은 읽기 전용 지역 변수로 한 번만 값 할당이 가능하다. val a: Int = 1 // 즉시 할당 , immediate assignment val b = 2 // 'Int' 타입 추론하여 넣음 , 'Int' t..

[React] React.memo란?

이것 역시 전 게시글과 마찬가지로 useMemo와 비슷하다. const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ }); 리액트 공식문서에 따르면 다음과 같다. React.memo는 Memoization(메모이제이션) 기법으로 동작하며, 고차 컴포넌트(Higher Order Component, HOC)이다. 컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing) 하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다. 즉, React는 컴포넌트를 재렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. React.memo는 props 변화에만 영향을 ..

[React] useMemo란?

우선 우리는 이것을 왜 쓰려고 하는가?? 분명 리액트가 랜더링 또는 재랜더링 될 때 함수들이 똑같은 동작인데도 연산하여 성능을 잡아먹기 때문이다. 따라서 이러한 리액트 어플리케이션 성능을 최적화하기 위한 방법인 연산 결과 재사용을 알아볼 것이다. 먼저 이런 연산 결과 재사용하는 방법인 useMemo는 Memoization(메모이제이션) 기법을 적용하였다. 🧐 그렇다면 Memoization은 무엇인가? Memoization이란? 한 번 연산해본 결과를 기억해두고, 다시 동일한 입력이 들어오면 기억해둔 데이터를 반환하는 방법이다. 1+1 은 무엇인가? (계산중...) (계산완료) => 2 다시 한번더 1+1은 무엇인가? (전이랑 동일하네? 기억해뒀던거 바로 반환) 2 위 방식처럼 엄청 복잡하거나 성능을 잡아..

[크롬 확장프로그램]React Developer Tools 설치

리액트를 개발할 때 npm start를 하면 크롬 사이트에 띄워서 개발한 것을 보게된다. 이 때 리액트를 편하게 보기위해 크롬의 확장프로그램을 사용한다. 1. 크롬 웹스토어 접속하기 2. "React Developer Tools" 검색해서 추가하기 3. 크롬에서 확장프로그램 설정하기 4. 적용 완료 설정 - 도구 더보기 - 개발자 도구를 선택하여 위 사진의 오른쪽 부분처럼 개발자 도구를 연다. 그 후 >> 를 클릭해보면 Components가 있는데 클릭한다. 그러면 React 컴포넌트에 대한 정보가 나온다. 살펴보면 우측 상단에 내 페이지의 컴포넌트들이 보인다. 클릭하면 그 컴포넌트의 영역도 표시해주고, props와 hooks 로 무엇을 받거나 쓰는지도 표시해준다. 변경되는 부분이 있으면 실시간으로 어느..

[React]리액트에서 Redux 써보기

리액트는 많은 컴포넌트를 쓰게 됩니다. 프로젝트가 커지면 커질수록 어떤 값은 다양한 곳에서 쓰일 때가 있는데 그럴 때 Redux(리덕스)를 쓰게 됩니다. 만약 작은 프로젝트라면 단순하게 props로 내려주는게 더 편할지도 모릅니다. 따라서 큰 프로젝트라면 Redux(리덕스)와 같은 라이브러리를 사용하는 것을 추천하고, 작은 프로젝트라면 props로 바로바로 내려줘서 사용하는 것을 추천드립니다. Redux란? props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다. Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다. 그걸 모든 컴포넌트에서 사용할 수 있습니다. (도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다!!!) 이 때문에 엄청 멀리있는 컴포넌트..

[JS] 자료형과 형변환

📝 자료형 값을 성질에 따라 분류한 것을 자료형이라고 한다. 25라는 숫자는 Number "25"라는 문자는 String 이런 식으로 나눠지는데 크게는 Primitive Data Type(원시타입) 과 Non-Primitive Data Type(비원시타입)으로 나뉜다. 더 자세하게는 5개의 원시타입과 3개의 비원시타입으로 나눠진다고 말한다. 📝 Primitive Type (원시타입) 한번에 하나의 값만 가질 수 있는 것을 primitive type 이라고 한다. 따라서 하나의 고정된 저장 공간만 이용한다. 앞 게시글인 "변수와 상수" 에서 사용한 값들이 전부 원시타입이다. 원시 타입을 내장형 타입 or 기본형 타입이라고 부르기도 한다. 📝 Non-Primitive Type (비원시타입) 한번에 여러 값을..