7월, 2020의 게시물 표시

루비 온 레일즈에서 devise gem 없이 로그인 기능 구현하기 3 (How to build authentication system without devise gem in Ruby on Rails)

## 루비 온 레일즈에서 devise gem 없이 로그인 기능 구현하기 3 (How to build authentication system without devise gem in Ruby on Rails) [지난 포스트](https://ghkdgh2365.blogspot.com/2020/07/devise-gem-2-how-to-build.html) 에서 쿠키(Cookie)를 이용한 로그인, 로그아웃을 구현했습니다. 이번에는 세션을 이용한 로그인, 로그아웃을 구현하겠습니다. 차이점은 다음과 같습니다. 쿠키를 이용했을 때는 사용자 브라우저에 아이디, 비밀번호를 저장하고 이를 서버에 보내서 검증했다면, 세션을 이용할 때에는 서버에서 검증에 필요한 정보를 저장한 뒤 그 정보를 사용자 브라우저에게 보내주고, 다시 그 정보를 서버에 보내 검증한다는 점이 차이점입니다. 아래 구현 방법을 보시면서 차이점을 확인해보면 이해가 더 잘 될 것입니다. #### 3. 세션을 이용한 로그인 세션을 이용한 로그인, 로그아웃 구현을 위해 새로운 컨트롤러를 생성합니다. `rails g controller session` 으로 생성하거나, 직접 디렉토리(`controllers`)에 파일(`sessions_controller.rb`)을 만들어도 됩니다. 만들고 나면 `controller/sessions_controller.rb` 파일이 생성되고 아래와 같은 코드가 보일 것입니다. ``` class SessionsController 세션 로그인 ``` 확인이 되었으면 `home/index.html.erb` 에 아래와 같이 추가합니다. ``` Hello World ! ``` 이제 로그인 화면이 생겼으니 로그인할 수 있도록 `controllers/sessions_controller.rb` 에 가서 아래와 같이 입력합니다. ``` def create if params[:email].pr...

루비 온 레일즈에서 devise gem 없이 로그인 기능 구현하기 2 (How to build authentication system without devise gem in Ruby on Rails)

이미지
## 루비 온 레일즈에서 devise gem 없이 로그인 기능 구현하기 2 (How to build authentication system without devise gem in Ruby on Rails) ##### 회원가입이 되었으니 로그인 기능을 만들어보도록 하겠습니다. 혹시나 회원가입 파트가 필요한 분은 아래 링크에 들어가 확인해보시기 바랍니다. [루비 온 레일즈에서 devise gem 없이 로그인 기능 구현하기 - 회원가입](https://ghkdgh2365.blogspot.com/2020/03/devise-gem-how-to-build-authentication.html) 추가적으로 회원가입 후 축하 이메일 기능을 구현하고 싶은 분은 아래 링크에 들어가 확인해보시기 바랍니다. [루비 온 레일즈 액션 메일러를 이용해 메일 기능 구현하기](https://ghkdgh2365.blogspot.com/2020/05/creating-mail-function-by-using-ruby-on.html) --- #### 2. 쿠키를 이용한 로그인 먼저 로그인 화면이 필요하겠죠? 먼저 `controllers` 폴더에 `cookie_controller.rb` 파일을 만들어줍니다. 그 다음 아래와 같이 작성합니다. ``` class CookieController 로그인 ``` 그 다음 `routes.rb` 파일에 가서 아래 같이 입력해줍니다. ``` get 'cookie/new' ``` 이제 `localhost:3000/cookie/new` 로 브라우저에 들어가보면 로그인 화면이 보입니다. 만약 안보인다면 코드를 다시 한 번 보시고, 서버가 켜졌는지 확인해보세요.(만약 서버가 꺼져있다면, 커맨드 창에 `rails s` 를 입력해주시면 서버가 켜집니다.) 편의를 위해 로그인 화면으로 가는 링크를 만듭니다. ``` Hello World ! ``` 그 다음, 로그인 버튼을...

리액트 네이티브 모바일 키보드에서 다음 버튼으로 포커스(커서) 이동시키는 방법(How to make focus(cursor) move by using next button of mobile keyboard in React Native)

## 리액트 네이티브 모바일 키보드에서 다음 버튼으로 포커스(커서) 이동시키는 방법(How to make focus(cursor) move by using next button of mobile keyboard in React Native) 예를 들어, 모바일 로그인 화면에서 아이디를 입력하고 비밀번호를 입력해야 할 때, 키보드에서 다음 버튼을 누르면 비밀번호 입력칸으로 이동하게끔 만들려면 아래와 같이 하면 된다. ``` {this.passwordInput.focus();}} bulrOnSubmit={false} /> { this.passwordInput = input; }} /> ``` 참고 : https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar

Rails.ajax 를 사용해서 POST Request 보내고 레일즈 Controller에서 받는 방법(How to request and receive POST request by using Rails.ajax at Ruby on Rails)

## Rails.ajax 를 사용해서 POST Request 보내고 레일즈 Controller에서 받는 방법(How to request and receive POST request by using Rails.ajax at Ruby on Rails) 레가시 코드가 Rails.ajax를 사용하고 있어, Rails.ajax로 새로운 function 을 만들어 사용하려고 했는데, POST의 경우 data가 잘 넘어가지 않았다. 정확히 말하면, data 형태가 object 형태로 전송되어 Rails 쪽에서 데이터 처리를 할 수 없었다. 그래서 방법을 찾아본 결과 데이터형태를 FormData 형태로 변환한 뒤 보내니, 원하는 JSON 형태로 받을 수 있었다. 자세한 방법은 다음과 같다. ``` //some.js let hashData = {"one": 1, "two": 2, "three": 3} let someData = new FormData() someData.append("data", JSON.stringify(hashData)) Rails.ajax({ url: '/something', type: 'POST', data: someData, success: function(response) { console.log(response) } }) ``` 위와 같이 보내고 싶은 데이터를 FormData 객체에 append 로 JSON.stringify 함수로 변환해 넣으면 된다. Rails Controller에서는 다음과 같이 받아서 사용하면 된다. ``` # some_controller.rb data = JSON.parse(params["data"]) ``` 출처: stackoverflow 에서 참고한건데 다시 찾으려니 못찾겠음..ㅠ

리액트 네이티브에서 style 을 조건에 따라 적용하는 법 (How to apply style with conditional in React Native)

## 리액트 네이티브에서 style 을 조건에 따라 적용하는 법 (How to apply style with conditional in React Native) 최근 리액트 네이티브 프로젝트에 참가하게 됐다. JavaScript 를 자주 쓰진 않아 상당히 어색하지만, 빠르게 적응하려고 노력 중이다. 작업 중 React Native에서 Style을 조건에 따라서 적용해야 하는 상황이 있었는데 다음과 같이 처리할 수 있다. ``` return ( Great! ) const styles = StyleSheet.create({ yellowContainer: { backgroundColor: '#fff000' }, greenContainer: { backgroundColor: '#08d13b' }, }) ```