어쨌든 해내는 코딩 일기

-JSX 정의자바스크립트 문법 확장한 것javascript+ xml/ html -JSX 코드const element = hello, world!;대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드 - React.createElement 함수: JSX코드를 JavaScript 코드로 변환함.- jsx는 html의 ,을 사용하고 있음. -createElement의 파라미터 -type(유형)-[props](속성)-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)  즉, react에서 jsx를 쓰는 것이 필수는 아님! createElement함수를 사용하면 되기 때문임.하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐...

- 기존 웹사이트에 react 적용link는 html과 외부 리소스 링크를 연결해주는 역할 -ex. css나 웹브라우저의 아이콘 같은 것을 불러옴.href는 경로 css 오류 해결방법html과 css 파일은 동일한 디렉터리(같은 폴더) 안에 있어야 함! react 사용. dom container! virtual dom과 빠른 렌더링이 장점인 리액트.id="root"는 버츄얼 돔의 시작점자바스크립트 두 번 불러오기. mybutton 이라는 react component 만들어야함마지막 두 줄의 코드는 리액트 돔에 랜덤함수를 사용해서 리액트 컴포넌트를 돔컨테이너 안에 랜더링 하는 코드필요한 이유: 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않기 때문-> 직접 누르면 state..

리액트란 무엇인가?A javascript library for building user interfaces 라이브러리란?자주 사용되는 기능들을 정리해 모아 놓은 것사용자 인터페이스(User interface, UI)홈페이지에서 버튼, 입력창과 같은 부분이다. 버튼을 누름으로써 웹사이트에서 반응을 하고 특정 페이지를 보여주면서 사용자의 반응을 일으킴. UI 라이브러리사용자 인터페이스를 만들기 위한 기능 모음집을 뜻함. React는 대표적인 javascript의 ui라이브러리임.ex) NGULARJS(프레임워크), Vue.js(프레임워크) , React(라이브러리) 프레임워크 vs 라이브러리프로그램 흐름에 대한 제어 권한이 포인트.프레임워크는 프로그램이 흐름 제어 권한 가짐 라이브러리는 개발자가 흐름 제어 ..

https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 1. node.js가 정상적으로 설치되었는지 버전 확인2. npm 정상 설치 되었는지 확인3. 통합 개발 환경인 visual studio code ( IDE-Integrated Development Environment) 다운로드 하기https://code.visualstudio.com/

HTML: Hyper text markup language -markup: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보-즉, 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어-Tag(태그): 구조형성, 태그는 열었으면 꼭 닫아줘야 함.  ex) , or 은 열고 닫는 것 한 번1)head tag :제목 같은 속성이 들어감. ex) title2)body tag: 실제로 웹사이트에서 보이는 콘텐츠가 들어감.SPA: Single page application-하나의 페이지로 웹사이트 표현 ( content 부분을 react로 구현 ) CSS: cascading style sheets-웹사이트의 색상, 글꼴 등 디자인 입히기 JavaScript(ECMAScript,ES6기준으로 설명)- 사용자 입력..

캐릭터는 3개: 마린(지상), 탱크(지상), 레이스(공중)class unit :유닛 생성, 이동, 공격받음- 모든 유닛에 적용class attackunit: 특정 방향으로 공격함 - 마린, 탱크에 적용   - class marine: 스팀팩(stimpack) 기능   - class tank: 시즈모드(seize_mode) 기능class flyable: 공중 이동함class flyableattack: 공중 이동+ 공격   - class wraith: 클로킹(clocking) 기능-유닛 쌓기from random import * # 난수-random으로 데미지를 입는다고 가정# 일반 유닛class unit: def __init__(self, name, hp, speed): self.name..

내장함수( 안에 들어있어서 import 하지 않아도 됨 ) - input함수 : 사용자 입력을 받는 함수#input 사용자 입력을 받는 함수language=input("무슨 언어를 좋아하세요?")print("{0}은 아주 좋은 언어입니다.".format(language))-dir함수: 어떤 객체를 넘겨줬을 때 그 객체가 어떤 변수와 함수를 가지고 있는지 표시해줌.1)print(dir())#dir 어떤 객체를 넘겨줬을 때 그 객체가 어떤 변수와 함수를 가지고 있는지 표시print(dir())import random #외장 함수print(dir())import pickleprint(dir()): random 함수 추가/ pickl, random 함수 추가되어 터미널에 뜸. 2)print(dir(random)..

모듈 위치 확인하기- import inspect, inspect.getfile#이 파일이 어느 위치에 있는지 확인하려면import inspectimport randomprint(inspect.getfile(random))print(inspect.getfile(thailand))1. inspect를 import한다. 그리고 랜덤을 import한 후에2. print(inspect.getfile(random))3. 같은 경로에 없어도 사용가능할 수 있음!패키지 다운받기(pypi) - 워낙 개발된 패키지가 많기 때문에 적절하게 고르는 것이 포인트 1. 파이썬 패키지 다운로드 하는 방법:  복사해서 terminal에 붙이고 enter하면 다운로드 받아짐.2. quick start 밑 세 줄 정도 코딩 복사 붙여넣..

모듈: 필요한 것들을 부품처럼 잘 만들어진 파일들 불러오겠다.(확장명 .py)- 모듈 파일(theater_module.py)#일반 가격def price(people): print("{0}명 가격은 {1}원 입니다.".format(people,people*10000))#조조 가격def price_morning(people): print("{0}명 조조 할인 가격은 {1}원 입니다.".format(people,people*6000))#군인 가격def price_soldier(people): print("{0}명 군인 할인 가격은 {1}원 입니다.".format(people,people*4000))  -모듈 파일 불러오기1. 파일에서 불러오기 import 파일명2. 파일에서 불러오는데 별명으로..

Try 와 except로 예외처리try: print("나누기 전용 계산기입니다.") num1=int(input("첫 번째 숫자를 입력하세요:")) num2=int(input("두 번째 숫자를 입력하세요:")) print("{0}/{1}={2}".format(num1,num2,int(num1/num2)))except ValueError: print("에러! 잘못된 값을 입력하였습니다.") except ZeroDivisionError as err: print(err)  value error :값이 잘못 입력 됐을 때zerodivision error: 0으로 나누는 문제가 발생했을 때Terminal>>나누기 전용 계산기입니다. 첫 번째 숫자를 입력하세요:3 두 번째 숫자를 입력..