hail2y.log

[프로젝트] 홈페이지 캐러셀 슬라이더 및 주간 랭킹 구현

여러 도서사이트를 보면 헤더 아래 슬라이더를 구현해 요즘 일어나는 일에 대해서 소개한다. 살펴보니 db에서 가져오는 정보도 있지만 배경을 입히고 그림을 넣어 화려함을 줄 때는 대부분 이미지였다. 팀에서 화면 정의서를 만들 때 슬라이더 아래 주간 랭킹을 두었기 때문에 비슷한 형식을 슬라이더에도 지정하면 메인 홈페이지가 너무 밋밋해질 것이라 우려했다. 그래서 이번 기회에 figma로 이미지 슬라이드를 개별 작업하여 진행했다.  화면 정의서에서는 신간 도서만 다루었지만 이벤트, 회원 혜택, 신간 도서, 추천 카테고리 등 새로운 소식들을 추가했다. 슬라이더는 처음부터  js를 당장 배우고 시작할 수 없어서 기존에 구현되어 있는 slider를 변형하고 이해하는 쪽을 택했다. 중간중간 명확하게 이해해야 할 부분은 ..

Layout1. block항상 새로운 라인에서 시작폭 전체 차지 2. inline 새로운 라인에서 시작하지 않고 필요한 만큼의 영역 차지 3. inline-blockdisplay: inline으로 하면 폭, 높이, 마진 균일하지 않음display:inline-block으로 하면 균일한 폭, 높이로 맞출 수 있음4. flexflexible items에 flexible length 지정flexible item이 아니라면 flex 속성 효과 없음가로/세로 정렬을 쉽게 조정할 수 있는 layout 시스템부모 요소(컨테이너)에 display: flex를 적용하면 그 안의 자식 요소(item)들이 flex 규칙에 따라 배치됨flex-direction: row, column을 활용해 정렬 방향 결정, 기본이 row..

홈페이지의 네비게이션 메뉴를 구현해야 하는데 대/중/소별 카테고리가 다 분리되어 있고, 검색바를 통한 도서 리스트 출력도 해야 해서... 머리가 너무 너무 복잡했었다. 내 자신의 능력을 하찮게 여기고 싶지 않았지만 같은 팀원 분들이 빨리 빨리 결과물을 내는 것을 보고 자꾸만 불안감이 밀려왔다.  할 수 있다고 마음을 500번 되뇌이고 일단은 메모장에 해야하는 것들을 적어두었다. 검색바 옵션(통합검색, 저자명, 도서명) 넘기기카테고리 id (ex. cs_1, cs_2, ...) 넘기기궁극적으로 필요한 정보는 다음과 같다.도서 리스트에서 해당 조건에서의 도서 개수해당 조건에 맞는 도서 리스트우리는 하나의 도서가 하나의 소분류와 연결되어서 전체 카테고리 경로를 확인하려면 소-중, 중-대로 타고 올라가야 했는데..

다른 팀원 분이 거의 작업하신 프론트 화면을 수정하여 네비게이션 메뉴를 구현했다. 아직 세부 메뉴 클릭 시 화면 이동하는 것까지는 구현 안 했지만, js를 이용해 화면 겹치기를 성공했다는 게 뿌듯했다. 프론트에서 정렬과 화면 겹치기는 수업을 들어도 잘 이해가 안 됐기 때문에 마음 속으로 '할 수 있다'를 수 십번 외치면서 해나갔다.  겹치기는 위에 겹치는 부분을 따로 만들고 아래 위 position 속성을 조정한다.부모는 relative, 자식은 absolutedisplay: none과 visibility: hidden의 차이는 공간을 차이하는지의 여부로 다르다. 전자는 공간을 차지하지 않고 후자는 눈에는 안 보일 뿐 자리차지를 한다.git으로 공동 작업하고 있었기 때문에 복잡도를 낮추려고 w3schoo..

facade 건물의 정면(앞면), 창구 복잡하게 얽혀서 너저분한 세부 내용을 정리하여 높은 수준의 인터페이스(API)를 제공한다facade 역은 시스템 외부에 간단한 인터페이스(API)를 보여준다시스템 내부의 각 클래스의 역할과 의존 관계를 고려하여 올바른 순서로 클래스를 사용한다  Facade - 시스템을 구성하는 그 밖의 많은 역을 위한 단순한 창구, 높은 수준의 단순한 인터페이스(API)를 시스템 외부에 제공시스템을 구성하는 그 밖의 많은 배역 - 각자의 일을 하고 Facade에 대해 신경 쓰지 않음, Facade로부터 호출을 받고 일하지만 수많은 다른 배역에서 Facade를 호출하는 경우는 없음Client - Facade 패턴을 이용, Main 클래스 복잡한 것을 단순하게 보여준다. Facade ..

책 [JAVA 언어로 배우는 디자인 패턴 입문 3판;유키 히로시 저]을 참고하여 작성하였습니다. 인스턴스를 생성하는 공장(factory)을 Template Method 패턴으로 구성한 것인스턴스 생성 방법을 상위 클래스에서 결정하되, 구체적인 클래스 이름까지 결정하지 않는다.구체적인 것은 모두 하위 클래스에서 붙임으로써 인스턴스 생성을 위한 뼈대(프레임워크)와 실제 인스턴스를 생성하는 클래스를 나누어 생각한다.상위 클래스하위 클래스추상적인 뼈대, 프레임워크실제 구현부 Product 프레임워크, 이 패턴으로 생성되는 인스턴스가 가져야 할 인터페이스(API)를 결정하는 추상 클래스Creator 프레임워크, Product 역을 생성하는 추상 클래스, Creator 역은 실제로 생성할 ConcreteProduc..

책 [JAVA 언어로 배우는 디자인 패턴 입문 3판;유키 히로시 저]을 참고하여 작성하였습니다.  상태를 클래스로 표현한다.클래스를 전환함으로써 상태 변화를 나타낸다. State 상태마다 다르게 동작하는 인터페이스(API) 정의, 상태에 의존한 동작을 하는 메서드 모음ConcreteState State 인터페이스를 구현한 구체 클래스, 상태 클래스 ex. 주간 클래스, 야간 클래스Context 현재 상태를 나타내는 ConcreteState를 필드로 둔다, 이 필드에 상태 클래스의 인스턴스를 대입함으로써 상태를 전환한다   1. State 패턴을 사용하지 않는 코드 예시경비 시스템 클래스 { 금고 사용 시 호출되는 메소드() { if(주간) { ... } else i..

책 [JAVA 언어로 배우는 디자인 패턴 입문 3판;유키 히로시 저]을 참고하여 작성하였습니다.  그릇과 내용물을 동일시하여 재귀적인 구조를 형성디렉토리(그릇), 파일(내용물)을 디렉토리 엔트리라는이름으로 같은 종류로 동일시  Leaf 내용물, 이 안에 다른 것을 넣을 수 없다, File 클래스Composite 그릇, Leaf와 Composite을 넣을 수 있다, Directory 클래스Component Leaf와 Composite을 동일시하기 위한 역할, 공통되는 상위 추상 클래스, EntryMain  Directory클래스public class Directory extends Entry { // Entry는 File과 Directory의 공통 추상 클래스 private String name; ..

책 [JAVA 언어로 배우는 디자인 패턴 입문 3판;유키 히로시 저]을 참고하여 작성하였습니다.  본인 객체를 대신해서 대리인 객체가 일을 대신 처리대신 대리인 객체가 할 수 없는 일일 때 본인 객체를 생성→ 초기화에 시간이 오래 걸리는 시스템이라면 대리인을 사용하여 작업 처리 속도를 올릴 수 있다, 유지보수 용이 Subject 본인, Proxy와 RealSubject를 동일시하기 위한 인터페이스(API), 공통 인터페이스 Proxy 대리인, Subject 인터페이스 구현- client 요청을 최대한 처리하는데 자기 혼자 처리할 수 없다면 RealSubject에게 맡긴다. - 이때서야 RealSubject 인스턴스를 생성한다. RealSubject 실제 본인, Subject 인터페이스 구현- Proxy만..

책 [JAVA 언어로 배우는 디자인 패턴 입문 3판;유키 히로시 저]을 참고하여 작성하였습니다.  객체에 장식이 되는 기능들을 하나씩 추가장식틀과 내용물을 동일시한다내용물을 변경하지 않고 기능을 추가→ 투과적인 인터페이스(API)를 유지한 채 객체를 차례로 씌워 기능을 추가한다 Component 기능을 추가할 때 핵심이 되는 역할 DisplayConcreteComponent Component를 구현하는 구체 클래스Decorator 새로운 기능(장식) Component를 가지고 있음ConcreteDecorator Decorator클래스를 구현하는 구체 클래스 더보기더보기Display 문자열 표시용 추상 클래스StringDisplay Display를 상속하는 구체 클래스, 핵심 문자열Border 장식틀 추상..