중앙에 오게 하기 위해 많이 시도했지만, 개념이 부족하여 실패했다.


검색한 결과, 생각보다 간단했다.


margin:0 auto;


이 코드를 스타일에 넣어주면 그만이다.


여기서 0 auto 는 "0 auto 0 auto" 의 의미라고 할 수 있다..

패딩 또는 마진을 값을 지정할 때, 상하좌우 4가지 방향으로 각각 설정할 수 있다.

순서는 블럭의 상단 --> 우측 --> 하단 --> 좌측이다. 즉, 시계 방향으로 돌아간다고 생각하면 쉽다.

반복되는 값이라면 줄여서 "5px 10px" 이라고 할 수 있다. 이는 5 10 5 10과 같이 2번 반복되는 것이다.

마찮가지로 상하좌우 모두 동일한 값으로 4번 반복된다면 "5px" 하나만 쓰면 된다.


즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 좌측과 우측의 여백을 자동으로(auto) 주라는 것이다.


이렇게 하면 내용물이 페이지에 중앙에 배치되는 것을 볼 수 있다.

Posted by sungho88
,

게시판을 제작할때, 글 삭제 전  " 정말로 지우시겠습니까? " 와 같은 문구를


글 삭제 전 확인차 띄워주려고 한다.


어떻게 해야할까.


<a href="delete주소" onclick="return confirm('Are you sure you want to delete this ?');">삭제</a>


이렇게 하면, 

1. 링크를 눌렀을때, 그 화면에서 confrim창이 뜨고
2. 취소를 눌렀을 경우, 그냥 창이 닫히며 아무런 동작이 발생하지 않는다.
3. 확인을 눌렀을 경우, delete주소(url)로 이동하게 된다.
삭제와 관련된 코드는 위 URL에서 처리하면 될 것이다.

이렇게 a태그에서 간편하게 confirm 함수를 사용하는 방법을 적어보았다.

이렇게 적어둬야 또 사용할 때 찾아쓰지.

Posted by sungho88
,

form을 써서 DB에 글을 등록하는 것을 구현했다.

하지만, 테스트중에 습관적으로 세번을 클릭했더니 동일한 게시물이 세번 등록되는것을 알게 되었다.

즉, submit 버튼이 중복된다는 것이다. 이것을 어떻게 막을 수 있을까?

안드로이드에서 했던 기억을 되살려보면 boolean값을 이용하여 중복을 막을 수 있다.

기본값을 false로 두고, true일때 submit을 진행하고 false로 변경한다.

그 다음에 false에 return을 해버리면 영영 중복을 못 하게 된다.

코드로 보면 다음과 같다..


var submitted = false;    


if(!submitted) {

    Editor.save(); // 다음에디터를 사용하는 코드(이 부분에서 전송 코드를 작성한다)

    submitted = true; // true로 값을 바꾼다.

  } else {

    return;

  }


이렇게하면 한 번 클릭시 boolean값이 변하기때문에 간단히 중복을 막을 수 있다.

Posted by sungho88
,

이 블로그를 참고해서 작성해보았다.

http://krksap.tistory.com/358


1. Bitbucket에 가입한다.(https://bitbucket.org/product)

2. Projects 탭에서 Create Project를 선택하고 생성한다.

3. Repositories 탭에서 Create repository를 선택하고 생성한다.

4. 1~3과정을 통해 Bitbucket에 repository가 생성되었다.


그런데 이 저장소를 어떻게 사용해야 하는거지???

클라이언트에서 깃 저장소를 사용하기 위해서는 클론을 해줘야한다.

왼쪽 메뉴에서 가장 위에 있는 Clone을 클릭하면 다음과 같이 저장소의 주소가 보인다.

그것을 복사해서 소스트리에서 연결시켜주면 된다.


소스트리란?

깃은 편리하지만 기능이 너무 많고 복잡하기 때문에 세팅하기가 굉장히 어렵다.

그래서, 조금이나마 간단하게 GUI 환경에서 깃을 관리할 수 있는 툴이 있는데

그것이 바로 소스트리라는 것이다.

어쨋든… 복사해놓은 URL을 소스트리 어디에 갖다 붙이느냐…


소스토리를 열면 눈앞에 바로 보이는 저 Clone/New를 클릭한다.

그러면 창이 하나 열린다. 또 클릭하고 할 것 없다. 그냥 이 화면에서 해결하면 된다.


Source Path / URL에다가 복사해놓은 URL을 처넣자.

그리고, 어디에 위치할 것인지를 Destination Path로 경로를 설정해주자.

그 폴더가 .git파일이 생성되면서 깃과 연동된 파일이 된다.

그 다음에 Clone 버튼을 클릭해서 닫으면 정상적으로 생성이 되었을 것이다.

그 폴더로 들어가보자.

그러면 빈 폴더 안에 .git이라는 파일이 들어있다.

이 폴더는 이제 git이 관리하는 폴더가 된 것이다.

이제 프로젝트를 이 폴더에 저장하면 깃이 알아서 체크해준다.


Posted by sungho88
,

- 하나의 버전은 모든 변경사항들을 포괄 할 수 있음

- Uncommitted changes가 뜬다면 커밋할 무엇인가가 있다는 의미.

  (즉, 로컬 래파지토리에 변화가 일어났다는 것을 의미.)


Unstaged files

로컬 래파지토리에서 수정된 파일이 존재하는 공간 --> Working copy

체크를 하게 되면 Staged files로 이동하게 된다.


Staged files

커밋이 되었을경우 버전으로 생성될 파일들을 갖고 있는 공간 --> Index 또는 Staging area

Unstaged files에서 Staged files으로 이동(체크)하는 행위를 의미하는 용어 -->add

커밋을 하게 되면 Staged files에 있던 파일들을 저장소로 올리게 되는데, 그러면 버전이 하나 생성된다.

각각의 버전들이 저장되어있는 공간을 Repository 즉 저장소라 부름.

즉, working copy 공간에 있는 파일들은 무시되고, index에 존재하는 파일들만 Commit할 수 있다.




정리하면, 아래와 같은 상황일때;.

Uncommitted changes 이 맨 위에 뜬다면,  로컬 래파지토리에 뭔가 변화가 생겼다는 것을 의미한다.

클릭을 해보면 밑에 변화된 파일들의 목록이 나오게 된다.

여기서 변화란 기존에 있는 코드의 수정일 수도 있지만, 파일 생성 또는 제거를 한 것도 포함된다.

아래에서는 index.html파일만 커밋하기 위해 한 개만  add시켰다.




하나의 파일이어도 index(staging area)에 올려져있는 파일을 수정하면 Working copy에 동일한 이름의 파일이 생성된다. 즉, 동일한 파일이어도 위치에 따라 코드가 다를 수 있다.

그리고 커밋을 하면 index(staging area)에 올려진 코드는 커밋되지만, Working copy에 있는 파일은 그대로 남아있다.



<커밋 전에 수정사항 취소하기>


Discard

Discard라는 명령어를 사용하게 되면 이전 버전 이후 변경한 내용을 모두 되돌려 초기화시킨다.

즉, 가장 최근에 커밋한 상태로 되돌아간다.

흔히 말하는... 코드가 꼬이거나, 원인모를 문제가 발생할경우 사용하면 처음으로 되돌리는 용도이다.



Reset : 버전을 제거하면서 내가 원하는 버전으로 되돌림

종류 : Mixed / Hard / Soft 

이미 커밋한 버전을 취소하는 방법은 Reset을 사용한다.


A) 내가 돌아가고 싶은 버전으로 돌아가면서 그 버전 이후의 모든 것들을 제거하고 싶다면?

Q) 브랜치 그래프에서 자신이 돌아가고 싶은 부분(버전)을 클릭한 다음 마우스 오른쪽 클릭 - Reset current branch to this commit을 선택한 후 Using mode 를 설정한다.

Hard - discard all working copy changes 를 선택한 후 OK를 누르면 경고창이 한 번 뜬다.

모두 지울것이므로 진짜 지울거냐고 물어보는 것이다.  이것은 마치 휴지통 비우기와 비슷한 것 같다. 완전히 날려버림....

모든 일이 끝나고 확인하면 해당 부분의 코드로 돌아온 것을 알 수 있다.. 그 이후 수정 버전은 모두 제거되었다...

조심히 쓰자.



내가 돌아가고 싶은 버전으로 돌아가면서 그 버전 이후의 모든 것들을 제거하고 싶다면?
+ Working copy에 커밋되지 않은 상태로 유지되게 만들고 싶다면

 

Q) 브랜치 그래프에서 자신이 돌아가고 싶은 부분(버전)을 클릭한 다음 마우스 오른쪽 클릭 - Reset current branch to this commit을 선택한 후 Using mode 를 설정한다.

Mixed - keep working copy but reset index 를 선택한 후 OK를 누르면 진행된다.

커밋되기 전에 상태 그대로 Working copy로 나타나면서 다른 버전들은 모두 제거된다.


Revert(Reverse) : 버전을 유지하면서 내가 원하는 버전으로 되돌림

내가 선택한 그 버전을 취소해서 그 버전 이전 상태로 돌리는 것을 의미한다.

안 하는 게 낫다. 왜냐하면 버전은 그냥 되도록 남겨두는것이 좋다.

제거되는 것이 아니라 이전 버전 상태로 돌아가게 된다.


















Posted by sungho88
,
소스트리란 무엇인가?




1. 소스트리(SourceTree)를 다운로드한다. 사이트는 아래에 있다.


2. 다운로드 받아 설치를 완료하면 다음과 같이 소스트리 창이 실행된다.
(버전에 따라 이미지와 다를 수 있다)


3. 상단에 Local 말고 Remote를 실행한다.


4. 좌측에 + Add an account를 클릭하여 원격 연결을 설정한다.



Host에서 설정할 것 :  Hosting Service부분을 GitHub 선택. 그외것들은 그대로 두면 됨.


Credentials에서 할 일 : Refresh OAuth Token을 클릭한다.

그러면 깃허브 사이트에 들어가게 되고 인증 과정을 진행한다.

허용하겠음을 하게 되면 깃허브 아이디를 Username으로 자도으로 끌고온다.

OK를 눌러서 창을 닫는다. 이제 Clone해서 받아보자.


소스트리와 깃허브 저장소(Repository) 연동하기


Remote 오른쪽 Clone 탭을 누르면 위에와 같은 화면이 나온다.

첫 번째 Input : Source Path / URL : 원격 URL Clone 주소를 입력한다.



두 번째 Input : Destination Path : 자신의 PC에 파일이 저장되는 위치를 말하므로 자신이 원하는 위치에 저장하고 싶다면 변경하면 된다. 변경하지 않으면 자동으로 기본 위치가 설정된다.


세 번째 Input : name: 별 의미 없다. 원하는 이름 입력한다. 기본값이 있으므로 입력 안 해도 무방하다.
네 번째 Input : root: 별 의미 없다. 기본값이 있으므로 건들지 않는다.

그리고 클론(Clone)를 누르면 



드르륵~ 드르륵~ 후...


화면이 달라진것을 볼 수 있다. 이제 깃을 사용할 수 있는 준비가 된 것이다.

이제, 소스트리를 이용해서 깃허브에 코드를 제어하는 방법에 대해 알아볼 것이다.
























테스트하기 위해서, 원하는 위치에 로컬 저장소를 만들었다(그냥 빈 폴더 하나 생성하면 된다)
이렇게 로컬 저장소로 생성한 경로에다가 소스트리에서 리포지토리로 설정을 해주게 되면
Git관련 파일들이 설치가 되며, 그 이후 뭔가 파일이 수정되거나 제거되거나 생성될때는 바로바로 그 변화된 부분을 
찾아내어 알려준다(트래킹이라고 함) 이러한 변화를 한눈에 GUI형태로 보여주도록 해 놓은게 바로 소스트리이다.

  

<소스트리에서 저장소 만들기>


1. Clone/New 메뉴를 클릭한다.

2. Create New Repository 메뉴를 클릭한다.

3. Repository Type은 자동으로 설정이 된다. Destination Path에 위에서 만든 빈 폴더의 경로로 가 폴더를 추가한다.

4. 완료를 하면 왼쪽에 프로젝트가 뜨게 된다. 그러면 정상적으로 설정하였다.


이제부터 이 폴더는 소스트리가 지켜본다. 

뭔가 변화가 생기면 즉각적으로 소스트리에 변화된 내용을 알려주게 된다.

그렇다면 뭔가 변화를 줘서 확인해보자.

빈 폴더에 파일을 하나 생성한 다음 소스트리로 돌아오면 뭔가 파일이 ?가 뜬채로 생긴것을 볼 수 있다.

?는 처음보는 파일이니 소스트리에서 알 수 없으므로 ?가 뜨는것이다.

이것을 버전 관리를 하려면 커밋을 해주면된다. 아래에 체크를 해주면 체크해준 파일이 이동한다.

무시하고 Commit버튼을 눌러 커밋해보자.  

 



소스트리를 처음 사용할때 에러가 나는 경우가 있다.  사용자가 누군지 아직 정해주지 않았기 때문이다.

깃을 사용한다는 것은 협업을 한다는 것인데 누가 이 것을 커밋했는지를 알 수 없기때문이다. 당연한거다.

그래서, 사용자의 정보가 없을경우 이름 & 이메일을 처음에 등록해줘어야 한다. 그 이후는 묻지않고 커밋이 가능하다.

커밋을 하면 BRANCHES에 추가된다(버전이 생겼다)

소소트리에서 변경된 코드 부분을 보면 아래와 같이 다양한 색상을 갖고 있다.


녹색 라인 : (이전 버전과 비교해서) 추가된 부분

흰색 라인 : (이전 버전과 비교해서) 변경된 것 없음

빨간 라인 : (이전 버전과 비교해서) 제거된 부분



<소스트리에서 >

위 노란색은 깃에 의해 관리되고 있는 파일이다. 저기에 떳다는 것은 index.html파일이 수정되었다는 것을 의미한다.

보라색 물음표는 처음 보는 파일, 즉 처음 생성된 파일이라고 할 수 있다.

 

Posted by sungho88
,

자바스크립트에서 배열이나 객체를 좀 더 쉽게 다루기 위해 for in 반복문을 제공한다.


for(var str in array) {


}


이것은 array 배열의 처음부터 끝까지. str에 인덱스를 집어넣어 돌리라는 의미이다.


즉,


for(var str = 0; str < array.length; str++) {


}


위 코드와 완전히 동일한 코드라고 할 수 있다. 짧고 간결하게 작성할 수 있다는 장점이 있지만, 

배열을 무조건 전부 사용해야하며 배열중에 필요한 부분만 골라서 제어할 수 없다는 단점이 있다.

Posted by sungho88
,

버전 관리 시스템(Version Control System)

 

 

  • 버전 관리 시스템, 형상 관리 시스템, 소스 관리 등 다양한 이름으로 불리기도 함.
  • 버전이란? 의미있는 변화들 --> 기능 개선 또는 버그 수정 등등
  • 버전 관리 시스템이 하는 일이 이러한 의미 있는 변화들을 관리하는 것.
  • 프로젝트 수행할때, 작업이 많이 진행되었을때, 다시 돌려놓으라고 했다면 어떻게 것인가
  • 변경된 히스토리가 있다면 매우 편할 것이다. 일종의 백업이라고 있다. 원본에서 변경하는 것이 아니라 이전 버전을 틈틈히 남겨두면 과거로 돌아갈 수 있다.
  • 드랍박스에도 버전 관리 시스템 기능이 들어가있다. 또한, 위키피디아 백과사전도 기능을 갖고 있다.
 

 

Posted by sungho88
,

Android에서는 기본적으로 GIF와 WebP 형식을 지원하지 않는다. 

따라서, 리액트에서 이미지를 호출하는 아래와 같은 일반적인 방식으로는 작동하지 않는다.

 

<Image style={styles.image} source={{uri: XXXXX`}} />


리액트에서는 android/app/build.gradle 파일에 몇 가지 모듈을 추가해줌으로써, 이러한 제약을 극복할 수 있다.


// 이 dependencies는 내 앱이 필요로하는 어떤,,, 그런 모듈들의 모음이라 할 수 있다.


dependencies {

  // If your app supports Android versions before Ice Cream Sandwich (API level 14)

  compile 'com.facebook.fresco:animated-base-support:0.11.0'


  // For animated GIF support

  compile 'com.facebook.fresco:animated-gif:0.11.0'


  // For WebP support, including animated WebP

  compile 'com.facebook.fresco:animated-webp:0.11.0'

  compile 'com.facebook.fresco:webpsupport:0.11.0'


  // For WebP support, without animations

  compile 'com.facebook.fresco:webpsupport:0.11.0'

}


솔직히 이 빨간색만 있어도 GIF를 불러올 수 있다.

이렇게 하면, 비어있던 화면에 이미지가 나오는 것을 볼 수 있다.

기쁘다. 보인다. ㅋ 


아.. 그외에도 잘 모르지만 Webp라는 형식도 마찮가지로 지원을 해준다고 한다.

이게 뭐냐면 손실 압축 이미지 파일을 위한 이미지 포맷이라고 한다. JPEG형식이 손실이 크므로 구글이 만든 이미지형식이라고 한다. 안 써봤고, 쓸일이 없으므로 이상으로 블로그 끝.

Posted by sungho88
,

어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해준다.

Redux는 React.js 외에도, jQuery 혹은 Angular 를 사용하는 어플리케이션에서도 사용 될 수 있다.

즉, JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구이다.


React에서의 데이터 흐름은 단일 방향으로만 흐른다.

parent-child 관계를 통하여 데이터를 교류하게 된다.

컴포넌트 갯수가 많아진다면.. 혹은 데이터를 교류 할 컴포넌트들이 복잡해지기떄문에 한계가 있다. 

그렇다고 parent-child 관계를 지키지않고 컴포넌트끼리 직접 데이터를 교류하는 방법이 가능하다. 

하지만, React 에선 절대 권장되지 않는 방법이다. 

코드 및 구조가 정말 복잡해지고, 잘못하다간 스파게티와 같은 코드가 만들어질 수있기 때문이다.


이러한 문제를 해결하기 위해 나온 개념이 바로 Flux이다. 

Flux는 디자인패턴이다. 이것은 기존의 MVC 패턴을 좀 더 발전시켜 만든 디자인 패턴이다.

MVC 패턴은 Model과 View가 늘어난다면 매우 복잡해진다. 

위 문제를 해결하기 위해서 FLUX 라는 디자인 패턴이 만들어졌다. 

시스템에서 어떠한 Action 을 받았을 때, Dispatcher는 받은 Action들을 통제하여 Store에 있는 

데이터를 업데이트한다. 그리고 변동된 데이터가 있으면 View가 다시 렌더링된다. 

그리고, View에서 Dispatcher로 Action을 보낼 수도 있다. 

Dispatcher은 작업이 중첩되지 않도록 해준다. 

즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 

그 작업이 끝날 때 까지 다른 Action들을 대기시킨다.


Redux는 Flux 아키텍쳐를 좀 더 편하게 사용 할 수 있도록 해주는 라이브러리이다.

store에서 모든 데이터를 담고 있고, 

컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류한다.

Posted by sungho88
,