ukss

보통 HTML에서 id를 이용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다.

이를 바롤 ref(reference의 줄임말) 개념입니다.

리액트 컴포넌트 안에서는 id를 사용하면 안될까?

-> 리액트 컴포넌트 안에서도 id를 사용할 수는  있습니다. 그러나 권장하지 않습니다.

이유는 리액트 컴포넌트의 경우 여러 번 사용한다고 하면, 유일해야 하는 id의 특성에 위반하기 때문입니다.

다른 라이브러리나 프레임워크와 함께 id를 사용해야 할 경우에는 id 뒷부분에 추가 텍스트를 붙여 중복을 방지해야 합니다.

그렇다면, ref는 어떤 상황에서 사용해야 할까?

-> DOM을 꼭 직접적으로 건드려야 할 때 입니다.

OSIV(Open Session In View)

OSIV는 영속성 컨텍스트를 뷰까지 열어둔다는 뜻이다.

위의 경우 LAZY전략으로 조회시 롯데팀에 대한 정보가 조회되지 않는다.

이유는 서비스에서 영속성 컨텍스트가 종료되었기 때문이다.

이와 같은 경우를 해결하기 위해 영속성 컨텍스트 종료를 컨트롤러에서 종료하게 하여,

컨트롤러에서도 롯데팀에 대해서 조회 할 수 있게 한다.

단, 이때 프록시를 통해 정보를 조회 할 수는 있으나, I, U, D와 같은 기능은 할 수 없다.(트랜잭션이 종료되었기 때문에)

정리해서 다시 그리면 아래와 같습니다.

강의 주소 : https://youtu.be/fSXh4hWJtKo

강의 주소 : https://youtu.be/y4a0X7dS2q8

최근 프로젝트 중에 Webpack과 Babel에 대해 이야기를 많이 들었습니다. 필자는 프론트엔드에 대해서 비기너이고, 보통 프로젝트를 구성할때 CRA를 통해서 구성하는데, 이때는 웹팩을 건드는 일이 거의 없는 것 같습니다.

이번에는 CRA가 아닌 Webpack과 Babel을 통하여 React를 개발 환경을 구성해보겠습니다.

참고 자료 : https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766

Webpack, Babel, React 개발 환경 구성에 대한 가이드 및 설명에 대한 부분의 위의 링크를 참고하였고, 매우 설명이 잘 되어 있습니다.

추가로 저는 js 확장자가 아닌 jsx 확장자를 이용하여 파일을 생성하였는데, 위의 가이드로만으로는 jsx 파일을 로드하지 못합니다.

이러한 문제에 대해서 찾아보니 webpack.config.js 파일 내에서 resolve.extensions에 대한 속성을 추가해 주면 됩니다.

// webpack.config.js

module.exports = {
	...
    resolve: {
      // 5
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
    module: {
      ...
    }
}

웹팩 공식 문서에 자세한 내용을 확인 할 수 잇습니다.

https://webpack.kr/configuration/resolve#resolveextensions

Webpack을 통한 React 예제를 진행 중 npm init -y이란 명령어에서 옵션인 -y에 대해 궁금해졌습니다.

package.json을 만들기 위해 npm init이라는 명령어 사용시 기본 양식을 일일히 설정해줘야 하는데 옵션 -y를 추가하면, 이러한 설정값들을 default값으로 설정하여 package.json을 만들겠다는 의미입니다.

-y의 의미는 'yes'라는 의미입니다.