2018/075 vue.set(state.object, key, value) 함수 최근 최신 프론트엔드 프레임워크인 vue.js를 쓰면서 한가지 문제가 생겼다.바로 변수를 통해 컴포넌트 상태를 업데이트 하려고 했는데,해당 변수가 배열이 되었을경우 아무리 값을 변경해 보아도 적용이 안 된다는 문제였다.찾아보니 vue에서는 아직 배열 감지를 하지 못하여 따로 함수를 써줘야 함을 알게 되었다.함수 이름은 아래와 같다. Vue.set(state.object, key, value) 해당 함수에 대한 자세한 설명은 아래의 링크를 참고 바란다. https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 그리고 이것을 vue cli의 컴포넌트에 쓰려면 아래와 같이 쓰면 된다.(참고로 배열은 key 대신에 index를 넣으면 된다.) th.. 2018. 7. 24. node.js의 res.locals 함수 node.js로 페이지 렌더링을 하게 되면 중복되는 값들이 있다.이 값들을 한꺼번에 처리할 수 있는 함수가 바로 res.locals 이다.해당 함수를 쓰면 렌더링시 중복되는 값들을 저장해놓고 계속해서 쓸 수 있다.자세한 사항은 아래의 링크를 참조하면 된다. https://stackoverflow.com/questions/29026650/how-to-render-common-variables-from-app-js-to-all-routes-in-express 이것을 안쓰면 렌더링시 중복되는 값들을 모두 복붙하는 노가다를 해야한다.최근 최신프론트엔드를 쓰면서 이 함수를 쓸 필요성이 사라졌지만 나중을 위해 알아두어야 겠다. 2018. 7. 23. css calc() 함수 가끔 css 코딩을 하다가 width, height 값에 100% 속성을 주면서 동시에 어느정도 margin을 주고싶을때가 있다. 평소에는 설마 이러한 기능이 css에 있겠어 했는데,오늘 필요해서 찾아보니 정말 있었다.. calc()라는 함수인데 정말 매우 유용하다.더 자세한 설명은 아래의 링크를 참고하면 된다. https://www.w3schools.com/cssref/func_calc.asp 2018. 7. 23. column-count 속성을 사용하여 masonry를 구현할때 주의할 점 최근에 column-count 속성을 사용하여 masonry를 구현한 일이 있었다.자세한 설명은 아래의 링크를 참조하면 된다. https://codepen.io/AdamBlum/pen/fwrnE 위의 링크에서는 article에 column-count 속성이 적용되었고, section에서는 display: inline-block 속성이 적용되어 있다.이렇게 될 경우 신기하게도 section을 article이 잘 감싸지만 밑에 불필요한 공간이 생김을 확인하였다. (이걸 없애려고 3시간 동안 별별짓을 다해 보았다..)결론적으로 이것을 없애지 못하고 다른 방법을 찾게 되었다. 그것은 section의 display 속성을 block으로 주는 방법이다.이렇게 되면 해당 section 콘텐츠는 반응형에 따라 마구 짤.. 2018. 7. 20. column count 사용시 컨텐츠가 overflow 될때 말그대로 column-count 사용시 컨텐츠가 overflow 될때가 있다.이러면 모양이 보기 안 좋은데, 이러한 문제를 방지하기 위해서는 아래의 코드 하나만 추가해주면 된다. page-break-inside: avoid; 더 자세한 사항은 아래의 링크를 참고하면 된다. https://stackoverflow.com/questions/41668228/css-column-count-overflow-issue-in-chrome 2018. 7. 20. 이전 1 다음