본문 바로가기

DEV61

1. 리액트 네이티브 & Expo 설치 및 실행 ** MAC 기준 포스팅 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 리액트 네이트브를 사용하면 안드로이드 앱 및 IOS 앱을 따로 만들지 않고 하나만 만들어서 배포할 수 있는 앱을 만들 수 있다. 물론 상황에 따라서는 android, ios 각각의 폴더에 들어가서 직접 코드를 수정해야 될 수도 있다. Expo는 초기 설정이 간단하며, 각 플랫폼 IDE를 설치하지 않고도 시뮬레이터를 사용할 수 있는 프레임워크이자 플랫폼이다. 리액트 네이티브와 Expo를 사용하기 위해서 Node.js, Visual Studio Code, Android Studio, XCode(Mac 사용시) 가 필요하다. 우선 아래 URL을 통해 전부 다운로드 받은 후 설치해.. 2022. 12. 28.

3. SpringBoot(스프링부트) 빌드 후 실행 참고: 인텔리제이, 맥북 기준으로 작성된 글. 1. 인텔리제이에서 스프링부트가 실행되고 있다면 정지시켜준다. 2. 브라우저에서 localhost:8080 또는 화면을 띄울 로컬 url을 입력한 후 '사이트에 연결할 수 없음'을 확인한다. 3. 나는 Spring 프로젝트가 Dev/spring-study 폴더 안에 구성되어 있다. 각자 스프링 프로젝트가 들어있는 경로로 이동한 뒤 ./gradlew build 명령어를 입력하면 빌드가 된다. 빌드 후 build/libs 폴더로 이동하면 내가 만든 프로젝트명-버전-SNAPSHOT.jar 파일이 생성되어져 있다. java -jar 프로젝트명-버전-SNAPSHOT.jar 명령어를 입력하면 서버가 실행된다. ./gradlew build cd build/libs jav.. 2022. 12. 27.

2. Spring Boot localhost:8080 웹 페이지 띄우기 1) preferences에서 들어간다. 2. gradle을 검색해서 선택 > 빌드 및 실행, 테스트 실행을 IntelliJ IDEA로 변경 - 위에 노란줄 설명을 보면 알겠지만 자바 프로젝트에서는 IDE를 사용하여 빌드하고 실행하는것이 더 빠를 수 있다. 3. SpringStudyApplication.java 파일 선택 > main 좌측 초록 실행 버튼 또는 우측 상단 초록 실행 버튼을 눌러준다. 아래 콘솔창에 실행 로그가 올라오고 완료되면 성공. 4. 웹 페이지에 localhost:8080으로 접속하면 Whitelabel Error Page가 뜨면 성공. 5. src > resources > 새로 만들기 > 파일 > index.html 파일을 생성해준다. 6. index.html 안에 html 코드를.. 2022. 12. 24.

1. 스프링 부트 프로젝트 생성 - IntelliJ 기준 1. IDE를 이용하여 직접 생성하기1) 인텔리제이에서 [새 프로젝트] 버튼을 클릭한다.2) Spring Initializr 를 선택한 후 위와 같이 입력 및 선택한다. (자바 11 기준) * 참고 : 일반적으로 그룹은 회사 사이트 도메인을 사용하며, 아티팩트는 프로젝트명이라고 생각하면 된다.3) JAVA 버전과 Spring Boot 버전이 안 맞는 경우 에러날 수 있다. Java11이라면 Spring Boot 2.x.x를 선택 > 'Spring Web'을 검색한 후 체크박스 선택 > 완료4) 스프링 부트 프로젝트가 생성되었다.2. Spring initializr 사이트를 이용하여 생성하기1) start.spring.io 사이트로 이동2) 인텔리제이에서 입력한거와 똑같다. 왼쪽에 전부 입력 후 우측 'A.. 2022. 12. 23.

[스프링] @ResponseBody 동작 원리 @ResponseBody를 사용하면 뷰 리졸버(viewResolver)를 사용하지 않는다. 그 대신, HTTP의 BODY에 문자 내용을 반환한다. VeiwResolver 대신 HttpMessageConverter가 동작된다. 참고: 컨트롤러에서 리턴 값으로 문자를 반환하면 ViewResolver가 화면을 찾아서 처리한다. 스프링부트 템플릿엔진 기본 viewName 매핑(resources : templates/ + {ViewName} + .html @ResponseBody를 선언한 상태에서 객체를 반환하면 객체가 JSON으로 변환된다. HttpMessageConverter 기본 문자 처리 : StringHttpMessageConverter 기본 객체 처리 : MappingJackson2HttpMessage.. 2022. 4. 14.

[springboot] spring-boot-devtools 적용 및 사용 Devtools html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다. Devtools 기능 - Property Defaults Spring에서 제공하는 thymeleaf는 캐싱 기능을 사용한다. 캐싱이 되면 파일을 수정하더라도 바로 반영되지 않는다. - Automatic Restart 파일 수정 후 저장을 하면 Classpath에 존재하는 파일의 변경을 감지하고, 자동으로 서버를 restart 해준다. 설정을 통해 원하는 디렉토리만 트리거로 설정할 수도 있다. - Live Reload JS파일을 수정하기만 해도 자동으로 브라우저가 새로 고침된다. 내부적으로 live reload 서버를 두고 브라우저 확장프로그램과 통신하는 방식으로 동작한다. - Global Settings -.. 2022. 4. 13.

02-2. 뷰(Vue) 개발자 도구 & VSCODE 확장 플러그인 설치하기 뷰 개발자 도구(뷰 크롬 플러그인)은 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다. 1. Google에서 Vue.js devtools를 검색해서 크롬 플러그인 스토어로 이동하거나, https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 [Chorome에 추가]버튼을 클릭한다. 2. Vue.js devtools을(를) 추가하시겠습니까? 알럿이 뜨면 '확장 프로그램 추가' 버튼을 클릭한다. VSCODE 확장 플러그인 목록 Vue 3 : Volar 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 뷰.. 2022. 3. 13.

02-1.Vue.js 시작하기(인텔리제이 기준 환경세팅) 1. https://nodejs.org/ko/ 에서 LTS 버전을 다운로드 받은 후 설치해준다. ■LTS (Long Term Support) : 오랜 기간(2년) 지원이 가능하다는 의미로, 해당 버전에 대한 취약점 패치, 개선 사항에 대한 패치를 의미한다. 해당 버전에 존재하는 코어 기능에 대해 같은 코드가 같은 기능을 하도록 지원합니다. ■ 현재 버전: 개발이 진행중인 버전이다. 해당 버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재하는 버전이다. node -v npm -v2. 윈도우키 + R ▶ cmd 창에서 명령어를 입력하여 제대로 설치됐는지 확인한다. 3. 인텔리 제이가 설치되어 있지 않으면 https://www.jetbrains.com/ko-kr/ide.. 2022. 3. 13.

01-2. Vue.js의 특징 1. UI 화면단 라이브러리 Vue.js는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM(Model - View - ViewModel) 패턴이란? 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴이다. 즉, 화면 앞단(프런트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다. MVVM 패턴으로 개발하면 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 직관적으로 이해할 수 있고, 추후 유지보수까지 편해진다. 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스.. 2022. 3. 13.

이전 1 ··· 3 4 5 6 7 다음

티스토리툴바