Jewdri's Garden

서브라임으로 바꾼지 얼마안됐다.

-_-난 에디트플러스 애용자!!!

따로 프로젝트의 성격에 따라 툴이 정해져있지 않다면 에디트플러스를 주로썻다. 

개발에 따라, 운영할땐 이클립스, php스톰등 다른것도 써봤지만....제약이 없다면, 에디트플러스가 짱이었다-_-

물론 서브라임이 이쁘긴하지만,

아직까지 에디트플러스의 다양한 기능들, 편한기능들을 따라가지 못하는게 많은것 같다-_-

-_-내가 바꾼이유는...

너무오래된사람인거 같아서...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ-_-

뭔가 올드한 느낌이나는 에디트플러스말고 갈아타기를 함. 

서브라임 설치후, 이것저것 깔고 쓰고있던중, 

이것저것 알아보던중, 친구가 준 URL...

https://jeonghakhur.gitbooks.io/sublime-text3/content/

현재쓰고있는 것들도 있고, 아닌것들도 있는데

정리가 잘된듯ㅋㅋㅋㅋㅋ

여유있을때 더 둘러봐야지!

직접 핀터레스트를 구현해보았다.

나름 플러그인처럼 만든다고 클래스로 만들어봄.(물론 부족히긴 하다.)

핀터레스트가 뭔지를 모른다면,

https://kr.pinterest.com/

위에참고. 

첫번째로 만든건, 단순 원래 컨텐츠의 순서대로 위치만 정해주었다.

그 원리가 모냐면,

계산을 아래와 같이 하였다.

현재 컨텐츠들의 마크업순서를 유지한채, 화면상에도 자리를 잡아주는 단순한 로직이었다.

저런 로직으로 실제 구현을 하고 쓰는데 별 문제가 없었다.

하지만, 어떤 컨텐츠가 오느냐에 따라 화면이 달라졌다. 

아래 파일을 열어보면 알겠지만,

이게 처음버전이므로, 화면을 줄이면서 보면 문제를 알수있을것이다.

핀터레스트처음버전.zip

위에 파일에서 2열형태로 볼 경우, 맨아래 컨텐츠를 보면 알 수 있다.

맨 마지막 컨텐츠의 위치가 저 화살표가 가르키는 곳이어야 한다는것을....

하지만 내가 짠 코드대로라면 현재 있는 저 위치가 맞다.

-_-내가 로직을 잘못 생각한것.

어떻게 해야하나 고민하다가, 맞는 걸 생각하였다.

원리는  처음하나부터 열끝까지 1줄은 기존과 같은 방법으로 위치를 잡고,

그 다음 컨텐츠부터는 자신이 자리잡을 위치를 탐색한다.

그 위치는 열을 하나하나 검색해 열의 맨마지막 줄에 위치한 컨텐츠들의 높이를 비교하여

가장 짧은쪽을 선택해서 위치는 잡아가는거다.

아래와 같이 3열형태라 하면,

인덱스 3인 컨텐츠가 자리를 잡기 위해 0,1,2의 높이를 비교하여 가장짧은 쪽인 1번 아래에 오는게 맞다. 

그 다음 인덱스4인 컨텐츠는 자신의 위치를 잡기위해 어떤어떤 컨텐츠를 봐야할까?

아래 그림과 같이 인덱스4인 컨텐츠는

열들의 가장 마지막 번째에 있는 컨텐츠들의 높이중 가장 짧은곳을 선택하면 된다.

높이 비교할 컨텐츠들의 번호는 0,3,2 를 비교하면 된다.

가장 짧은곳을 선택하기위해, 비교해야될 대상들은 항상.

열의 가장 마지막에 위치한 컨텐츠 이므로..

각각의 열마다, 컨텐츠들의 정보를 넣을 공간을 만들어야겠다고 생각한다.

위와같이 각 열마다 어떤 컨텐츠들이 있는지 담고있는 부분을 만들어야한다.

각 레이아웃들의 정보를 담고있는거다.

열마다 스택이 형성된다. 3열구조라면 스택은 3개 형성한다. 

각각의 열에 컨텐츠가 추가될때 그 열에 해당하는 스택에 그 컨텐츠의 x축좌표, y축좌표, 인덱스 번호를 스택에 저장.

다음 컨텐츠가 위치를 잡을때 각 스택에 최근에 추가한 원소부터 꺼낼수 있으므로,

해당 스택들의 최근 정보를 가져와  sort함수로 y축위치를 비교,

소트하면 오름차순으로 작은것부터 정렬되므로. 소트한 첫번째 즉 0번인덱스에 있는 자료가 가장 짧은쪽이다.

그러면 추가할 컨텐츠는 그 0번인덱스의 x축과 y축의 위치정보를 가지고 자신의 컨텐츠를 그 아래에 위치하면 끝.

-_-

글로쓰니 설명이 어렵지만,

스택을 활용하면 맞는 로직을 구현할 수 있다.

스택을 이용한 수정버전을 아래에 첨부한다.

핀터레스트_스택이용.zip

따로 스택을 이용한 핀터레스트 플러그인화 시킨것 : 

masonry2.2.zip

내 글에서는 이론적인 내용의 자세한 설명은 하지 않는다.

난 전공이 컴공인데, 학부때도 이론자체는 좋아하지 않는다.

이론을 공부할때, 그것을 활용하여 어떤걸 구현할까..라는 생각만으로 이론을 공부한다.

그러면, 이론배울때 그나마 견디면서 공부할수 있는듯 ㅠㅠ

이론만 가지고 공부할려고하면 잘안된다. 

그래서 그런지 난 학부수업때 이론수업을 너무나 싫어했다. 교실에서 책과 프로젝트빔만 -_-보기때문에....

난, 자료구조. 학부수업때 겨우 패쓰만 한 사람...앗. 자료구조는 그래도 B정돈 받은듯ㅎㅎㅎ

그치만 알고리즘은 D+이라는거. (재수강안했다. 진짜 패쓰만 할생각이었음)

다시 스택으로 돌아와서...

스택은 자료구조의 형태중 하나인데, 후입선출. - 마지막에 들어간게 먼저 나올수 있는 구조.

내가 가지고 있는 책이 자바스크립트 자료구조와 알고리즘 이라는 책.

- 책은 정말 얇다. 예제도 많이 나오지 않는다.

스택구조자체를 JS 클래스로 만들고,

이것을 활용하여 무엇을 할까 ? 하다가,

책에서 하노이의 탑을 마지막에 언급했다.

그래서 하노이의 탑이다. !!!

고등학교때 이산수학이라는 교과를 접했던 사람은 알수 있을 것이다.

거기에 나왔던걸로 기억한다 나는..

그래서 하노이의 탑을 구현하였다.

구현하고 처음버전은, 몇초인지 성공하였는지 알림도 없었다.

-_- 구현은 내가 했지만,

내가 풀지를 못하여서 울회사 팀사람들한테 돌리면서 풀어봐달라고 ㅋㅋㅋㅋㅋㅋㅋㅋ

사람들한테 돌리니까 요구사항도 나왔고, 오류도 나왔다.

오류는 생각보다 경미한 부분이라, 오류를 고치고.

요구사항은 아래와 같았다.

- 성공했을경우, 성취감들게 성공하셨습니다 하면서 뭔가 비쥬얼이 있었으면 좋겠다.

- 몇초만에 성공하였는지해서 경쟁하게 했으면 좋겠다.

- 몇초가 지나고 있는지 실시간으로 보였으면 좋겠다. 

저기말고 다른 요구도 있었지만 저것까지만 수용하여 수정하였다.

http://code.d2.co.kr/d2_pb/tower_of_hanoi/hanoi.html

위에 주소는 회사 FTP에 올린것이고,

저거때문에 재미있게 한 2일동안 최고기록갱신할려고, 불을 킨거같다.

ㅋㅋㅋㅋㅋ아직까지 원반5개일때 최고기록은 16초.

-_-16초의 최고기록은 깨지를 못함.

내 최고기록은 19초였었음...

저 부분을 구현한 소스코드를 첨부한다.

스택만 클래스로 구현하고 나머진, 그냥 자바스크립트 함수로 구현하였다.

그리고 제이쿼리없이 자바스크립트로만 할려고 했기에, 아마 부족한게 많을수도.

일단 첨부하고 휘리릭 ~

하노이의탑.zip