끄적끄적

ap-northeast-2.console.aws.amazon.com/ https://ap-northeast-2.console.aws.amazon.com/console/home ap-northeast-2.console.aws.amazon.com 접속해서 로그인 후 EC2 대시보드 메뉴 -> 가운데에 인스턴스 시작 버튼 클릭 인스턴스 생성 순서 1. 사용할 OS 선택 서버용으로 주로 사용하는 것은 CentOS인데 리눅스 환경을 처음 만져보신다면 Ubuntu를 사용하시면 됩니다. 2. 인스턴스 유형 선택 무료로 사용해야 하니까 프리티어 선택하고 다음! 3. 인스턴스 세부 정보 구성 설정할게 없으므로 다음 4. 스토리지 추가 프리티어 고객은 최대 30gb까지 무료라고 적혀 있으니 30으로 변경하고 다음 5. 태..

1. 페이징에 사용할 Class public class PagingMaker { private int startPage; //시작 페이지 private int total;//게시글 총 갯수 private int lastPage;//마지막 페이지 private int endPage;//끝 페이지 private int nowPage = 1;//현재 페이지 private int cntPerPage = 5;//페이지당 글 갯수 private int cntPage = 5;//보여질 페이지 갯수 private int start; private int end; public PagingMaker() { super(); } public PagingMaker(int total, int nowPage, int cntPerP..

라즈베리파이에는 많은 운영체제가 있지만 저는 우분투가 아닌 데비안 리눅스 기반의 라즈비안을 설치하겠습니다. 준비물은 라즈베리파이, sd카드, sd카드 리더기를 준비해 주시면 됩니다. 설치 방법은 Raspberry Pi Imager를 사용해서 간편하게 설치하려고 합니다. image는 www.raspberrypi.org/에서 다운로드하실 수 있습니다. 접속 후 Software탭 -> Our software에서 각자 운영체제에 맞는 것으로 다운로드하여주세요 다운로드가 다 되셨으면 choose os를 클릭해 라즈베리 파이 os 클릭, choose storage를 클릭해 sd카드를 선택해 주시면 됩니다. 설치가 끝나고 sd카드를 라즈베리파이에 꽂으시고 부팅시키면 이런 화면이 뜨는데 여기서 국가는 영국 언어는 영국..

시작하기 전에 카카오톡 계정이 필요합니다. 가계정을 만들어서 하면 계정이 정지당할 수 있다고 하더라고요 그래서 저는 제 갤럭시탭의 카카오톡 계정을 사용했습니다. 그럼 우선 메신저봇R 어플리케이션을 설치합니다. 설치를 다 하셨으면 우측 상단에 땡땡이를 클릭하시고 공용 설정에 들어가신 다음 아래쪽으로 내려보면 알림 읽기 권한이 있습니다. 이걸 허용해주셔야 앱이 작동할 수 있습니다. 권한 설정까지 끝나셨으면 +버튼을 누르고 만들 봇의 이름을 적고 확인을 눌러주세요 생성한 봇 이름을 클릭하시고 연필 모양 아이콘을 클릭하시면 이제 준비가 다 끝났습니다. 이제 코딩은 다음 글에서... 쓸게요

클래스형 컴포넌트 컴포넌트에서 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정해야 합니다. constructor : 컴포넌트의 생성자 메서드 클래스형 컴포넌트에서 생성자 메서드를 장성할 때는 반드시 super(props)를 호출해 주어야 합니다. state : 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 컴포넌트의 state는 객체 형식이어야 합니다. state를 조회할 때는 this.state로 조회합니다. this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다. 함수형 컴포넌트 useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다. 클래스형 컴포넌트에서 state의 초깃값은 객체 형태로 넣어주어야 했지만 useState에서는 반드시..

porps는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 부모 컴포넌트에서 name이라는 props를 MyComponent로 전달 JSX 내부에서 props를 렌더링할 때는 { } 기호로 감싸 주면 됩니다. props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 방법 태그 사이의 내용을 보여 주는 children 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props

※ 함수형 컴포넌트 구조 함수형 컴포넌트 특징 클래스형 컴포넌트보다 선언하기 편함 클래스형 컴포넌트 보다 메모리 자원 덜 사용 프로젝트를 빌드 배포할 때도 클래스형 컴포넌트보다 파일 크기가 작음(중요하지는 않음) ※ 클래스형 컴포넌트 구조 클래스형 컴포넌트 특징 state 기능 및 라이프 사이클 기능을 사용 가능 임의 메서드를 정의할 수 있음 ※ 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. ※ 바벨 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다. 더 정확하게 말하면 트랜스파일러라고 말할 수 있다. 트랜스 파일 : 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다 JSX 1 2 3 4 5 6 7 function App() { return ( Hello react ); } cs 변환된 코드 1 2 3 function App() { return React.createElement..

리액트 프로젝트를 만드려면 우선 Node.js를 먼저 설치해야 합니다. Node.js는 크롬 V8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다. Node.js 버전LTS 버전은 장기적으로 안정적인 지원을 제공하는 버전을 의미 운영체제 별 Node.js 설치 방법 macOs : Homebrew 설치 후 brew install node 명령어 입력 windows : nodejs.org/ko/ 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Yarn : npm을 대체할 수 있는 도구로 np..

리액트 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만 신경 쓰는 라이브러리입니다. 컴포넌트 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 렌더링 사용자의 화면에 뷰를 보여준 것 렌더링 순서 렌더링 -> HTML 마크업(...) -주입-> DOM -> View 특징 Virtual DOM을 사용 Virtual DOM이란 ? 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 ..