241126 뷰 (이벤트)

241126 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 뷰뷰를 사용하다보면 리액트와 비슷해진다. 라우터 이런 부분들?리액트를 배웠기 때문에 굳이 깊게 들어가지는 않는다.리액트와 비교하여 어떤 부분이 다른 지 주의 깊게 보자.뷰 수업의 목적도 리액트와 마찬가지로 RESTful 구현이다.뷰 실습 (이벤트)ex5event.html 이벤트 연습 주사위 수 : {{number}} 주사위 던지기 숫자 변경 됨! 이벤트 연습 ... 생략 주사위 수 + 10 : {{number2}} 주사위 던지기2 숫자 증가 이벤트 이벤트 연습 ... 생략 숫자 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 26.
• textsms

241125 뷰 (CDN, 라이프사이클, 컴포넌트, defer, 디렉티브)

241125 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.뷰(Vue)뷰는 비교적 쉬운 방법으로 수업 진행 예정뷰는 2점대 버전과 3점대 버전이 있다. 2점대 버전은 볼 필요가 없다. 3점대에서 안돌아감MVVM 패턴을 사용한다. 뷰와 모델 사이에 뷰 모델을 하나 더 걸어놓았다.리액트와 마찬가자기로 버츄얼돔을 사용한다.노드를 설치하여 사용, 비쥬얼 스튜디오로 개발, HTML에 CDN을 걸어놓고 사용한다.보간법을 사용하고 있다. {{여기에 써주면 된다.}}기본 디렉티브는 v-~ 써주면된다. 타임리프에서 th 걸어주듯이뷰 인스턴스는 2점대와 3점대에서 많이 다르다!리액트처럼 단일 컴포넌트로 개발하는 것도 좋다. 하지만 CDN만으로도 결과물이 잘 나올 수 있다.자바스크립트 라이브러리는 모두 다 비슷한 구..

• format_list_bulleted Study/Acorn
• · 2024. 11. 25.
• textsms

241122 리액트 (총정리 문제)

241122 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 리액트리액트 마지막 예제는 jar로 aws에 올려보자!aws를 사용하려면 리눅스를 알아야한다.개발자의 OS는 윈도우가 아니다 리눅스를 꼭 알아야겠다.CORS 개념 잘 알아두기!요청에서부터 서버에서 데이터를 가져오는 과정을 설명할 수 있어야하겠다. 그림까지 그리면서 정리! 설명!최소 5분 설명이 가능해야할 것 같다. 네트워크, 소켓, 스레드, 도메인, 프로토콜 등등 많은 얘기가 나온다. 기존의 방법과 RESTful의 비교를 설명해보자!문제지금까지 배운 리액트 관련 수업 내용들을 총망라하여 문제를 풀어보자!정리하면서 풀어보는 것이 핵심!에러 결과

• format_list_bulleted Study/Acorn
• · 2024. 11. 22.
• textsms

241121 리액트 (리덕스 DB연동, RESTful)

241121 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 리액트 (Redux)리덕스의 풀은 굉장히 넓다. 어디가서 자랑하면 개망신 당할 가능성이 농후하다.항상 겸손하게 "리덕스 입문 했어요, 살짝 발만 담궜습니다" 말하기!리덕스 실습 (DB 연동)직원 이름 검색, 고객 검색jsp 사용해서 해보자!findjikwon.jsp 톰캣 서버, JSON 객체로 받아오는 것을 확인findgogek.jsp톰캣 서버, JSON 객체로 받아오는 것을 확인Redux 의존성 추가 : npm install @reduxjs/toolkit react-reduxstore.jsimport { configureStore } from "@reduxjs/toolkit";import rootReducer from "./reduce..

• format_list_bulleted Study/Acorn
• · 2024. 11. 21.
• textsms

241120 리액트 (Redux)

241120 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.리액트 (Redux)오늘의 리덕스 이야기!출처 : 개발일지 S_Soo100 : [React-Redux] 개념부터 기본 사용법 까지 자식 컴포넌트내의 데이터를 자식 컴포넌트끼리 전송하면 안된다.부모 컴포넌트로 전송하고 하위 컴포넌트로 내려줘야 리액트에서 일관성이 보장된다.컴포넌트 수가 적다면 리덕스를 굳이 사용을 하지 않아도 크게 문제가 되지 않겠지만, 실제 프로젝트에서는 컴포넌트가 수없이 많기 때문에 이렇게 state값을 컴포넌트를 타고 넘기는 일들은 보통 힘든 일이 아닐 수 없다.그렇기 때문에 변수들을 담을 수 있는 창고(store)를 만들어 담아두면 좋겠다. 창고에 있는 변수들을 가져다 쓰면 부모 - 자식 컴포넌트 사이에서 데이터를 넘..

• format_list_bulleted Study/Acorn
• · 2024. 11. 20.
• textsms

241119 리액트 (Routing)

리액트 (Routing)라우팅 개발 환경 세팅외부 라이브러리 설치 (프로젝트별로 설치해야 함)npm install react-router-dom1. index.js에서 를 태그로 감싸주기import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 20.
• textsms

241118 리액트 (memo / life cycle / 컴포넌트 설계 / 문제)

241118 에이콘 아카데미 수업을 기반하여 작성되었음을 알립니다.리액트 (React.memo)React.memo를 통해 불필요한 렌더링을 방지해서 앱의 성능 끌어 올릴 수 있다. – 메모리 최적화React의 멋진 기능 중 하나는 Memoization을 중심으로 한 도구 세트이다.메모리 관리에 대한 이야기! 메모이징은 컴퓨터 프로그래밍에서 잘 알려진 개념으로, 비용이 많이 드는 함수 호출의 결과를 캐싱 하고 캐시된 결과를 재사용하여 비용이 많이 드는 작업을 반복하지 않고 프로그램 속도를 높이는 것을 목표로 한다.필요한 함수만 호출하여 메모리 관리에 집중하겠다는 말이다!! 리액트의 경우 필요한 부분만 리렌더링을 한다. 필요없는 부분은 리렌더링 하지말자는 뜻이다.React.memo() : React는 먼저 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 18.
• textsms

241115 리액트 (useState / 문제)

241115 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.리액트리액트 사용 시 클래스 사용법에 대해서 꼭 알아놔야한다.복잡하고 어려운 기능들은 클래스를 사용해야하기 때문에!타입스크립트를 써주는 것이 좋긴하지만 굳이 쓰지 않아도 괜찮다.우리의 리액트 수강 목표는 스프링에 붙여서 SPA를 만드는게 목적이기 때문이다.UX/UI에 기반하여 화면 구성을 해주는 것이 굉장히 중요하다!HOOK의 등장 전후로 많은 변화가 있었다. HOOK에 대해 설명할 수 있어야 한다.아파치 스파크! 자바 기반 데이터 분석! 보통 스칼라로 함!사람들은 보통 클릭함! 더블클릭, 드래그앤드롭에 익숙하지 않음더블클릭, 드래그앤드롭을 사용했을 시 안내가 필요함, 프로그램을 개발하고 제3자에게 아무말도 없이 보여주는 것이 좋음 일반 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 15.
• textsms

241114 리액트 (개요 / 컴포넌트 생성 / 배포 / 데이터 전달 (Props and State) / CSS 및 이미지 적용)

241114 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.리액트리액트는 자바스크립트 라이브러리로 구성되어있다.목적은 프론트엔드에서 MVC 패턴을 구사하기 위한 목적이 있다.대표적인 예들은 리액트, 뷰 등이 있다.현재는 리액트가 세상을 지배하고 있다.리액트를 통해 클라이언트 사이드의 화면구성을 멋들어지게 할 수 있다.우리의 목표는 RESTful 활용에 있다. 화면 구성은 각자 해보도록 하자HTML 사용 시 RESTful을 사용하여 SPA를 구성할 수 있긴 하지만 번거로운 부분이 있다.SPA 구성할 시 리액트를 사용한다면 더 쉽게 구현 가능하다.리액트와 관련된 새로운 기술, 문법 등을 이해해보자.리액트는 거대한 커뮤니티를 가지고 있다. 지속적인 버전 관리가 이루어지고 있으며, 다양한 레퍼런스 및 확..

• format_list_bulleted Study/Acorn
• · 2024. 11. 14.
• textsms

241113 WebSocket / 리액트 설치

241113 에이콘 아카데미 수업을 기반하여 작성되었음을 알립니다.WebSocketWebSocket은 기존의 단방향 HTTP 프로토콜과 호환되어 양방향 통신을 제공하기 위해 개발된 프로토콜.Http 통신은 무상태성, 비연결성, 단방향 통신, 실시간 통신인 채팅 기능을 운영할 수 없다.처음부터 WebSocket을 사용하지는 못하고 Http로 접속, 타겟팅을 한다음에 WebSocket 사용하여 통신할 수 있다.WebSocket 통신은 양방향 통신이 가능 HTTP 통신과 다르게 연결을 맺고 바로 끊어버리는 게 아니라 계속 유지를 하기 때문에 실시간 통신에 적합하다.먼저 STOMP 프로토콜에 대해서 이해를 해야 한다.STOMP (Simple Text Oriented Messaging Protocol, 스트리밍 ..

• format_list_bulleted Study/Acorn
• · 2024. 11. 13.
• textsms