본문 바로가기
SMALL

분류 전체보기527

React) JSX에 대해서 (장점) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. JSX란? : 자바스크립트의 확장 문법 function App() { return ( Hello react ); } 위와 같은 JSX로 작성된 코드가 번들링되는 과정(파일이 묶여지는 과정)에서 바벨(최신 ES6버전을 ES5버전으로 변환)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 아래와 같이 말이죠. function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } JSX의 장점 ① 보기 쉽고 익숙하다 HTML 코드를 작성하는 것과 비슷하기 .. 2022. 10. 27.
React) 프로젝트 열기 및 코드 이해하기(import 구문, 번들러, 웹팩) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 열기 파일 > 열기 > hello-react 디렉터리 > src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 코드 이해하기 import logo from './logo.svg'; import './App.css'; import 구문 : 특정 파일을 불러오는 구문 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이지만, 브라우저가 아닌 .. 2022. 10. 27.
React) Node.js, yarn, Git, VS Code 다운로드 및 프로젝트 생성 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Node.js 다운로드 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * Node.js 다운로드 이유? 더보기 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치! 이 때 사용하는 개발 도구에는 ECMAScript 6를 호환시켜주는 바벨, 모듈화된 코드를 한 파일로 합치고(.. 2022. 10. 26.
React) 컴포넌트와 render 함수, 초기렌더링/리렌더링(조화과정) Virtual DOM 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트란? - 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용 - 오직 V(view)만 신경 쓰는 라이브러리 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하는 리액트를 이해하려면 '초기 렌더링'과 '리렌더링' 개념을 이해해야 합니다. 먼저 컴포넌트와 render 함수에 알아보겠습니다. 컴포넌트(Component) 버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의하여 UI 부품을 설계할 수 있습니다. - 특정 부분이 어떻게 생길지 정하는 선언체 - 재사용이 가능한 API로 수많은 기능들을 내장 - 하나의 컴포넌트에서 해당 컴포넌트의 생김새와 작동 방식.. 2022. 10. 26.
React) 리액트 사용 이유와 탄생 과정 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 탄생 과정 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 순수 자바스크립트만으로는 부담이 존재합니다. (어떠한 데이터를 변경하고자 할 때 해당 요소를 찾아 업데이트 처리) 이유는? 규모가 클수록 코드가 복잡 제대로 관리가 어려우면 성능 저하 이러한 문제점을 기반으로 지금까지 MVC, MVVM, MVM 아키텍쳐 기반으로 프레임워크들이 개발 되었습니다. 간단하게 개발할 수 있는 방법? 페이스북 개발팀이 고안해낸 방법은 데이터가 변경될 때마다 어떤 변화를 주는 것이 아닌 기존 뷰를 날려버리고 처음부터 새로 랜더링하는 방법을 생각하였습니다. 간단하다 코드의 양이 줄어든다.. 2022. 10. 26.
Spring) 관리자 1:1 채팅 - 관리자 (채팅 목록 랜더링, 회원 별 채팅창 팝업, 채팅 보내기, 끌어올리기 처리) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 관리자 - 채팅 목록 불러오기 Controller AdminController @GetMapping("/chatList.do") public void chatList(Model model) { // 채팅방 별 최근 1건 조회 List chatList = chatService.findRecentChatLogs(); log.debug("chatList = {}", chatList); model.addAttribute("chatList", chatList); } Service (interface 생략) ChatServiceImpl @Override public List findRecentChat.. 2022. 10. 11.
LIST

티스토리툴바