web

[Internet] How does the internet work?

인터넷이 어떻게 작동하는가... 많은 사람들이 인터넷을 사용하지만 인터넷의 작동 원리를 이해하고 사용하지는 않을 것입니다. 천천히 알아봅시다. Internet? 먼저, 인터넷이란 무엇을 지칭할까요? 인터넷은 웹을 가능하게 하는 기술 인프라이며 대규모 컴퓨터 네트워크입니다. 여기서 저는 "대규모 컴퓨터 네트워크"라는 말에 집중할 필요가 있다고 생각합니다. Network? 네트워크는 둘 이상의 엔트포인트(ex. 컴퓨터)가 통신하기 위한 연결을 말합니다. 연결은 물리적으로 이루어지며, 이 물리적인 연결은 OSI 7 계층을 통해 소프트웨어의 연결로 이루어집니다. (이후 로드맵에서 살펴봅시다.) 그렇다면 인터넷은 모든 컴퓨터가 물리적으로 연결되었다고 말할 수 있을 것입니다. 하지만 모든 연결이 위의 그림과 같이 ..

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..

[React] 리액트 시작하기

Node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이 사이트에서 원하는 버전에 맞게 설치해준다. (나는 LTS인 18 버전으로) 계속 넘어가서 설치를 잘 했다면 Node 버전을 확인하는 node -v, npm 버전을 확인하는 npm -v 을 통해 설치가 잘 되었는지 확인해본다. 이렇게 확인 가능하다. npx 또한 확인하기를 원한다면 npx -v 을 통해 확인할 수 있다. React 프로젝트 생성 npx create-react-app {app 이름} npx 를 통해 프로젝트가 생성된다. src 폴더 내에 App.js 가 메인 페이..

[Spring] AOP의 기본 개념

AOP란? 관점 지향 프로그래밍으로 어떤 로직을 공통적인 기능과 핵심적인 기능을 분리해서 관리하도록 프로그래밍하는 것이다. 이런 그림으로 표현할 수 있다. 위를 보면 공통적으로 사용하는 기능을 분리해서 관리하는 것을 볼 수 있다. 우리가 지금까지 사용했던 함수(메서드)들과 비슷한 모습으로 보인다. 여기서 우리는 공통적인 기능들을 Aspect라 하고 그 기능 자체를 Advice라 한다. 이 Advice가 적용되는 부분은 메서드, 필드 등이 있는데 스프링에서는 메서드만 적용 가능하다. 그리고 이것을 Joinpoint라 한다. 그리고 Pointcut을 통해 Joinpoint에서 Advice가 실행될 지점을 더욱 구체적으로 정할 수 있다. 실제로 구현할 때는 프록시 패턴을 기반으로 구현하게 되는데, Client..