🌌 React 입문 XVI - Styled-Component
📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. Styled-Component npm install --save styled-components CSS 문법을 그대로 사용하면서 결과물을 스타일 적으로 다듬어진 Component 형태로 만들어 주는 오픈소스 라이브러리다. Component 개념을 사용하므로 React와 궁합이 잘 ...
📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. Styled-Component npm install --save styled-components CSS 문법을 그대로 사용하면서 결과물을 스타일 적으로 다듬어진 Component 형태로 만들어 주는 오픈소스 라이브러리다. Component 개념을 사용하므로 React와 궁합이 잘 ...
📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. Context Context는 기존의 props를 통해 React Component들 사이에서 데이터를 전달하는 방식 대신 Component 트리를 통해 곧바로 Component에 전달하는 새로운 방식을 제공한다. 기존 방식의 경우 하위 Component로 데이터를 전달하려면 트리를...
📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. Composition 여러 개의 Component를 합쳐서 새로운 Component를 만드는 것을 말한다. 가령 Component A와 Component B를 사용해 하나의 페이지를 만들었다고 하면 Composition을 사용했다고 볼 수 있다. 여러 개의 Component를 조...
서버 원격 접속 IP를 모를 경우 공유기 사이트에 접속하여 확인하면 된다. Raspberry Pi 도입 근거 On-premise 방식으로 서버를 구축해보고 싶기도 했고, 실제로 서버가 필요했다. 프로젝트 배포 과정 JDK 설치 SSH Key 생성 Docker, Docker-compose 설치 방화벽 설정 Dock...
Redis 도입 근거 여러 서비스에서 자주 조회하는 데이터에 대해 Caching 처리가 필요했다. Redis Value 처리 방식 ✅ 문자열 방식 "user:test@example.com" => "{\"email\":\"test@example.com\", \"name\":\"홍길동\", \"service\":\"helpdesk\"}" ...
Websocket - STOMP 도입 근거 채팅 서비스를 위해 Websocket 연결 및 메시지를 전송해서 MongoDB에 데이터를 등록해보려고 한다. 채팅은 양방향 통신이므로 SSE는 불가하고, 효율성을 위해 Polling 방식 또한 배제되어 Websocket을 도입하게 되었다. 작성 코드 ✅ 설정 파일 /** * 엔드포인트 설정 *...
문제 카지노에서 제일 인기 있는 게임 블랙잭의 규칙은 상당히 쉽다. 카드의 합이 21을 넘지 않는 한도 내에서, 카드의 합을 최대한 크게 만드는 게임이다. 블랙잭은 카지노마다 다양한 규정이 있다. 한국 최고의 블랙잭 고수 김정인은 새로운 블랙잭 규칙을 만들어 상근, 창영이와 게임하려고 한다. 김정인 버전의 블랙잭에서 각 카드에는 양의 ...
문제 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나가는지(시작과 끝을 포함하여)를 계산하는 프로그램을 ...
문제 어떤 자연수 N이 있을 때, 그 자연수 N의 분해합은 N과 N을 이루는 각 자리수의 합을 의미한다. 어떤 자연수 M의 분해합이 N인 경우, M을 N의 생성자라 한다. 예를 들어, 245의 분해합은 256(=245+2+4+5)이 된다. 따라서 245는 256의 생성자가 된다. 물론, 어떤 자연수의 경우에는 생성자가 없을 수도 있다....
문제 상황 ✅ Frontend 코드 const socket = new SockJS('http://localhost:8083/ws?token=' + username); ✅ Backend 코드 @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.a...