패스트캠퍼스 백엔드 부트캠프 3기 25

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

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

[프로젝트] CSS - display 속성

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..

[database] Advanced SQL - nvl, decode, case, pivot, rollup, cube, rank, 상관 쿼리

1. NVL 함수컬럼의 값이 null일 때 어떤 값을 보이게 할 것인지를 지정한다NVL 함수는 모든 데이터 타입에 적용할 수 있다NVL 함수를 사용할 때 변경되는 값의 데이터 타입을 일치시켜야 한다SELECT name, salary, nvl(salary, 0) modified_salary -- NVL()FROM temp;SELECT name, salary, nvl2(salary, 100000, 0) -- NVL2(값, 지정값1, **지정값2**)FROM temp;2. DECODE 함수n항연산자, switch 문컬럼 값에 따라 출력 값을 지정한다else 조건을 명시하지 않을 경우 기본 값으로 nullSELECT name, salary, DECODE(TRUNC(salary/1000), null, nul..

[web] input 태그, button 태그

input/button 태그 속성 중 type이 button인 것은 어떠한 기능을 수행하지 않는다- button은 단지 클릭할 수 있는 버튼, submit은 폼 데이터를 제출하는 버튼form 태그 안에 특정 페이지로 넘어갈 수 있도록 action 속성으로 주소 지정 가능 1. 형태 차이버튼 2. 내부 콘텐츠 포함 여부input 태그button 태그value 속성으로 텍스트 포함 가능이미지, 아이콘 HTML 요소 등 포함 가능  3. 기본 동작 (폼 제출)input 태그button 태그.기본적으로 type이 submit으로 form 태그 안에서 자동 제출type이 button이면 아무 동작을 하지 않는다. 동작을 원하면 onClick 등의 이벤트 핸들러를 지정한다. 속성이 button으로 지정되면 두 태그..

[database] 오라클 코멘트 설정 및 조회

-- DDL - COMMENT-- 테이블 코멘트 설정 및 조회COMMENT ON TABLE s_emp IS 'Employee table. Each row in this table represents one employee of the company.'; SELECT * FROM all_tab_commentsWHERE table_name LIKE 'S_EMP';-- 컬럼 코멘트 설정 및 조회COMMENT ON COLUMN s_emp.title IS 'Title on Employee table.'; 테이블 코멘트 설정$ COMMENT ON TABLE [테이블명] IS    '주석 문장'; 컬럼 코멘트 설정$ COMMENT ON COLUMN [테이블명].[컬럼명] IS ..

[database] Transaction Control, Dictionary

Transaction은 논리적인 업무의 작업단위를 의미한다SAVEPOINTROLLBACKCOMMITDDL과 DCL은 auto-commit이 된다.명령어설명COMMIT아직 저장되지 않은 모든 데이터 변경 사항을 데이터베이스에 저장하고 현재의 트랜잭션을 종료SAVEPOINT현재의 트랜잭션에 savepoint를 지정ROLLBACK(ROLLBACK TO [savepoint 이름])아직 저장되지 않은 모든 데이터 변경 사항을 취소하고 현재의 트랜잭션을 종료 1. commit, rollback 이전의 상태단지 버퍼에만 영향을 받았기 때문에 데이터의 이전 상태는 복구될 수 있다현재 사용자는 select 문으로 작업의 결과를 확인할 수 있다다른 사용자는 현재 사용자가 수행한 작업의 결과를 볼 수 없다변경된 행은 Loc..

[database] 트리거 (Trigger) 생성 오류 해결 및 메시지 출력

트리거 (Trigger)사용자가 호출하는 것이 아니고 어떤 테이블에 특정한 DML 문이 수행되었을 때 데이터베이스에서 자동적으로 동작하도록 작성된 프로그램타이밍에 따른 분류- DML 이전에 수행  BEFORE TRIGGER- DML 이후에 수행   AFTER TRIGGER 수행 차수에 따른 분류- 한 번만 수행 STATEMENT TRIGGER - 행 마다 수행 ROW TRIGGERCREATE OR REPLACE TRIGGER tg_show_planAFTER INSERT ON temp--REFERENCING NEW AS NEW OLD AS OLDFOR EACH ROWBEGIN DBMS_OUTPUT.PUT_LINE('트리거가 작동했습니다.'); INSERT INTO temp_tg_test (nam..

[database] 데이터베이스 목차 정리

SQLIntroductionDML - insert, update, delete데이터 검색 - selectstored function - 단일 행, 다중 행 함수 / 문자형, 숫자형, 날짜형, 변환형 함수SubGroup으로 데이터 분류 - GROUP BY, HAVINGjoin - Equijoin, Non-Equijoin, Outer join, Self join, Set 연산자 SubQueryConstraint - PK, NOT NULL, UNIQUE, FK, CHECKTransaction Control - COMMIT, ROLLBACK, SAVEPOINTDictionary - DBMS가 자동으로 생성하고 관리, readonlyDDL - create, alter, drop, truncate, rename, ..