본문 바로가기

전체 글142

React - functional vs Class React의 component는 functional과 class 각각 사용할 수 있지만 차이점이 있다. 가장 큰 차이점은 State의 사용여부 이다. functional은 State, life cycle를 사용할 수 없지만, class에서는 State를 사용할 수 있다. 만약 State를 변경하거나 초기에 State를 가져야 한다면 class를 사용해서 component를 만들어야 한다. 그래서 class가 functional에 비해 기능적으로 더 많은 것을 제공하는 것처럼 보이지만, Hooks라는 개념이 있어서 그렇지 않다고 한다.(아직 Hooks를 몰라서...) functional 형태 const App = () => ( ); Class 형태 class App extends Component{ con.. 2020. 8. 1.
Full time Immersive 8주 후기 어느덧 마지막 sprint를 남겨두게 되었고, 시간은 금방 지나갔다. immersive 8주라는 시간이 흘렀고, Pre course까지 하면 12주라는 시간이 흘렀다. 9주차에 마지막 테스트가 있고, 테스트 이후에 2주 프로젝트가 진행이 된다. 미진한 부분이 많기 때문에 두렵기도 하다. immersive 7주차부터 본격적으로 database를 시작했고, 새로운 언어들을 배웠다. database를 다루기 위해 sql 언어를 배웠고, 조금 더 수월하게 해주는 mysql은 모듈 사용법을 배웠다.(일단은 mysql workbench로 과제를 진행도 되지만, 일단은 command line으로만 과제를 진행했다.) api 문서를 보면서 과제를 해결하는데, 이게 왜 되는지? 이해를 못하지만 testcase가 통과가 .. 2020. 8. 1.
CSS-media query(responsive app)(반응형 앱) codestates 강의에서 media query 개념이 나왔는데, front-end 개발자가 되려면 꼭 알아야 하는 개념이라고 한다. media query는 요즘처럼 인터넷을 컴퓨터, 스마트폰, 테블릿 기기로 볼 수 있으며, 각각의 화면의 크기는 다르다. 화면 크기에 따라 web의 화면 상태가 변화하는 개념이다.(생활코딩의 예제를 활용) 크롬 개발자도구 console에서 화면의 크기를 확인 할 수 있는데, 지금의 화면의 크기는 1091px x 981px이다. console의 창 크기를 조절해보면 화면의 크기를 나타내는 px 단위의 화면크기 표시를 볼 수 있다. 코드를 실행 시키고, 화면의 크기를 확인 했을 때, 776px x 848px이다. 여기에서 가로의 px이 700px 이상일 때, border b.. 2020. 7. 21.
React - State Life Cycle(state 생명주기) State는 사람의 생명주기 처럼 생성(태어남) - 변화(성장) -제거(죽음)으로 구성 되어있다. State가 생성될 때 *constructor *render 순으로 저장이 되었다가 render가 끝나면 *componentDidMount 내장 메소드가 실행이 된다. ※Mount는 component가 처음으로 시작할 때를 말합니다. 업데이트할 때 *render 순으로 React DOM 및 refs 업데이트가 되었다가 render가 끝나면 *componentDidUpdate 내장 메소드가 실행이 된다. 제거할 때 *componentWillUnmount 내장 메소드가 실행이 된다. 예시) 예제 : https://programmingwithmosh.com/react/guide-to-learn-useeffect-.. 2020. 7. 18.
반응형

티스토리툴바