본문 바로가기
반응형

분류 전체보기

 (127)
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도 있어서 더 이상 클래스형 컴포넌트를 사용할 이유가 없음! 하... 첫 공부를 니콜라스형 따라하느냐고 클래스형으로 했는데... 언젠가는 도움이 되겠지........
React : 이벤트 설정! render 함수에서 이벤트 설정 한 부분을 확인해보자! render() { return ( 카운터 값: {this.state.number} + - ); } 버튼이 클릭되면 함수가 각각 호출되도록 설정되어 있지? 기존에 자바스크립트로 비슷한 작업을 해봤다면 익숙할거야 위 코드를 다시 봐보자고! 정말로 주의해야 할 점이 있는데! 리액트에서 이벤트 함수를 설정할 때 html과는 다른 점이 있어! 이벤트이름을 설정 할 때 camelCase 로 표기해야 해. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로! 이벤트에 전달해주는 값은 함수 여야 해. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다..
ES6 : 비구조화 할당~ 오우오우~ 일단 이런 배열이 있다고 보자! const animalList = ["CAT", "DOG", "TIGER"]; const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER animalList라는 변수는 순서대로 'cat', 'dog', 'tiger'를 갖고 있는 배열이야. 이 변수가 가진 값을 각각 변수에 꺼내서 쓰려면 직접 하나씩 지정을 해줘야 해.. 이런 작업은 엄청 귀찮고 코드를 읽기에도 엄청 복잡하게 보이는 단점이 있어! 비구조화 할당을 써보자고 뚜둥! const [cat..
React : setState에 객체 대신 함수 전달하기! setState를 사용해서 값을 업데이트 할 때! 기존의 값을 참고해서 값을 업데이트 하게 될 때! 좀 더 나은 문법으로 할 수 있어! 기존에 작성했던 코드가 이랬지? this.setState({ number: this.state.number + 1 }); 큰 문제는 아니지만, 또 this.state를 조회 하고 있어! 이렇게 바꿔보자! this.setState( (state) => ({ number: state.number }) ); setState에 updater 함수를 만들어서 전달했어! 좀 더 나아가서! this.setState( ({ number }) => ({ number: number + 1 }) ); 보면 (state)가 ({ number }) 가 됐지? 이건 '비구조화 할당' 이라는 문법..
ES6 : 전개연산자(Spread Operator) ㅗㅜㅑ 전개연산자(Spread Operator)는 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있어! 전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 돼! ES5에서 배열의 내용을 합쳐서 새로운 배열을 만들기 위해선 concat 메소드를 썼거든? 예를 들자면 이렇게! var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = [7, 8 ,9]; var arrWrap = arr1.concat(arr2, arr3); console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9] ES6에서 전개연산자를 쓰면! const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8,..
React : state값을 바꾸기 위한 setState! 메소드에 있는 this.setState에 대해서 알아보자! state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 해! 리액트에서 이 함수가 호출되면 컴포넌트가 리랜더링 되도록 설계되어 있거든! 이 함수에 대해 더 자세히 보자고! setState는 객체로 전달되는 값만 업데이트 해 줘! 예제로 보자! 지금은 state에 number 값 밖에 없지만 다른 값이 있다고 가정해보자고! 여기서 this.setState({ number: 1 });을 하게 되면, foo는 그대로 남고, number 값만 업데이트 된다는거야! setState는 객체의 깊숙한 곳까지 확인하지 못해! 예를 들어서, state가 이렇게 설정됐다고 한다면 이렇게 한다고 해서 foobar 값이 업데이트 되지 않아! ..
반응형

티스토리툴바