티스토리

모르니깐 할 수 있는거지
검색하기

블로그 홈

모르니깐 할 수 있는거지

ifyoudontknow-youcandothis.tistory.com/m

AlbertKo의 개발자 일상 블로그

구독자
0
방명록 방문하기
공지 [계획] 글 작성 재개 및 진행 프로⋯ 모두보기

주요 글 목록

  • [React] react-router 사용하기 안녕하세요. 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를 사용하지 않을까싶네요 :) 원래 해당 라이브러리는 .. 공감수 0 댓글수 0 2018. 8. 15.
  • React_Typescript와 Material-ui Framework로 ToDoList 만들기 (Material-ui 사용법) 안녕하세요! AlbertKo입니다.요즘 이래저래 바빠서 글을 꾸준히 업로드 하지 못하는 점 죄송합니다 ㅜㅜ 전에 올렸던 ToDoList를 어떻게 만든건지, React에서 Typescript로 개발하면서 material-ui 프레임워크를 어떻게 적용하는지 한 번 같이 진행해보도록 합시다 ㅎㅎ Material Design 이란? 불필요한 요소는 제거하고 본질만을 표현하는 디자인기법인 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 구글에서 발표한 디자인 가이드입니다. 이미 안드로이드를 사용하시는 여러분들과 구글에서 개발한 플랫폼들 역시 머터리얼 디자인입니다. Material-ui 홈페이지 위에는 Material-ui 홈페이지로 사용법에 관한 API와 예제를 확인할 수 있습니다. .. 공감수 0 댓글수 0 2018. 8. 4.
  • <예제> React로 ToDoList 만들기 안내 안녕하세요. AlbertKo입니다.전에 LifeCycle 예제를 만들기로 했었는데,ToDoList로 대체를 할려고했습니다만,... ToDoList로 라이프 사이클 예제를 대처하기엔 좀 앞뒤가 안맞더라고요 ㅋㅋㅋㅋ ㅜ 그래서 ToDoList 예제에 쓰일 내용은 - Material-ui 사용하기 에 쓰일거고요, LifeCycle 예제는 정말 딱 보기 좋게 하나 다시 만들생각입니다 ㅜㅜ 깃허브로 예제 소스코드 확인하기 위 링크 들어가셔서 제 깃허브 보시면 됩니다 ㅎㅎ 자세한 강의는 시간 나는대로 올리도록 하겠습니다!! 공감수 0 댓글수 0 2018. 8. 2.
  • React LifeCycle이란 안녕하세요. AlbertKo입니다.오늘은 저번 글에서 설명 못한 LifeCycle에 대해서 강의를 하겠습니다. 2018/07/22 - [Programming/React] - React에 Component 만들기 강의를 재미있고 지루한 감이 없게 하고싶은데 그게 참 쉽지가 않네요...차라리 저도 영상을 찍어서 유튜브에 올려서 가져올까 싶기도하고 ㅜㅜ 뭐 이 분야가 자체가 좀 루즈한 감이 없진 않겠지만 그래도 재밌고 쉽게 알려드리고 싶은데 저부터가 머리가 돌머리라 ㅋㅋㅋㅋ 항상 글을 쓰면서 말을 하지만 제가 설명한게 부자연스럽거나 옳지 않은 부분은 즉시 즉시 피드백 주시면 정말 감사하겠습니다. 개발자라면 LifeCycle에 대해서 여러 들어봤을 법한데 저같은 경우는 LifeCycle이라고 해서 메모리 관리가.. 공감수 1 댓글수 2 2018. 7. 26.
  • React에 Component 만들기 안녕하세요. AlbertKo입니다.오늘은 Component 만드는 방법을 알아보도록 하겠습니다. 먼저, Component의 디렉토리는 보통 './src/components/YourComponentFile.tsx' 이런 식의 위치에 자리잡습니다. 그러면 먼저 파일을 만들도록 합시다. 저는 first.tsx 라는 이름의 파일을 만들었습니다. 그런 다음, react를 import 해줍시다. import * as React from 'react'; 그런 다음에 저는 material-ui 라이브러리도 추가하겠습니다. 후에 UI 라이브러리 소개 및 사용 강의를 작성할 때 자세하게 설명해드리겠습니다 ㅎㅎ 그 후 react로 부터 component class를 상속 받아서 일단 코드를 작성해봤습니다. import * .. 공감수 1 댓글수 0 2018. 7. 22.
  • create-react-app을 이용하여 react typescript의 프로젝트 생성하기 안녕하세요. AlbertKo입니다.전에 React typscript 프로젝트 만드는 방법에 대해서 글을 작성했는데요, 사실 그렇게 일일이 파일을 만들고 세팅을 해주지 않아도 되는 방법이 있습니다.바로 create-react-app 줄여서 cra라고 부르도록 하겠습니다.위의 일종의 cli를 이용하면 되는데요, "아니 쉬운 방법이 있다면서 왜 그렇게 복잡하게 돌아갔어요??" ;;네... 확실히 쉬운 방법이 있지만이왕 공부하는거 하나 하나 집어가면서 해보는 것도 분명 좋은 방법이라고 생각을 했습니다.확실히 하나 하나 집어가는 과정을 저 역시 강의로 글을 쓰면서 많은 도움이 되었고요생산성을 따지면 당연히 쉬운 방법으로 하는 것이 맞지만, cli에서 생성해 주는데로만 했다면 webpack이 무엇인지, 로더는 뭐고.. 공감수 0 댓글수 2 2018. 7. 6.
  • Typescript를 사용하여 React 시작하기 - "Hello World!!" 코드 작성하기 안녕하세요. AlbertKo입니다. 저번글 세팅과 알고 넘어가는 부분을 진행했고,이제 간단하게 코딩을 해보도록 하겠습니다. 코딩하기 컴포넌트 만들기 './src/components' 에 'First.tsx' 파일을 만들어 줍시다. 그 후 아래와 같이 코드를 작성해 주세요. import * as React from "react"; export interface iFirst { compiler: string; framework: string; } export class Hello extends React.Component { render() { return Hello from {this.props.compiler} and {this.props.framework}!; }} 그 다음 './src' 에 'inde.. 공감수 0 댓글수 0 2018. 7. 5.
  • Typescript를 사용하여 React 시작하기 - Setting 및 알고 넘어가기 안녕하세요. AlbertKo입니다. 요즘 프론트엔드 하면 React.js와 Vue.js죠.저는 SPA 개발을 Angular로 시작했습니다만, 저 둘의 인기에 점점 뒤쳐지는 느낌이네요 ㅜㅜAngular도 충분히 좋은 프레임워크입니다. 뭘 쓰든 본인 손가락과 머리와 그에 따른 노력에 따라 Return이 달라지지요 ㅎㅎ그치만, 현재 구직 중인 저로서 몸서 느낀 점은 Angular는 저 둘의 인기에 묻혀서 참... 구직이 힘이드네요. 개인적으로 개발자 분들은 남들 말을 듣는 것 보다는 몸서 느껴보는 것이 좋을 것 같습니다.다 해보세요!! ㅋㅋㅋ 저는 속도라든지... 는 아직 직접 뭐하다 할만한 정도는 아닌 것 같으니 겸손함을 좀 갖겠습니다. React.js 란??? React란 Facebook에서 개발 유지 보.. 공감수 0 댓글수 0 2018. 7. 3.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.