기타
-
부트스트랩 RAW , COL기타 2023. 11. 10. 09:36
기존에는 부트스트랩을 이쁜 css 작성용으로 생각했었는데, 부트스트랩의 강력함은 그리드에 있었다. https://getbootstrap.kr/docs/5.3/layout/grid/ 그리드 시스템 강력한 모바일 우선 flexbox 그리드를 사용하여 12개의 열 시스템, 6개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 빌드할 수 있 getbootstrap.kr 화면의 크기에 따라 반응형으로 중단점 을 위와같이 사이즈 별로 나눠놓았고 하나의 row 에 최대 12개의 col 이 들어갈 수 있도록 레이아웃이 구성되어있다. One of two columns One of two columns One of two columns One of two..
-
canvas로 이미지 편집하기기타 2023. 9. 21. 09:48
브라우저에서 업로드한 이미지를 편집할 수 있는 기능이 있다. canvas는 html5 이상에서 사용할 수 있는 라이브러리로, 2D, 3D(특정 버전의 브라우저만 지원) 형식으로 파일을 편집할 수 있고 편집한 파일을 출력할 수 있다 input에 파일 형태로 업로드한 이미지를 canvas에서 각 모서리를 둥글게 깍아서 저장해보자 const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const blobImages = []; function drawRoundedImage(img) { const borderRadius = 30; // 둥글게 만들고자 하는 모서리 반경 ctx.save(); ctx.beginPa..
-
스크래핑 기초기타 2023. 8. 9. 16:44
1. Request와 Response - 스크래핑 하고자하는 페이지에 들어가면, 페이지에서는 필요한 정보를 여러가지 url로 부터 불러온다. 우리는 개발자 도구의 Network탭에서 해당 요소들을 확인할 수 있다. - 왼쪽에서 특정 Name을 선택하고 Response탭을 확인하면, 어떤 형태의 데이터가 해당 페이지로 불러와지는지 알 수 있다. - 해당 데이터들이 필요한 데이터라면, PostMan에서 해당 Url을 보내고 Response를 받아서 데이터를 활용할 수 있다. 2. PostMan - 원하는 정보를 Response 해주는 Url를 넣으면 데이터를 얻을 수 있다 - 위의 그림과 같이 Unauthorized가 발생한다면, Headers의 Authorizatioin과 Cookie의 정보를 활용해서 권..
-
mybatis: resultMap ( 1:1 / 1:n select )기타 2023. 6. 21. 09:25
이번 프로젝트에서는 DB를 기능마다 나눠서, 기능을 추가하거나 데이터를 관리하기 편리하게 다음과 같이 설계했다. 다만 데이터를 select 하는데 있어서 두 가지 방법에 대해 이해가 필요했다 1 : 1 관계 두 가지 테이블을 join 할 때, 각 각 한 개의 행끼리 매치가 되도록 만드는 것이다. 위의 erd에서는 주문 테이블과 주문취소 테이블이 1:1 방법이다. 1개의 주문에는 해당 주문이 취소되었는지 아닌지 확인하는 주문 취소 열이 필요하다. SELECT * FROM `order` o JOIN order_cancel oc ON o.order_id = oc.order_id WHERE oc.state = 'normal' 이렇게 쿼리문을 작성하면, 주문 테이블과 주문 취소 테이블을 order_id 값을 기준..
-
if문과 논리연산자기타 2023. 6. 15. 16:45
부트스트랩을 사용하던 도중, 브라우저의 너비가 변할 때 마다 table을 리랜더링하는 스크립트가 작동하고 있는 것을 발견했다. 나는 테이블의 th가 스크립트로 인해 변하는 것을 막기 위해서 스크립트를 보다가 처음 보는 if문 형태를 발견했다. 큰 if문의 조건식에 다음과 같은 논리 연산자들이 많이 있는데 이해하기가 힘들었다. 위의 조건식을 이해하기 위해서 아래의 과정이 필요했다. 1. , (쉼표) if 문의 조건문 내부에 , 이 존재한다면 각 조건을 차례대로 검사하고, 검사하는 도중 true 가 발생하면 검사를 멈추고 if문의 실행문을 실행한다. -> 이 성질을 이용해서 왼쪽에 부작용을 가진 표현식을 적고 변수나 속성을 할당하도록 로직을 만들고 가장 오른쪽에 실행하는 로직을 작성한다. 따라서 위의 조건문..