목록Brae's repository (463)
브래의 슬기로운 코딩 생활
컴포넌트와 Props 컴포넌트 기반 구조 (Component-Based) •컴포넌트 - 독립적인 기능을 수행하는 작은 기능 단위 모듈 •리액트에서는 모든 페이지가 컴포넌트로 구성됨 •하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 -레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 사용 •컴포넌트 사용 - 개발 시간을 줄이고 유지보수 비용도 줄일 수 있음 함수와 리액트 컴포넌트 리액트 컴포넌트 •어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 •객체 지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷 Props •Property - 속성 •리액트 컴포넌트의 속성 Props - 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 •컴포넌트의 모습..
리액트란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA를 쉽고 빠르게 만들수 있도록 해주는 도구 ◦SPA (Single Page Application) - 단일 페이지로 구성된 웹 어플리케이션 - 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 페이지의 내용을 채워서 보여주는 방식 리액트의 장점 빠른 업데이트와 렌더링 속도 재사용성이 높은 컴포넌트 기반 구조 활발한 지식 공유와 커뮤니티 리액트 네이티브를 통한 모바일 앱 개발 가능 리액트의 단점 방대한 학습량 높은 상태 관리 복잡도 엘리먼트 렌더링 엘리먼트 어떤 물체를 구성하는 성분 리액트 앱을 구성하는 가장 작은 블록들 DOM 엘리먼트 ⁃HTML 요소 리액트 엘리먼..
오늘은 메인 화면을 만드는 실습을 하였다. blade.php 라는 파일을 이용해 쉽게 코드를 재사용 하는 것을 배웠다. 그렇게 저번에 만든 판매관리 사이트에 50명의 데이터를 넣어서 표시하는 메인화면과 삭제를 수행하는 기능을 만들었다. 하지만 아직 추가와 수정하는 기능은 아직 만들지 못했다
Navigation 활용하기 NavMesh(네브메쉬) - 유니티에서 제공하는 네비게이션 시스템 - 플레이어를 따라와 공격하는 AI에 사용 - 가는 경로를 찾을 수 있는 데이터 구조를 Bake 해서 지정 using UnityEngine.AI; 필수 NavMeshAgent 목표를 향해 움직이는 물체에 지정해서 사용 설정에 따라 쫓아가면서 장애물 회피, 점프, 서로를 피하기 등을 설정 타겟 대상의 위치설정, 위치 설정시 바로 추적 시작 =>NavMeshAgent.destination = 캡슐.position; Agent Radius - 객체의 접근막의 반지름의 길이(값만큼 외각 여백 결정) Agent Height - 허용할 최대 높이(최대 등산각도,계단 높이에 영향을 줌) MaxSlope - 허용할 최대 경사..
Servlet & JSP Tomcat 서버 충돌 - 8080 or 1099 포트 사용 중으로 인한 오류 HTTP port 또는 JMX port 수정 Tomcat 10.1.x vs Tomcat 9.x.x Tomcat 10.1.x - servlet 6.x 지원 - jakarta 패키지 사용 - import jakarta.servlet.http.*; - import jakarta.servlet.annotation.*; Tomcat 9.x.x - servlet 4.x - javax 패키지 사용 - import javax.servlet.http.*; - import javax.servlet.annotation.*; build.gradle dependencies { compileOnly('jakarta.servle..
OSI 계층 모델 - 데이터 링크 계층의 오류/흐름 제어 ARQ 종류 - 정지 대기(Stop-and-Wait) ARQ - 연속적(Continuous) ARQ • Go-Back N ARQ • 선택적(Selective) ARQ - 적응적(Adaptive) ARQ 정지 대기(Stop-and-Wait) ARQ - 송신 측은 프레임 1개를 전송 후 수신 성공을 확인하면 다음 프레임을 전송하는 방식 - 수신이 실패하면 직전 프레임을 다시 보냄 • 실패의 확인은 NAK(Negative AcKnowledgement) 수신 또는 ACK(ACKnowledgement) 타임아웃(timeout)으로 판단 - Timeout은 일반적으로 RTT(Round Trip Time) X 1.5 - 오버헤드(Overhead)가 큼 - IB..
OSI 계층 모델 - LAN 망의 범위에 따른 분류 근거리 통신망(LAN: Local Area Network) - 동일 건물이나 지역에 설치된 컴퓨터와 단말기를 유기적으로 결합하는 형태 - 통신에 적합한 지역(최대 수 킬로미터)에서만 사용할 수 있는 제한된 통신망 - 데이터 전송속도가 매우 빠른 통신매체(수 Gbps)로 구성 - 오류 발생률이 낮음 광역 통신망(WAN: Wide Area Network) - 원격지 사이를 연결하는 통신망 - 연결 범위가 보통 10km 이상 - 각 노드의 연결이 점-대-점 접속 방식임 • 인공위성을 이용한 패킷 통신을 제외 LAN 개요 발전 과정 - 1970년대 초 제록스의 PARC에서 시작 이더넷(ethernet)으로 발전 - 1970년대 말부터는 LAN 제품이 본격적..
OSI 계층 모델 - 물리 & 데이터 링크 계층 OSI 7 계층 프로토콜* 계층 구조* - 7개의 계층으로 정의 - 각 계층 간에는 동일한 프로토콜을 사용 각 계층간 데이터 전달 - 최상위 계층(7계층 : 응용 계층)에서 발생한 데이터를 하위 계층으로 차례로 전달 - 처음의 데이터에 각 계층에서 전달받은 헤더(header, PCI: Protocol Control Information) 정보를 추가하여 전달 • 2계층(데이터 링크 계층)에서는 꼬리(trailer)도 함께 추가됨 - 최하위 계층(1계층 : 물리 계층)에 도달 - 수신부에서는 각 계층의 헤더에 해당되는 부분을 벗긴 후 상위 계층으로 전달 물리 계층 Physical Layer - OSI 참조 모델 7계층 중 최하위 계층인 첫 번째 계층(제1계층..
오늘부터는 본격적으로 리엑트를 배웠다. 일단 내가 만든 html에 리엑트를 추가 하는 것 부터 실습했다. https://ko.legacy.reactjs.org/docs/cdn-links.html https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html create-react-app (CRA) ⁃리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구 npx - execute npm package binaries - npm - node.js 의존성, 패키지 관리 (설치/삭제) - npx - node.js 패키지를 실행시키는 하나의 도구 패키지의 최신버전 파일을 불러와 설치/실행하고 사용 후에는 해당 패키..
이론 Framework & MVC Programming Framework 프로그램을 개발 하기위한 뼈대 MVC 프로그래밍 - 기존의 프로그래밍 방식에서 벗어나 화면과 코딩, 데이터베이스로 작업영역을 분리하여 처리하는 방식. 1) 디자인과 코딩의 분리로 디자인변경 및 유지보수 용이 2) 모듈화 및 정형화로 인해 협력 작업 가능 Blade 템플릿 엔진 Blade 파일 : 파일이름.blade.php 1. {{ 변수명 }} // 2. @if … @elseif … @else … @endif 3. @switch @case( 값 ) … @break @default … @endswitch 3. @for(초기값; 조건; 증감) … @endfor 4. @foreach($배열 as $변수) … @endforeach 5. @..