본문 바로가기

전체 글

Ajax && submit 차이점 ajax는 통신의 결과를 성공, 실패로 나눠 결과값을 표현 -> 백엔드에서의 redirect 요청도 데이터로 받아옴redirect 쓰려면 success, error 에서 설정해야함 백단에서 redirect를 성공적으로 실행하려면 submit 사용 --- 추가 및 수정 예정 240912 더보기
JPA / spring boot (로그인 구현, RSA) 일단 로그인을 위한 테이블과 회원가입 테이블을 구분해놨다.회원가입 테이블엔 유저의 정보만,로그인 테이블엔 유저네임과 최근 로그인 기록을 남기기 위함이다. 먼저 전에 회원가입 부분에서 Bcrypt로 단방향 암호화를 진행했다.하지만 뷰단에서 비밀번호를 보낼 때에도 암호화가 필요하기에 RSA 를 사용해 양방향 암호화를 진행했다.@GetMapping(value = "login")public String login(HttpServletRequest request) { Rsa rsa = new Rsa(); rsa.initRsa(request); return "login";} rsa.init(request); 를 통해 뷰단에 공개키 생성을 위한 RSAModulus, RSAExponent 를 전달했다... 더보기
JPA / spring boot (TemplateInputException, dotenv, spring-security / Bcrypt) 회원가입 완성 TemplateInputException (해당 템플릿을 찾을 수 없습니다.)로그인, 회원가입 폼을 만들다 TemplateInputException 이 발생했다.타임리프가 해당 템플릿 파일을 찾을 수 없다는 에러였다. 원인이 뭔지 찾다가 해당 클래스에 @RestController 를 붙이면 해결된다는 말을 들었다.그런데 현재 내 컨트롤러는 뷰단을 반환해야 하는 경우도 있기에 @RestController 는 쓸 수 없었다. 이에 해당 API에 @ResponseBody를 붙이니 해결되었다.  spring-dotenv application.properties 파일에 내 DB에 관한 정보가 들어있다.이를 .env 파일로 빼서 쓰고 싶은데 spring 기반에선 dotenv 라는 라이브러리를 사용해야 .env를 인.. 더보기
면접 준비 (기초 질문) inline / inline-block / blockinline- 인라인 요소들은 줄바뀜 없이 나란히 배치된다.- 기본적으로 컨텐츠의 크기만큼만 크기를 가질 수 있기 때문에 width, height 값을 가질 수 없다.- margin, padding 또한 좌우만 반영되고 상하로는 반영이 되지 않는다. block- block은 기본적으로 부모요소의 width 값 만큼 크기를 가진다.- block 요소들은 줄바뀜되어 배치된다. inline-block- inline-block은 inline 처럼 컨텐츠 크기만큼의 크기만 가진다. (inline)- inline과 다르게 width, height, margin, padding 값 모두를 가질 수 있다. (block)inline-block은 enter를 쳐서 코드를.. 더보기
css - SCSS SCSSscss는 css를 보다 쉽고 편하게 작성 및 관리를 위해 만들어진 css 전처리기이다.기본적으로 네스팅 문법을 지원해 코드 작성 및 상속을 보다 쉽게 작성할 수 있다. SCSS 계산기본적으로 css 내에서 계산을 할 땐, calc(); 를 사용했지만SCSS에선 height: 100px * 2; 이런 식으로 바로 계산이 가능하다.import './경로/파일';SCSS 파일 최상단에 위의 코드를 인입해 다른 경로의 SCSS 파일을 가져올 수 있다. autoPrefixLive Sass Complier 확장 설정에서 package.json 파일에 들어가면 설정할 수 있다.-webkit 소스들을 세팅할 수 있다."liveSassCompile.settings.autoprefix": [            .. 더보기
css - flex / grid (grid-area, n줄 말줄임, 말줄임 2줄, 말줄임 2줄 이상) 말줄임 코드를 짤 때, 레이아웃이 급변하며 깨지는 경우가 종종 발생한다.이는 상위요소 중, 어딘가가 width 값이 없기 때문에 발생하는 현상이다. 그럴 땐, min-width: 0; 이라는 형식상의 width 값만을 부여해 width 를 있다고는 선언할 수 있다. display: grid;grid 또한 flex와 같이, 특정한 상황에선 flex 보다 더 효율적으로 요소를 분배시킬 수 있다.grid를 10칸으로 나눈다는 가정 하에, grid는 컬럼을 지정하는 선을 나타내기에 요소에게 지정을 할 땐,10이 아닌 11 (grid 줄의 갯수)를 지정한다. grid-template-column / gtcdisplay: grid; 인 자식 요소들의 컬럼을 지정하는 속성..parents{ display: gr.. 더보기
css - flex, grid (inline-block 여백, width, 말줄임, grid) 2 inline-block || a 태그 여백span과 같은 inline 속성의 태그들은 본인이 크기를 가질 수 없다.하지만 span에 크기와 높이를 부여하고 부모요소에 display: flex; 를 주게 된다면inline이라도 본인의 크기를 가지고 정렬을 할 수 있게 된다. flex 에서의 말줄임.box{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 기본적으로 사용하는 말줄임 코드다.flex 구조에선 말줄임을 담고 있는 덩어리 코드들의 width 값이 필수불가결하다.굳이 지정하지 않아도 되는 width 값을 지정할 땐 min-width: 0; 을 사용하자..parents{ min-width: 0;}.box{ .. 더보기
css - flex (flex, flex-grow, flex-shrink, flex-basis) flex뷰 포트의 요소의 크기가 불명확하거나 동적으로 움직일 때에도 효율적으로 배치시킬 수 있는 css 속성부모요소에 속성을 부여하고 자식들을 제어할 수 있다.기본값 flex : 0 1 auto; flex는 남는 공백을 효율적으로 분배할 수 있는 속성이다. flex-grow / fg / fxg요소 증가의 비율요소의 크기를 간단한 숫자를 통해 비율 조정이 가능하다.ex) flex-grow: 1; 요소의 크기가 동일하게 증가한다.box1, box2, box3이 있고 box1에만 콘텐츠가 있을 때, width값이 없다면 box1은 요소의 넓이 + 비율1을 같이 갖게된다.box1 - contents + 1box2 - 1box3 - 1 위와 같은 이유로 flex-grow로만 크기를 잡는 것은 불가능하다.flex는.. 더보기