Bibidi

[ CSSOM ] CSS는 스펙이 난잡하다보니 브라우저마다 지원 성향이 극적으로 변한다. 그래서 새로운 기능은 vendor prefix가 붙었다가 안정화되고 표준화되면 떼는 식으로 하는 게 업계 관행이다. 어떤 식에는 vendor prefix를 붙여야 작동하고 어떤 식에는 또 vendor prefix를 떼야 작동해서 까다롭다. DOM(Document Object Model) 이때 document는 HTML을 말한다. HJTML을 객체화 시켜서 프로그래밍 가능하게 바꿔놓은 게 DOM이다. javascript를 통해서 DOM API를 이용하면 직접 HTML을 수정하지 않고 요소나 속성을 고칠 수 있다. CSSOM CSS를 object화 시켜서 모델링한 것으로 javascript를 통해 CSS 조작할 수 있게..

[ 고전 Box Model ] CSS layout box라는 시스템 안에 들어가는 모든 element들이 지켜야하는 박스 규격을 Box Model이라고 한다. 다음과 같이 구성돼 있다. - margin : 무조건 투명하게 되어있고 이걸 바꿀 방법은 지금은 없다. 투명하지만 실체를 확보하고 있는 공간이다. - border : 외곽선을 칠하는 경계면이다. 이 부분도 contents처럼 쓸 수 있다. 현재 나오는 스펙들을 보면 border background도 있다. - padding : 투명하다. border로부터 contents box를 띄어주는 역할을 한다. 내부 마진이라고도 부른다. - contents - box-sizing : box의 width, height 기준을 정하는 속성이다. border-b..

[ Graphics System 제공 방식 ] 그래픽스는 점을 찍는 과정이라 볼 수 있으며 x, y, width, height, color를 이용해 표현할 수 있다. - FIXED NUMBER : 고징된 숫자를 이용하여 표현하는 체계. 그래픽스 시스템의 가장 원시적인 형태. 문제 : 환경에 적응할 수가 없다는 문제가 있다. 특히 screen size, chrome size, hierarchy가 문제가 된다. screen size를 예를 들면 전용 해상도를 가지고 있는 기기에 전용 프로그램을 만들 땐 문제가 아니었으나 범용성 있는 그래픽스 시스템을 만들려고 할 때 문제가 된다. - ABSTRACT CALCULATOR : 추상화되어 있는 계산기를 사용하는 체계. 함수를 통해 어떻게 계산할지 기술하는 방식이다..

* 리액트 개발 관련 : https://medium.com/@mr.november11/react-%EB%B2%88%EC%97%AD-2020%EB%85%84-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A1%9C%EB%93%9C%EB%A7%B5-%EB%AA%A8%EB%8D%98-%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EA%B0%80%EC%9D%B4%EB%93%9C-bedd9a0fed2f & https://geniee.tistory.com/9 * opt..

[ 아이디어 정리 ] - 임시 용어 정의. 댓글 : parent가 자기 자신인 댓글, 대댓글 : parent가 자기 자신이 아닌 댓글. - reference 1번에 나오는 방법으로 parent, depth, order 필드를 이용하여 댓글 계층을 보여주는 방법. 이 글을 보면서 아이디어를 꽤 많이 얻었다. 그런데 내가 원하는 형태는 댓글에 대댓글을 한 번만 허용하도록 하는 형태이다. 대댓글에 다시 댓글을 달면 박스가 오른쪽으로 계속 밀리는 형태가 되는데, 매우 보기 싫다. - 대댓글이 한 번만 허용되면 대댓글의 깊이가 모두 같으므로 depth 필드가 필요없다. 또 원 댓글의 parent를 null이 아니라 자기 자신으로 지정하면 order by parent option, number option을 이용해..

[ URL설계 ] - forumSlug를 이용해 게시판을 구분한다. - 처음엔 post 등록, 삭제, 변경은 {forumSlug}를 빼고 구현할까 했지만 등록의 경우 어느 게시판에 게시글을 작성하는지에 대한 정보가 필요하다. 조회의 경우 조회가 끝난 뒤 목록으로 돌아가거나 게시판 내의 다른 게시물 리스트를 보여줄 때 게시판에 대한 정보가 필요하다. 삭제, 변경 등은 각 요청을 처리한 뒤 게시판으로 돌아가야 되는데, 이때 게시판에 대한 정보가 필요하다. 그래서 모두 forumSlug를 URI에 추가하게 되었다. GET /posts/{forumSlug}/{postNumber} : post 조회 GET /posts/{forumSlug} : post list 조회 GET /posts/{forumSlug}/reg..

[ RoleMapper Interface and Impl ] public interface RoleMapper { public int insertRole(RoleVO role); public RoleVO readRoleByRoleName(String roleName); public int deleteRoleByRoleName(String roleName); } INSERT INTO roles VALUES (seq_role.nextval, #{name}) SELECT * FROM roles WHERE role_name = #{roleName} DELETE FROM roles WHERE role_name = #{roleName} [ RoleMapper Tests ] @RunWith(SpringRunner.c..

[ 아이디어 정리 ] - 게시판이 여러 개이기만 하면 멀티 게시판이라고 하는 것 같다. 게시글 컬럼 하나를 게시판 id로 두어 구현하는 방법과 테이블 하나 자체를 게시판 이름으로 하고 게시글을 담아두는 방법이 있다. 전자의 방법을 이용해서 구현하는 중이다. - 모든 게시판이 같은 구조를 가지기 때문에 게시판 별로 따로 테이블을 가질 필요가 없다. 하나의 테이블로 모두 관리한다. [ DB Table and Sequence ] create table forums ( forum_number number(20) primary key, forum_name varchar2(30) unique not null, forum_description varchar2(255) not null, forum_slug varcha..