Data Center

` display: flex `는 웹페이지의 레이아웃을 만들 때 자식 요소들을 수평 또는 수직 방향으로 위치를 지정할 때 사용된다. `display: flex`가 지정된 html 요소는 `flex-direction, justify-content, align-items`을 사용하여 내부의 다른 html 요소들을 쉽게 배치할 수 있다. 각각 배치 방향(flex-direction), 가로 정렬(justify-content), 세로 정렬(align-items)을 뜻한다. 단순히 방향과 정렬만 지정해 주면 요소들을 쉽게 배치할 수 있기 때문에, 자주 사용된다. 또한, 위에서 언급한 4가지는 같이 사용되기 때문에 기록해 두자. Using CSS Display FLEX Property CSS `display: flex` 사용하기 화면에 구성 요소를 배치하는 레이아웃 작업은 번거롭다. 때문에 css의 ` display: flex `를 사용하면  html5 요소들을 가로 또는 세로 정렬하여 편하게 구성할 수 있다. 단순히 container로 사용할 div 요소에 설정하면, 자식 html5 요소들을 가로 또는 세로로 배치할 수 있다. 특히, 반응형 웹을 위해 레이아웃을 구성할 때 ` display: flex `는 괜찮은 방법 중 하나이다. 함께하는 요소 4가지 ` display: flex `를 사용하여 레이아웃 또는 자식 html 요소들을 배치할 때  거의 함께하는 요소들이 있다. 4가지 정도이며, 의미 정도는 알아두자. display: flex flex-direction 자식 요소들을 배치하는 주축 방향 설정 justify-content 주축 방향 정렬 방법 align-items 교차축 방향 정렬 방 flex-wrap 줄바꿈 여부 주축과 교차축 ` display: flex `를 사용할 때 중요한 개념이 주축과 교차축이다. 주축과 교차축은 ` flex-direction `에 지정된 값으로 결정된다. 주축은 main axis, 교차축은 cross axis...

구글 서치콘솔에 도메인을 추가할 경우 ` DNS 소유권 확인 `을 통해 웹 서비스 인증을 할 수 있지만, 별도의 메세지가 나타나는 경우 TXT 레코드를 추가하는 방법으로 소유권 인증을 할 수 있다. 구글의 경우 자세한 설명을 하고 있으니 메세지를 참고하자. 2차 도메인이 아닌 루트 도메인의 경우 TXT 레코드 추가를 요청할 수 있으며, 가비아를 사용 중이라면 가비아 서비스의 ` DNS 관리툴 `를 사용하여 TXT 레코드를 추가할 수 있다. Add Google Search Console DNS TXT Record For Ownership Verification 구글 서치콘솔 DNS 소유권 확인 가비아 TXT 레코드 추가하기 도메인의 소유권을 확인하는 작업은 중요하다. 방문자 트래픽에 신경쓰는 사용자라면 SEO에도 민감할 것이다. 구글 서치 콘솔에서 ` 도메인 소유권 확인 ` 메세지가 표시된다면  가급적 빨리 등록을 해 두는 것이 좋으며,  서치 콘솔에서 소유권 확인이 완료되면 검색결과부터 트래픽, 노출 실적 등의 실적에 도움을 받을 수 있다. 그리고, 도메인을 이용한 악의적 사용을 방지할 수 있다. DNS 레코드 도메인 소유권 확인 도메인을 구글 서치 콘솔에 등록했을 때  ` 도메인 소유권 확인 `이 나타나는 경우가 있다. 본인의 경우 루트 도메인의 소유권이 확인되지 않아 나타난 문제이다. 오히려 2차 하위 도메인들의 경우 나타나지 않았다. 도메인은 ` 가비아 `를 통해 관리되고 있다. `가비아`를 이용해 도메인을 구매했고, 구글 서치 콘솔에서 소유권 확인을 물어본다면, ` 가비아 `에 접속하여 ` DNS 관리툴 `에서 해당 도메인에 대한 ` TXT 레코드 `를 등록하면 된다. 작업 순서는 다음과 같다. 소유권 확인이 요청된 속성( 도메인 ) 확인 가비아 접속, 로그인 DNS 관리툴 이동 TXT 레코드 등록 10분 기다리기 적용 확인 준비물 DNS 소요권 확인을 위해 ` 구글 서치 콘솔의 속성 `을 클릭하면, ` TXT 레코드 `를 보여...

데이터베이스(이하 DB) 명령어는 크게 DCL, DDL, DML, TCL 있다. 데이터를 관리하기 위한 명령어로 사용자 권한(DCL), 데이터 구조(DDL), 데이터 조작(DML), 트랙잰션(TCL)을 관리한다. 각각의 명령어는 몇 개 없지만, 기억해 두면 편하다. 데이터베이스 DCL DDL DML TCL DCL, DDL, DML, TCL meaning and command types 데이터베이스 개념 DCL, DDL, DML, TCL 뜻과 명령어 종류 과거에 비해 SQL의 활용 범위가 줄어든 느낌이다. 관계형 DB를 사용하는 경우 SQL의 활용범위는 넓어지고 필요성은 높아진다. MySQL의 경우 ` DCL, DDL, DML, TCL `로 구분되고, 단어의 개념을 익히면 명령어들의 개념을 익히기 수월해 진다. 아래는 DB의 개념을 나열해 본 것이다. DCL / Data Control Language 사용자에게 DB 사용에 대한 권한을 부여한다. GRANT 사용자 권한 부여 REVOKE 사용자 권한 해제 DDL / Data Definition Language 데이터 객체의 구조를 관리한다. CREATE 데이터 객체 생성 ALTER 데이터 객체 수정 TRUNCATE 데이터 객체 초기화 ( 데이터 ) DROP 데이터 객체 삭제 ( 구조, 데이터 ) DML / Data Manipulation Language 테이블의 데이터를 관리한다. SELECT 데이터 조회 INSERT 데이터 생성 UPDATE 데이터 수정 DELETE 데이터 삭제 TCL / Transaction Control Language 데이터 관리의 동작 여부를 관리한다. SET TRANSACTION 트랜잭션 설정 COMMIT 변경 내용 저장 ROLLBACK 변경 내용 취소 SAVEPOINT 중간 변경 내용 설정 ✅DCL / Data Control Language DB를 설치하고 처음 사용할 때 ` root `계정을 이용해 학습을 진행할 것이다. ` DCL ( Data Control Language ) `는...

이미지에 모자이크(Mosaic)를 적용하면 특정 부분을 왜곡하여 가리고 노출을 방지할 수 있다. 포토피아 (Photopea)에서 선택도구와 필터를 사용하면 모자이크 효과를 적용할 수 있다. 간단하다. 모자이크를 설정할 이미지의 특정영역을 선택도구로 선택한 후, 필터에서 모자이크 항목을 선택하면 된다. Creating a Photopia Mosaic Effect Photopea 모자이크 효과 만들기 인터넷 포토샵 사용 블로그나 웹사이트 등 콘텐츠를 발행할 때  특정 업체, 지명 또는 인명 등의 정보는 민감하고 가릴 필요가 있다. 물론, 이런 이미지들을 사용하는 경우는 거의 없을 것이지만 말이다. 이미지의 특정 부분을 모자이크 하면 그 부분은 왜곡이 되고, 노출과 공개를 방지할 수 있다. photopea 접속하기 이미지 불러오기 선택 도구 선택 필터 선택 > 픽셀화 선택 > 모자이크 선택 > 확인 모자이크된 왜곡된 이미지 확인 순서는 위의 순서와 같다. 하나씩 진행 해보자. 1. photopea 인터넷 포토샵 접속하기 photopea ( 이하 포토피아 )는 보통 인터넷 포토샵으로 유명하다. 과거 구버전의 포토샵과 비슷한 화면구성을 하고 있으며, 단축키도 비슷하다. 물론, 웹이라는 한계가 있기에 차이가 존재하긴 하지만, 어지간한 기능들은 모두 사용할 수 있다. 단점이라면 의도치않은 광고들이 나타난다는 점인데, 무료로 사용하는 만큼 이정도는 감내하자. 포토피아로 접속하는 주소는 다음과 같다. [ 포토피아 바로가기 ] 포토피아(photopea) 메인 2. 이미지 불러오기 포토피아의 좋은 점은 이미지를 불러오는 방법이 여러가지에 있다. 내 PC에 있는 이미지를 열기 할 수 있지만, 외부 이미지 URL을 알고 있다면 그대로 열기 할 수 있다. 포토피아 이미지 열기 인터넷에 있는 이미지를 아무거나 가져오기 할 것이다. 지금은 이미지를 구하는 곳이 여럿 존재한다. 본인은 ` URL에서 열기 `를 통해 이미지를 아무거나 하나 가져올 것이다. 마침, 재미...

` 페이지 네비게이션 `은 많은 정보를 보여주기 위한 사용자 인터페이스이다. ` 이전 | 다음 | 페이지 번호 | 다음 | 끝 `의 형태를 가지고 있으며,  과거엔 ` 페이징 `이란 단어를 사용하기도 했다. 페이징은 DB의 SELECT 구문과 같이 사용할 수 있다. 페이지 네비게이션은 사용자로 하여금 수많은 자료를 검색하고, 페이지를 탐색할 수 있도록 도와주며, 동적으로 동작할 수록 사소하지만, 사용자에 많은 편의성을 제공할 수 있다. Creating A Dynamic Page Navigation Bar 동적 페이지 네비게이션 바 만들기 html5, css3, javascript 사용 페이징 또는 동적 페이지 네비게이션은 게시판을 만들 때 중요한 것 중 하나이다. 많은 데이터를 정해진 갯수로 한 화면에 표현하여  사용자가 데이터를 편하게 찾아 보도록 하는데 있다. 지금은 거의 간략화 되어 이전, 다음의 형태만 있거나  혹은 자동 스크롤을 많이 사용한다. 하지만, ERP, MES, LMS 등의 업무 화면인 경우 업무 담당자를 위한 페이징의 기능은  많아질 수 있다. 기본적인 구조부터 살펴보면 다음과 같다. 필요한 것 / 데이터와 기능 `동적 페이지 네비게이션`의 구조를 먼저 살펴보면 다음과 같다. ` 처음, 이전, 페이지 번호 10개, 다음, 마지막 `의 기능을 가지고 있다. 각 페이지는 개발자가 지정한 갯수( 보통 한 페이지당 10개 게시물)만큼 화면에 보여주도록 한다. 페이지 번호에 따라 데이터를 보여줘야 하기 때문에 필요한 데이터는 ` 전체 데이터 갯수 `가 된다. `전체 데이터 갯수`를 알고 있다면 전체 페이지 갯수와 함께 페이지 번호를 알 수 있다. 페이지 번호는 DB에서 사용할 Offset Index가 될 것이다. 모든 데이터를 화면에 나눠서 보여줘야 하기 때문에 몇가지 기능이 필요하다. ` 처음, 이전, 페이지 번호, 다음, 마지막 `이다. 각 항목은 클릭할 때마다 지정된 페이지 번호에 맞는 데이터를 화면에 보여주...

nextjs와 react의 의존성 충돌을 방지하기 위해 npm 옵션으로 ` force `와 ` legacy-peer-deps ` 명령어를 사용할 수 있다. 의존성은 실행되는 메인 프로그램에 필요한 라이브러리와의 관계를 의미한다. 이런 관계는 버전에 따라 차이가 있고, nextjs와 react인 경우 예민한 느낌이 있다. 실행되는 프로그램과 라이브러리가 호환이 되지 않는다면 코드는 문제가 없을지라도 런타임 환경에서 수시로 에러를 표출할 수 있다. 이런 의존성을 해결하는 방법으로 ` force ` 또는 ` legacy-peer-deps ` 옵션을 사용할 수 있다. 그럼에도 잘 안되는 경우가 있지만, 이 때는 검색을 통해 버전을 맞춰주면 된다. NEXT React 의존성 설치 npm install {some-package} --legacy-peer-deps, --force 차이 nextjs react dependency -force, -legacy-peer-deps difference --force, --legacy-peer-deps 모든 프로그램이 그렇듯 외부 라이브러리를 사용할 때 의존성( dependency )는 매우 중요하다. 외부 라이브러리는 개발자에게 개발 편의성을 제공하고, 사용자에게 사용 편의성을 제공한다. Node 기반의 모든 프로젝트들은 외부 라이브러리를 사용하기 위한 명령어인 ` npm `을 제공한다. npm 명령어를 사용할 때 버전의 차이로 외부 라이브러리들의 설치 오류가 발생할 수 있으며, ` --force ` 또는 ` --legacy-peer-deps ` 옵션을 사용하여 설치가 가능하다. 공통점과 목적 React 개발을 겪으면서 프로젝트를 생성하고, 외부 라이브러리를 설치할 때 충돌이 발생하는 경우를 여럿 경험했다. 해결된 것도 있고, 그렇지 않은 경우들도 있었다. 어쨌든, 프로그램은 실행되어야 하며, 해결은 필요하다. ` npm install `명령어를 사용할 때 외부 라이브러리들의 설치 오류가 발생할 수 있다. 이런 경우 ` --forc...

 . Extracting JPA ddl-auto ddl generated SQL SpringBoot3 JPA ddl-auto ddl 스키마 생성 SQL 추출하기 방법 IntelliJ 사용 . IntelliJ IDEA Ultimate . View Tool Windows Database . IntelliJ Database Schema > tables . tables SQL Scripts SQL Generator . SQL Generator .