🍀Web

01. 게시글 삭제이번엔 버튼을 눌렀을 때 게시글이 삭제될 수 있도록 구현하는 차례다. 먼저 서비스에서 삭제 함수를 만들어 준다.해당 id값을 받으면 deleteById를 통해 repository에서 지워준다.// 특정 게시글 삭제public void boardDelete(Integer id) { boardRepository.deleteById(id);}  그리고 컨트롤러에서 서비스함수를 이용하여 GetMapping을 시켜준다.board/delete 페이지에서 삭제를 했다가 redirect를 통해 다시 리스트 페이지로 넘어가게 된다.@GetMapping("board/delete")public String boardDelete(@RequestParam("id") Integer id) { boar..

01. 게시글 리스트 먼저 mariaDB에서 테스트 데이터를 생성해준다.여기서 코드 실행은 실행할 부분을 드래그해서 ctrl+엔터 치면 된다. 추가할 땐 추가한 라인만 실행 시킨 뒤 나머지 실행 부분을 다시 실행한다. (여기서 오류나면 맨 위에 use board; 추가한뒤 그것만 실행했다가 아래 영역만 재실행)   call 하고나서 board 표보면 아래처럼 추가된 것을 확인할 수 있다.     서비스에 아래 코드 추가public List boardList() { return boardRepository.findAll();}[Tip] 빨간 글씨로 오류가 나면 해당 부분 드래그한 뒤 ctrl + 스페이스바 누르면 자동완성들이 아래로 뜸 -> 그중에 맞는 거 선택하면 됨 (여기서는 List가 오류나서 ..

어제 이어서 영상 따라 만들어 보는 중~.~ 01. 테이블 생성먼저 mariaDB에서 테이블을 생성해준다.Table 이름은 똑같이 board로 하고 아래 column들 설정해주면 됨 예전 같았으면 저 설정값들이랑 쿼리 코드가 뭔지 몰랐을 텐데...sqld 공부하고 나니까 다 알게됨PK:기본키 / NN: Not Null근데 사실 다른 건 설명 안들어서 약자니까 감이 안옴UQ는 혹시 고유키인가 (그럴듯함)  이렇게 하면 이제 다시 끄고 인텔리제이로 ㄱㄱ   02. 게시글 작성폼 생성이거 만드는 건데 어제 했던 코드에서 resources -> templatesnew html 파일 생성  꾸미는건 프론트 영역이니까 지금은 대충 아래처럼만 써준다. 작성  이번에 intellij 처..

남은 방학 일주일...뭔가 이것저것 시도해보고 싶어서 도전 중며칠 전에 코틀린으로 간단한 갤러리 사진 앱 만들기 했었는데 안드로이드 스튜디오가........자꾸 튕겨서 그냥 끔물론 진짜 간단 버전으로 빌드해서 만들었긴 한데 그건 나중에 올리고...아무튼 그래서 이번엔 드디어 백엔드 기초 입문해보기로 함   영상은 이분 거 보면서 하는 중~.~https://youtu.be/M2wxMRt4tx0?si=MOsPhEbyyZKH1JY5  아무래도 이론 길게 배우다보면 재미 없어지니까 바로 따라 쳐보면서 실습하는게 제일 좋은 거 같음(내기준)이제 윈도우 이름도 드디어!! 영어로 돼서 편하게 설치할 수 있는게 너무 좋다(눈물의 윈도우 초기화함)  아무튼 그래서 영상 따라서 순서대로 하고 있는데 1.intellij 설..

01. 컴포넌트(사용자 정의 태그) 만들기 어제 설정한 환경에서, App.js의 코드를 수정하여 페이지를 구성할 수 있다. 이때 컴포넌트를 활용할 수 있는데, 컴포넌트는 함수로 정의하고 반드시 이름의 첫 글자는 대문자여야 한다. 또한 반환 값으로 해당 태그 내용을 적으면 되며, 기존 App함수에서는 이 함수의 이름을 태그로서 호출하면 된다. function Header(){ return MAIN } function App() { return ( ); } 02. Props(속성) html에서 의 src, width, height처럼 React에서도 속성을 부여할 수 있다. 여기서는 그걸 Props라고 한다. 이 props를 이용하여 기존 html의 코드와 달리 동적으로 코드를 관리할 수 있다. 아래에 코드..

이제 html, css, JavaScript의 주요 기능들은 거의 살펴보았으니, React를 공부해보려고 한다. 그러기 위해서는 실습 환경을 먼저 만들어야 하는데,,, (솔직히 이런 환경 준비가 제일 힘든 거 같음) 역시나... 하란대로 따라했는데 오류 잔뜩 나고 여러 가지 찾아보면서 다시 깔아서 성공했다... 방법 정리~.~ 01. node.js 설치 React를 사용하려면 먼저 node.js가 설치되어 있어야 한다. 아래 사이트에서 LTS를 다운받고 설치한다. 설치 기본경로에 한글이 포함 안되어 있어서 그냥 기본 경로 그대로 했다. (아 제발 진짜 사용자명 영어로 바꾸고 싶음 ㅇㄴ) https://nodejs.org/en Node.js Node.js® is a JavaScript runtime bui..

01. 조건문 저번에 한 다크모드를 조건문을 이용하여 하나로 합친 코드는 다음과 같다. (여기서 조건문 비교연산을 할 때는 '==='으로 3개 쓴다!! 2개 아님!!) onclick 했을 때 if else문으로 현재 상황을 우선 판별한다. 문서에서 #dark 선택자의 값이 night이면, 클릭했을 때 다크 모드를 원한다는 뜻이니까 문서에서 body 선택자의 색상 값들을 바꿔준다. #dark의 값도 day로 이름을 바꿔준다. else에서는 이미 다크모드인 상태에서 day모드를 원한다는 뜻이므로, 다시 원 상태의 값들로 바꿔주도록 쓴다. 02. this c++에서도 클래스를 사용할 때 'this'를 자주 쓰곤 했었다. 자기 자신을 간단하게 가리킬 수 있는 포인터인데, 자바스크립트에서도 이를 사용할 수 있다...

01. script 태그, 콘솔 html상에서 JavaScript를 쓰고 싶을 때는 태그를 이용하면 사용할 수 있다. 해당 태그 안에 쓰는 언어는 자동으로 자바스크립트 언어로 인식된다. 사이트 안에서 쓰고 싶을 때는 페이지 우클릭 -> 검사로 들어가서 Elements탭에서 esc를 누르면 아래에 console창이 뜬다. 해당 창에 자바스크립트 코드를 작성하여 바로 실행시킬 수 있다. 02. 이벤트로 텍스트, 버튼 추가 위와 같은 코드에서 on~ 속성들을 '이벤트'라 한다. 여기서는 버튼을 누르거나 텍스트를 입력할 시 동작을 하게 하였다. alert는 경고창이 띄워지는 것을 말한다. 아래 코드로 이제 체크리스트에 쓰일 텍스트 입력 칸과 버튼을 만들 수 있다. (아직 동작은 하지 않음) .button{ di..

01. 반응형: 미디어 쿼리 @media (max-width:800px) { #grid{ display: block; } #list{ /*목록*/ border-right: none; } } 위 코드처럼, @midia ()하고 크기를 지정해 주면, 해당 크기부터는 어떠한 형식이 되도록 지정해 줄 수 있다. max로 할 경우엔 최대 지정 px 만큼까지 해당 내용이 실행된다는 뜻이고, min으로 할 경우엔 최소 지정 px을 넘어가는 순간부터 해당 내용이 실행된다고 보면 된다. 이 코드에서는 800px까지는 웹 페이지가 작으니 목록을 위로 올리게끔 그리드 display를 block타입으로 하여 한 페이지 전체를 차지하도록 하였으며, 그에 따른 목록 선도 none으로 안 보이게 하였다. 800px 이상 부터는 화..

1. 제목 속성 추가: align 제목은 h1태그로 밖에 안 썼으니, 이를 CSS로 style태그 안에 h1 선택자를 열어서 사이즈, 정렬을 할 수 있다. font-size로 크기를 더 크게 하고, text-align을 통해 center에 정렬시킬 수 있다. h1{ font-size: 60px; text-align: center; } 이러한 속성 정보들은 필요할 때마다 구글에 property로 서치하여 찾을 수 있기 때문에, 따로 암기할 필요는 없다. (심지어 조금만 쳐도 알아서 자동완성 추천기능이 있기 때문에 더더욱... 그래도 어떤 기능을 사용할 수 있는지 정도는 알아 두자!!) 2. ID, Class, 태그 선택자와 우선 순위 ★우선 순위 -같은 선택자일 때는 하위 라인에 있는 것이 더 우선 된다...