분류 전체보기 (102) 썸네일형 리스트형 Github -repository(저장소) 만들기 이 전에 프로젝트에서는 다같이 한 장소에서 코딩을 했다. 그래서 그냥 코드를 합칠때에 친구의 컴퓨터로 친구의 깃의 아이디로 올렸었다. 그런데, 어느 날 생각해보니 이 코드들을 내가 했다고 증명할 방법이 없을 것 같아서 다같이 올릴 수 있는 방법을 생각했다. 그것이 github organization이다. organization을 하기 이전에 먼저 깃의 기초적인 사용법에 대해 적어보려한다. 우측 상단 부분에 Repositories 옆에 New라는 초록색 버튼을 눌러준다. repository의 이름을 설정하고 README file을 추가해주고 생성한다. (안해줘도 됨 근데 나중에 해줘야함) Slack, Trello 연동하기 Add an app. 원래 View가 아닌 Add다. Add를 눌러서 추가해준다. 채널에 들어가서 /trello link [trello board주소] 를 입력하면 끝이다. 다른 여러가지 명령어가 있다. /trello help를 치면 나온다. 아주 유용하다. 아직은 할일이 많이 없어서 그런지 효과가 그렇게 크지는 않은 것 같다. 그래도 보드가 이쁘고 공유가 가능해서 그런지 할일을 지우고 쓰는게 할맛이난다. 한마디로 재밌다. 다들 열심히 코딩 ! Trello 사용법 wesix가 협업을 제대로 한번 해보기로 했다. 코드를 체계적으로 관리하고 todolist(할일)도 제대로 적고 관리할 예정이다.그래서 필요한 프로그램들을 찾아보았다. 사용할 프로그램들은 github와 trello, slack이다. 트렐로란 무엇인가? 트렐로는 위와 같이 프로젝트의 관리를 돕고자 TodoList를 적어주고 거기에 대한 코멘트 또한 달수 있게 해주는 웹 애플리케이션이다. 먼가 대단한 것 같고 이쁘고 무료여서 사용했다. 정말 잘만들은 웹이라고 생각한다. 왜냐하면 사용법을 굳이 따로 익히지 않아도 충분히 사용할 수 있게 UI적으로 매우 간편한 것 같아서이다. 사용법 1) 회원가입 및 로그인 2) Board 만들기 좌측 상단에 있는 Board를 누르면 위와 같은 창이 뜬다. (1) 그 후에, 밑.. React - SPA(Single Page Application)만들어보기 -3. 파비콘 및 타이틀바꾸기 html에서 태그는 페이지의 타이틀을 뜻한다. 이것을 "열심히 코딩"으로 바꾸면 이처럼 바뀌게 된다. 자, 그러면 react에서 title은 어디 있을 까 ???? public폴더를 열면 index.html이라는 파일이 있을 것 이다. 그곳에 타이틀이 있다. 27번째 줄에 React App을 자신이 바구고 싶은 것으로 바꾸면 된다. 나는 hyuks blog로 할 거다 짜잔~! 다음은 파비콘을 바꿔보자 파비콘은 16X16 또는 32X32를 쓴다. 구글에 검색해보면 무료로 크기를 변환해주는 사이트도 있고 무료로 배포해주는 사이트도 있다. 간단한 실습을 위해서 무료 이미지를 다운 받아보자 무료 파비콘 사이트 : www.freefavicon.com/ https://www.freefavicon.com/ Try o.. React - SPA(Single Page Application)만들어보기 -2. 각 컴포넌트 지금 현재 만들 페이지는 spa로 나만의 포트폴리오(?) 자기소개 페이지이다. 나는 각 컴포넌트를 이렇게 넣었지만, 여러분들의 컴포넌트는 각자가 짜보는 것을 추천한다. 나의 졸업작품이자 처음으로 웹페이지를 만들어본 team2cc의 2cc(campus chatbot)다. 같이 만든 친구와 나 둘다 cc였어서 팀명을 2cc로 정했었다... (현재는 ... 또르륵...) 잡설은 그만하고 컴포넌트 설명을 해주겠당 ! Intro부분의 각 div의 크기는 저렇게 줬다 이유는 @media를 쓰고 싶지 않아서 이다. Intro.js import React, { Component } from "react"; import "./Intro.css"; import me from "./me.jpg"; export default.. React - SPA(Single Page Application)만들어보기 -1. 설계 및 내비게이션바 리액트를 익혔다. 요새 싱글페이지가 유행이란다. 그래서 한번 익혀보고자 한다. 먼저 설계를 했다. 위 그림을 설명하자면 제일 위에는 내비게이션 바가 있다. 그리고 이쁜사진 하나가 있고 그밑으로 나의 소개글, 그리고 프로젝트 소개를 차례대로 적을 것이다.(db는 안쓸 예정) nav bar는 상단에 고정이고 각 메뉴를 누르면 메뉴의 글로 이동한다. 그럼 먼저 메뉴바를 만들어 보겠다. 참, 모든 것들은 반응형으로 구축할 것이다. Nav.js import React, { Component } from "react"; import "./Nav.css"; export default class Nav extends Component { render() { return ( Hyuks Blog 소개글 2cc 와글와글 ... React 입력창(onChange를 사용해서 Input창 만들기) 이번에는 onchange함수를 사용하여 input창을 만들어 보겠습니다. 먼저 function으로 만들어 보겠습니다. 코드를 직접입력 해보시면 아시겠지만 저기 input창에 입력하시면 바로바로 밑에 글자가 바뀌는 것을 아실수 있습니다. 다음으로 class로 한번 만들어 보도록 하겠습니다. 너무 기초라서 재미가 없으시죠? 라이프사이클에 대해서 설명하겠습니다. React button onClick (버튼을 눌렀을 때 화면이동) 버튼을 눌렀을 때 화면이동을 해보겠습니다. 방법은 여러가지가 있습니다. window.location.href, replace 그리고 Link to를 이용하는 방법등이 있습니다. 먼저 window.location.href입니다. 다음은 window.location.replace입니다. 다음으로 Link to를 이용하는 방법입니다. 이렇게 여러가지 방법이 있습니다. 결과화면만 보았을 때는 replace와 href는 차이가 없어 보이실 수도 있지만 큰 차이가 있습니다. href는 뒤로가기 버튼을 누르면 뒤로 가지지만 replace는 뒤로가기 버튼을 누르면 뒤로가지지 않는 큰차이가 존재합니다. 그러니 뒤로가기를 방지하시고 싶으실 때에는 replace를 사용하시면 됩니다. (회원가입후 뒤로가기를 하면 큰일 나겠죠.. 이전 1 ··· 9 10 11 12 13 다음
