프로그래밍 썸네일형 리스트형 [개체지향 프로그래밍] 개체지향 프로그래밍이란? | 개체지향 프로그래밍의 필요성 | 개체지향 프로그래밍 특성 Ch03. 개체지향 프로그래밍의 필요성 구조체의 한계 데이터의 비인간화 데이터가 많아지면 관리가 힘듦 실수할 여지가 증가 보완책 : 구조체 사용 한계1 : 여전히 데이터왕 동작이 분리되어 있음 한계2 : 어떤 구조체가 어떤 함수랑 연관 있는지 찾기 복잡함 사람이 세상을 인지하는 법 사람은 세상을 물체(object)의 집합으로 인지 물체는 상태를 가질 뿐만 아니라 동작도 할 수 있음 상태와 동작 상태 - 변수 동작 - 함수 모든 것이 개체는 아니다! 개체지향 프로그래밍 OOP 프로그래밍을 구성하는 기본 요소를 개체로 보려는 노력 OOP에서 프로그램이란? 상호작용하는 개체들의 집합 절차적 프로그래밍은 실행할 명령어의 목록을 프로그램으로 봤음 절차적 프로그래밍은 매우 객관적 어떤 프로그램이라도 최종적으로는 절.. 더보기 ReactJS - Loading States | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 우리가 필요한 데이터가 항상 존재하지는 않을 것이다.데이터 없이 컴포넌트가 로딩을 하고,데이터를 위해 API를 불러서,API가 데이터를 주면,컴포넌트 state를 업데이트 할 것이다. 자, 이제 API콜을 타임아웃 기능으로 유사하게 구현해보자.이를 위해, 영화리스트를 function 내부로 이동한다.이제 state 내부는 텅 비어있다.이제 함수는 영화가 나타나기를 5초를 기다릴 것이다.이 에러를 확인해보면, state.movie가 존재하지 않음으로 인해 property 'map'이 정의되지 않았다고 나온다.여기서 map을 돌리려고 .. 더보기 ReactJS - this.setState() 연습 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 포스팅에서는 컴포넌트 외부에 있는 무비 리스트를 state 안으로 옮겨보자.컴포턴트 외부에 있는 무비 리스트를 삭제하고, state 안에 붙여넣는다.그러면, 에러메시지; 'movie'는 정의되지 않았다고 뜬다.왜냐면 컴포넌트가 movies를 더이상 찾을 수 없기 때문이다.그래서 movies 앞에 this.state. 를 붙여주자.저장, 새로고침을 하면 이전과 동일.이전 시간 작업한 greeting을 삭제하고,이제 기존 영화 리스트에서 한 개의 영화를 더 추가하는 작업을 하자. componentDidMount() 밑에 timeo.. 더보기 ReactJS - Thinking in React: Component State | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 포스팅에서 다룰 state는 리액트 컴포넌트 안에 있는 오브젝트이다.state가 바뀔 때 마다, 컴포넌트는 다시 render할 것이다. 첫번째 state를 만들어 보자.state = {greeting: 'Hello!'}와{this.state.greeting}을 넣어보자.Hello!가 출력된다.componentDidMount() 내에 함수를 넣어보자.컴포넌트가 mount되면 5초(5000ms)를 기다리고 greeting을 업데이트 할 것이다.위에 작성한 것처럼, state를 직접적으로 쓰면 안된다.저장하고 살펴보면,직접적으로 s.. 더보기 ReactJS - React에서의 Lifecycel Events | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 시간에 다룰 component lifecycle이란, 컴포넌트는 여러 기능을 정해진 순서대로 실행하는데, 그것을 의미한다.우리가 render을 할 때, 그러니까 우리가 컴포넌트를 띄울 때, 위의 사진대로 하겠다는 것이다.componentWillMount() -> render() ->componentDidMount() 이 싸이클은 자동으로 발생한다. 원하든 원하지 않든!정말 위에 말한 순서대로 발생하는지 console.log()을 넣어보자.콘솔 창을 띄워보면, 정말로WillMount -> DidRender -> DidMount순.. 더보기 ReactJS - Validating Props with PropTypes | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 앞의 포스팅에서 출력 결과는 잘 나왔지만, 콘솔 창을 보면 에러가 뜬다."Each child in an array or iterator shoud have~~~" => array에 있는 각 차일드는 반드시 고유한 key prop을 가져야 한다. 이 말은, 지난 번에 작성한 맵핑은 새로운 array를 만든다.따라서 우리는 array 안에 많은 영화를 갖게 될 것이다. React를 엘리먼트가 많을 경우, key라는 것을 줘야한다.이 key는 고유해야 한다. 따라서 우리는 각 엘리먼트에 id 값을 부여하거나...또는 mapping을 통해.. 더보기 ReactJS - Lists with .map | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 저번 포스팅에서 만들어 본 영화 리스트 코드(아래)는 효율적이지 않다.리스트가 같은 비슷한 형식의 코드의 복사-붙여 넣기 형태로 되어있기 때문.리스트가 많아지면 곤란해질 수 있다.API에서 긁어온 엄청난 양의 영화정보를 불러오고 싶을 때, 어떻게 해야 할까. 이를 위해, 배열(array)를 만들어보자.배열 안에는 title, poster가 있다.지금 하는 작업은 api에서 찾은 정보를 배열할 수 있는 array를 만드는 것이다. array 내의 map이라는 기능을 사용해보자.map은 새로운 array를 만든다. 그것은 우리가 제공한.. 더보기 Node.js - 파일을 이용해 본문 구현 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 자, 이제 본문 내용을 텍스트 파일을 읽어 들여 동적으로 구성해보자.일단 읽어 들일 텍스트 파일을 3개 만든다. 파일 안에는 내용으로 채워주고, 블럭 표시된 저 부분을 우리가 읽은 파일로 치환해주면 될 것이다.저 안의 내용을 다 지우고, 텍스트 파일을 읽어 들인 것을 description에 저장, (fs.read~~~)${description}으로 나타내 준다. 다음과 같이 어느 페이지를 클릭하느냐에 따라 내용이 바뀐다.main.js의 내용을 바꾸면 수정사항이 적용 되었는지 확인할 때마다 cmd창으로 껏다 켜야하지만,텍스트 파일 내의 내용은 main.js가.. 더보기 Node.js로 파일 읽기 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* Node.js로 파일 내용을 읽어보자. 우선 파일을 만들자. 이름은 fileread.js와 sample.txt샘플 텍스트에 내용은 아무런 텍스트를 붙여넣자.우리가 읽을 내용이다. 파일을 읽어오는 코딩이다. 내용은 이대로 붙여 넣자. 우리는 sample.txt의 내용을 읽어올 것이다.console.log(data)로 내용을 출력한다.결과는...? 이상한 내용이 나온다.글자를 못 읽어 들이는 것이다. 그렇기 때문에 utf8 형식으로 읽어올 수 있게 설정한다.결과는...? 텍스트 파일의 내용을 잘 읽어 들이는 것을 볼 수 있다. 더보기 Node.js - URL을 통해 입력된 값 사용하기 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* http://localhost/?id=HTML이라는 주소가 있다고 해보자.여기서 id=HTML에 해당하는 부분을 우리는쿼리 스트링(query string)이라고 부른다. 본 포스팅에서는 쿼리 스트링에 따라 다른 정보를 보여주는 것을 해볼 것이다. 다음과 같이 코드를 입력한다.우리는 url이라고 하는 모듈을 url이라는 변수를 통해 사용할 것이다.따라서 기존의 url 상수 값은 _url으로 바꿔준다. 자, 그렇다면 console.log를 통해 queryData에는 어떤 값이 들어가 있는지 한 번 보자. 파일을 저장하고, cmd 창에서 node 파일명 을 입력.. 더보기 이전 1 2 다음
