[React.ts] 상위 컴포넌트로 값 전송
2022. 8. 22. 13:54
Front-End/React
React 프로젝트를 개발할 때 업데이트 되는 컴포넌트를 줄이기 위해 기능별로 최대한 나누어서 구현하게 되는데 이 때 하위 컴포넌트로 값을 넘겨줘야할 때가 많이 생깁니다. 상위 컴포넌트에서 하위 컴포넌트로 값을 넘겨줄 땐 Props를 사용하면 되지만 하위 컴포넌트에서 Props로 받은 값을 함수를 통해 값을 가공하려고 변경해봐도 화면이 리렌더링 되지 않습니다. 이 때 상위 컴포넌트로 변경할 값을 다시 던져주고 상위 컴포넌트에서 함수를 통해 값 변경 후 다시 하위 컴포넌트로 던져줘야 하는데 이 때 값을 전송하는 방법에 대해 작성해보겠습니다. 구현할 함수를 상위 컴포넌트에서 작성해준 뒤 하위 컴포넌트에 Props로 던져주면 됩니다. 부모 컴포넌트 import { useState } from "react"; ..
[JAVA-Spring] Lombok 동작 원리
2022. 8. 17. 17:54
Back-End/Java & Spring
Lombok Lombok 동작 순서 javac 가 프로그래밍 언어로 작성 된 소스 코드를 파싱하여 AST 를 만듭니다. Lombok 의 AnnotationProcessor 가 컴파일중 AST를 수정 및 추가 생성 합니다. javac 는 AnnotationProcessor에 의해 수정된 AST를 기반으로 class 파일을 생성합니다. AST ( abstract syntax tree, 추상 구문 트리 ) 프로그래밍 언어로 작성된 소스 코드를 컴파일러가 각각 의미별로 분류하여 컴퓨터가 이해할 수 있게 "abstract syntax" 구조로 만들어낸 중간 결과물 입니다. abstract syntax : 프로그래밍 언어의 문법 규칙 ex JAVA) public String methodName( String str..
[JAVA] 특정 클래스를 상속받은 모든 클래스를 찾는 방법
2022. 8. 17. 15:17
Back-End/Java & Spring
로직을 구현하던 중 특정 클래스 파일 목록을 뿌려줘야 하는 기능이 필요하여 기존엔 특정 Package 안에 있는 클래스 파일을 가져오는 방식으로 구현하였었는데 모든 Class를 가져오기 때문에 보안에 취약할 수도 있고, 프로젝트 패키지의 구조가 바뀌거나, 원치 않는 클래스 파일이 지정해줬던 Package 안에 생성될 경우 Exception 이 날 수 있어서 다른 방법을 고안하였습니다. interface 를 하나 만들어서 해당 interface를 상속받은 클래스를 가져오는 방식으로 구현하여서 위의 문제점을 해결하였는데 꽤나 유용한 것 같아서 두가지 방법을 작성해보고자 합니다. 우선 아래와 같은 interface와 구현체가 존재한다고 가정합니다. interface print 인터페이스를 구현한 클래스를 가져..
[JAVA] 제네릭 표현
2022. 8. 17. 14:10
Back-End/Java & Spring
제네릭 제네릭은 클래스나 메서드에서 사용할 데이터 타입을 컴파일 과정에서 미리 지정하는 방법입니다. 컴파일 시에 미리 타입 검사를 수행함을 통해 러닝 과정에서 오류를 사전에 방지할 수 있습니다. 보통 대표적인 제네릭 사용으로 List list = new ArrayList(); 등을 알고 있을탠데 여기선 , , 등에 대해 알아보고자 합니다. : raw type Element를 받을 때 Object에 포함되는 모든 클래스를 받을 수 있습니다. 가장 유연성이 높지만 컴파일 과정에서 타입 체크가 불가능하여 러닝중 오류가 발생할 확률이 높기 때문에 구현 과정에서 신중할 필요가 있고, 가급적 사용하지 않는 것이 좋습니다. : 타입 변수 이나 등으로 지정할 경우 해당 블럭 내에선 지정한..
[Eclipse] Remote System Explorer 사라짐
2022. 8. 2. 21:05
IDE/Eclipse
Eclipse 에서 SSH 연결하려고 내장된 Remote System Explorer 을 켰더니 Cloud Foundry 밖에 안나온다. 재설치하기 위해 MarketPlace 에서 Remote System Explorer 이 검색이 안되어서 아에 수동으로 설치함 Help > Install New Software > Add Link : http://download.eclipse.org/releases/neon Mobile and Device Development > Remote System Explorer / End-User Runtime 체크 후 설치 (이미 설치된 상태라 아이콘이 설치된 상태로 표시됨)
[React] Immer 를 이용한 불변성 관리
2022. 8. 2. 21:03
Front-End/React
React의 불변성 관리 React는 함수형 프로그래밍을 지향하는데 함수형 프로그래밍의 특징중 하나가 순수 함수를 사용하는 것 입니다. 여기서 순수 함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수 입니다. 동시에 순수 함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻합니다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊이 연관되어 있습니다. React 에서 불변성을 지키지 않을 경우 화면이 리렌더링 되지 않습니다. 잘못된 예시 import { useState } from "react"; export const ReactComponent = () => { const [object, setObject] = useState( { count: 0..
[React] 주로 사용되는 필수 Reack Hook
2022. 8. 2. 20:57
Front-End/React
React 리엑트 컴포넌트는 특정 상태가 변화할 때 화면을 다시 그리는 특성을 지닌다. 이를 렌더리이라고 한다. 컴포넌트의 Props나 State 가 변경되면 반응하며 렌더링을 발생시켜 요소를 전부 새로 그리는 작업을 수행한다. 모든 요소에 대해서 리렌더링이 발생하면 성능이나 동작상 오류가 생기므로 여러 Hook을 이용하여 이를 제어하여야 한다. useState UI와 반응하여 업데이트 되는 상태를 정의한다. 변화가 일어나면 현재의 모든 하위 요소에 대해 렌더링을 발생시킨다. useMemo 컴포넌트가 리렌더링 될 때 컴포넌트 리렌더링이 필요 없는 부분을 메모이제이션하여 처리하기 위해 사용한다. static한 성질(한번 출력 후 변하지 않는 요소 )을 지니는 컴포넌트의 출력에 쓰이며, 특정 의존성이..
[React] CRA보단 Vite / Vite + React.ts 프로젝트 생성
2022. 8. 2. 20:55
Front-End/React
Vite VS CRA ( Create React App ) 우선 주인공 설명에 앞서서 CRA 부터 알아보겠습니다. CRA CRA는 리액트 팀에서 추천하는 공식 보일러 플레이트로 가장 대중적으로 사용되고 있습니다. 기본적으로 Webpack을 사용합니다. Webpack은 자바스크립트로 개발된 번들 툴로 여러개의 파일( 소스, css, 사진 등 )을 하나로 합쳐서 하나의 번들로 만들어서 전송하는 방식입니다. JS의 파일을 저장하지 못하고 매번 로딩을 해야한다는 단점은 극복되었지만 가장 큰 문제는 속도였습니다. 수정할 때 마다 모든 파일을 하나로 합치는 빌드 과정을 거쳐야 해서 속도가 상당히 느립니다. 그래서 개발자들은 Low-Level-Language를 활용하여 자바스크립트 툴을 만들어냈는데 그렇게 생겨난게 ..
[CSS] css 메모
2022. 8. 2. 20:52
Front-End/HTML&CSS
block : 가로 100% inline-block : 사이즈에 맞게 width : 100vw : 브라우저의 가로 100% height : 100vh : 브라우저의 세로 100% position: absolute : 레이어를 새로 그림 z-index 0; : 레이어의 우선 순위 ( 낮은 번호일수록 우선순위 높음) rgba(0, 0, 0, 0.5) : rgb 코드 3자 + 투명도 0.5 = 50%
[HTML] 웹이 그려지는 순서
2022. 8. 2. 20:52
Front-End/HTML&CSS
DevTools (F12 or ctrl + shift + i ) > Network > Response 에서 확인 가능 Constructing HTML DOM Tree 태그의 내용들 , 등 load css, js CSS CSSOM Render Tree Operating Layout 위치, 크기 지정 Paint Layer 그리기 Composition Layer 결합 큰 분류로는 Constructing 과 Operating 으로 구분되어 분류되며 소분류로는 앞 순서로 갈수록 웹이 그려질 때 더 많은 과정이 소모된다. CSS 영향도 사이트 https://csstriggers.com/ CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default ..