J's Rhapsody

// Render: componentWillMount() -> render() -> componentDidMount() 다음의 사이클은 자동으로 발생함 (원하든 원하지 않든) 컴포넌트가 '존재'하기 시작하면 will mount -> did render -> did mount 예시) 영화앱 제작 시, will mount를 진행할 때 API에 작업 요청 해당 작업 수행이 완료되면, 그 다음에 데이터 관련된 작업 진행 정리 will mount를 보면 사이클이 시작되었음을 알 수 있음 render를 보면 컴포넌트가 리액트 세계에 '존재'하게 되었음을 알게 됨 did mount를 보면 성공적으로 리액트 세계에 컴포넌트가 자리잡았음을 알게 됨 // Update: componentWillReceiveProps() -..

리액트는 엘리먼트가 많을 경우 Key를 줘야 함 ----------------------------------------------------------------------------------------------------------------------------------- 예시) 영화 제목에 숫자만 출력되는 것을 원하지 않을 경우 포스터에 출력되는 값이 숫자나 true/false 같은 값이 되는 것을 원하지 않을 경우 cmd창에서 yarn add prop-type 명령어 실행 부모 컴포넌트에게 받는 정보의 종류가 무엇인지 체크할 수 있음 title을 숫자로 지정한다면 에러 발생 이를 통해 우리가 얻는 정보가 number가 아님을 알 수 있음 만약 부모 컴포넌트가 string을 보내면, Prop..

'movies' array를 가져다가, 맵핑을 해서(map) 새로운 array를 만든다. 해당 movies array 안에 엘리먼트를 활용하여 Document 참조 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 관련 강좌. 출처 https://www.inflearn.com/course/reactjs-web/# 리액트 처음이시라구요? React JS로 웹 서비스 만들기! - 인프런 리액트가 뭔지, 차근차근..

기억할 점 컴포넌트 > render > return > JSX (JSX: 리액트로 작성하는 html) ----------------------------------------------------------------------------------------------------------------------------------- 리액트의 주요 컨셉 2가지 state와 props 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 준다 어떻게? props를 통해서 영화들의 '제목'을 자식 컴포넌트인 Movie컴포넌트에 보내고 싶다면? Movie > title 이 있고, Movie.js에서 title을 props로 불러온다. Why? Moivie컴포넌트는 title 이라는 요소가 있으니까 요소를 접근하는 ..

JSX란 자바스크립트 안에 html이 자리잡고 있음 리액트 컴포넌트를 만들 때 사용하는 언어 Rule css의 'class'가 아니라 'className' 이라고 쓴다 앱 컴포넌트는 각기 다른 functions과 methods를 갖고 있다. 기억할 점 모든 컴포넌트는 render function을 갖고 있다 render 기능은 '뭔가를 보여주는, 출력하는' 기능 render 기능 = '이 컴포넌트가 나에게 보여주는 것이 무엇인가' Creating React Components with JSX [동작 순서] yarn start - 서버 실행 JS의 모든 코드를 가져와서 html 파일에 담는다. html 파일은 public 폴더에서 찾을 수 있다. 우리는 index.js에 파일을 만들고 있다. index.j..

eXERD 툴을 보면 상단에 1:N 관계선만 보인다. 1. 1: 1 관계선을 그리기 위해선 우선 1대 다 관계선을 그어준다. 2. 관계선을 클릭한 후, 마우스 오른쪽 버튼을 눌러서 속성에 들어간다. (관계선을 클릭한 후, 스페이스 바를 눌러도 속성창이 뜬다) 3. 자식 테이블 설정을 바꿔주면 끝!

jQuery메소드 slideToggle()을 이용하면 접거나 펼치기 기능을 사용할 수 있다. 아래의 스크립트는 slideToggle을 이용할 때 텍스트를 바꾸는 소스이다.

eXERD 데이터베이스 연결하기 eXERD는 데이터 모델링을 직관적으로 쉽고 빠르게 할 수 있도록 도와주는 데이터 모델링 툴이다. eXERD에서 리버스 엔지니어링을 통해 데이터베이스의 테이블을 가져오는 방법을 알아보자. 1. 왼쪽에 네비게이터 메뉴에서 마우스 오른쪽 클릭, 새 프로젝트를 선택한다. 2. 일반 >> 프로젝트를 선택한다. 3. 프로젝트 이름을 적은 후, 완료 버튼을 누른다. 4. 프로젝트 선택 후 마우스 오른쪽 버튼을 클릭하여 새로 만들기에서 리버스 엔지니어링을 선택한다.리버싱 엔지니어링은 DBMS의 객체들을 E-R 모델로 역공학해서 가져오는 기능이다. 5. 파일 이름을 입력하고 다음 버튼을 누른다. 기존에 있던 프로젝트가 아닌 새로운 프로젝트를 만들고 싶다면 밑에 새로운 프로젝트를 체크한 ..

Git 저장소 만들기 프로젝트 폴더 만들기자신이 하고 있는 프로젝트에 사용될 파일들을 모아둔 폴더를 의미함 pwd 명령어를 입력하면 자신이 있는 장소를 알려준다 ▶ C드라이브 밑에 Users에 Minji Kang 이라는 디렉토리에 있다는 뜻 프로젝트 파일을 만든다.1mkdir gitstoragecs git이라고 치면 user가 사용할 수 있는 명령어의 리스트가 나온다. 그 중 start a working area를 본다. 작업을 시작하려고 할 때는 clone이나 init을 쓴다.그 중에 init은 현재 디렉토리에 작업을 진행하겠다고 Git에게 알려주는 것이다. 명령어로 git init을 입력하면 현재 디렉토리에 Git을 초기화했다고 나온다. 현재 디렉토리의 파일 목록을 보여주는 명령어 ls -al을 입력..

Git 설치하기 Git 공식 홈페이지https://git-scm.com/ 다운로드 버튼을 누르면 설치 파일이 받아진다.아래에 진행과정에서 default 값은 변경하지 않고 Next 버튼을 눌러 진행한다. Install 버튼을 누르면 Git 설치가 진행된다. 마지막으로 Finish 버튼을 누르면 설치가 완료된다. 윈도우 검색을 이용하여 git을 검색하면 Git Bash 프로그램이 뜬다. Git Bash는 무슨 프로그램일까? 윈도우를 리눅스, 유닉스 계열의 컴퓨터의 명령어를 통해서 제어할 수 있도록 하는 프로그램 git이라고 입력했을 때 위와 같은 화면이 나오면 자신의 컴퓨터에 Git이 잘 설치되었다는 뜻이다.