안녕하세요. AlbertKo입니다.오늘은 React-Router 라는 React의 ThirdParty Library를 사용해보도록 하겠습니다.react-router란?react-routerReact는 다른 UI Framework 들과 다르게 Library인건 다들 알고 계실겁니다.그러다 보니 웹을 개발하기 위한 전체적인 구성보다는 React는 Declarative View부분만 담당해줍니다. 그래서 SPA 안에서 redirect 없는 routing을 위해 나온 것이 react-router입니다. react-router는 facebook에서 만든 것은 아니지만, react를 쓰면서 routing을 해야한다면대부분의 사람들이 react-router lib를 사용하지 않을까싶네요 :) 원래 해당 라이브러리는 ..
안녕하세요! AlbertKo입니다.요즘 이래저래 바빠서 글을 꾸준히 업로드 하지 못하는 점 죄송합니다 ㅜㅜ 전에 올렸던 ToDoList를 어떻게 만든건지, React에서 Typescript로 개발하면서 material-ui 프레임워크를 어떻게 적용하는지 한 번 같이 진행해보도록 합시다 ㅎㅎ Material Design 이란? 불필요한 요소는 제거하고 본질만을 표현하는 디자인기법인 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 구글에서 발표한 디자인 가이드입니다. 이미 안드로이드를 사용하시는 여러분들과 구글에서 개발한 플랫폼들 역시 머터리얼 디자인입니다. Material-ui 홈페이지 위에는 Material-ui 홈페이지로 사용법에 관한 API와 예제를 확인할 수 있습니다. ..
안녕하세요. AlbertKo입니다.전에 LifeCycle 예제를 만들기로 했었는데,ToDoList로 대체를 할려고했습니다만,... ToDoList로 라이프 사이클 예제를 대처하기엔 좀 앞뒤가 안맞더라고요 ㅋㅋㅋㅋ ㅜ 그래서 ToDoList 예제에 쓰일 내용은 - Material-ui 사용하기 에 쓰일거고요, LifeCycle 예제는 정말 딱 보기 좋게 하나 다시 만들생각입니다 ㅜㅜ 깃허브로 예제 소스코드 확인하기 위 링크 들어가셔서 제 깃허브 보시면 됩니다 ㅎㅎ 자세한 강의는 시간 나는대로 올리도록 하겠습니다!!
안녕하세요. AlbertKo입니다.오늘은 저번 글에서 설명 못한 LifeCycle에 대해서 강의를 하겠습니다. 2018/07/22 - [Programming/React] - React에 Component 만들기 강의를 재미있고 지루한 감이 없게 하고싶은데 그게 참 쉽지가 않네요...차라리 저도 영상을 찍어서 유튜브에 올려서 가져올까 싶기도하고 ㅜㅜ 뭐 이 분야가 자체가 좀 루즈한 감이 없진 않겠지만 그래도 재밌고 쉽게 알려드리고 싶은데 저부터가 머리가 돌머리라 ㅋㅋㅋㅋ 항상 글을 쓰면서 말을 하지만 제가 설명한게 부자연스럽거나 옳지 않은 부분은 즉시 즉시 피드백 주시면 정말 감사하겠습니다. 개발자라면 LifeCycle에 대해서 여러 들어봤을 법한데 저같은 경우는 LifeCycle이라고 해서 메모리 관리가..
안녕하세요. AlbertKo입니다.오늘은 Component 만드는 방법을 알아보도록 하겠습니다. 먼저, Component의 디렉토리는 보통 './src/components/YourComponentFile.tsx' 이런 식의 위치에 자리잡습니다. 그러면 먼저 파일을 만들도록 합시다. 저는 first.tsx 라는 이름의 파일을 만들었습니다. 그런 다음, react를 import 해줍시다. import * as React from 'react'; 그런 다음에 저는 material-ui 라이브러리도 추가하겠습니다. 후에 UI 라이브러리 소개 및 사용 강의를 작성할 때 자세하게 설명해드리겠습니다 ㅎㅎ 그 후 react로 부터 component class를 상속 받아서 일단 코드를 작성해봤습니다. import * ..