개발누나

// 복습 Pager란 컨트롤러가 될 수 없음 - 데이터 보여주게 하고... 그런 제어자 역할을 할 수 없다는 것 -> 제어자는 List 컴포넌트가 되어야 함. 이 안에 속한(!) 컴포넌트는 main 역할을 하면 안 됨 이 가지고 있는 녀석을 - startPage는 Pager가 구현하도록 해주자. (여기서는 삭제) Pager가 사용하도록 하는 것 Q. lastPage는 이미 List.js에서 구해줬는데 Pager.js한테 따로 구현하라고 해야할까? -> Pager 컴포넌트를 독립시켜준거니까 넘겨주자! (의존하게 하면 안되도록~) 1) count 넘겨 받아야 2) startPage 구하기 위해 page가 필요함 - 어제 page 구하기 위해 query 사용했었지 이렇게 해주는 이유가 es6랑 무슨 관련이지..

수업 일지/React 2021. 6. 30. 09:31

https://reactjs.org/docs/components-and-props.html - props 개념 - props는 형태에 따라 무궁무진하다. 요지는 property 넘겨받을 수 있고, 넘겨줄 수 있어야 cf) 생활코딩 워딩 "props를 통해 훨씬 더 똑똑한 컴포넌트를 만들 수 있게 됨" 페이저의 페이지를 누를때마다, 데이터 가지고 와줘보자. 1) 이벤트 달아주기 - 사실 필요 없음. 2번째 사진 그림 설명 참고 - 38번째 줄을 보면 Link to로 고쳤기 때문에, '{i+1}을 누르면 여기로 가 - 라는 onClick 의미가 이미 담겨있기에 굳이 또 onClick을 만들어줄 필요 없음 22번째줄 - this뿐만 아니라 "hello"같은 것도 전달 됨 이거 다시 해보기 -> 해보면 알 수 ..

수업 일지/React 2021. 6. 29. 14:36

(선생님 코드는 lastPage 계산식이 1로 나와서 고치는 중) // http://hi.namoolab.com:8080/api/notice/list fetch 옆에 이 주소로 수정 선생님이 local 연결 안해도 쓰게 해두심 (속도 때문에) - 근데 다시 localhost로 나는 바꿔줌 (브라우저에서 확인하는데는 local 주소가 바로 떠서 편리해서ㅎㅎ) 아쉬운 부분이 보인다 ~ // 제목 누르면 detail 페이지 가도록 api/notice/list에서 id 하나 복사해서 api/notice/그 복사한 id 값 넣어서 값 나오는거 확인 -> id에 {} 중괄호 해줘야했음 // vs에서 list.js 원래는 여기도 detail이였는데 id로 바꿔주고 (근데 이렇게 적으면 안 됨. 아래 올바르게 적는 방..

수업 일지/React 2021. 6. 29. 09:35

Q. 스프링(서블릿/JSP)을 이용한 백엔드 개발이란? -> 서버쪽에서 웹 문서를 만들어주는 사람 - 옛날에는 백엔드 개발자라는 말이 없었음 '서버 개발자'(이게 백) vs 클라이언트 개발자 cf) 게임 클라이언트 (상태 정보를 입/출력) vs 게임 서버 (상태 정보/데이터를 공유) 업무 클라이언트 (업무 데이터 입/출력) vs 업무 서버 (콘솔/윈도우 등... 업무 정보/데이터를 공유) cf) 프론트엔드 개발자 - PC, 태블릿, 스마트폰, TV, 냉장고, 자동차... 등등이 다 프론트엔드가 됨 서버에서 문서 만드는 건 백단 - js만으로 문서를 클라이언트에서 다 만듦 - SPA를 만드는 사람 (페이지 로딩 없이) 지금은 웹사이트의 서버(백엔드) 비중이 90% + 약간의 프론트엔드 (js) 프론트엔드 ..

수업 일지/React 2021. 6. 28. 09:35

* 복습 * Q. 리액트를 배우다 말고 node.js 배우고, webpack 개념을 또 배우는 이유. -> 리액트 - bind 개념 있었었지 Node.js 배우는 이유는 webPack을 사용하기 위해 - webPack 실행하기 위해 node.js가 필요한 것 Q. webPack은 왜 배우지? - js는 모듈 시스템이 지원되지 않아서 (그럼 실행코드나 리소스가 공유되지 않는 문제 발생) -> 그 대안이 webPack webPack이 bundel.js를 제공 (이름은 내가 명명). 요지는 한꺼번에 가지고 올 수 있게 된다. - bundle.js가 클라이언트한테 가는 것 이거로 리액트 어플리케이션을 실행 요지는 '개발할때만' webPack과 nodeJS를 사용. 나중에 bundle.js 만들때까지만. js는 ..

수업 일지/React 2021. 6. 25. 11:24

타임리프, 리액트를 같이 쓸 수는 없음 list.html에서 에 있는 부분 지우기 - layout도 날라갔는데 그건 이후에... // onclick -> onClick으로 고치기 onClick 뒤에 함수 만들어주기 데이터를 가지고 와야함 1) 생명주기를 알아야 함 - fetch API 사용하는 위치를 알아야 함. 이걸 알기 위해 React lifestyle을 알아야 함 2) 데이터 요청하는 도구가 달라짐 - xhr은 과거 방식. - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API - fetch API - promise 객체를 사용한 비동기처리 3) CSRF를 이용하는 방법 1) 생명주기 생성자가 제일 먼저 호출 생성자가 호출되는 시점에 render..

수업 일지/React 2021. 6. 23. 14:37

정리 1) onChange를 사용해야한다는 점 정리 2) 객체 없이 호출하면 -> this를 사용할 수 없는 인스턴스 함수가 되어버린다는 점 이렇게 하면 객체가 bind되어서 전달되게 된다. -> 이러면 f1() 해도 값이 나오게 됨. // 이렇게 해주면 오류가 없어짐 - 어제 소그룹 시간에 풀었던 방법보다 간단하다 ㅎㅎㅎ 1번은 x - 리액트는 이렇게 값을 직접 넣어주면 안 됨. 애는 계속 30임. 그리고 다른 값을 넣어도 바뀌지가 않음. 2번이 정상적 - 처음에는 10, 값을 바꾸면 30. (이렇게 state들이 나오는게 정상적) // * 하드코딩 말고 값 얻어오는 방법 * (지금은 하드코딩으로 30 넣어줬지) 첫번째 방법 - 반드시 setState 사용!!! setState 에서는 '바뀔 값'만 넣..

수업 일지/React 2021. 6. 23. 09:38

먼저 이 개념들을 알자. 18. x는 3을 담은 '그릇' 19. y는 x의 또 다른 이름, 별칭인 것 21. x는 참조변수/이름 22. y는 x의 또 다른 이름, 별칭인 것 13. 20이 나옴 15. - f1은 exam.print의 또 다른 이름 - console.log(f1)을 하면 ƒ print(){ console.log(this.kor) }이 나옴 16. 에러가 남 - 생각으로는 f1() 은 exam.print()랑 같은거니까 20이 나와야 할 것 같은데, undefined 에러가 나옴 객체를 통해서 부르는건 Exam을 다 가지고 있어서 this.kor 도 당연히 부를 수 있는건데, f1()으로만 하게 되면 this.kor를 '잃어버려서' 바인딩이 필요함. 다른 말로 풀이 (선생님 언어) - "ex..

수업 일지/React 2021. 6. 22. 17:53