programing/Web
-
[CSS] z-indexprograming/Web 2020. 1. 18. 18:25
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) z-index CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. z-index 속성은 position 값이 static이 아닌 박스 요소(즉, 위치 지정 박스 요소)에 적용되며, 다음 두가지 항목을 지정합니다. 현재 쌓임 맥락(stacking context)에서 자신의 위치 자신만의 쌓임 맥락 생성 여부 값 auto : 박스 요소가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모와 동일합니다. : 현재 쌓임 맥락에서의 위치를 해당 값으로 지정합니다. 또한 자신만의 쌓임 맥락을..
-
[CSS] float, clearprograming/Web 2020. 1. 10. 00:17
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float속성은 보통 신문과 같이, 특정 요소 주변으로 문자열들을 어울리게 배치하고자 할 때 사용합니다. 부유 요소는 문서의 보통 흐름(noraml flow)에서 제외됩니다. 만약 부유하는 요소가 여러개라면, 다른 부유 요소에 닿을때 까지 밀착합니다. (즉, 부유 요소 끼리는 겹치지 않습니다.) 만약 부유하는 요소가 여러개이며 자신을 포함하는 블록의 너비를 넘어서는 경우, 다음 라인으로 ..
-
[CSS] 포지션programing/Web 2019. 12. 27. 17:25
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) position position은 요소가 문서 내에서 어떻게 배치될 지 결정하는 속성입니다. 사용 가능한 값으로는 static, relative, absolute, fixed, sticky가 있습니다. 요소의 상대적인 위치를 결정하는 속성으로는 top, bottom, left, right가 있습니다. top과 bottom에 대해서, top이 우선 적용됩니다. left와 right에 대해서, 글을 읽는 방향(한국의 경우 left)이 우선 적용됩니다. 배치 유형 위치 지정 요소 : position의 계산된 값이 static이 아닌 요소 상대 위치 지정 요소 : position의 계산된 값이 relative인 요소 절대 위치 지정 요..
-
[CSS] 박스 모델, 박스 사이징programing/Web 2019. 12. 27. 15:37
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) box model 다음과 같은 구성요소를 가집니다. padding border margin content padding content와 border사이의 여백 border 박스의 테두리 margin 박스의 border의 바깥의 여백 margin collapsing 1 형제 요소 간 마진 겹침입니다. 1. 인접한 다른 block요소들의 margin은 서로 겹칩니다. 위 스샷을 보면, one의 margin 10px이 two의 margin 20px과 겹치는 것을 확인할 수 있습니다. 2. 인접한 다른 inline요소들의 margin은 겹치지 않습니다. display를 inline으로 바꾸니 서로의 margin이 겹치지 않는 것을 확인..
-
[Cache] 웹 브라우저의 캐시를 사용하지 않도록 하는 방법programing/Web 2019. 12. 21. 15:57
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 버그의 발견 부스트 캠프 팀 프로젝트의 막바지에 꽤나 이상한 버그를 발견했습니다. 바로, 브라우저의 뒤로가기 버튼을 누른 경우 접속 불가능한 페이지에 접속이 가능해지며, 로그인 했을 당시의 데이터가 존재하지 않아 페이지가 정상적으로 보이지 않는 버그였습니다. 사실 로그인이 되어 있지 않으면 접근 제어로 인해 다른 페이지로 리다이렉트가 되는게 정상이며, 해당 기능이 정상적으로 작동하지 않아 사용자는 의미도 없는 이상한 페이지를 보게 되는 것이죠. Network를 확인 음..? Auth의 응답 코드가 200이네요? 뭔가 이상합니다. JWT이 담긴 쿠키가 살아있는 걸까요? Auth함수를 확인 우선 저는 서버측의 권한 인증 및 접근 제..
-
[passport] DNS를 이용하여 배포환경에서 OAuth 사용하기programing/Web 2019. 11. 19. 18:28
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 DNS를 이용해서 배포환경에서 OAuth를 사용해보도록 하겠습니다. 도메인 네임 도메인 네임 구매하기 우선, 도메인 네임을 구매합니다. (저는 가비아에서 샀습니다.) 그리고, 관리 메뉴로 들어갑니다. 네임 서버 설정하기 네임서버에가 있습니다. 나중에 도메인 네임 서버 (DNS)를 추가해야 합니다. NCloud DNS에 구매한 도메인 추가하기 프론트용 서버와 백용 서버 간 쿠키를 공유하고자 한다면, 둘 다 동일한 도메인에 속해있어야 합니다. 따라서 프론트를 catchmymind.shop으로, 백을 back.catchmymind.shop으로 하겠습니다. 프론트용 서버 도메인 추가하기 NCloud의 front용 서버 인스턴스의..
-
[sequelize, mysql2] sequelize 사용시 오류 해결 방법programing/Web 2019. 10. 15. 22:50
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 Node.js의 Express와 sequelize를 이용해 mysql에 연결할 때 겪은 에러와 해결방법에 대해 공유하고자 합니다. not support auth Client does not support authentication protocol requested by server; consider upgrading MySQL client 연결하려고 할 때 이런 에러가 뜬 적 있으신가요? 이 에러의 원인은 mysql 8.0이상에서 새로운 인증 알고리즘인 caching_sha2_password를 express측에서 지원하지 않기 때문에 발생합니다. 따라서, 해결방법은 다음과 같습니다. mysql을 다운그레이드하기..
-
[Vue.js] props로 받은 데이터를 data로 사용하기programing/Web 2019. 10. 10. 21:58
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 제가 몇시간동안 삽질한 제 경험담을 공유하고자 합니다. 목적 현재 저는 Todo Web App을 만들고 있습니다. 해당 앱에는 TodoRouter 컴포넌트와 TodoBoard 컴포넌트가 있습니다. TodoRouter 컴포넌트는 사용자가 투두 화면에 접근할 때 라우팅 뷰에 뿌려주기 위한 라우터 컴포넌트이며, 제가 구현한 서버로부터 데이터를 받아오는 역할을 수행합니다. TodoBoard 컴포넌트는 TodoRouter에서 받아온 board, categories 데이터를 props로 받아서 category를 동적으로 리스트렌더링을 하는 컴포넌트입니다. 여기서 저는 props로 받는 board와 categories데이터를 초깃값으..