목록전체 글 (74)
과거의 내가 미래의 나에게
결과의 변경 없이 코드의 구조를 재조정하는 리팩토링이라는 단계가 별도로 존재하는 만큼 코드를 이쁘고 가독성있게 짜는 것은 중요하다. 많은 개발자들이 리팩토링 단계가 중요하다는 것을 알고 또 이를 위해 많은 공부를 한다. 이번에 내가 클린코드 책을 읽은 이유 또한 좀 더 나은 코드를 짜기 위해서였다. 아직 책을 완독하지는 못하였지만 책을 읽고 생각하게 되었던 점을 정리해서 글로 옮겨본다. 클린 코드는 왜 필요한가? 우리는 코드가 효율적으로 돌아가도록 그리고 최적화 할 수 있도록 여러가지 기법을 사용하고 또 그러한 환경을 마련하기 위해 많은 노력한다. 하지만 코드를 깔끔하게 짜고 정리하는 것은 컴퓨터가 코드를 이해하는 속도에 관한 것이나 혹은 최적화 하는 것과는 약간 결이 다른 작업이라 생각한다. 클린 코드..
vue2로 작업을 하고 있는데(vue3 마이그레이션 작업이 멀지 않았다...!!!), 항상 경시하는 것 중 하나가 배열과 객체에 대한 반응형이다. 분명 데이터를 삽입제거하여 수정했는데 화면에 반영안되어 혼자 끙끙대다가 어느순간 또 이 사실을 잊고 있는 경우가 많은 것 보니 한 번 쯤 이와 관련하여 기록해놔야겠다 생각이 들어 vue 문서를 참고하여 글을 써본다. Vue2가 변경 내용을 추적하는 방법 vue 인스턴스에 JS객체를 data 옵션으로 전달하게 되면 vue는 Object.defineProperty를 사용하여 getter/setters로 변환한다. 모든 컴포넌트 인스턴스에는 watcher 인스턴스가 있으며 이는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록한다. 나중에 종속적인 se..
구조 분해 할당 구문을 자주 사용하지 않아 그 이해도가 떨어지고, 이해도가 떨어지니 계속 사용을 지양하게 되는 악순환이 반복되었다. 하지만 구조 분해 할당 구문은 코드의 가독성 측면을 생각하면 절대 무시할 수 없는 부분이고 또 다른 사람의 코드를 이해하기 위해서는 언제까지나 기피할 수는 없기에 이번 글을 통해 구문을 정리하고 익히려고 한다. 구조 분해 할당 구문이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS의 표현식이다. 객체나 배열에서 데이터 전체가 아닌 일부만 필요한 경우 필요한 부분만을 변수로 분해하여 사용할 수 있다. 배열 구조 분해 1. 기본 형태 const box = [1, 2]; function test () { return [1,..
요새 특정 기간에 대한 통계를 다루는 작업을 하는데 기간을 다룰 때 js의 시간 개념이 부족하다는 것을 깨닫고 관련된 내용을 학습하고 정리해보려고 한다. GMT Greenwich Mean Time이란 뜻으로 그리니치의 평균 시간이라 해석한다. 영국에 위치한 그리니치 천문대를 기준으로 경도를 나누는 시간대인데, 태양의 움직임을 바탕으로 측정한 평균 태양시이다. 영국을 기준으로 한 태양시이기에 영국보다 동쪽에 있는 지역일 수록 해가 더 일찍 뜨고, 서쪽에 있을 수록 해가 더 늦게 뜬다. 이와 같은 경우 영국의 시간대인 GMT에 +01 혹은 -01 과 같이 시차를 붙여서 표현하게 된다. 한국은 영국보다 시간대가 9시간을 앞서고 있기에 +09가 붙는다. 그러나 태양시는 지구 자전속도에 영향을 받기 때문에 상대적..
화면 개발 시 주로 Vuejs를 사용했는데 실제로 부딪혀보며 사용하다가 모르는 게 있으면 그 때 그 때 구글링하여 학습하곤 했다. 그러다 Vuejs 문서를 함께 보는 스터디에 참가했는데 문서를 전체적으로 훑고나니 몰랐던 방식도 많았고 잘못된 사용 방식도 많았다는 것을 알았다. 그 뒤로 무언가 학습할 때 먼저 사용해보고 어느정도 맛을 봤다 싶으면 시간을 내어 문서를 처음부터 끝까지 정독하려고 한다. 이번에 개인 프로젝트 및 그룹 프로젝트를 진행하면서 Next.js를 몇 번 사용하게 되었다. 그리고 이제 Next.js를 의도에 맞게 효율적으로 사용하기 위해 문서를 읽고 이 곳에 기록해보려고 한다. Next.js는 리액트를 기반으로 만든 프레임워크이다. 그리고 리액트는 자바스크립트 라이브러리로써 UI를 구축하..