가상환경을 우선 다운로드 해보겠습니다.저는 pipenv를 통해서 가상환경을 만든 뒤에 가상환경 안에서 장고를 다운로드 받았습니다. 장고를 글로벌하게 다운로드 했을 시엔 다른 버전의 장고를 사용하게 되었을 때 기존의 프로젝트들이 영향을 받을 수도 있고, 파이썬 애니웨어와 같은 사이트로 옮길시에도 더 환경을 세팅하는게 편하다고 느껴져서 입니다. 가상환경을 구축하기 위해 다른 것을 사용하셔도 되지만 장고가 처음이고, 파이썬이 익숙하지 않다면 pipenv 다운로드 부터 천천히 따라해주시면 됩니다. python3 -m pip install pipenv==2018.5.18 2018.10.08 현재 pip 18.1 버전과 pipenv 2018.7.1 버전이 에러가 나는 것 같아서 이전 버전을 지정했습니다. 가상환경 ..
MVT 패턴은 MVC 패턴과 똑같습니다.장고는 MVC 패턴을 기반으로 하고, 이름만 MVT 패턴이라고 이전 포스팅에서 간략하게 설명했습니다. 이번 포스팅에서 다운로드를 하기 전에 패턴에 대해서 공부하고 다음 포스팅에서 장고를 다운로드 해보겠습니다. MVC 패턴은 Model, View, Controller의 앞 글자를 딴 말로 Model에서는 데이터 저장 및 수정, 변경, 삭제 등의 일이 일어나는 데이터베이스 부분입니다. 그리고 Controller에서는 로직을 담당합니다. 데이터의 변경이 필요한 부분에서는 모델에 요청하고 그 결과값을 받고, 그냥 html 문서만 보여주면 되는 순간에 그러도록 명령합니다. View 부분이 화면의 UI를 담당하는 부분입니다. 사용자에게 실질적으로 보여지는 부분이라고 생각하시면..
앱을 만들고는 싶었지만 자바를 배울 마음은 없었다.보통 어플리케이션을 만들 땐 자바를 배우고, 안드로이트 스튜디오를 이용해야 합니다. 그래서 앱을 만들려면 언젠가는 배워야겠구나 하고 생각했지만, 지금 파이썬이나 자바스크립트를 다루는 것만으로도 벅차다고 생각했기 때문에 영영 미뤄지나 하는 생각이 들었습니다. 하지만 리액트 네이티브와 엑스포를 알게되고 앱을 실제로 만들어서 스토어에 올리고 난 후 깨닫게 된 것들을 공유해보려고 합니다.자바스크립트의 강력함을 알게되다.가장 놀란 것은 자바스크립트의 강력함입니다. 자신의 분야 뿐만 아니라 다른 분야까지 넘어가서 활동하는 모습을 보니 정말 대단하다고 생각하게 만드는 언어입니다. 프론트엔트를 넘어서 백엔드까지 진출하더니 이제는 네이티브 언어처럼 앱도 만들고, 인공지능..
개발속도를 생각한다면 당연 파이썬의 장고입니다.신속한 것이 우선일까 아니면 정확한 것이 우선일까 하는 질문을 받은 적이 있습니다. 신속정확이냐 아니면 정확신속이 맞냐하는 질문이었죠. 상황에 따라서 그 대답은 달라지겠지만 워낙 빠르게 움직이는 it 세상에서는 신속이 먼저고 정확은 그 다음이라고 생각합니다. 사업적인 면에서도 그렇지 않을까요? 빠르게 만들어보고 일단 검증을 받으면서 고쳐나가는게 더 좋다고 생각합니다. 파이썬의 대표적인 프레임워크인 장고는 이러한 경우엔 당연 1순위입니다. 많은 것들이 미리 갖춰져있기 때문에 아주 빠르게 개발할 수 있습니다. 많은 것이 미리 갖춰져있기 때문에 좀 더 무겁다면 무거운게 단점이랄 수도 있겠지만요.개발속도 뿐만 아니라 장고를 선택해야하는 이유많은 사람들이 장고를 선택..
컴포넌트를 확장해봅시다.저번 포스팅에서는 컴포넌트를 어떻게 만드는 지에 대해서 알아봤습니다. 이번 포스팅에서는 컴포넌트를 확장시켜보겠습니다. 버튼을 만들고 그 버튼을 토대로 모서리가 둥근 버튼을 만들었습니다. 이미 있는 css 효과를 넣으면 기존 css 값이 수정되며 새로운 css 효과를 선언하면 새로운 값이 적용되서 컴포넌트가 만들어집니다. 기존의 만든 스타일 컴포넌트를 다른 태그로 이용할 수도 있습니다. 컴포넌트에 as라는 속성을 주고 값으로 제가 사용할 태그를 넣어주면 됩니다. 그럼 버튼 컴포넌트를 a태그로 사용할 수 있습니다. 지금 코드는 styled component v4에 적용된 코드이고, 따로 v4를 다운로드 받지 않았다면 아래의 코드를 사용하셔야 됩니다. const AnchorButton ..
스타일 컴포넌트는 무엇이고 또 왜 사용할까?스타일 컴포넌트는 스타일이 포함된 리액트 컴포넌트를 만드는 것이라고 생각하면 됩니다. 아주 직관적인 이름을 지었다고 생각이 되네요. 이렇게 스타일이 포함된 컴포넌트를 만들면 무슨 장점이 있을까요? 당연히 css나 scss파일을 만들 필요가 없습니다. 왜냐하면 스타일이 포함되어 있기 때문입니다. 그러므로 className을 고민할 필요도 없고, 모든 것을 자바스크립트로 해결할 수 있다는 장점이 있습니다.한 번 이용해봅시다.설치하는 방법은 언제나 그렇듯 간단합니다. yarn add styled-components 또는 npm install --save styled-components 설치가 완료되었다면 한번 컴포넌트를 만들어 보겠습니다. Wrapper라는 검은색 모..
배운 것들을 활용하면 그럴싸한 예제를 만들어 볼 수 있습니다.예제로 다뤘던 것들을 생각해봅시다. 프로필 생성기도 만들었고, 게슈탈트도 다뤄봤습니다. 리액트 16에 새로 추가된 Fragment도 알고 있습니다. 이러한 것들을 이용하면 context에 대해서 그럴싸한 예제를 만들어 낼 수 있습니다. 콘텍스트 예제 바로가기 컴포넌트는 게슈탈트를 이용했습니다. 수락 버튼을 누르면 "님과 친구가 되었습니다"라는 멘트로 바뀌고 맨 위에 사람 옆의 숫자가 올라갑니다. 취소를 누르면 숫자가 다시 줄어들고 "님이 친구요청을 했습니다"라고 바뀌게됩니다. 제 코드도 공유해드릴테니 비슷하게 만들어보셔도 되고, 참고해서 따로 다른 형태라도 만들어보세요~예제 만들기우선은 콘텍스트를 만들어야 합니다. 저는 리덕스와 최대한 비슷한 ..
리액트에서 데이터를 전달하는 방법리액트에서 데이터를 전달할 때는 props를 통해서 부모가 자식에게 전달하는 방법이 가장 간단하고 쉽습니다. 가령 부모 컴포넌트의 state에 {name:react, company:facebook}이라는 값이 있다면 자식 컴포넌트에서 props.name과 props.company로 받는 형태입니다. 코드로 보니 좀 더 이해가 가시나요? 일반적으로 데이터를 전달하는 방법은 이렇습니다. 하지만 이럴경우 여러 단계를 거쳐야만 하는 경우가 생깁니다. 주황색 부모 컴포넌트에서 맨 밑에 있는 주황색 자식 컴포넌트에 값을 전달하려고 하면 어떻게 해야할까요? 중간에 컴포넌트들을 통해서 계속 값을 전달해야하만 주황색 자식 컴포넌트에 값을 전달할 수 있습니다. 저것보다 더 복잡한 형태라면 ..
리액트를 렌더할 때 주의사항리액트의 경우엔 컴포넌트들을 만들어서 그것들을 재사용합니다. 이러한 방식때문에 여러 컴포넌트들이 같이 렌더링됩니다. 이때 주의해야할 사항은 전체가 하나로 감싸져야 한다는 것입니다. 해당 코드를 실행하면 두개의 div를 하나로 감싸지 않았기 때문에 에러가 납니다. Adjacent JSX elements must be wrapped in an enclosing tag 이런 상황에서 저 두개의 div를 하나의 div나 span으로 감싸는 것이 최선의 방법이었습니다. 하지만 그럴 경우 불필요한 태그가 생기게 되는 한계점이 있었습니다. 이제는 이런 상황에서 Fragment를 이용하면 됩니다.리액트16의 Fragment 위의 코드처럼 Fragment로 감싸면 에러가 나지 않고 렌더링 되는..
작은 이미지 컴포넌트와 긴 이미지 컴포넌트 만들기레이아웃과 제목 부분은 만들었으니 이제는 이미지를 넣을 컴포넌트들을 만들어야 합니다. SmallImage 컴포넌트와 LongImage 컴포넌트라고 하고 코드를 작성해보겠습니다. Long Image 컴포넌트와 Small Image 컴포넌트는 너비와 높이 빼고는 코드가 똑같아서 같이 하나의 컴포넌트로 구성해도 상관없지만 분리하는게 좀 더 단순하게 느껴질 것 같아서 따로 작성했습니다. 게슈탈트의 Box와 Image를 통해서 만들었고, 부모 컴포넌트로 부터 alt값과 src 값을 받아옵니다. 그래서 매개변수로 props를 주고 alt에는 {props.alt}, src에는 {props.src}를 전달했습니다. 컴포넌트를 만들었으니 이제 컴포넌트 안에 넣을 값들을 구..