본문 바로가기
반응형

분류 전체보기514

4. JSX / render / reactDOM / index.html / index.js JSX 이렇게 JS안에 html이 있는데 이를 JSX라고 부른다. JSX는 리액트 컴포넌트를 만들 때 사용하는 언어. JSX의 규칙은 간단하다. 예를 들어 css의 class가 아닌 className 이라고 사용한다. 소스는 logo를 사용하며 위에 logo가 정의되어 있다. 리액트는 컴포넌트 기반이기에 리액트의 출발점은 바로 컨포넌트 디자인! 제작할 컴포넌트는 3가지 1. 무비 컴포넌트 (앱 컴포넌트) 2. 무비 카드 3. 무비 커버 컴포넌트는 다른 파일에 작성한다. App.js, App.css 안에 있는 샘플내용들은 삭제! +. 모든 컴포넌트는 render function을 가짐. render의 기능은 컴포넌트가 나에게 보여주는 것. +. 하단의 나의 코드에선 class가 아닌 function으로 작.. 2019. 7. 3.
git push 에러 발생 해결방법 에러내용 hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. 에러 발생 git push 명령어를 실행하여 내 로컬 레포지토리의 내용을 github 원격 레포지토리로 업로드(push)하려 했는데 되지 않았다. 에러의 이유 github에서 레포지토리를 생성할 때, README.md 파일을 생성했기 때.. 2019. 7. 3.
Untracked files 에러 발생 및 해결방법 Untracked files에러 발생시 대처법 git clean -f untracked 파일을 모두 지울 수 있다 git clean -fd 디렉터리까지 지우려면 -d 옵션을 추가 git clean -fd --dry-run 지워질 파일을 미리 확인하여 커밋하지 않은 파일을 지우는 실수를 피함 2019. 7. 3.
3. CRA / npm / yarn / create-react-app 사이트의 설치 내용을 그대로 따라 하면 된다. 그러나 사이트와 달리 npm이 아닌 yarn으로 설치를 진행 (우선, 설치는 yarn을 통해 완료되기에 이전에 yarn이 설치되어있어야한다.) npx create-react-app movie_app cd movie_app yarn start (npx comes with npm 5.2+ and higher, see instructions for older npm versions) 입력을 하면 다음처럼 진행된다. 하나하나 차례대로 설명해보면 1. npx create-react-app movie_app 을 입력하면 다음처럼 4개의 scripts(start,build,test,eject)가 생성된다. 2. cd movie_app yarn start 을 입력했을시엔 .. 2019. 7. 2.
2. 리액트 / 웹팩 / 페이스북 / create react app 이전에 npm node.js Yarn 설치할 것 리액트 코드를 JS로 바꿔주는 툴이 필요 이를 트랜스파일러 / 트랜스포머 라고 부름 웹팩 우린 웹팩이란 트랜스파일러를 사용할것임. 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해줌 모듈번들러라고 부름 JS 최신버전 es6, ecmascript6 이 버전은 유용하고 편리한 기능이 많지만 모든 브라우저가 이해하진못함. 웹팩은 es6를 브라우저가 이해할 수 있게 변경해줌 그러나 시간이 부족한 경우 페이스북에서 초보자들을 위해 제공해주는 create react app 툴을 이용하여 설정 작업 없이 한번에 리액트 앱 구현 가능 웹팩은 추후 풀스택학습에서 다루기로 하고 여기선 미리 설치된 개발서버(pre-built-development server)로 학습한다. 2019. 7. 1.
1. React란? / 핫한 이유? React가 핫한 이유 1. JS기반이라 JS만 잘하면 됨 (angular,vue js처럼 다른 언어 배우지 않아도 됨) 2. 구조가 깔끔하다. 요소별(컴포넌트별)로 나눠서 작업가능하기에 요소를 다른 곳에도 사용가능 +. JSX란 리액트로 html을 사용하는 방법 3. 단방향 데이터 플로우(Data -> UI)를 가지기에 데이터는 항상 일정 장소에 있고 그 장소에서만 변경가능. 상태가 변했을 시 데이터는 그대로 있고 UI만 업뎃된다. 즉, 데이터가 UI를 변경시키는 것. (Angular의 경우, 데이터는 view나 model로 변한다.) 4. 방대한 커뮤니티, 오픈소스 5. 프레임워크가 아닌 UI 라이브러리이므로 파이썬,루비,nodejs 랑 섞어서 쓸 수 있다. model, view, controller.. 2019. 7. 1.
0. ubuntu bash shell 설정하기 / node.js / npm 설치 ubuntu bash shell 설정 1. 최소 성능 확인 설정 > 시스템 > 정보 2. 개발자모드로 변경 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 설정 > 업데이트 및 보안 > '개발자용' 태그 > '개발자 모드' 선택 3. 윈도우용 리눅스 프로그램 설치 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 제어판 > 프로그램 > 프로그램 및 기능 > windows 기능 켜기 끄기 > 'Linux용 windows 하위시스템' 체크 > 재부팅하기 4. lxrun 설치 cmd 관리자 권한으로 실행 lxrun /install 입력하기 (윈도우 로그인을 이메일 계정으로 한다. 로컬계정은 PC이름을 영문으로해야한다.) Unix 사용자 생성 후 설치완료 이제 bash 사용가능 우분투.. 2019. 7. 1.
[FC] 14. 크롤링 자료 엑셀저장 / openpyxl / load_workbook / 1. 웹 자원 요청 결과를 숫자로 나타낸 것을 ___ 2. 웹 자원 요청시 ___ 번 응답 코드가 돌아오면 요청 정상 처리 1. http 상태 코드 (응답코드) 2. 200 웹과 관련된 선행지식이 있어야 크롤링할 수 있다. 엑셀파일로 저장하자 우선 이전에 작성한 py와 동일한 위치에 빈 엑셀파일(rank.xlsx)을 만들자 엑셀 파일을 다루기 위해 from openpyxl import load_workbook as load 를 추가하고 엑셀파일위치도 입력하자 SAVE_DIR = "c:/Users/last2018/dev/python/basic/11 crawler/rank.xlsx" 이제 엑셀파일을 저장하는 함수를 만들어보자 그리고 실행시켜주면 엑셀파일에 저장된 것을 확인할 수 있다. import reque.. 2019. 6. 30.
[FC] 12. 태그없앤 상세한 크롤링 / BeautifulSoup / select / find_all / get_text() 1. ___ 은 웹 상에 산재된 여러 정보를 긁어오는 것을 의미 2. ___ 라이브러리를 통해 웹 자원 요청 3. ___ 라이브러리를 통해 html 코드 파싱 4. 개발자 도구의 ___ 기능을 이용해 선택자 문법 확인 가능 1. 크롤링 2. requests 3. bs4 4. Copy 이번에는 2단계인 크롤링 코드를 작성해볼 것 BeautifulSoup 우선 BeautifulSoup라는 크롤링의 주요 모듈에 대해 알아보자 요청받은 웹 정보를 html로 파싱하고 나서 파싱한 자원 분석하는 bs4 라이브러리(패키지)의 모듈이다. BeautifulSoup 모듈의 주요 메서드 find 하나의 태그 찾기 find_all 여러 태그 찾기(리스트) select 선택자 문법으로 여러 태그 찾기 특정 부분 크롤링 지난 시.. 2019. 6. 30.
3. Template Engine이란 / Jade,pug 사용법 / 쿼리객체 / Semantic Web/ POST / GET 템플릿엔진이란? 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말한다. 그 중 웹 템플릿 엔진(web template engine)이란 웹 문서가 출력되는 템플릿 엔진을 말한다. 즉, 웹 템플릿 엔진은 웹 템플릿들(web templates)과 웹 컨텐츠 정보(content information)를 처리하기 위해 설계된 소프트웨어이다. 동적, 정적 파일을 섞은 것을 템플릿엔진이라고 한다. ​ 템플릿 엔진을 이용하면 다음과 같이 간단하게 만들 수 있다. 오른쪽이 템플릿 엔진. 규모있는 사이트를 만들 때 템플릿 엔진을 쓰면 이점이 많다. 템플릿 엔진 'jade' 설치 Express사이트에선 Jade가 아닌 pug가 쓰여져 있으나 우선,.. 2019. 6. 28.
2. Express란? install / Connection / 정적파일서비스 / 웹페이지 표현하는 법 Node.js FrameWork Express Express는 node.js 의 framework 입니다. framework 라는 것은 어떠한 작업을 쉽게 완성하기 위한 라이브러리의 집합이라고할 수 있습니다. 작업을 시작부터 끝까지 라이브러리로 지원한다는 점이 단순한 라이브러리와 차이가 나는 부분입니다. 예를 들면JQuery는 javascript 라이브러리로 다양한 용도를 가지고 있지만, jquery 자체가 무엇 하나를 이루기 위한 목적을 가지고 있지는않습니다. express는 node.js를 이용하여 웹 어플리케이션을 만들기위한 틀(frame)을 제공하는 라이브러리의 집합입니다. Express express 사이트에서 설치절차를 따른다. (node, npm init(현재 프로젝트를 npm프로젝트로 만듦.. 2019. 6. 28.
1. Node.js란? / 설치 / 웹 구조, 포트 / 모듈 / NPM, uglify install / npm module, underscore, dependency / Callback, 익명함수 / 동기와 비동기 Node.js란? Node.js의 경쟁자 Node.js와 같은 런타임 기술인 Python, Ruby, PHP, JAVA는 서버쪽에서 동작하면서 DB에 접속, 웹 페이지를 프로그래밍적으로 생산 Node.js의 장점 V8엔진 event-diven-programming non-blocking IO 웹 브라우저(클라이언트쪽)과 웹 서버(서버쪽)에서 JS를 사용하여 하나의 언어로 완결된 앱 제작 가능 JS로 웹 브라우저 및 Node.js 제어하려면 웹 브라우저 및 Node.js의 고유 기능들에 대해 알고 있어야 한다. Node.js 설치 다운로드 사이트(운영체제에 맞는 버전으로 다운) 정상적으로 설치됐는지를 확인하기 위해 node -v npm -v 를 입력하여 설치된 버전을 확인할 수 있다. 웹 구조 Domain.. 2019. 6. 28.
[에러] jpype._jvmfinder.JVMNotFoundException: No JVM shared library file (jvm.dll) found. / JAVA_HOME 지정 오류 내용 Traceback (most recent call last): File "main.py", line 3, in ok = Okt() # ok객체에 Okt패키지 할당 File "C:\Users\last2018\dev\python\basic\ENV\lib\site-packages\konlpy\tag\_okt.py", line 87, in __init__ jvm.init_jvm(jvmpath, max_heap_size) File "C:\Users\last2018\dev\python\basic\ENV\lib\site-packages\konlpy\jvm.py", line 55, in init_jvm jvmpath = jvmpath or jpype.getDefaultJVMPath() File "C:\Use.. 2019. 6. 27.
[에러] ImportError: numpy.core.multiarray failed to import 오류내용 (ENV) C:\Users\last2018\dev\python\basic\10 konlpy>python main.py ImportError: numpy.core.multiarray failed to import ImportError: numpy.core.multiarray failed to import Traceback (most recent call last): File "main.py", line 1, in from konlpy.tag import Okt File "C:\Users\last2018\dev\python\basic\ENV\lib\site-packages\konlpy\__init__.py", line 11, in from konlpy import ( File "C:\Users\la.. 2019. 6. 27.
[FC] 10. 파이썬 말뭉치 처리 / konlpy / Okt / pos / nouns 1. ___ 라이브러리를 통해 엑셀 파일 처리 가능 2. 엑셀 파일 처리 위해 ___ 단위로 처리 가능 1. openpyxl 2. cell 말뭉치? corpus 자연어 처리 위한 분류된 언어의 표본 집합 언어의 빈도와 분포도를 확인할 수 있는 자료를 말함 자연어 연구 위해 특정한 목적을 가지고 언어의 표본을 추출한 집합 konlpy 한국어 말뭉치 처리위한 패키지 모음. 오픈소스 한국어사이트 깃허브 konlpy설치하기 pip3 install konlpy konlpy중에서 사용할 Okt(Open Korean Text)패키지. Okt(Open Korean Text) 주요 메서드 2가지 pos (문자열, 품사)를 튜플로 반환 nouns 문자열의 명사 리스트로 반환 konlpy를 설치부터하고 진행해보자 혹시라도 .. 2019. 6. 27.
[FC] 8. 예외처리 / 문법 에러 / try ~ except / finally / raise Exception 1. ___ 은 함수 선언 키워드 2. ___ 은 인자에는 있지만 사용되지 않을 경우 기본 값 3. ___ 은 인자의 값을 특정 지을 수 없을 경우 사용 4. ___ 은 인자의 별칭을 붙여서 사용하는 방법 1. def 2. 기본 인자 3. 가변 인자 4. 이름있는 인자 예외처리 프로그램 오류를 핸들링 하는 방법 예외발생시 취할 행동을 코드로 작성 문법 에러와 예외의 차이점 문법 에러? 개발자의 잘못된 파이썬 코드(문법) 작성 예외 문법적 오류는 없지만 실행 중 발생하는 에러 예외처리가 필요한 이유 코드를 실행하다가 에러로 인해 종료되는 것을 방지하기 위함 실행이 오래걸리거나 중요한 작업시 종료되지 않도록 하기 위함 try ~ except 구문 try : 실행코드 ◁- 에러 가능성 존재 except : 예.. 2019. 6. 26.
[FC] 7. 함수 / 가변 인자 / 별칭 인자 / 다중 반환 값 / def / default 1. ___ 은 문자열을 원하는 스타일로 표현하기 위해 사용 2. ___ 을 이용해서 원하는 문자열을 자료형을 표현 3. ___ 은 문자열 포맷을 지정하기 위한 함수 4. ___ 은 고유한 의미를 갖는 문자, 역슬래시가 붙음 1. 포맷팅 2. %s 3. format()함수 4. 이스케이프문자 함수? 특별한 역할을 수행하기 위한 코드 블록 코드의 논리적인 흐름을 하나로 묶는 역할 y = f(x) def 함수명(인자, default=값) : 실행코드 return 반환값; 가변 인자 _ 인자가 몇개나 들어올지, 인자의 값이 미정인 경우 y = f(x) def 함수명(인자, *인자) : 실행코드 return 반환값; 별칭 인자 y = f(x) def 함수명(별칭) : 실행코드(별칭 사용) return 반환값; .. 2019. 6. 26.
6. 문자열 처리 1. ___ 은 한 번 값이 정해지면 수정할 수 없는 불변 타입 2. ___ 은 중복이 없는 요소로만 이뤄지고 순서 없음 3. 컬렉션 자료형의 ___을 통해 서로 다른 컬렉션으로 치환. 1. 튜플 2. 셋 3. 생성자 문자열("", ``) 객체 여러 가지 메서드 제공. 객체이기때문 자연어(사람이 사용하는 언어)로 코드상에 표현하기 위함 문자열 포멧팅? 원하는 스타일로 문자열을 만드는 것 포멧 지정 "문자열 %지시어" %("대입 문자열", ...) 지시어? 자료형 따라 다른 지시어를 지정 자료형 따라 표현하는게 달라짐 %s : 문자열 %c : 문자 1개 %d : 정수 %f : 실수 (%.소숫점f) %o : 8진수 %x : 16진수 %% : Literal(문자 '%' 자체) 코드로 배워보자 이스케이프 문자(.. 2019. 6. 26.
반응형