본문 바로가기

ire0546

 (12)
GitHub Branch 만들기 branch 작업을 해보는 연습을 해보려고 한다. 원래 쓰던 로컬 폴더에서 우클릭을 하고 나서 git bash를 불러오고 먼저 현재 브랜치를 확인했다. 브랜치는 만들어 진 것이 없으니 당연히 처음에는 master로 구성되어있다. master에서 브랜치를 만들고 전환하기 위해 다음과 같은 명령어를 사용하였다. git branch git checkout 각각의 명령어는 브랜치를 생성한 뒤에 브랜치를 전환하는 명령어이다. 혹시 현재 위치하고 있는 브랜치의 이름이 궁금하다면 아래의 명령어를 입력하여 확인해보면 된다. git branch 간단하게 브랜치를 생성하고 변경하는 것을 해보았다. 그리고 브랜치를 생성한 다음은 원래 하던 것처럼 변경된 파일을 하나 만든 다음 git add * git commit -m "m..
컴포넌트 이벤트 만들기 이전에는 그냥 태그 안에 코드를 넣어서 단순히 사용하는 방식을 사용했다. 하지만 이번에는 컴포넌트를 이용해서 정리해보는 시간을 가졌다. 이미 Subject라는 컴포넌트는 다른 곳에 만들어두었고, subject 컴포넌트는 아래와 같다. 우선 Subject.js를 살펴보자. 그러면 이전에 한 곳에 만들었었던 onclick 이벤트를 사용해서 기존의 이벤트를 막는 preventDefault()를 사용한 다음, this.props.onChangePage() 함수를 사용하여 이 onChangePage 함수를 실행할 수 있도록 한다. 그리고 뒤에는 이 컴포넌트 객체 자신을 가리킬 수 있도록 함수 뒤에 .bind(this)를 추가해준다. 그리고 나서 다시 App.js를 살펴보자. Subject 컴포넌트를 물러온 모습이..
bind 함수와 setState 함수 이해하기 오늘 강의는 bind 함수와 setState 함수 이해하기에 대해 다뤘다. 1. bind() bind, 묶어준다 라는 뜻. render()라는 함수가 호출될 때, this는 그 컴포넌트 자신을 가리킨다. 위는 콘솔에서 테스트를 한 것이다. 우선, obj라는 변수를 만들어서 특정 값을 준다. 그리고 나서 bindTest()라는 함수를 만들게 되는데, 이 함수에서 this.name을 출력하게 하고 싶다. 그러나 여기서 this라는 객체가 무엇인지는 정의가 전혀 되어있지 않다. 이렇게 했을 때 undefined가 뜨는 것은 당연하다. 이 this가 특정 개체를 가리키게 하고, 이 obj값의 name을 출력하게 하고 싶다면, this가 무엇인지를 설정하게 해줘야 한다. 그래서 위와 같이 bindTest의 함수에..
이벤트 state props와 render 함수 역동적으로 만들어주는 기술인 이벤트에 대해서 공부를 하였다. 예를 들어 클릭한 것에 대한 화면을 표시할 곳이 매번 달라지고 화면 출력이 달라지는 경우. mode를 설정해주기 그 mode에 따른 살태와 값을 설정해주기 render() 함수가 다시 호출됨으로써 다시 화면을 출력하게 되는데, 이 때 일어나는 이렇게 이벤트를 만드는 것이 목표임. porps와 state가 바뀌면 다시 함수가 호출 되게끔 만들어야 한다. 1. mode를 설정하고, 그 mode가 되었을 때 설정되는 props 값이라던지 state 값을 따로 설정해준다. 2. 그리고 if 문을 통해서 mode가 원하는 조건에 충족되었을 때, 어떤 값들을 바꾸게 될 것인지 설정해준다. 3. 이 값이(props나 state 값) 바뀌면 render() ..
[4] React State 일단 강의 진도는 현재 컴포넌트 파일 분리하기까지 했다. 이전의 실습해서 App.js 파일에 한꺼번에 만들었던 컴포넌트들을 src 디렉토리에 components 디렉토리를 만들어서 각자 클래스 이름으로 js 파일을 만든 다음에 분산시켰다. 다음 코드 형식과 같이 모두 분리해보았다. 본래 컴포넌트 클래스를 가져다가 와서 React를 불러오는 코드를 상단에 추가해 준 다음에 export 문을 추가하여 다른 파일에서 이 파일을 import 할 수 있도록 해 주었다. 그리고 App.js에서 이 파일을 불러와야 하므로 상단에 import 문으로 불러와서 App.js에서 오류가 나지 않고 잘 사용되는 모습을 볼 수 있었다. 분할을 하더라도 보이게 하는 메인 코드는 같기 때문에 결과에는 지장이 없었다. 다음은 sta..
[3] React가 없다면? React의 장점 일반 html 코드를 react로 옮기는 연습을 간단하게 해 보았다. 이것이 컴포넌트의 느낌인가, 싶었다. 확실히 편하기는 할 것 같다. 웹 프로그래밍 프로젝트를 하면서 엄청 복잡하고 나눈다고 나눠도 나눠지지도 않고 관리도 힘들었는데 리액트로 작업을 하면 한 눈에 볼 수 있을 뿐더러 분할되니 관리도 훨씬 편리할 것 같았다. 같이 일할 때에도 많이 도움이 될 듯 하다. 컴포넌트를 몇 개 더 실험삼아 추가해보았다. 리액트는 일단 '정리의 도구' 정도로 보면 된다고 한다. 이것을 다른 사람이 정의한 웹 페이지나 나의 웹 페이지에 가져와서 쓸 수 있다는 엄청난 장점이 있다. 위와 같이 정의하던 태그 안에 this.props.title과 같이 props(속성 attribute와 동일한 것이라고 생각하면 됨)를 사..
[1-1] React 설치 오류 'npm run start' vs code에서 리액트 샘플 창을 띄우려고 npm run start를 했으나 위와 같은 오류가 나면서 실패함. "scripts": { "start": "react-scripts start" } 이 줄을 추가하니 이제 다른 오류가 발생해서 오류 메세지를 한 번 읽어보았다. 일단 생활 코딩에서 나오는 실행 전에 화면과 같은데, 어떤 요구되는 파일이 없는 것 같았다. 여러가지를 시도하고 깔아봤는데 결국은 정말 index.html 파일이 없어서 문제였다. 깔리는 과정에서 2.1.8을 제대로 깔았다고 생각했는데 그냥 최신 버전이 문제였다. 최신 버전을 까니까 튜토리얼대로 잘 진행된다. 이유는 모르겠다...
[1] 생활코딩 React 공부 시작 class 기반의 객체 지향 프로그래밍을 기본으로 수업을 진행할 예정. 웹사이트는 매우 빠르게 복잡해진다. html 코드로 구현을 하려면 정말 정말 복잡해진다. 복잡한 코드를 정리하고 싶어지는 욕망에 따라 리액트를 사용하면 구현 시에 큰 도움이 될 것이다. 이것이 우리가 리액트를 배워야 하는 이유이다. 리액트는 컴포넌트로 이루어져 있다. '컴포넌트'를 이용하는 것이 기본이자 최대의 장점이다. 가독성, 재사용성, 유지보수 면에서 큰 장점을 가지고 있다. 남들이 만든 컴포넌트를 사용하여 더 많은 UI를 개발할 수 있다. coding -> run -> deploy 방식으로 진행할 예정이다. 공식 문서에 익숙해지는 것이 좋다. 1. 개발환경 세팅하기 https://ko.reactjs.org/docs/gettin..
[1] Python for WEB 오늘은 생활코딩에 있는 Python을 웹에 어떻게 이용하면 될지에 대한 강의를 들었다. 앞으로도 계속 이 강의를 베이스로 파이썬을 다뤄 볼 예정이다. https://opentutorials.org/course/3256/19805 Python 수업 예고 - 생활코딩 수업소개 이 수업에서는 WEB1에서 만든 웹사이트에 Python을 투입했을 때 어떤 효과를 얻을 수 있는지를 알려드리는 수업입니다. 강의 opentutorials.org 1_Python을 배웠을 때 효과는 모든 html을 한 번에 바꿀 수 있는 효과. CGI라는 중요한 기술이 있다. 사용자가 받은 데이터를 원본 파일을 수정하지 않고도 나타내줄 수 있다. 이것이 파이썬과 웹 서버를 연동하면 좋은 점들이다. 2_설치 및 연동 환경 구축을 한다. c..
React와 React native란 1. React란? 리액트는 페이스북에서 제공해주는 frontend 라이브러리이다. 프레임워크가 아닌 라이브러리이기 때문에 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않기 때문에 가볍고 선택의 폭이 넓다. 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주변 개발자가 설계한대로 UI가 만들어져서 사용자에게 보여진다. 2. 왜 React를 사용하는가? 이것을 사용하지 않아도 웹페이지를 만들 수 있지만, 동적인 데이터를 UI에 전달하기에는 적합하지 않다. 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있기 때문에 사용한다. 리액트를 사용하는 경우는 언제가 적합할까. 정적 서버를 만드는 경우라면 html을 사용하는 것이 클라이언트에게 전달하는 것이 단순하고 로딩 속..

티스토리툴바