똑같은 삽질은 2번 하지 말자

개요 검색 쿼리를 작성하기에 있어서 다양한 검색조건이 올 수도 있고, 하나의 조건만 올 수도 있는 상황에서 어떻게 검색처리를 할 것인가 를 해결하기 위해 model 의 scope를 이용한 글이다. 모델의 스코프란? 스코프를 설정하는 것으로, 관련 오브젝트나 model의 method 호출하는 행위로써 참조되는 자주 사용되는 쿼리를 지정할 수 있으며, 스코프에서는 where, joins, includes 등 지금까지 등장한 모든 메서드를 사용할 수 있습니다. 어떤 스코프 method든 항상 ActiveRecord :: Relation객체를 반환합니다. 이 object에 대해서 다른 스코프를 포함하는 다른 메서드 호출을 할 수도 있습니다. (체인방식으로 연결 가능하다는 말) 단순한 스코프를 설정하려면 클래스의..

원인 해당에러는 store의 state의 값들을 vuex의 mutation을 통해서가 아닌 직접 값을 변형하려고 할 때 발생하는 에러이다. ex) this.$store.state.name = gwak; 해결방법 store에서 땡겨온 값들은 기본적으로 복사해서 사용하는게 좋다. (아니면 값을 변형하는 처리 자체를 하나하나 mutations을 통해 해주거나) javascript 객체를 복사하는 방법으로써는 두가지의 종류가 있다. 얕은복사(객체안의 객체같은 depth >= 2 인 경우에는 해결방법이 아님) 객체를 복사하지만 객체의 값들중에 원본객체를 참조하고 있는 요소가 존재하면 그건 얕은복사 이다. 1. 객체를 통째로 집어넣기 const obj1 = { a: 1, b: 2}; const obj2 = obj1..

보호되어 있는 글입니다.

개요 컴포넌트들 사이에서 공유되는 데이터들을 global state로 할것인가 local state로 할것인가? 이건 딱히 정해진 룰 같은게 없다. 하지만 UI적인 요소들은 local로해도 충분할 경우가 많고 서버에서 받은 데이터들은 global하게 관리하는게 좋다는 가설은 존재한다. 이 역시도 물론 무엇을 만드냐에 따라 틀릴 수 도 있다. 중요한건 기본 local state부터 시작해서 정말 어쩔수 없을때 global state로 하는게 좋은 접근법이라고 생각한다. 생각해야할 점 페이지의 갱신이나 뒤로가기에 대한 대응? 아마 페이지 컴포넌트가 로드 될때 fetchData를 하면 해결될 듯 싶지만, 사파리의 경우에는 조금 다를 수 있다. 특정한 캐시전략으로 페이지 뒤로가기에 대한 동작을 좀더 빠르게 렌더..

공통에외처리 controllers 내에서 공통으로 발생할 가능성이 있는 에러처리를 한곳에 모아두고 싶어서 작성해 보았다. app/controllers/concerns/error_renderable.rb module ErrorRenderable extend ActiveSupport::Concern included do # 想定以外のエラーの場合は５００を返す。 # rescue_from -> https://edgeapi.rubyonrails.org/classes/ActiveSupport/Rescuable/ClassMethods.html rescue_from Exception do |e| Rails.logger.error('Error: ' + e.message) render json: {message: 'Serv..

https://web.dev/http-cache/ Prevent unnecessary network requests with the HTTP Cache How can you avoid unnecessary network requests? The browser's HTTP Cache is your first line of defense. It's not necessarily the most powerful or flexible approach, and you have limited control over the lifetime of cached responses, but it's effective, it' web.dev 개요 캐싱은 그렇게 많은 시간을 들이지 않고도 웹사이트의 불필요한 네트워크 요청을 줄일..

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 React.js 최신의 다채롭고 복잡한 사용자 인터페이스(SPA)를 쉽게 구축할 수 있게 도와주고 고수준의 구문을 제공해서 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 구축해 나갈수 있다. 리액트의 선언형 방식에 대해 설명을 덧 붙이자면 div.root에 p태그로 "빅맥 먹고싶다" 라는 내용을 추가하고 싶을때 javascript로 하면 const para = document.createElement("p") para.textContext = '빅맥 먹고싶다' document.getElementById("root").append(para) 이렇게 한줄한줄 명령형으로 동작을 지시해야 하는데 리액트로 할 경우에는 function App() ..

보호되어 있는 글입니다.

해결(결과) props을 watch하기 위해서 결론부터 적자면 화살표 함수한번 감싸주거나 props: { onEdit: { type: Boolean, required: false, default: false, }, }, setup(props, { emit }) { watch( () => props.onEdit, (cur: Boolean, prev: Boolean): void => { console.log(cur, prev) }, ) }, toRefs로 반응성을 입혀서 반환시켜줘야한다. setup(props, { emit }) { const onEdit = toRefs(props).onEdit watch(onEdit, (cur: Boolean, prev: Boolean): void => { console...

https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 1. 위의 사이트에서 회원가입하고 2. 결제수단 등록을 해야 API가 쓸 수 있게됨으로 결제수단은 등록하자 (요금이 부가되는 조건을 달성하려면 지도 api경우에는 100만번? 조회 이상부터 유료가 된다고 한다.) 3. 결제수단 등록을 하고 나면 Console창에서 AI NAVER API라는 메뉴를 찾아 Application 등록을 해주면서 Web Dynamic Web 부분을 추가한다. 4. ..