분류 전체보기
-
[React] - 3) JSX 문법Coding/React.js 2019. 10. 29. 15:14
JSX 문법 요소를 감싸야 한다 컴포넌트에 여러 요소가 있다면, 그 요소는 부모 요소에 의해 감싸져 있어야 합니다. import React from 'react'; function App() { return ( h1 h2 ) } export default App; 다음 코드의 경우 제대로 작동하지 않습니다. 이를 실행해 보면 다음과 같은 오류가 뜹니다. 그림 다음과 같은 오류는 h1와 h2를 동시에 감싸주는 코드를 작성하여 해결할 수 있습니다. import React from 'react'; function App() { return ( h1 h2 ) } export default App; 왜 꼭 부모 요소로 감싸주어야 할까요? 그 이유는 Virtual DOM을 사용해야 한다..
-
[Javascript] var/const/letCoding/JavaScript 2019. 10. 28. 17:36
Var / Const / Let 자바스크립트 ES6 이전에서는 값을 담는 키워드로 var을 사용했습니다. var키워드는 scope가 함수 단위로, 치명적인 결점이 있습니다. function myFunction() { var a = '1'; if(true) { var a = '2'; console.log(a); // 2 } console.log(a); //2 } myFunction();맨처음 var 값을 선언하고, if문 내부에서 다른 값으로 선언했습니다. if문 내부에서 새로 선언했음에도 if문 밖에서 a를 조회하면 변경된 값이 나타납니다. 이러한 결점을 해결하기 위하여 let과 const가 등장했습니다. function myFunction() { let a = '1&..
-
[React] - 2) JSXCoding/React.js 2019. 10. 28. 16:06
리액트 입문 포스팅은 '리액트를 사용하는 기술' 책으로 시작했음을 밝힙니다. JSX란? 저번 포스팅에서 리액트 서버를 구동하는 데 까지 성공하였습니다. 생성했던 리액트 프로젝트 경로에 /src/app.js를 들어가봅시다. import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 자바스크립트 같지만 다소 낯선 코드가 보입니다. 이는 JSX라는 자바스크립트의 확장 문법입니다. 이러한 코드는 좀 낯설죠? 2017년부터 자바스크립트에서도 import를 사용..
-
[React] - 1) React 시작하기Coding/React.js 2019. 10. 26. 21:33
리액트 입문 포스팅은 '리액트를 사용하는 기술' 책으로 시작했음을 밝힙니다. 리액트란? 자바스크립트의 라이브러리인 리액트는, 다른 Vuejs, Angular 등과 달리 'View'에 중점을 두는 라이브러리 입니다. 리액트는 뷰의 한 요소를 찾아가 내부를 수정하는 것이 아니라, 데이터가 변할 때 마다 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 사용합니다. JSON 객체를 이용한다고 했을때 불필요한 파싱과정, 자식 노드를 찾아가는 과정, 이런것을 그냥 다 날려버리고 새로 만드는 식으로 하는 것이죠 . 리액트는 Virtual DOM 이라는 문서 구조를 사용하여, 데이터가 변하여 웹 브라우저에 DOM을 업데이트 할 때 DOM을 직접 수정하는 것이 아닌 DOM 업데이트를 추상화하여 처리 횟수를 줄이는..
-
[Github] Readme에 이미지 파일 쉽게 넣는 방법Dev 2019. 10. 24. 17:57
Github 웹에서 Readme를 작성하면 이러한 UI에서 마크다운으로 작성하게 됩니다. 잘 찾아봐도 이미지를 넣는 게 따로 없습니다. 클립보드에 있는 이미지를 복사해서 넣을 수는 있지만, 로컬 폴더가 아닌 자신의 PC 경로내에서 찾아온 이미지이기 때문에, 실제로 Preview를 보면 이렇게 엑박이 뜨게 됩니다. 이럴때 해결하는 방법은, Github repository의 Issues를 들어가서 New issue를 클릭하면, 이렇게 새로운 이슈에 대한 코멘트를 입력하는 창이 나옵니다. 이 편집기에서 클립보드에 복사한 이미지를 넣어보면, Uploading images.png...라고 뜨고 잠시 기다리면 이렇게 githubcontent의 고유 url이 이미지에 부여됩니다! 이제 이 링크를 Readme에 넣어주..
-
[Git] 여러 줄의 커밋(commit) 메시지 추가하기Dev 2019. 10. 23. 14:12
Git commit 개행 소스트리가 아닌 cmd,terminal,bash에서 커밋을 하려면 git commit -m"커밋할 내용" 형식의 명령으로 할 수 있었습니다. 여러 줄의 커밋문을 작성할 때에, 개행은 다음과 같이 할 수 있습니다. git commit -m"1줄 > 2줄 > 3줄 > 4줄 " "로 시작한 커밋문은 그다음 "를 만나기 전까지는 엔터를 눌러도 명령어로 인식을 하지 않기 때문에, 그냥 엔터를 눌러주면 개행이 가능합니다.
-
칸반이란? (Feat. 애자일)Dev 2019. 10. 21. 17:55
애자일과 칸반 최근에 팀 프로젝트로 협업 툴을 다루어 보면서 개발 방법론에 대해 조사해보게 되었습니다. 부끄럽지만 사실 개발 방법론이라고 해봤자 학부 소프트웨어 공학 시간에 주입식으로 집어넣은게 전부였죠. 애자일이란 말도 들어는 봤지만, 깊이 있게/실전으로 찾아본 적은 없었습니다. 그러다가 애자일을 실현한 도구인 칸반을 먼저 접하게 되었죠. 제 Github Project 입니다. task들이 여러 개의 파트로 나뉘어져 있죠? Github Project는 task를 Issue의 개념으로 넣어, 칸반 보드의 역할을 할 수 있습니다. (Github Project 사용법은 차후에 자세히 포스팅하도록 하겠습니다) 계속 언급되는 애자일, 칸반이 뭔지 간단히 알아보면 애자일은 전통적인 개발 방법론인 워터폴(폭포수형 ..
-
[Pycharm] Typo 에러 안 뜨게 하기Dev 2019. 10. 18. 17:56
Typo Error 파이참으로 파이썬 코딩을 하다보면 다음과 같은 오류가 보이는 경우가 있습니다. Typo는 데이터 유형과 관련된 오류로, 지금의 경우 함수의 네이밍이 잘못되었기에 뜨는 현상입니다. 사실, 이대로 구동시켜도 컴파일 에러는 발생하지 않지만, 사소한 네이밍/데이터 형식 오류가 뜬 경우 저렇게 초록색 밑줄이 나타나게 됩니다. 클린코드에서는 영어 줄임말을 허용하지 않는데, 특히 문법/네이밍이 까다로운 파이썬에선 특히나 더 쉽게 발견할 수 있습니다. 본래는 inputInformation 같은 이름으로 다시 변경해주는게 옳으나, 이런 것을 구우우욷이 세밀하게 지키고 싶지 않으신 분들은, 그냥 설정에서 꺼 주면 됩니다. Settings-> Editor-> Inspections에서 검색창에 spelli..
