중복되는 소스를 피하기 위해 NavBars 안의 내용을 더 나누려고 합니다. components 안의 Layout.js 파일을 생성합니다. import NavBar from "./NavBars" export default function Layout({children}) { return ( {children} ) } 그리고 이 부분을 각각 about.js 와 index.js 파일안에 넣게 됩니다. 여기서 우리의 홈페이지 타이틀을 수정하기 위해 하나 더 추가할 것이 있는데요, 바로 Head 태그입니다. Head next js 에서 기본적으로 제공하는 컴포넌트로 여기에는 우리가 html 코드에서 사용할 법한 title 태그와 meta 태그, node js 에서 helmet 이라고 불리우는 보안성 향상 모듈 ..
스프링 프레임워크 사용하다가 궁금한 것이 생겼습니다. 다 같은 어노테이션인데 굳이 왜 나누어 놓았을까? 분명 이유가 있겠죠? 모르는 것은 바로 궁금증을 해결해보아야 되죠!! 이번 글에서는 @Bean과 @Component의 차이에 대해 살펴보려고 합니다. @Bean 외부 라이브러리지만 개발자가 컨트롤이 불가능한 경우 사용한다고 합니다. 예를 들어, Redis를 사용하는 경우가 있습니다. @Configuration public class RedisConfig { private @Value("${spring.redis.host}") String redisHost; private @Value("${spring.redis.port}") int redisPort; @Bean public JedisConnection..
이번에는 React를 사용하여 간단한 시계를 만들어보려고 합니다. 가장 먼저 설치를 안하신 분은 여기 글로 가셔서 설치를 해주시면 되겠습니다! 앞에서 언급한대로, index.js는 React에서 사용하는 가상DOM을 렌더링 시켜주는 소스뿐이 없습니다. 이 소스를 통하여 React는 같은 경로에 있는 App.js 파일을 호출해오고 그 부분에 document.getElementById라는 DOM 선택자를 통하여 렌더링을 진행하는 간단한 소스입니다. import는 상단에 기본적으로 제공하는 React / ReactDOM / App.js와 css 파일을 진행하고 있고, serviceWorker는 해당 서비스가 정상적으로 작동하도록 도와주는 역할을 합니다. 지금은 스킵하도록 하겠습니다! 기본적으로 App.js에는..