본문 바로가기
728x90
반응형

분류 전체보기236

자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법 jsx란 자바스크립트에서 HTML과 같은 코드를 작성할 수 있게 해주는 확장 구문입니다. 예를 들어 다음과 같이 쓸 수 있습니다. const element = Hello, World!; JSX의 주요 이점 중 하나 중괄호를 사용하여 HTML과 같은 코드 내에서 JavaScript 표현식을 작성할 수 있다는 것입니다. 이렇게 하면 콘텐츠를 동적으로 생성하고 데이터 및 사용자 입력을 기반으로 애플리케이션의 구조를 조작하기가 쉬워집니다. 예를들어 const items = ['apple', 'banana', 'orange']; const list = ( {items.map((item) => ( {item} ))} ); JSX를 사용하여 이와 같은 데이터 배열을 기반으로 항목 목록을 생성할 수 있습니다. 리액트는.. 2023. 2. 28.
리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점 일단 컴포넌트를 작성하기 전에 기본 세팅부터 하겠습니다. index.js 폴더에서 위의 코드는 index.html에 root라는 id를 가진 div 태그를 리액트 기본 루트 돔으로 쓰겠다는 의미의 코드입니다. 을 감싸고 있는 를 지워줍니다. 해당 코드는 검사를 위한 코드로 우리가 테스트 프로젝트를 작성할 때 딱히 필요하지 않고 console.log() 사용시 에러가 발생할 수 있습니다. 이번에는 App.js에 들어와서 import logo from './logo.svg'; 와 태그 안에 있는 코드를 지워줍니다. 또한 스타일에 관련된 index.css app.css 안에 코드들도 지워줍니다. 해당 코드는 기본 스타일로써 내장되있던것입니다. 위와 같이 비워준 화면입니다. 저는 태그도 프레그먼트 태그로 비워주.. 2023. 2. 27.
리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법 리액트를 사용해야 하는 이유 구성 요소 기반 아키텍처: React는 구성 요소 기반 라이브러리로 코드를 쉽게 재사용할 수 있고 애플리케이션의 다른 부분을 쉽게 유지 관리하고 업데이트할 수 있습니다. 선언적 프로그래밍: React를 사용하면 응용 프로그램의 상태와 일치하도록 DOM을 변경하는 방법에 대해 걱정할 필요가 없습니다. 원하는 UI 모양을 선언하기만 하면 React가 나머지를 처리합니다. 가상 DOM: React는 가상 DOM을 사용합니다. 업데이트가 필요한 항목만 업데이트하여 성능과 속도를 개선하는 데 도움이 됩니다. JSX: React의 JSX 구문을 사용하면 HTML과 같은 코드를 쉽게 작성할 수 있습니다. 더 쉽게 읽고 이해할 수 있습니다. 크고 활동적인 커뮤니티: React에는 크고 활동.. 2023. 2. 27.
Stomp를 활용한 실시간 채팅 프로그램 구현: 웹소켓 최적화 및 효율적인 메시징 전송 (4) 이번에는 Websocket의 프로세스를 좀더 고도화 하고 메시징에 좀 더 최적화된 방식을 구현하기 위해 Stomp를 적용해 보겠습니다. Stomp란? stomp는 메시징 전송을 효율적으로 하기 위해 나온 프로토콜이며 기본적으로 pub/sub 구조로 되어있습니다. 메시지를 발송하고 처리하는 부분이 명확하여 개발하는 입장에서 명확하게 인지하고 개발 할 수 있는 이점이 있습니다. 또한 통신 메시지의 헤더에 값을 세팅할 수 있어 헤더값을 기반으로 통신 시 인증처리를 구현하는 것도 가능합니다. pub는 publisher(집배원)으로 볼 수 있으며 sub는 subscriber(구독자)로써 여러명이 될 수 있습니다. - 채팅방 만들기 : pub/sub를 위한 topic 생성 - 채팅방 입장 : topic 구독 - 채.. 2023. 2. 24.
자바스크립트로 간단한 문제 풀기(1) 1. 빼기 let number1 = 2; let number2 = 3; let result = number1 - number2; console.log(result); 출력 -1 2. 몫 let number1 = 12; let number2 = 4; let result = Math.floor(number1 / number2); console.log(result); 출력 3 3. 곱 let number1 = 2; let number2 = 3; let result = number1 * number2; console.log(result); 출력 6 4. 나머지 let number1 = 6; let number2 = 3; let result = number1 % number2; console.log(result).. 2023. 2. 20.
도커를 활용한 Python Flask 프로젝트 예제: MySQL 연동 및 Docker Compose로 간편한 구성 관리 (2) *도커 사용 예제2 1. python flask 프로젝트를 docker로 실행해 보자 - pip install flask 명령어를 사용하여 flask를 임포트 한다. - app.py 파일을 작성한다. - requirenebts.txt 파일을 작성한다. - Dockerfile을작성한다. Dockerfile을 빌드하고 docker run -d -p 8000:5000 python-docker 명령어를 입력하면 컨테이너가 실행된다. 2. 데이터 베이스 연결 (mySql) - docker volume create mysql - docker volume create mysql_config - docker network create mysqlnet docker run --rm -d -v mysql:/var/lib/m.. 2023. 2. 20.
도커를 활용한 Spring Boot 프로젝트 예제: PostgreSQL 연동과 데이터 관리 방법 (1) *도커 사용 예제1 1. spring boot 프로젝트를 docker로 실행해 보자 - spring boot 프로젝트를 Gradle을 사용하여 빌드한다. - 프로젝트 최상단에 Dockerfile을 생성하고 세팅한다. - 터미널에서 다음 명령을 실행하여 Docker 이미지를 빌드합니다. docker build -t . (현재 디렉터리를 빌드 컨텍스트로 지정하는 끝에 있는 점에 유의하십시오.) - 방금 빌드한 이미지에서 컨테이너를 시작합니다. docker run -p : - 이제 애플리케이션에 액세스할 수 있습니다. http://localhost: *spring boot에 postgreSQL docker로 연동하기 - docker run --name some-postgres -e POSTGRES_PASSWO.. 2023. 2. 20.
도커(Docker) 사용 이점과 설치 가이드: 더 효율적이고 경제적인 애플리케이션 관리 *도커 사용 이점 1. 이식성: Docker 컨테이너는 Docker 런타임이 설치된 모든 시스템에서 실행될 수 있으므로 한 환경에서 다른 환경으로 애플리케이션을 쉽게 이동할 수 있습니다 2. 격리: Docker 컨테이너는 서로 격리되어 애플리케이션이 서로 또는 호스트 시스템을 방해하지 않도록 합니다 3. 확장성: Docker 컨테이너는 필요에 따라 쉽게 확장 또는 축소할 수 있으므로 조직은 수요 변화에 신속하게 대응할 수 있습니다 4. 배포 용이성: Docker 컨테이너를 빠르고 쉽게 배포할 수 있으므로 애플리케이션을 시작하고 실행하는 데 필요한 시간과 노력이 줄어듭니다 5. 버전 제어: Docker 이미지의 버전을 지정하고 레지스트리에 저장할 수 있으므로 필요한 경우 이전 버전으로 쉽게 롤백할 수 있습.. 2023. 2. 20.
인메모리 데이터베이스: Redis와 RabbitMQ의 차이점과 데이터 내구성 보장 방법 탐색 Redis 디스크에 상주하는 인메모리 데이터베이스 / 컴퓨터 메모리를 이용한(in-memory) Cache 서버 Key-Value를 이용해 Celery가 처리할 작업을 Celery에 보낸 후 Cache 에서 해당 Key를 제거하는 방식으로 작동한다. Redis는 데이터 검색을 위해 Database에 접근하기 전 메모리에서 Cache를 가져다 쓴다는 점에서 속도가 빠르다. 매우 빠른 서비스 및 메모리 내 기능을 제공하기 때문에 지속성이 중요하지 않고 약간의 손실을 견딜 수있는 짧은 보존 메시지에 적합하다. 큰 메시지를 처리 할 때는 대기 시간이 오래 걸린다. RabbitMQ 메시지 브로커이다. 응용 프로그램(applications)에게 메시지를 주고 받을 수 있으며, 메시지가 수신될 때까지 안전하게 있을 .. 2023. 2. 20.
HTTP 프로토콜과 웹 소켓의 특징 및 실제 활용: 웹 개발에서의 양방향 통신 구현 전략 이해하기 HTTP 프로토콜 특징 HTTP 프로토콜은 상태가 없는(stateless) 프로토콜입니다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말입니다. 좀 더 쉽게 말해서 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 말이죠. 이러한 특징 덕택에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생깁니다. HTTP 프로토콜은 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80번입니다. URL을 이용하면 서버에 특정 데이터를 요청할 수 있습니다. 여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 어떻게 해야 할까요? 바로 HTTP 요청 메서드(H.. 2023. 2. 20.
728x90
반응형

티스토리툴바