본문 바로가기

프로그래머

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를 만든다. 그것은 우리가 제공한.. 더보기
ReactJS - Props로부터의 Dataflow | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* Dataflow with props - props에서 오는 데이터메인 컴포넌트 앱은 영화 이미지들을 가져올 것이다.그리고 그 영화들은 카드 형태로 보여진다.-> 메인 컴포넌트는 무비 리스트가 있다는 뜻이다.-> 그리고 그 리스트 안에 영화카드엔 해당 영화의 정보가 각각 담길 것이다.-> 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 줄 것이다.-> 어떻게 부모자 자식에게 정보를 주느냐? 바로 props를 통해서이다. 영화리스트를 만들어 보자.4개의 영화를 넣었고, 이 영화들의 '제목'을 자식 컴포넌트인 movie에게 보내고 싶다면?.. 더보기
ReactJS - JSX를 이용해 React Components 만들기 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이전 편에서 다루었던, 코드이다. 코드(paragraph) 사이에 hello thlee!를 삽입한 것을 볼 수 있다. 그에 따른 결과이다. 이번엔 태그 안에 있는 코드를 다 지워보겠다. 예상했듯이 빈 공간이 나타난다. App.css로 가서, css 코드도 다 지우도록 하자. App component를 살펴보자.이것들은 각자 다른 functions과 methods를 가지고 있는데,우리가 기억해야 할 것은 모든 components는 render funciton을 가지고 있다는 것이다. render의 기능은 '이 componenet가 나.. 더보기
ReactJS - Hello world 출력 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* ReactJS 수업을 위해서는 다음과 같은 프로그램을 우선적으로 설치해야 한다NodeJS, npm, Yarn, Create React App Create React App - 웹팩과 같은 툴을 사용할 필요 없이 손쉽게 리액트 앱을 만들어 주는 tool설치를 한 후, 만든 폴더 내로 들어가 yarn start 명령어를 사용해 react를 시작할 수 있다.react를 시작하면, 자동으로 웹 브라우저가 연결된다.(locathost)코드에디터(여기서는 VSC)를 이용해 코드를 수정할 수 있다. 이미 모든 파일들이 셋업되어 있을 것이다.여기.. 더보기
Python - 문법 함수 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 이번에 다룰 함수는 여러가지 기능이 있지만,장황한 코드를 정리정돈하는 수단이 그 기능 중 하나이다. 평균 함수를 구현해보자.def function():의 식으로 구현이 된다.def average(): 함수를 만들고,average() 으로 실행을 해주면, 평균이 구현이 된다. 입력 값은 수시로 바뀔 수 있다.따라서 조금 더 편하게 함수를 구현하기 위해, 입력 값을 같이 넣어줄 수 있다.def average(a,b,c): 10, 20, 30의 입력 값을 넣어주면출력 결과가 잘 나온다. 위에서 만드는 함수는 출력하는 일까지 담당하고 있었다.하지만 함수는 한 가지.. 더보기
Python - 삭제 구현 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 이제 update 버튼 옆에 delete 버튼을 만들어 보자.업데이트는 링크로 처리가 되지만,삭제는 누르는 순간 바로 없어져야 하므로, form으로 처리되어야 한다.왜냐하면 링크로 처리할 경우, 링크를 실수로 공유하게 되면,그 링크를 클릭하는 순간 삭제가 일어나기 때문이다. 클릭했을 때, process_delete.py로 가게 한다.pageId를 지우게 설정. value를 delete로 설정해준다. 이제 delete라는 버튼이 생겼다. delete 버튼을 누르면,process_delete.py의 주소로 이동하게 된다.내부는 아직 꾸미지 않았기 때문에, 오류.. 더보기
Python - 수정구현 | 생활코딩 강의 복습 | 프로그래밍 공부 * 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.* 이제 사용자가 업데이트(읽기, 쓰기) 기능을 구현할 수 있게 만들어보자. if문을 활용하여, 컨텐츠를 생성하였을 때에만 update가 나오게 만들자.id 값이 있는지 없는지를 체크해, 있는 경우에 update를 할 수 있게 만든다.id 값이 있는 경우네는 update.py를 연결하고, .foramt(pageId)로pageId 값을 주소로 준다. 다음과 같이, WEB으로 가면 update 링크가 보이지 않고, 특정 컨텐츠 항목으로 가면, update 링크가 나타난다. update.py 파일을 만들어보자.create.py를 복붙하고, value 라는 속성을 통.. 더보기

티스토리툴바