25G.story

리플랙션 리플렉션이라는 말의 사전적의미는 투영 같은 느낌의 단어입니다. 이 리플렉션을 통해서 어떠한 요청이 온 파라미터값이나 클래스나 객체에있는 정보들을 쏙쏙 빼갈수 있습니다. 자바가 기본으로 제공하는 JDK동적 프록시 기술이나 CGLIB같은 프록시 생성 오픈소스 기술을활용하면 프록시 객체를 동적으로 만들어 낼 수 있다. 리플랙션 기술을 사용하면 클래스나 메서드의 메타정보를 동적으로 획등하고 코드도 동적으로 호출 할 수 있다. 정적인 코드를 리플랙션을 사용해서 Method라는 메타정보로 추상화한후 공통로직을 만들 수 있게 된다. package hello.proxy.jdkdynamic; import lombok.extern.slf4j.Slf4j; import org.junit.jupiter.api.Test..

핵심기능 vs 부가기능 핵심기능 : 해당객체가 제공하는 고유의 기능 부가기능 : 핵심기능을 보조하기 위해 제공되는 기능. 로그추적, 트랜잭션기능등등... 템플릿 메서드 패턴 좋은 설계는 변하는 것과 변하지 않는 것을 분리하는것이다 핵심기능은 변하고 부가기능은 대게 고정돼 있다. 이 둘을 분리해서 모듈화 해야한다. 템플릿 메서드 패턴이 이문제를 해결해 준다. 템플릿 메서드의 구조는 추상 탬플릿안에 로직들을 다 모아놓고 내부 에 변화하는 로직들을 자식 클래스가 오버라이드 해서 구성하는것입니다. 즉 추상클레스 안에 변하지 않는 로직들을을 다 넣어놓고 변하는 로직은 별도로 호출해서 해결하는패턴입니다 public abstract class 추상클레스{ public void ex(){ 부가기능코드~~ 핵심로직코드(..

ThreadLocal 쓰래드 로컬을 알고있어야 하는 이유중 하나는 동시성 문제이다. 동시성 문제 동시성 문제? 첫호출작업이 끝나기도 전에 동시에 다발적으로 호출하게되면 로그가 분리되지않고 떡져서 출력된다. 즉 어떠한 작업을 수행하는 스레드의 트랜젝션이 보장이 되지 않는것이다. 이런 동시성 문제는 여러 쓰레드가 같은 인스턴스 필드에 접근해야 하기 때문에 트래픽이 적은 상황에서는 확율상 잘 나타나지않고 트래픽이 점점 많아질수록 자주 발생해야한다. 특히 스프링 빈처럼 싱글톤 객체의 필드를 변경하며 사용할때 이러한 동시성 문제를 조심해야한다 java에서 지역변수에는 동시성문제가 발생하지 않다. 왜냐하면 스레드마다 각각 다른 메모리 영역이 할당한다. 동시성문제가 발생하는곳은 같은 인스턴스필드 (싱글톤 static..

Props 1. Properties의 줄임말 2. Props는 상속하는 부모 컴포넌트로 부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 3. Props는 읽기 전용으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하고자 하면 부모컴포넌트에서 state를 변경시켜 줘야한다. ex) A 부모 컴포넌트 state = {a : "a"} B 자식 컨포넌트 a state 필요 this.props.aprops State 1. 부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 사용하면 된다. 2. State는 변경 가능 3. State이 변하면 re-render된다. ex) A 컴포넌트 state = {a : "a"} this.state.a

React 함수 컴포넌트에서 useState와 useEffect 훅을 사용한 간단한 예시입니다. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( Count: {count} setCount(count + 1)}>Increase Count ); } export default Counter; 이 예시에서 useState 훅은 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 제공합니다. useEffec..

React Hooks? class없이 state를 사용할 수 있는 새로운 기능입니다. React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용하기 때문에 먼저 그 부분 부분부터 비교를 해보자 Class Component Functional Component 더 많은 기능 제공 더 적은 기능 제공 긴 코드 짧은 코드 복잡한 코드 심플한 코드 더딘 성능 빠른 성능 리엑트 생명 주기 위와같은 생명주기를 함수형 컴포넌트에서는 사용을 하지 못했기 때문에 함수형 컴포는트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔습니다. 이 부분은 React 16.8 hooks 업데이트로 변경됐습니다. 해당 업데이트 이후에 함수형 컴포넌트에서도 생명주기를 사..

styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers..

nav바는 컴포넌트로 두면 편하기 때문에 nav바 컴포넌트를 만들어볼 것이다 구조화 할당 props안에 있는 post오브젝트를 선언해놓는 것이다. 그러면 {props.post.id}를 써줘야 하는데 위처럼 줄여줄 수 있다. 게시글 추가하기 컨포넌트는 디자인만 가지고 있는 것이지 배치까지 가지고 있으면 제사 용성이 떨어진다. 버튼을 컴포넌트화 했다. 이렇게 컨포넌트화를 잘하면 이 페이지가 아닌 다른 페이지에서도 이 컴포넌트를 사용할 수 있는 것이다. 컨포넌트를 동적으로 활용하는 방법 스타일 컴포넌트가 함수 안에 있다 그 이유는 이 컴포넌트를 동적으로 할당하는 경우에만 이렇게 함수 안에 스타일 컴포넌트를 배치하면 된다. "..."연산자 (전개 연산자) 꼭 공부할 것 데이터를 추가할 때 사용한다. 배열을 버리..

위와 삭제 버튼을 눌렀을 때 알고리즘은 3번을 삭제할 때 밑에 있는 4번을 3번 자리로 이동시켜주는 것이다. 이렇게 하면 자료가 10000개가 있다고 가정하면 99997개의 자료를 다시 한 칸씩 당겨야 한다. 이건 별로 좋은 알고리즘이 아니다. 컴퓨터에서 io다음으로 지연을 시키는 요소가 렌더링이다. 위 알고리즘처럼 하면 그림을 이동시켜야하는데 이게 렌더링 작업 중에 하나다. 그래서 리 엑트에서는 삭제할 때는 각 엘레맨트에 데이터를 이동시킨다. 위 경고창이 나온 이유도 item마다 key가 있어야 효율적으로 엘레멘트를 찾아서 작업을 해줄 수 있기 때문에 ket값을 넣어주라는 말이다. 삭제 버튼 구현 삭제버튼을 눌렀을 때 상태 변경을 하려면 PostItem에서 상태를 들고 있어야 하는데 App에서 들고 있..

자세한 설명은 저번 react포스팅을 참고할 것. 위 콘솔을 보면 데이터는 잘 바뀌지만 그림은 바뀌지 않는 것을 확인할 수 있다. 그럼 어디를 수정하면 그림도 같이 바뀔까? 바로 return이 다시 제 시작돼야 한다. 그러려면 결국 App이 다시 실행돼야 한다 하지만 app이 제 실행되면 num값이 초기화되기 때문에 그림은 초기 상태와 그대로가 된다. 그럼 결국 세 가지 조건이 생긴다. 1. 데이터를 변경해야 한다. 2. 앱(return)이 제 실행되야한다 3.num은 내부에서 지역변수로 관리하면 답이 안 나온다. 실행시키면 즉각적으로 바로 그림과 바뀐 데이터를 일치시켜준다. 주석이 핵심 내용이다