본문 바로가기

전체 글

 (177)
Java(2) - 변수, 진수, 데이터 타입, 연산자 1) 변수 1-1) 변수의 교환 2) 진수 3) 데이터 타입(자료형) 3-1) 문자형(char), 탈출 문자, 텍스트 블록 4) 연산자 4-1) 산술 연산자 4-2) 대입 연산자 4-3) 관계 연산자 4-4) 복합 관계 연산자 4-5) 증감 연산자 4-6) 논리 연산자 4-7) 삼항 연산자 5) eclipse 실습 코드 1) 변수 1-1) 변수의 교환 package chapter01.basic; public class Basic_Example02 { public static void main(String[] args) { /* 변수의 교환 출력 결과 : 교환 전 x = 200; y = 100; 교환 후 x = 100; y = 200; */ int x = 200; int y = 100; System.out..
Java(1) - 개발 환경 설정(JDK 및 IDE 설치), 변수, 자료형, 형 변환 1) Java 개발 환경 설정 1-1) JDK 설치 1-2) IDE(eclipse) 설치 2) Java 프로그램의 구조 2-1) 클래스 2-2) 생성자 2-3) 메소드 2-4) 변수 3) 데이터 타입(자료형) 3-1) 데이터 타입 구분 3-2) 데이터 타입 상세 4) 형 변환 4-1) Promotion 4-2) Casting 5) 기타 주요내용 5-1) 문법적 주의 사항 5-2) 주석 6) eclipse 실습 코드 1) Java 개발 환경 설정 1-1) JDK 설치 1. 설치 파일 jdk-17.0.10_windows-x64_bin.msi를 실행하여 설치 2. 기본값으로 설치하면 다음의 경로에 설치됨 C:\Program Files\Java\jdk-17 3. 작업 표시줄에서 “고급 시스템 설정” 검색 4. ..
React(4) - 대화형 틱택토 게임 구현 1) React 1-1) 대화형 틱택토 게임 구현 1-1-1) 개요 1-1-2) 게임 완성하기 1-1-3) 시간 여행 추가하기 1-1-4) 완성 코드 1) React 1-1) 대화형 틱택토 게임 구현 참조 사이트 : https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1-1-1) 개요 React 정의 : 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 "React"는 "Component"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움! 여기서 ..
React(3) - Counter 구현, React 주요 개념 복습 및 comment(댓글) 구현 복습 1) React 1-1) Counter 1-2) React 주요 개념 복습 및 comment(댓글) 구현 복습 1) React 1-1) Counter React를 이용하여 만들 때 꼭 만드는 것 중 하나가 "Counter"이다! Counter : "+" 버튼을 누르면 1씩 증가하고, "-" 버튼을 누르면 1씩 감소하게 하는 것 counter.html counter2.html 1-2) React 주요 개념 복습 및 comment(댓글) 구현 복습 주요 개념 JSX : JSX 문법은 "{}(중괄호)"를 사용해야 한다는 점을 기억할 것!! Component : Component는 "Element의 모음"을 의미하며, 단 하나의 상태만을 가질 수 있고, 상태에 따라 Element가 바뀜! Props : Prop..
React(2) - Login 버튼, comment(댓글) CR 구현 1) React 1-1) Login 버튼 1-2) comment(댓글) CR(Create, Read) 1) React 1-1) Login 버튼 이번 chapter에서 살펴볼 내용 ReactDOM JSX state Component, Props 생명주기 조건부 rendering JSX // App Component가 있다고 가정함! React.createElement(App, null, "hi~~~") // div Element에 내용을 "hi~~~"로 넣기 React.createElement("div", null, "hi~~~") // babel의 도움을 받아서 JSX // React.createElement(App, null, "hi~~~") --> JSX // React.createElement('E..
React - React 기본 및 DOM, Babel, class, component 1) React 1-1) DOM & React 1-2) Babel 1-3) class & component 1) React 1-1) DOM & React 화면을 꾸밀 때 "Javascript"를 활용해서 HTML을 조작함! --> DOM parser 작업이 진행됨! 브라우저 rendering 과정 1. response body에 있는 HTML 내용(string type의 텍스트를 의미함)을 파싱(parsing)함! 2. 파싱 후 tree 구조를 만듦 3. 표현 준비 4. Render(화면이 그려짐) React와 무슨 관계가 있는가? - DOM 조작을 쉽게 하기 위해서 React는 언제 누가 만들었는가? - Facebook(현 meta)이 만듦 Facebook은 사용자 경험을 위해 SPA(Single Pa..
AWS - AWS 개념, EC2 생성, EC2 배포환경 설정 1) AWS 1-1) AWS 개념 1-2) EC2 생성 1-3) EC2 배포환경 설정 1) AWS 1-1) AWS 개념 배포 : 최종 사용자에게 소프트웨어를 전달하는 과정 즉, 우리가 만든 결과물을 실제로 다른 사람들이 사용할 수 있는 상황을 만드는 것이 "배포"이다. --> 결론: 브라우저에서 우리가 지정한 특정 URL로 http요청을 떄리면, 해당 화면이 나오고 실제 작업한 결과물이 나오는 행위 위의 결과물을 만들기 위해서는 아래의 준비사항이 필요하다! 1. 제3자가 접속할 수 있는 컴퓨터가 존재해야 함. 2. 그리고 그 컴퓨터가 24시간 켜져 있어야 함. 그래서 예전에는 이러한 컴퓨터를 빌려서 배포를 진행했다! 서버 컴퓨터(제3자가 접속할 수 있고, 컴퓨터가 24시간 켜져있는 것)를 빌려주는 것을 ..
Node.js(24) - HTTP & WebSocket 정리, WebSocket 사용 방법(ws, socket.io) 1) Node.js 1-1) WebSocket, HTTP 1-2) 사용 방법 1-2-1) ws 1-2-2) socket.io 1) Node.js 1-1) WebSocket, HTTP WebSocket은 HTTP(기존의 웹 페이지를 구상하는 방법)를 보완하고자, 즉 다양한 기능을 만들고자 등장함! HTTP의 단점 연결되어 있지 않음(한 번의 요청에 대해 한 번의 응답만 줄 수 있는 구조라는 의미이다!) 양방향 통신이 불가능함 WebSocket은 HTTP와 달리 기본적으로 양방향 통신이 가능하며, 연결되어 있다! WebSocket은 채팅, 실시간 예약 프로그램, 실시간 주식 차트 등과 같이 실시간으로 데이터가 왔다갔다 하는 것을 구현할 수 있다! TCP 통신의 연결은 논리적인 연결이다! 이와 마찬가지로 We..

티스토리툴바