아로마의 개발 스토리

학부생 때는 MVC 패턴으로 웹앱 만들곤 했었는데, 그리고 대기업 인턴 면접 때도 MVC에 대해서 질문 받았던 기억이 나는데, 이게 이미 옛날 패턴이라고 하니 뭔가 마음이 싱숭생숭하다. 웹이 그만큼 오랜만인 거겠지,, 어쨌든! 이제 React Native를 할 거니까 어떤 패턴을 사용하지? 하고 검색해봤는데, Redux라는 패턴을 가장 많이 추천하는 것 같다. 약 6년 전 쯤, 페이스북에서 Flux라는 패턴을 발표했었고, 그 이후에 Flux와 Reducer를 혼합(?)하여 다시 탄생시킨 Redux 패턴이 발표되었다. Action → Dispatcher → Store →View 앱의 상태 State를 하나의 저장소 Store에 트리 형태로 저장한다. Component끼리 state와 props를 거치지 않..

부모 컨테이너 - 자식 노드의 관계 부모 컨테이너: 자식 노드의 배치 방법 정의. row, column 등의 방향 자식 노드: 자식 노드가 차지하는 영역의 크기 정의. flex나 px 등 참고한 사이트 React Native를 사용한 초간단 커뮤니티 앱 제작 React Native를 사용한 간단한 앱 제작 방법을 설명합니다. www.slideshare.net

Finally, 내가 선택한 것은 바로, React Native이다. (대세가 답이다..) 이유는, 대세인만큼 검색하면 많이 나오겠지 하는 마음이 제일 컸던 것 같다. 그리고 개발 방법은 Expo를 사용하지 않고, react native cli를 사용하는 방법을 선택했다. 이유는, 개발 자유도가 떨어지면 결국엔 다 갈아엎는 상황이 올 수도 있기 때문이다. 이런 경험을 예전에 해봤었지.. 안 좋은 기억.. 오늘 한 것은, 1) Chocolatey 설치: 엄청 간단. 엄청 빠름(약 1분?) 2) Nodejs, Python2, JDK 설치: 방법은 엄청 간단. 시간은 꽤 걸림(약 10분?) 3) 안드로이드 스튜디오 설치: 그냥 일반적인 윈도우 프로그램 설치 프로세스. 시간은 꽤 걸림(약 10분?) 4) Rea..

this.state = { mode: 'welcome', subject: //... //... } render() { if(this.state.mode === 'welcome'){ //... } else if(this.state.mode === 'read'){ //... } } - props의 값이나 state의 값이 바뀔 때마다 그 컴포넌트의 render()함수가 다시 호출되고, 그리고 그 하위에 있는 컴포넌 트들의 render()도 호출되기 때문에 화면이 싹 다시 그려진다. - console.log('...'); 하면 콘솔에 프린트를 할 수 있다. - debugger; 를 만나면 브레이크 포인트 쓰듯이 실행 시 저 부분에서 멈춘다. - HTML로 보이지만 이건 유사 HTML이다. 규칙을 따라야한다. ..

- state는 props와 함께 가장 헷갈리는 부분 - component가 실행될 때 초기화를 담당하는 부분: constructor() constructor(props){ super(props); this.state = { subject:{title:'WEB', sub:'World Wide Web'} } } - 외부에서 볼 수 없게 은닉하는 방법이다. - 상위 component의 state 값을 하위 component의 props로 전달할 수 있다. - state는 바꿀 수 있지만 props는 전달 받기만 하고 직접 바꿀 수는 없다. // App의 consturctor 안 this.state = { contents: [ {id:1, title: 'HTML', desc: 'HTML is blar blar..

[Component 만들기] - App.js에 있는 class App에서 시작한다. 마치 main() 같은 건가? - html과 js처럼 작동을 하지만 굉장히 가독성이 좋다. - create-react-app이 알아서 변환해준다고 생각하면 된다. 깔끔히 정리해주는 역할. - 다들 props와 state에서 절망을 많이 하는 것 같다. 헷갈리는 부분인 것 같으니 집중해야겠다. {this.props.title} {this.props.sub} - 이렇게 하면 customize한 나만의 props를 속성으로 사용할 수 있다. 오픈튜토리얼스 이고잉님 강의 https://opentutorials.org/module/4058/24737 컴포넌트 제작 - React 수업소개 React의 핵심 기능인 컴포넌트를 제작하는..