🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 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..
리액트 네이티브 스타일링은 웹 프로그램의 CSS 문법과 약간의 차이가 있다. 먼저 프로젝트를 생성해준다. expo init react-native-style 리액트 네이티브는 자바스크립트를 이용해 스타일링이 가능함. style 컴포넌트 속성이 있고, 인라인 스타일링 적용 or 스타일시트 사용 2가지 방법이 있다. 🤍스타일링 1. 인라인 스타일링 인라인 스타일링은 HTML 방식처럼 컴포넌트에 직접 스타일을 입력하는 방식이다. 웹프로그래밍 방식과 유사하지만, 위의 Text 컴포넌트처럼 비슷한 역할을 하는 컴포넌트에 중복 코드가 발생한다는 단점이 있다. 2. 클래스 스타일링 클래스 스타일링은 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이다, 위의 인라인 스타일링 방식보다 코드가 간결해진다...
🤍컴포넌트란? 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소이다. 단순히 UI역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 🤍내장 컴포넌트 - Button 컴포넌트 버튼에 출력될 텍스트는 title 속성을 이용해 Button이라 지정하고, 버튼 클릭 시 Click이라는 확인창이 나타나도록 onPress 속성에 함수 지정 ◾실행 결과 🤍커스텀 컴포넌트 만들기 Button 컴포넌트는 Android와 iOS에서 다르게 보이기 때문에 TouchableOpacity를 사용하여 커스텀 컴포넌트 만들기 ◾실행 결과 MyButton.js에 onPress 함수를 주면 아래와 같은 결과가 나온다. 🤍props props란 p..
리액트 네이티브 개발환경 준비하기 🌈공통 Node.js / JDK / 안드로이드 스튜디오 💻맥 & 윈도우 맥 : 왓치맨 / Xcode , 윈도우 : 파이썬 나는 다른 것들은 다 세팅이 되어 있어서 파이썬만 추가로 설치했다. 리액트 네이티브 프로젝트 만들기 1. Expo Expo는 리액트 네이티브를 편하게 사용할 수 있도록 설정되어 있는 툴 완성된 프로젝트를 쉽게 배포, 관리할 수 있는 다양한 기능을 제공함 아래 명령어로 expo-cli를 설치 npm install --global expo-cli Expo 프로젝트 생성 생성된 프로젝트로 이동해서 프로젝트 실행 웹 브라우저에 페이지가 열리며 안드로이드 폰에서는 Expo 애플리케이션의 Scan QR Code를 이용하고, 아이폰은 기본 카메라 애플리케이션을 이..
리액트 네이티브(React Native) 란? 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트 웹 브라우저가 아닌, iOS와 안드로이드(Android)에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크 리액트 네이티브 장점 두 플랫폼(iOS, Android) 동시 개발 가능 모바일 개발 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작할 수 있음. 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능 제공 리액트 네이티브 단점 리액트 네이티브가 네이티브 코드로 전환되는 장점은 있으나, 네이티브 새로운 기능을 사용하는데 오래 걸린다는 단점이 있음. iOS, Android에서 업데이트를 통해 새로운 API를 제공하더..
디자인 패턴 -각 모듈의 세분화된 역할이나 모듈들 간의 인터페이스와 같은 코드를 작성하는 수준의 세부적인 구현 방안을 설계할 때 참조할 수 있는 전형적인 해결 방식 또는 예제 생성 패턴 추상 팩토리(Abstract Factory) 빌더(Builder) 팩토리 메소드(Factory Method) 프로토타입(Prototype) 싱글톤(Singleton) 구조 패턴 어댑터(Adapter) 브리지(Bridge) 컴포지트(Composite) 데코레이터(Decorator) 퍼싸드(Facade) 플라이웨이트(Flyweight) 프록시(Proxy) 행위 패턴 책임 연쇄(Chain of Responsibility) 커맨드(Command) 인터프리터(Interpreter) 반복자(Iterator) 중재자(Mediator)..
🤍스프링 시큐리티(Spring Security)란 스프링 기반의 애플리케이션의 인증, 인가 등을 담당하는 스프링 하위 프레임워크 인증과 권한에 대한 부분을 Filter 흐름에 따라 처리함 보안에 대해 체계적으로 다양한 옵션을 제공해주므로 개발자가 보안 관련 로직을 작성하지 않아도 됨. 스프링 시큐리티, SNS 로그인 구현하기 1. build.gradle 관련 의존성 추가 implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' implementation('org.springframework.session:spring-session-jdbc:') testImplementation 'org.springframework.securi..
이제 뮤지컬 데이터를 DB에 INSERT까지 했으니 목록을 SELECT할 차례!! 이번에 개인 프로젝트를 하는 목적은 여러 명이서만 해봤던 프로젝트 진행 과정을 처음부터 끝까지 내 힘으로 하면서 공부하는 목적이 제일 크기 때문에 엄청 큰 규모로 할 생각도 없고 일단 혼자 힘으로 해결하는 데에 의미가 가장 크다. 그래서 프론트단은 타임리프(Thymeleaf) + 부트스트랩을 사용하기로 했다. 🤍DTO, Service, Controller, Repository 작성 -먼저 Entity와 별개로 DTO를 추가로 작성해 주었다. JPA로 처리할 때 변경이 적은 Entity 대신 DTO 객체를 만들어 원하는 컬럼의 기능만 뽑고 데이터를 교환하기 위해서. MusicalDTO 1 2 3 4 5 6 7 8 9 10 1..