분류 전체보기 (33) 썸네일형 리스트형 [ Tomcat ] linux 로그 설정 로그 설정 linux에서 기본으로 제공해주는 logrotate와 crontab 사용한다. 1.logrotate 로그파일을 관리하는 유틸 2.crontab 스케쥴러 설정 방법 1.톰캣 설치 시 기본으로 적용된 로깅 vi프로퍼티를 삭제한다. # rm /usr/local/tomcat01_center/conf/logging.properties 2./etc/logrotate.d/에 설정파일을 생성한다. # vi /etc/logrotate.d/tomcat_out_log 3. 로그파일을 설정한다. /usr/local/tomcat01_center/logs/catalina.out { copytruncate daily rotate 7 missingok notifempty dateext dateformat .%Y-%m-%d.. [ React ] [Chapter 15] prop-types 속성값 타입 정의하기 prop-types 속성값 타입 정의 prop-types 패키지는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지이다.일단 prop-types 패키지를 배우기 이전에type을 왜 지정 하는지에 대해 알아보겠습니다.일단 자바스크립트는 동적 타입 언어이다. 타입에 대한 고민을 안 하고, 코드를 작성할 수 있고, 바로 작성한 코드로 어플리케이션을 실행 시킬 수 있죠 그래서 배우기 쉽고 간단한 어플리케이션을 작성할 때는 생산성이 좋기도 합니다. 그런데 큰 규모의 어플리케이션을 작성할 때는 오히려 생산성이 떨어집니다. 그래서 리액트의 정적 타입 언어를 배워두는것이 좋습니다. 간단한 어플리케이션만 작성할건 아니니깐요 사용 예 function Home({ name, age, memberState, onN.. [ React ] [Chapter 14] 쉽게 하는 불변성 관리 쉽게 하는 불변성 관리 immer 라이브러리 리액트에서는 배열이나 객체를 업데이트 해야할 때 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트를 해야한다. 안그러면 리액트에서 해당 데이터 값으 무엇인지 몰르기 때문에 불변성을 지켜주면서 업데이트를 해야한다. const jsonTest = { a : 1, b : 2 }; jsonTest.b = 3 이와 같이 하면 안된다는거죠. 그런대 대부분 불변성을 지켜주면서 업데이트를 한다면 const jsonTest = { a : 1, b : 2 }; const nextJsonTest = { ...jsonTest, b : 3 }; 이와 같이 하죠(...jsonTest는 비구조 할당이라고 합니다 해당 같이 하면 해당 객체를 비구조로 할당할 수 있습니다.) 그런데 이와 .. [ React ] [Chapter 13] 리액트 내장 Hook 내장 Hook 종류 1.useState 배웠던거죠 하지만 한번 더! 상태값을 반환해줍니다. 첫번째 요소는 상태의 초기값을 두번째는 set함수를 const [ text, setText ] = useState(''); 2.useEffect 이것도 배웠죠 부수효과 함수 컴포넌트가 사라질때 혹은 생겨날 때 그러한 부수효과가 나면 호출되는 훅 useEffect(() => { // 부수효과 후 처리 작업 }); 3.useContent 이것도 배웠죠 Content를 생성 한다. 해당 props를 자식 컴포넌트한테 전달할때 거리가 긴 자식 컴포넌트한테 값 전달할 때 사용된다. const TextContext = createContent('디폴트값'); return ( ); // 자식 return ( {(it) => {.. [ React ] [Chapter 12] ref 속성값 ref 속성 리액트로 작업하다보면 실제 DOM 요소에 직접 접근해야 할 때가 있다.예를 들어 DOM이 10개 이상이 있는데 어떤 특정 DOM을 지울때 스크롤은 유지가 되어야 한다던지, 어떤 특정 DOM 요소에 포커스를 주거나, DOM 크기를 알고 싶거나 등등 그럴 때 사용 됩니다.ref 속성을 이용하면 자식 요소에 직접 접근을 할 수 있다. ref 간단 사용 예 import React, { useEffect, useRef } from "react"; function App() { const inputRef = useRef(); useEffect(() => { inputRef.current.focus(); }, []); return ( 확인 ); } export default App; ref 속성값을 사용.. [ React ] [Chapter 11] 커스텀 Hook 제작 커스텀 Hook 리액트가 제공하는 훅을 이용해서 커스텀 훅을 제작할 수 있다.그리고 커스텀 훅을 이용해서 또 다른 커스텀 훅을 제작할 수도 있다.훅을 직접 만들면 쉽게 로직을 재사용할 수 있다.어떠한 언어이든 (특히 java) 코드중복은 죄약이다 라는 말이 있습니다.그러하든 이 재사용성이 큰 장점이 됩니다.리액트 내장 훅 처럼 커스텀 훅도 use로 시작하는게 좋습니다 관리에 유용합니다.전 챕터인 10의 코드를 재사용 할 겁니다. 그 코드에서 필요한 즉 커스텀 할 훅은 const [ member, setMember ] = useState(null); useEffect(() => { serverApi(memberIdx).then(it => setMember(it)); return () => { console.. [ React ] [Chapter 10] Hook의 기초 알기 Hook 챕터 8 useState 편에서 훅에 대해 잠깐 설명 했습니다.이 챕터에서는 훅의 기초를 알아가는 시간을 가지겠습니다.Hook(훅) 컴포넌트에 기능을 추가할 때 사용 하는 함수이다. 예를 들어 컴포넌트에 상태값 추가나 자식 요소에 접근 하거나 할 때 사용하죠리액트 16.8버전 이후 부터 기능이 추가가 되었습니다. 그 전에는 클래스형 컴포넌트를 사용 했습니다. 그러나 이제 훅이 나오면서 많은 개발자들이 함수형 컴포넌트로 바꾸기 시작했습니다. 클래스형 컴포넌트보다 장점이 많고, 리액트 팀에서도 훅에 많은 집중을 하고 있습니다. 그래서 리액트 훅으로 작성 하는것을 추천한다.리액트에서 제공하는 대표적인 두 가지 기능이 있다. 1.useState 상태값 추가 2.useEffect 부수적인 기능들 처리 할.. [ React ] [Chapter 9] 단일 웹 SPA 단일 웹 애플리케이션 SPA SPA(Single Page Application)은 한 개의 페이지로 이루어진 어플리케이션이다. 전통 적인 웹 페이지랑 다른 구성이다. 전통적인 웹 기존에 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때 마다 서버에 리소스를 전달 받아 해석 한 뒤에 화면에 보여주었다. 그런데 요즘 웹은 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 그래서 React는 View랜더링을 사용자 브라우져가 담당하고, 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 바뀐 웹 SPA 단일 페이지 SPA 주의점 1.자바스크립트에서 브라우저로 페.. 이전 1 2 3 4 5 다음
