til(21)
-
220406 웹TIL) 리액트 map()함수 그리고 컴포넌트, key props
1. 리액트가 반환한 컴포넌트 renderFood()는 map() 함수가 반환한 리액트 컴포넌트를 출력하려고 사용해본 코드이다. function renderFood(dish){ return ; } // const renderFood = dish => ;도 같은 표현이다. function App() { console.log(foodILike.map(renderFood)); return( /*;*/ {/*{foodILike.map(dish=>())}*/} {/*위에서 food라는 컴포넌트를 만들고 여기서 사용*/} {foodILike.map(renderFood)} ); } 0번 인덱스에 대해서 구체적으로 보고 싶다면 다시 열어서 본다. 콘솔창을 보면 아래와 같은 에러가 발생하는데 key의 값이 실제로 없어서..
2022.04.07 -
220404 웹TIL) 컴포넌트,map() 함수, JSX의 유래
1. 컴포넌트를 효율적으로 출력하기 일단 이 사진은 컴포넌트를 많이 만들어야 한다면 이 방법은 효율적이지 않다. 새 음식을 추가할때마다 를 복사해야 한다. 또한 서버에서 음식 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 더 문제가 된다. 그래서 이와 같이 배열을 만들고 안에 속성값을 넣음으로써 많은 양(?)의 컴포넌트도 대비한다. 2. map() 함수 map() 함수의 인자로 전달한 함수는 배열 friends의 원소를 대상으로 실행 friends에는 4개의 원소가 있으니 함수는 4번 실행된다. 두번째는 그 함수가 반환한 값이 모여 배열이 되고 > 그 배열이 map() 함수의 반환값이 된다. console.log에서 current가 출력되고 return 0;에서 0을 반환한다. 이름 ..
2022.04.05 -
Unity TIL) 2-2
1. 게임오브젝트 생성 방법 메뉴에서 GameObject > Create Empty를 선택하면 Scene 뷰에 GameObject가 생성된다. 생성된 GameObject는 Transfrom 컴포넌트만 가진 빈 게임오브젝트다. 이름을 Player로 지정 특별한 경우가 아니고서는 Transform의 속성을 (0,0,0)으로 설정하자 Hierachy 뷰에 나열된 것은 모두 게임오브젝트다. Directional Light,Main Camera도 빈 게임오브젝트에 Light와 Camera 컴포넌트를 추가한 것일 뿐 2. 그룹핑 05.Models 폴더에서 주인공으로 사용할 Player 3D 모델을 앞서 만든 Player 게임오브젝트로 드래그앤 드롭 하면 3D 모델인 Player 모델이 차일드화된다. 이렇게 차일드화..
2022.04.01 -
웹 TIL) 220330 2권의 리액트 책을 보며 비교해보기 - npx, npm,컴포넌트,배포방법(실서버배포)
1. npx 표현1 : 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지 표현2 : (프로젝트 이름) 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지움 - 컴퓨터 공간을 낭비하지 않는다, 설치를 실행할 때마다 새로 다운로드 하기 때문에 항상 최신 상태 2. React에서의 index.html * 리액트 동작 원리 * 표현1 : 왜 사이가 비어 있었는지 알 수 있을거야. 리액트는 우리가 작성한(수정한) 프로젝트 폴더에 있는 코드를 자바스크립트를 이용해서 해석해. 그리고 해석한 결과물을 index.html로 끼워넣어. 우리가 App.js나 index.js와 같이 작성한 파일들을 리액트가 해석해서 index.html에 끼워 넣는거야 표현2 : public이라는 디렉터리에는 index..
2022.03.31 -
220329 인공지능TIL 4주차
1. 파이썬 라이브러리 불러오기 import 라이브러리(모듈) import random 랜덤 라이브러리 import time 시간 관련 라이브러리 import gTTs (google Text To speech) 구글에서 만든 모듈이며 텍스트를 음성으로 변환 import datetime 파이썬에서 날짜와 관련된 데이터를 다루는 라이브러리 2. 정수 난수 생성 import random 한 후 a=random.randint(10,20) 10~20 사이의 난수를 생성하고 변수 a에 대입 3. 시간 계산 프로그램 import time # 시간 측정 라이브러리 start=time.time() # 시작 직전 시각을 기록 sum=0 for i in range(1,100000001): # 1억 번 반복 sum=sum+i..
2022.03.30 -
웹TIL) 220324 리액트 대문자 에러, package-lock.json, 컴포넌트, JSX에서의 띄어쓰기
1. 리액트에서 프로젝트 이름은 대문자가 포함되면 안되는 것 같다. 전부 소문자로 해야 create-react-app을 할 때 에러가 나지 않는다. 2. 명령 프롬프트에서 리액트 앱 실행 맨날 VSCode 터미널에서 npm start로 했었는데, CMD로는 처음 해보는데 신기했다. Local 주소는 3000번 포트를 이용하고(node.js) 내 네트워크에서는 192.168 ~ 로 시작되는걸 쓴다. 3. 리액트에서 웹팩과 바벨이 필요한 이유? 리액트는 비교적 최근에 나온 기술이라서 일부 브라우저는 이해할 수 없는 코드로 구성되어 있다. 그래서 웹팩과 바벨이라는 도구가 필요하고 이 도구로 리액트를 모든 브라우저가 이해할 수 있도록 컴파일 해야 한다. 4. package.lock.json이 무엇인가? npm을..
2022.03.25