본문 바로가기

CodeTech

 (70)
React - 4 [component 사용 , JSX] component - 기본적으로 component는 HTML을 반환하는 함수이다. - 아래 경우에서 "" 와 같은 형태를 component라고 한다. - component는 javascript로 HTML 형태를 반환한다. (JSX : javascript와 HTML의 조합) - React는 모든 부분이 component라고 생각하면 된다. JSX - html in javascript - React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in yo..
React - 3 [React 구동원리] 기초 리액트 설명 강의 중에 간단히하기 위해서 이렇게 css파일들을 없애고 APP.js 와 index.js 파일의 코드 내용을 간소화 시켰습니다. 현재 동작중이지만 아무것도 안보입니다. App.js 코드를 위와 같이 바꾸면 웹을 재실행 하지 않아도 알아서 refresh해주며 값이 바뀝니다. 해당하는 div의 위치를 살펴보면 body안에 div id = "root" 인 박스안에 div가 들어있음을 알수 있다. 하지만 index.html을 들어가보면 그런 코드는 존재하지 않는다. 즉, react는 빈 웹페이지에서 돌아가는 즉시 필요한 모든 요소들을 구성해낸다. JS로 그러한 요소들을 만들고 html에 요소들을 밀어넣는다. react는 div id="root"라는 박스안에 모든것을 밀어넣는다. 보다 시피 Re..
React - 2 [create-react-app] npx create-react-app [project app name] - npx는 npm의 레지스트리 과정을 압축시켜주는 명령어인데, create-react-app 이라는 명령어 또한 마찬가지이다. 2016년도 이전에는 react앱을 만들기 위해서 다양한 과정을 겪어야 했다. react는 굉장히 멋진 코드를 만들어 냈지만 웹브라우저가 이를 이해하지 못했던 것으로 react코드를 webpack, babel 을 다운로드 해서 컴파일하고 다른파일에 넣고 과정이 길었다. 하지만 이러한 지저분한 과정을 단 하나의 명령어로 끝냈다. create-react-app 내가 앱을 만들 부모 디렉토리에서 위 명령어를 실행하면된다. 시간이 약간 소모가 된다. 시간이 걸린다음 react app이 성공했다는 소리가 들린다. 이..
React - 1 개발환경구성 [VScode, node js, npm, yarn, npx] React - JS 기반으로 돌아가는 라이브러리이다. 즉, js로 돌아가는 라이브러리 모음인 것이다. - 주로 사용자 인터페이스를 만드는 프론트 분야에서 쓰인다. - 사용자는 약 66퍼센트로서 매우 많은 서비스가 React로 만들어졌다. - React를 사용하면 js실력이 는다. React 개발환경 설정하기 React를 사용하기 전에 깔아야 하는 것들 있다. - node js window기반에서는 리눅스언어로 까는 게 편하기 때문에 git bash를 깔아서 설치하길 바란다. Node JS - 일종의 JS 런타임 구동 환경이다. 구글 Chrome V8버전 JS엔진을 사용하여 만들어졌으며 JS구동 플렛폼이라고 정의한다. JS로 돌아가는 구동 플렛폼이다. From. Wiki Node.js는 확장성 있는 네트워..
Git - 협업 [fork, clone, pull request] github에서 협업을 할때에 다른팀원들과 코드를 공유하며 해당 코드를 로컬로 끌어와 코딩을 해야한다. 즉, 공개된 프로젝트에 기여를 하고 싶다면 해당 프로젝트의 저장소를 내저장소를 만드는 작업이 필요하다. 이후 해당 저장소에서 로컬로 프로젝트를 가져오고 작업내용을 커밋해서 내 저장소에 저장한다음, Pull request를 통해 원본에 반영하는 작업이 그것이다. fork - 팀원들의 코드를 받아서 내 remote repository에 넣어놓는다. 내가 속한 조직 혹은 팀의 프로젝트들을 fork하려면 해당 프로젝트로 들어가야한다. 프로젝트로 들어가면 오른쪽 상단의 Fork 버튼이 있는데 이버튼을 누른다. 단, 해당 레포지토리가 비어있으면 안된다. 어떤 파일이라도 있다면 fork가 된다. 이렇게 해당 프로젝..
Git - commit message 작성법 commit 메세지 작성은 git을 사용하는 이유로 연결된다. commit 메세지는 자신이 작업한 결과물이 무엇인지 한눈에 볼 수 있도록 하는 매우 중요한 단서이다. 지금 까지 내가 작성한 commit 메시지를 보자, 혼자 만든 결과물에 대한 commit 메세지인 만큼 아주 개판이다. 이 커밋 메세지만 보고서는 내가 어떤 기능을 왜 만들었는지 바로 들어오지 않는다. 그저 파일이 추가되었다는 메세지정도만 보이고 어느때는 create, complete, made등 단어 사용에 대한 기준이 명확하지 않다. 즉, 명시적이지 않은 메세지 때문에 만약 이와 같은 작업을 같이 하는 동료들에게 이러한 메세지는 그저 파일들의 추가만 명시할 뿐이다. 아주 유명한 commit message 작성법이다. chris.beams..
Git - 경로 변경 Git - 로컬경로 옮기기 아주 황당하리 만치 간단하다 그냥 git 디렉토리 자체를 복사 해서 옮겨 놓기만 하면 해당 경로가 이동된다. 좀 황당하다. 깔끔하게 변경이 되었다. 심지어 파일 이름도 변경이 가능하다. 그냥 파일이름을 변경해도 git은 유지된다. Git - remote 경로 옮기기(Github repository 변경) 12bme.tistory.com/43 [버전관리] GitHub 저장소 이름 및 url 변경하기 Git 사이트에서 저장소 이름 변경하는 방법에 대해 포스팅 합니다. Backjoon 이라는 이름에서 Algorithm이라고 저장소 이름을 변경할 것인데요. 일단 프로젝트 로컬 저장소의 git 연결에 대한 url 변경 12bme.tistory.com - 시간날 때 정리해보자 Git - ..
Git - 9 [static website 무료호스팅] static website란 html, css, javascript로만 이루어진 프론트 앤드로만 구성된 웹사이트 라는 이야기 이다. github에서는 이러한 웹사이트를 무료로 배포시킬수 있다. 먼저 해당 작업물이 있는 git에 대해서 branch를 해야한다. 그이름을 무조건 'gh-pages' 라고 해주어야한다. 그렇지 않다면 publish할 때 실패하게 된다. 또한, 우리 저장소(repository)는 무조건 public해야한다. private하다면 공개 자체를 할수 없기 때문이다. git Desktop을 이용하면 아주 쉽다. 깃헙을 키고 옆의 add existing repository를 선택하고 기존에 만들었던 git 폴더를 선택한다. 이후 new branch 버튼을 선택하여 이름을 gh-pages ..

티스토리툴바