본문 바로가기
반응형

Dev

 (122)
좌우로 흔드는 모션 기준점 변경 좌우로 살짝 흔들면서 보여줄 때 기준점 변경! transform-origin: bottom center;
이것만 알아도 React 기본 마스터 !! //App.js import React from 'react'; 는 리액트를 불러온다. 어디서? 리액트 프로젝트를 만들 때 node_modules 디렉토리도 함께 생성이 되는데 그 안에 react 모듈이 설치 돼! 그래서 그 react를 불러오는거지!! 근데 원래 모듈을 불러와서 사용하는 건 사실 브라우저에서는 없던 기능! 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 지원하는 기능!! 이러한 기능을 브라우저에서도 사용하려고 번들러 ( ex: 웹펙, Parcel, browserify ... )를 사용함 함수에서 undefined를 렌더링 하면 오류 나온다! // 이렇게 하면 오류나온다! function App() { const name = undefined; return..
브라우저가 지원하지 않아서 ES6를 안쓴다? 핑계 노노해! 바벨(BABEL) ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 front developer가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다. IE11 이하 버전들은 ES6나 이후에 대한 고려가 거의 없지만 엣지(MS Edge)를 포함한 모든 모던 브라우저들은 네이티브로 ES8(ECMAScript2017)의 대부분의 스펙을 지원한다.(실용적인 사용에 있어서는 100%라고 봐도 된다) 모던 브라우저들은 이렇게 열심히 스펙을 따라가 주고 있다. 프로젝트의 지원 대상 브라우저가 IE11 이하 버전을 포함하고 있다면 그때는 우리의 무기 바벨을 사용할 때이다. ..
Github 사용하기, remote, clone, push, pull 안녕하세요. 이번 시간에는 지난 번의 commit을 바탕으로 Github를 사용해보겠습니다! 우선 깃허브를 사용하려면 회원가입부터 해야합니다. 링크 Sign up이 회원가입이고, Sign in이 로그인입니다. 무료 계정을 만드시면 됩니다. 깃허브 저장소는 전부 공개입니다. 남들이 여러분의 코드를 볼 수 있다는 뜻이죠. 만약 남들이 보는 것이 싫다면 돈을 내고 개인 저장소를 구매할 수 있습니다. 회원가입하시고 로그인하면 다음과 같은 화면이 뜹니다. 깃허브 저장소를 생성할 건데요. +버튼을 누르고 New repository를 누르거나 메인 화면에 있는 Start a project를 누르면 됩니다. 여기에 Repository name만 적어주고, Create repository 버튼을 눌러 생성합니다. Des..
Git 저장소 생성(init), 최초로 commit하기 안녕하세요. 이번 시간에는 진행중인 프로젝트에 git 저장소를 생성하고, 최초로 commit을 해보겠습니다. 깃 명령어를 사용하는 방법은 여러가지가 있지만 저는 주로 명령프롬프트(CMD)를 사용합니다. 따로 설치할 필요가 없으니까요. 아니면 통합 개발 환경(IDE)에 내장되어 있는 터미널을 사용하거나, Git을 설치할 때 딸려오는 Git Bash나 Git GUI를 사용하는 것도 괜찮습니다. 하지만 무엇을 사용하든 명령어는 같으니 너무 걱정하지 마세요. 이제 프로젝트를 하나 만들어보겠습니다. 아무 곳에나(쉽게 하려면 C:\) gitExample 폴더를 만들고, gitExample 폴더에 git.html과 git.css를 만듭니다. 내용은 다음과 같이 하겠습니다. git.html 깃 연습 깃의 사용 방법에 ..
Git과 Github 소개 ! 안녕하세요. 이번 강좌는 Git과 Github에 대한 것입니다. Git은 버전 관리 시스템(VCS, Version Control System) 중 가장 유명한 프로그램입니다. Github는 그러한 Git의 데이터를 저장하는 서버입니다. Git이 왜 필요할까요? 예시를 하나 들어보겠습니다. 현재 버전 1을 내놓은 앱이 있습니다. 개발자들이 버전 1.1 업데이트를 위해 열심히 코딩을 하죠. 실컷 만들어서 실행했는데 작동이 되지 않습니다! 이때는 어떻게 해야 할까요? 다시 버전 1로 돌려야겠죠? 그런데 많은 부분에서 수정을 해버려서 버전 1이 뭐였는지 기억이 안 납니다. 낭패네요... 이렇게 회사가 망했답니다. 그래서 나온 게 VCS입니다. 버전 1 코드 따로, 버전 1.1 코드 따로, 나중에 나올 버전 2 ..
React와 React Native 차이점! ReactJS? 페이스북에서 만든 자바스크립트 오픈소스 라이브러리. 웹, 웹 앱, SPA등 개발 시 사용. 프론트와 서버 사이드 모두 제공. 가상의 DOM을 사용하며 이는 전체 새로고침보다 빠르다(필요한 부분만 고침). HTML태그 사용. 컴포넌트 재사용이 용이함. React Native? 페이스북에서 만든 자바스크립트 오픈소스 모바일 앱 프레임워크. 크로스 플랫폼 모바일 앱 개발에 사용. 웹 개발자에게 모바일 앱 개발을 쉽게 해줌! HTML태그 사용하지 않음. 자체 애니메이션 라이브러리를 제공. (css로 작성할 필요 없음) 리액트의 Webpack같은 bundler설정이 필요 없음. 이미 가지고 있다. ios와 Android 동시 개발 가능. 결론: React.js는 웹 개발, React Native는..
React Hooks 도입 시기 2019년 초 리액트 16.8버전에 Hooks라는 기능이 도입되면서 리액트 컴포넌트 개발방식에 매우 큰 변화가 생겼다!! 기존에는 컴포넌트에서 상태 관리를 하려면 반드시 클래스형 컴포넌트를 만들어서 사용해야 했지만, 이제는 Hooks를 사용하여 함수형 컴포넌트에서도 상태관리를 할 수 있게 되었기 때문!! 또한, 리액트 컴포넌트의 라이프사이클(LifeCycle) 메소드를 대체 할 수 있는 Hooks도 있어서 더 이상 클래스형 컴포넌트를 사용할 이유가 없음! 하... 첫 공부를 니콜라스형 따라하느냐고 클래스형으로 했는데... 언젠가는 도움이 되겠지........
반응형

티스토리툴바