분류 전체보기189 [React18] 합성 >> 컴포넌트에서 다른 컴포넌트를 담기 - 틀을 잡고, 도화지에 기반을 다진다. =틀을잡고 : 나는 쉽게 뼈대를 만든다고 생각했다 뼈대 컴포넌트 = 도화지에 기반을 다진다 : 도화지는 Frames를 그려줄 BuildUp 함수를 말하고 기반을 다진다는것은 >>도화지BuildUP에 틀을 잡은Frames의 {props.children} 에 기반을 다져준다는 것이다. 이때 이방식은 여러 가지 방식으로도 사용할 수 있습니다.똑같은 방식으로 틀을잡고, 도화지에 틀에 기반을 다져줍니다. >>틀을다져 줍니다. 이번에는 2곳을 props를 통해서 전달받습니다. >> 도화지에 틀을다져 줍니다. >> 이번에는 Frames 안에서 직접 태그를 사용하여 그려준것이 아니라 이미 생성해 놓은 함수를 props를 통하여 틀에 전달해.. 2023. 1. 26. [React18] React - Form >> 제어컴포넌트 - HTML 에서 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다. - React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state속성에 유지되며 setState()에 의해 업데이트 됩니다. -React state를 single source of trust 로 만들어 두 요소를 결합 할 수 있습니다. 그러면 폼을 렌더링하는 React 컨포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 합니다. - event.target은 해당 이벤트가 발생한 해당 엘리먼트를 의미한다. class NameForm extends React.Compo.. 2023. 1. 22. [React18] 리스트와 Key -- 여러개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 {}를 이용하여 JSX에 포함시킬수 있다. const numbers = [ 1,2,3,4,5 ]; const listItems = numbers.map( (number) => {number}); const root = ReactDOM.createRoot(document.getElementById('root')); root.render({listItems}); -- 일반적으로 컴포넌트 안에서 리스트를 렌더링 합니다. const numbers = [ 1,2,3,4,5 ]; function NumberList(props){ const numbers = props.numbers; const listItems = numbers.map( number => .. 2023. 1. 21. [React18] 조건부 렌더링 -- Greeting 컴포넌트에 전달되는 props 값에 따라서 UserGreeting 또는 GuestGreeting 을 나타낸다. function UserLogin(){ return Hello, users } function GuestLogin(){ return Hello, guest } function LoginCheck(props){ const loginCheck = props.loginCheck; if(loginCheck){ return }else{ return } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); -- 엘리먼트 변수 >> 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건.. 2023. 1. 21. [React18] setState() State를 올바르게 사용하기 1. State 값을 직접 수정하지 마라 this.state.comment = 'Hola" (X) 잘못된 사용방법 * state 값을 직접 수정할 수 있는것은 Constructor(props){} 안에서만 지정할수 있다. 2. setState() 를 사용해라 >> setState( updater [,callback] ) >> updater와 callback 함수를 인자로 가지고 있으며, callback은 생략이 가능하다. >> updater는 다음과 같은 형태를 가지는 함수이다. -- (state, props) => stateChange state는 변경사항이 적용 되는 시점에 컴포넌트가 가지는 state에 대한 참조로, 대신 전달된 state, props를 기반으로 새로운.. 2023. 1. 17. [React18] props 컴포넌트에서 전달되는 속성은 props로 전달된다. function Comment(props) { return ( {props.author.name} {props.text} {formatDate(props.date)} ); } Comment 컴포넌트를 더 작은 컴포넌트로 쪼개어 보자 function Avatar(props){ return( 2023. 1. 11. [Apache] Apache, Tomcat 연동하기 Apache와 Tomcat을 연동하기 위해서는 mod_jk 라는 모듈이 필요하다 해당 모듈은 apachelounge 에서 다운로드가 가능하다. 다운로드를 진행 한 후 해당 파일의 압축을 풀게되면 mod_jk.so 파일이 존재하는데 해당 파일을 Apache 폴더의 modules 안에 넣어주도록 하자 이렇게 넣어준 후 C:\Apache24\conf 로 이동하여 설정을 추가하도록 하자 -- 새로 추가해야할 파일 >> mod_jk.conf >> workers.properties -- 추가 수정이 필요한 파일 >> httpd.conf - httpd.conf 맨 하단에 해당 내용을 추가해준다. 이렇게 설정을 해준 후 Apache 와 Tomcat을 실행시킨 후 정상적으로 연동이 되었는지를 확인해 보자 정상적으로 연동.. 2023. 1. 3. [Apache] Apache 띄우기 Apache 를 띄우기 위해서 Apache 를 다운로드 한다. Apache를 검색하여 주소로 접속해서 다음과 같은 순서로 다운로드한다. 1. 2. 3. 4. 5. 다음과 같은 순서로 다운로드를 진행 해 준다음 다운로드 파일을 압출해제 한 후 C root로 Apache24 폴더를 옴겨준다 그 후 httpd.conf 파일을 조금 수정해 준다. SRVROOT 는 현재 Apache24 폴더의 절대 경로를 나타내는 것으로 현재 Apache24 폴더의 경로를 적어주면 된다. 이렇게 정의한 SRVROOT를 ServerRoot 의 값으로 사용할수 있도록 정의 하였다. >> Listen 지시어는 서버가 특정 포트나 주소와 포트 조합에서만 요청을 받게 한다. >> 현재는 80 포트를 통해 들어오는 요청을 받도록 설정해 놓.. 2023. 1. 1. [React18] 엘리먼트 렌더링 React 엘리먼트를 렌더링 하기 위해서는 DOM엘리먼트를 = document.getElementById('root') ReactDOM.createRoot()에 전달한 다음 = ReactDOM.createRoot(document.getElementById('root'))) React 엘리먼트()를 root.render() = ReactDOM.createRoot(document.getElementById('root')).render(element) 에 전달해야 합니다. [[ 기존에는 ReactDOM.render(element, destination) ]] 으로 출력을 실시했었다. >> 이렇게 렌더링 된 엘리먼트 업데이트 - React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자.. 2022. 12. 11. [React] 외부 데이터 사용 - 오늘날 웹앱에서 외부 데이터를 다루는 방식은 상당히 표준화 됬으며, 다음과 같은 순서를 따른다 >> 1. 앱이 원격 서비스에게 데이터를 요청한다 >> 2. 원격 서비스는 요청을 수신하고 요청된 데이터를 돌려보낸다 >> 3. 앱이 그 데이터를 받는다 >> 4. 앱은 받은 데이터를 가공해 사용자에게 보여준다. == 웹 요청에 관한 기초 == >> 브라우저에게 서버로 요청 정보를 보내라는 지시와도 같다. 브라우저는 요청을 전송하고, 잠시후 서버로 부터 응답을 받으며, 남은 일을 처리한다. 이 모든 통신과정은 HTTP 프로토콜 떄문에 가능하다. >> 브라우저가 HTTP를 사용해 만드는 요청을 HTTP 요청이라고 한다. >> 페이지를 다시 로딩하지 않고도 비동기식 요청과 데이터 처리를 수행하는 기술을 Ajax.. 2022. 12. 2. 이전 1 2 3 4 5 ··· 19 다음
