블로그에 글을 적지 않았던 동안 expo -> React Native 빌드 환경을 세팅하고 아예 리액트 네이티브로 개발할 준비를 했다. 리액트 네이티브 커스텀 폰트 적용 방법 리액트 네이티브에서 외부 폰트를 적용하려면 2가지 방법이 있는데 나는 직접 폰트 파일을 추가하고 설정하는 방법을 택했다. 1. 사용할 폰트 파일 다운 ios 폴더에 fonts 라는 폴더를 만들고 다운받은 ttf 파일을 넣어준다. 2. ios 폴더 경로에 [project name].xcodeproj 혹은 [project name].xcworkspace 를 통해 xcode를 실행한다. 3. 프로젝트 우클릭 후 Add Files to [프로젝트 이름] 을 클릭한다. 4. 아까 폰트 파일을 넣어두었던 ios/fonts 폴더를 선택하고 아래..
🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 exop init react-native-todo //프로젝트 생성 cd react-native-todo npm install styled-components prop-types //프로젝트에서 사용할 라이브러리 설치 프로젝트에서 사용할 색상 정의 - theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', } 1.타이틀 만들기 import React f..
🤍REST API) 카카오 로그인 API 서비스 환경설정 1. 카카오 개발자센터에 접속 후 로그인한다. 2. 애플리케이션을 추가하기 3. 아래와 같이 이름을 설정해서 추가해준다. 4. WEB 플랫폼 등록 5. 도메인 등록 6. 카카오 로그인 활성화 7. Redirect URI 설정 8. 동의 항목 설정 9. 이곳에서 카카오로그인 버튼 소스를 가져온다. (축약형, Middle) 10. 로그인 화면에 카카오 로그인 버튼을 추가한다. 11. 카카오 로그인 요청을 보내는 Request URI는 아래와 같이 만들면 된다. GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1 Host..
🤍글 상세보기 구현하기 1. Index.jsp 글 상세보기 버튼에 태그 추가 2. BoardController 작성 //글 상세보기 @GetMapping("/board/{id}") public String findById(@PathVariable int id, Model model) { model.addAttribute("board", boardService.글상세보기(id)); return "board/detail"; } 3. BoardService 작성 public Board 글상세보기(int id) { return boardRepository.findById(id) .orElseThrow(()->{ return new IllegalArgumentException("글 상세보기 실패: 아이디를 찾을 ..
✅구현 목표 게시물이 로딩된 이후 화면에서 댓글 수를 클릭하면 해당 게시물에 속한 댓글을 Ajax로 가져와서 화면에 보여줌. 특정 버튼 클릭 시 새로운 댓글을 입력할 수 있는 모달창을 보여주고 Ajax의 POST 방식으로 댓글을 전송함. 댓글 삭제, 수정은 댓글 등록과 동일하게 특정 댓글을 선택하여 모달창에서 처리함. 방식 호출 대상 파라미터 작업 반환 데이터 GET /replies/board/{bno}(게시물번호) 게시물 번호 해당 게시물의 댓글 조회 JSON 배열 POST /replies/ JSON으로 구성된 댓글 데이터 댓글 추가 추가된 댓글 번호 DELETE /replies/{rno} 댓글 번호 댓글 삭제 삭제 결과 문자열 PUT /replies/{rno} 댓글 번호+수정할 내용 댓글 수정 수정 ..
🤍연관 관계와 관계형 데이터베이스 설계 관계형 데이터베이스에서는 개체(entity)간의 관계(relation)라는 것에 대해 고민하게 됨. 일대일(1:1), 일대다(1:N), 다대일(N:1), 다대다(M:N) 관계를 이용하여 데이터가 서로 간에 어떻게 구성되었는지 표현함. 예를 들어, 회원과 게시글의 관계를 정의해보면 한 명의 회원은 여러 게시글을 작성할 수 있다. 하나의 게시글은 한 명의 회원에 의해 작성된다. 🤍게시판 프로젝트 시작 전 테스트 1. 엔티티 클래스 추가 Member Board Reply 하나의 게시글에는 여러 개의 댓글이 달릴 수 있다. -> @ManyToOne 한 명의 사용자는 여러 개의 게시글을 작성할 수 있다. -> @ManyToOne 완성된 테이블 관계도 2. Repository..
🤍방명록 검색 구현 검색을 구현하기 위해 생각해보아야 할 것 검색 기능을 구현하기 위해 PageRequestDTO에 검색 타입(type), 검색어(keyword) 추가 필요 서비스 계층에서 Querydsl 이용해서 검색 처리 검색 타입은 제목(t), 내용(c), 작성자(w)로 검색하는 경우와 제목 혹은 내용(tc), 제목 혹은 내용 혹은 작성자(twc)로 검색하는 경우가 있다. 1. PageRequestDTO 수정 2. 서비스 코드 작성 PageRequestDTO를 파라미터로 받아 검색 조건(type)이 있을 시 conditionBuilder 변수를 생성해서 검색 조건을 or로 연결해서 처리함. 검색 조건이 없을 시 'gno>0'으로만 생성됨. 3. 검색 조건을 처리하기 위해 목록 getList() 메소..
🤍1. 방명록 조회 구현 1. 서비스단 코드 작성 findById를 통해 만일 엔티티 객체를 가져왔다면 entityToDto를 이용해 엔티티 객체를 DTO로 변환해서 반환함. 2. 컨트롤러 코드 작성 Model에 GuestDTO 객체를 담아서 전달하도록 코드를 작성한다. 3. 조회 화면 read.html 작성 읽기만 할 수 있도록 readonly 속성 적용 4. 게시글 목록 클릭 시 조회 페이지로 이동하도록 list.html 수정 [[${dto.gno}]] 5. 조회 구현 완료 🤍2. 방명록 수정, 삭제 구현 수정은 POST 방식으로 처리하고 다시 수정된 결과를 확인할 수 있는 조회(read.html) 화면으로 리다이렉트시킴. 삭제는 POST 방식으로 처리하고 목록 화면으로 리다이렉트시킴. 목록 이동 작..