codeGray

React JS state create-react-app 으로 react 프로젝트를 생성했다면 App.js 에서 개발이 가능하다. React는 변수를 사용 할 때 state라는 것을 사용한다. 자바스크립트에서는 변수를 html 안에 바인딩 할 때, innerHtml 로 넣어주고 다시 가져오려면 elementbyId 로 가져와서 변환하는 손이 많이 가는 작업을 해줘야 하지만 state는 간단하게 바인딩 가능하다. import { useState } from "react"; //state를 사용 할 수 있도록 import function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.v..

우선 깃허브 계정이 있고, repository 를 생성 했다는 가정하에 진행한다. 터미널에서 아래 명령어로 우선 깃을 설치한다. brew install gh 그리고 나서 react 기준으로 vscode 에서 create-react-app 으로 react 프로젝트를 생성하면 vscode 좌측 3번째에 source control 부분에 이미 repository가 생성되어 있을 수 있다. 나는 처음부터 깔끔하게 세팅하기 위해 이미 생성된 repository 를 먼저 삭제 했다. 터미널을 열고 해당 create-react-app 만든 경로로 들어가서 ls -al 을 입력하면 ./git 이라는 폴더가 있는데 이 폴더를 삭제해주면 된다. 기본 사용자로 삭제하면 더미가 남기 때문에 sudo rm -r ./git 으로..

git 버전이 올라가면서 원격 리모트 저장소가 기본 main 으로 변경되었다. 근데 로컬저장소는 master 라서 헷갈리고 불편 하다. 그래서 로컬 저장소도 main 으로 변경 해주면 편하다. ~/.gitconfig 에 들어가서 defaultBranch 를 변경하거나 터미널에서 git config --global init.defaultBranch main 을 입력하면 변경된다. git config --global init.defaultBranch main

React Js 설치 React Js 는 npx 로 설치해야 해서 먼저 node.js 를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트에서 node.js 를 설치 해주고 vscode 를 실행시킨다. control (cmd) + j 를 누르면 터미널이 나타나고 터미널에서 자신이 설치하고 싶은 폴더로 이동한다. 그다음 아래 명령어로 설치 할 수 있다. npx create-react-app 프로젝트명 설치가 완료되면 npm start 로 실행 할 수 있다.

item2 는 맥북에서 터미널 확장판 같은 역할을 한다. 여러가지 사용자 입맛에 맞게 커스텀 할 수 있다. oh-my-zsh 는 zsh 의 확장판으로 역시 커스텀이 가능하다. iterm2 설치 아래 사이트에 가서 다운받아서 설치하거나 https://iterm2.com/index.html iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain iterm2.com 터미널에서 아래 명령어로 설치 가능하다 brew install --cask iterm2 iterm2 상단..

homebrew는 맥북 에서 프로그램 또는 패키지를 터미널 명령어로 쉽게 설치 할 수 있도록 도와주는 도구이다. homebrew 는 gui 가 없는 패키지를 설치하고 homebrew --cask 는 gui 가 있는 패키지를 설치 할 때 사용한다. homebrew 설치 https://brew.sh/index_ko 접속 후 명령어를 복사해서 터미널에 붙여넣기 하면 설치 된다 . 중간에 아무키나 입력하고 비밀번호를 한번 물어보니 당황하지 말고 시키는대로 하면 된다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 설치가 완료되면 아래 화면과 같이 나오는데 빨간박스의 두 줄을 복사해서 입력..

addEventListener 는 해당 태그에 이벤트를 부여 할 떄 사용하는 메소드이다. addEventListener("click", function(event){}); function은 기본적으로 이벤트 인자를 받을 수 있다. 이벤트.target.value 를 하면 해당 태그의 value 값을 가져올 수 있다. click 이벤트 말고도 다른 모든 이벤트들을 사용 할 수 있다. Click me

ES2015 부터 적용됨 자바스크립트 백틱 안에서 변수는 ${} 로 사용 할 수 있다. 변수와 문자열을 합쳐서 사용 할 때에도 간편하게 사용 가능하다. // 자바스크립트에서 백틱 안에서 변수는 ${} 로 사용하시면 됩니다. let count1 = 0; let count2 = 0; let count3 = 0; //백틱안에서 변수 사용 const test = `test const: ${count}`; //기존코드 const testSum = "test sum" + count1 + count2 + count3 + "입니다."; //백틱사용 const testSum = `test sum : ${count1 + count2 + count3} 입니다.`;

Vue 공식 문서를 보면 computed 속성은 복잡한 로직을 구현할 경우 사용한다고 나와 있습니다. 공식문서의 예를 보면 아래와 같습니다. {{ message.split('').reverse().join('') }} 이렇게 message 를 거꾸로 나열해서 보여주는 로직이 있습니다. 위의 예제 코드 처럼 html 코드 속 {{ }} 안에서 로직을 구현해도 괜찮지만, 해당 로직이 다른곳에서 더 사용 될 경우 같은 로직을 한 번 더 작성해야 하는 불편함이 있습니다. 이럴 때, computed 속성을 사용합니다. 아래의 코드를 보겠습니다. {{ reverseMsg }} 위의 {{ message.split('').reverse().join('') }} 로직을 computed 속성안에 함수 형태로 작성 하고 h..

v-model 은 양방향 바인딩입니다. 사용자가 입력하는 값을 변수에 바로 바인딩 해서 실시간으로 보여줄 수 있습니다. 먼저 v-model을 사용하지 않는 방식을 먼저 보겠습니다. v-model을 사용하지 않을 경우 {{ text }} 일반적으로 이벤트에 사용자가 입력한 값을 받아서 메소드를 호출하여 data에 바인딩 시켜주는 방식입니다. 사용자가 입력할때마다 이벤트를 발생시키는 keyup 이벤트에 updateText라는 메소드를 사용하여 data에 있는 text의 값을 변경 시켜줍니다. 이것을 v-model을 사용하면 간단하게 바꿀 수 있습니다. v-model을 사용하는 경우 {{ text }} 이렇게 v-model에 data에 들어있는 text 변수를 사용하면 사용자의 입력 값이 바로바로 바인딩 됩니다.