전체 글48 [JPA] 연관관계 매핑 기초 이 글은 인프런의 김영한 강사님 자바 ORM 표준 JPA 프로그래밍-기본 편 강의 내용을 바탕으로 작성되었습니다. 자바 ORM 표준 JPA 프로그래밍 - 기본편 - 인프런 | 강의 JPA 를 공부하고 책을 보며 어려웠던 내용을 위주로 먼저 보았습니다. 옆에서 1:1 과외해주는 것 같이 생생하고 이해 잘되는 설명, 예제(코드)가 너무 좋았습니다. 어느 것 하나 애매함없이 모두 www.inflearn.com 일단 기본적인 테이블 구조는 다음과 같다. 위 테이블을 바탕으로 객체 구조를 변경한다면, 다음 객체 구조를 바탕으로 작성한 Member 객체이다. @Entity public class Member { @Id @GeneratedValue @Column(name = "MEMBER_ID") private Lo.. 2023. 12. 7. [개인프로젝트] 회원가입 자바스크립트 작성하기(5) 오늘은 이제 회원가입의 자바스크립트로 핸들링하는 부분을 진행했습니다. 막상 하면 재미있는데, 하는 데까지 마음먹기가 쉽지가 안군요ㅠ 일단 오늘 진행했던 코드들 입니다. const joinButton = document.querySelector(".join"); const loginWrapper = document.querySelector(".login-wrapper"); const joinWrapper = document.querySelector(".join-wrapper"); const hiddenIdName = "hidden"; const joinForm = document.querySelector(".join-form"); const joinId = document.querySelector(".jo.. 2023. 12. 7. [개인프로젝트] 회원가입 html 디자인 하기(3) 요즘 너무 이런저런 핑계로 점점 프로젝트를 못하고 있다가, 드디어 오늘 아~~~~~주 조금 진행을 했습니다. 저번에 로그인 부분을 디자인했었는데, 오늘은 회원가입 쪽을 디자인해봤습니다. 먼저 결과 물입니다. 대부분은 로그인과 비슷하게 작성을 했습니다. 이제 join의 div태그에 hidden 속성을 반영해서 지워 주겠습니다. 짠! 다시 로그인만 나왔습니다. 이제 join 버튼을 눌렀을 때 login 창이 없어지고 join만 나오게 해야겠습니다. 먼저 join의 html태그 부분입니다. join 거의 login과 비슷합니다. 하지만 일단 보이지 않게 hidden 속성을 넣어 놨습니다. hidden의 CSS속성에는 단순히 display: none 하나만 지정을 해줬습니다. 이제 join버튼을 누르면 logi.. 2023. 12. 6. [개인프로젝트] html에서 자바스크립트로 데이터 가져오기 (2) 오늘은 개인적인 사정이 있어서 코딩을 얼마 하지 못했습니다ㅠㅠ 점점 또 느슨해지기 전에 마음을 단단히 먹고 다시 시작해야겠네요. 일단 html에 자바스크립트의 경로를 추가해 줍니다. const loginForm = document.querySelector(".login-form"); const loginId = document.querySelector(".login-form > input:nth-child(1)"); const password = document.querySelector(".login-form > input:nth-child(2)") function onSubmit(e){ e.preventDefault(); console.log(loginId.value); console.log(passw.. 2023. 12. 1. [개인프로젝트] 로그인 박스만들기(html, css) 이제까지 공부했던 CSS와 자바스크립트를 활용해서 로그인 페이지를 활용하려고 한다. 일단 로그인 박스 만들기 html Login join 간단하게 컨테이너 박스를 만드록 로그인 관련 필요한 테그들을 넣었다. body{ background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url("../imge/2.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .container{ display: flex; justify-content: center; align-items: center; height: 100vh; } .logi.. 2023. 11. 30. [퍼블] flex 관련 명령어들 정리 flex란 디스플레이 관련 css 명령 어므로 속성들을 1차원 형식으로 배치하겠다고 선언하는 것이다. .container > * { width: 50px; height: 50px; border: 1px solid black; } .one{ background-color: black; } .two{ background-color: blue; } .three{ background-color: yellow; } .four{ background-color: green; } .five{ background-color: red; } 해당 코드를 넣으면 이런 결과가 나옵니다. 여기에서 부모 클래스에 flex 요소를 넣어보았다. .container{ display: flex; } .container > * { widt.. 2023. 11. 16. 이전 1 2 3 4 5 ··· 8 다음
