광산김가네

이번주차에는 드디어 node.js로 react app을 만들어보고 앞선 코드작성방식과 차이점에 대해서 알아보았다 create-react-app node.js를 설치하고 npm 명령어를 이용하여 npm create-react-app 만들고싶은 폴더이름 을 치면 react 로고가 뺑글뱅글 돌아가고있을거다. 노마드코더 강좌에서는 일단 당장 사용하지않을 app.test.js나 css파일 등등 모두 제거하고 app.js랑 index.js만 우선 사용하고 필요없는거 다 삭제해서 아래와 같이 결과물이 나왔다.' 개인적으로 처음 react 공부할때 제일 어려웠던게(kotlin 처음배울때도 마찬가지로) 알수없는 파일이 막 있는게 굉장히 부담스러웠는데 날리니까 한결나았다 휴 실행할때는 터미널에 해당 생성된 폴더위치에서(폴..

저번시간에도 간략하게 props에 대해서 보았지만 이번시간에 예제를 통하여 props에 대해서 확실하게 알아보려고한다. props란? 컴포넌트때부터 쭉 익혀왔듯이 부모-자식 컴포넌트간에 소통하기위한 친구인데 난 쉽게 생각해서 인자라고 생각했다 예제코드를 함께 봐보면 위와 같은 버튼두개의 style을 이렇게 복붙하여 컴포넌트에 붙여넣기하는것은 코드량도 많고 비효율적이다 그치만 우리학교 사이트는 모두 저렇게 되어있ㄷ.. 또한 두 버튼은 버튼안의 텍스트만 다르기때문에 공통된요소를 컴포넌트로 생성하고 이를 부모컴포넌트, 즉 App 컴포넌트에서 사용할때 props로 값을 다르게 전달해주면 해결된다. function을 생성할때 항상이름 옆에 ()이렇게 인자가 들어가기 딱좋은 괄호를 붙여주기때문에 여기에 props라..

이번시간에는 다음시간에 이어 setState함수에 이어서 state에 대해서 더 알아보았다 컴포넌트의 핵심키워드중하나인 props까지 학습해보았다. 1.useState 사용하기 리뷰 const [ counter,setCounter] = React.useState(0); 위의 코드처럼 useState의 반환값 두개를 1.바꿔줄 변수 2.바꿔줄 변수를 다루는 함수 이름을 선언해줘서 사용한다. 여기서 setCounter와 같이 바꿔줄 변수를 다루는 함수는 크게 두가지 방식으로 사용한다 1. 인자로 변경될 내용 작성 setCounter(변수의 변경내용) 이런식으로 쓰는데 setCounter(10000)으로 정적인 데이터를 넣어주거나 setCounter(counter+1) 변수를 포함한 식으로 넣어줄수있다 2. ..

앞서 2회차동안은 주로 React의 동작방식에 대해서 이해하고 기초되는 JSX에 대해서 배워보았다. 이번 모각코회차에서는 React를 이용해서 그려진 화면의 구성요소인 1)컴포넌트에 대해서 알아보고 2)컴포넌트에서 입력값중 하나인 state에 대해서도 알아보려고한다! 0. 컴포넌트란? : 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 컴포넌트는 데이터(props)를 입력받아서 view(state) 상태에 따라서 DOM node를 생성해주는 함수이다. 여기서 props, state에 대해서 간략하게 알아보자면, props : 컴포넌트간에 주고받는 데이터 state : (컴포넌트 내부에서)다루는 데이터 라고 할수있다. 컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로도 나눌수있다. 1. state 정확..

이번회차의 경우 React JS의 기본문법이 되는 JSX에 대해서 학습하였다. JSX란? javascript를 확장한 문법으로써 xml과 굉장히 유사하게 생긴 친구이다. 코드가 브라우저에서 실행되기 이전인, 번들링되는 과정에서 일반 JS 형태로 변환된다고 한다. 변환과정을 예제로 가져와봤다. 변환전 function App(){ return ( Hello react ); } 변환이후 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 출처 저번에 노마드코더 강좌에서 배웠던 createElement 이런걸 앞으로 코드에서 직접적으로 쓰는것이아닌, 위에 있는 변환전 코드..

0. 학습계기및 방법 학습계기 이번 7/20 (수)부터 하계 모각코를 진행하게 되면서 팀원들과 함께 ReactJS라는 저명한 웹 프론트엔드 라이브러리르 학습하기로했다. ReactJS의 경우 작년 초 겨울방학을 통하여 잠깐 학습할 기회가 있었는데 사실 그때는 Vanila JS도 익히지 못한 상태라 DOM, 뷰, 등의 용어들 자체를 이해하지못한 상태로 그냥 예제만 돌려보았는데 지금 남아있는게 아무것도 없다(ㅠㅠ) 하지만 지금은 웹프로그래밍 강좌를 수강한 이후의 시점이라서 잘 습득할수있을거라 기대된다ㅎㅎ 학습방법 주로 노마드코더의 [ReactJS로 영화 웹서비스 만들기] 무료 강좌를 통해 진도를 나가고 리액트를 다루는기술 서적과 유튜브및 구글링을 적극적으로 활용하여 모르는 부분들을 채워나가려고한다 또한 함께 ..

파이썬으로 단순하게 open 함수로 엑셀파일을 열고 데이터를 다룰수도있겠지만 구글링을 해보니 엑셀 전용 라이브러리가 있었다! 해당 라이브러리로 엑셀 데이터를 정리해보았는데 나중에도 써먹으려고 기록해보려 한다ㅎ-ㅎ 참고블로그 1. 엑셀 새로 생성하기 전체적인 틀은 다음과 같다 #필요한 import 구문 from openpyxl import Workbook newWb = Workbook() tmpWb = newWb.create_sheet('new Sheet') tmpWb = newWb.active tmpWb.append(넣어줄 정보) 여기서 넣어줄 정보는 행단위로 넣어줄수도 있고 열단위로 넣어줄수도있다 이게 진짜 대박이다 내 작업시간 지킴이 ;ㅁ; 자세한건 밑에서 실제 데이터로 넣어보겠다 2. 기존 엑셀 열..

새 레포지토리를 파고, 로컬에서 git remote add origin 명령어로 저장소를 연결까지는 성공했는데 git push origin 브랜치 명령어를 실행했을때 아래와 같은 오류가 떴다. 그래서 레포지토리를 생성할때 readme 자동생성으로 만들어서, 해당내용이 저장소에 반영되있지않아서 충돌이 났구나! 싶어서 git pull로 저장소를 땡겨와야겠다하고 명령어를 실행했다. 그런데 또..또 오류가 났다 그래서 구글링을 해보니 해당블로그에 해결법이 기재되어있었다ㅎㅎ 감사합니다 뒤에 명령어 옵션으로 --allow-unrelated-histories 를 붙여주면 되는것이였다. 해결법 아래의 명령어 실행후에 push를 하면 잘올라간다! git pull origin master --allow-unrelated-..

플랫포머 게임과 같은 3인칭 횡스크롤뷰같은 경우는 캐릭터가 중력의 영향을 받으면 되는데, 탑다운뷰의 경우 위에서 아래로 내려다본 시점이다 보니 rigidbody2d에 자동으로 적용되는 중력의 효과를 받으면.. 얘가 이렇게된다. +gif 첨부가 안된다,,^ㅠ^,,,,, 무튼 양옆 방향키만 눌러도 슬슬 내려간다 해결방법) rigidbody2d의 속성에서 gravity scale을 0으로 만들어주자!

1. animator is not playing an animatorcontroller 해결) player에 해당 animator를 적용했는데 안되는거라 player 스프라이트 컴포넌트를 확인해봣는데 controller가 비어있었다ㅋㅋ 오류가 나면 설정이 설정이 안되있는지 먼저 확인해보자.. 2. Button 컴포넌트에서 onClick에 함수가 안불러와져요! 해결방법) Button Script를 해당 Button 스프라이트에 컴포넌트로 넣어주고, 그 컴포넌트를 위 사진상에서 button에 해당하는 위치에 드래그앤 드랍해주면 잘~뜬다 3. 깃허브 add 오류 문제) git add -A로 프로젝트를 처음올릴때 이런오류가 떴다 open("Temp/UnityLockfile"): Permission denied ..