Orangesea - developer

## 자바스크립트 spread 문법(JavaScript spread syntax) 자바스크립트 spread 문법은 다음과 같다. ``` let request = { a: "1", b: "2"} console.log(request) // { a: '1', b: '2' } console.log({request}) // { request: { a: '1', b: '2' } } console.log({...request}) // { a: '1', b: '2' } console.log({c: "3", ...request}) { c: '3', a: '1', b: '2' } console.log({...request, c: "3"}) { a: '1', b: '2', c: '3' } ```

# URL 파라미터를 인코드하는 방법 (How to encode URL parameter in JavaScript) ''%%%" 라는 파라미터를 넣었더니, invalid query parameter 라는 에러가 발생. 해결하기 위해서 방법을 찾아봤습니다. 스택 오버 플로우에서 여러 해답을 볼 수 있었는데, 그 중에 눈에 띄는 것이 크게 2개였습니다. ## encodeURI(), encodeURIComponent() 함수 사용 encodeURI(), encodeURIComponent() 와 같은 함수를 사용해서 uri의 특정한 문자를 UTF-8로 인코딩해줍니다. ``` console.log(encodeURIComponent('test?')) // output: "test%3F" ``` ## URLSearchParams() 사용 toString()과 함께 사용해 URL의 쿼리 문자열을 반환할 수 있습니다. ``` let params = {} params['online'] = "true" params['age'] = '20s' params['query'] = '!@#$%' console.log(new URLSearchParams(params).toString()) // output: "online=true&age=20s&query=%21%40%23%24%25" ```

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

React React 하는데 React가 뭔데 그래? 라는 생각이 든다면 1~2시간 정도 투자해서 아래 링크로 가서 따라해보시기 바랍니다. 빠른 시간에 React가 어떤 건지 감 잡기 좋다고 생각합니다. 한국말이니 더 좋습니다. https://ko.reactjs.org/tutorial/tutorial.html 실습 결과물 :  https://codepen.io/ghkdgh2365/pen/PoqmJyV?editors=0010

누군가 나와 같이 PC와 모바일과 레이아웃 차이가 클 때 어떻게 해야할까 고민하고 있다면 다음과 같은 솔루션이 도움이 되었으면 좋겠다. // 웹페이지 로딩이 되었을 때 넓이 값을 확인하고 기기에 따라 클래스 등을 넣어준다. $(window).load(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{    // 모바일보다 작은 디바이스인 경우   } }); // 웹페이지 사이즈가 변경되었을 때 넓이 값을 확인하고 기기 넓이에 따라 클래스 등을 넣어준다. $(window).resize(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{     // 모바일보다 작은 디바이스인 경우   } } javascript 로 짜는 경우는 window.onload 등으로 대체하면 똑같이 사용할 수 있다.

stimulus.js 를 사용해봤다. Rails 에서는 javascript 폴더 안에 controller 폴더를 만들고 xxxxx_controller.js 라는 js파일을 만들어 사용한다. import { Controller } from "stimulus" export default class extends Controller { functionName(){ } } 그 다음 위와 같이 js 파일을 구성하고 사용한다. 이제 이걸 사용하는 방법은 아래와 같이 사용한다. 아래에서의 gallery 는 위의 xxxxx이고 click은 trigger고, gallery#next 는 xxxxx_controller.js 에 정의해놓은 함수(위 사진에선 functionName같은)이다. 좀 더 쉽게 설명하면 클릭하면 xxxxx_controller 파일의 functionName() 함수를 호출해라와 같은 것이다. < div data-controller =" gallery " > < button data-action =" click->gallery#next " > … </ button > </ div > click이 아닌 "window의 크기가 변화하면, 문서가 준비되면" 같은 global event도 사용할 수 있다. < div data-controller =" gallery " data-action =" resize@window->gallery#layout " > … </ div > 위의 예제는 window의 크기가 resize되면 함수를 호출하는 것 아마 ready@document 와 같은 것도 되지 않을까 싶다. 라고 썼었는데 해보니 안됨 load@window 로 하면 됨 ... jQuery는 안되는건가...