과거의 내가 미래의 나에게

웹에 대해서 공부해야겠다 생각한 이래로 DNS에 대해서는 따로 살펴보았고, 이제 HTTP에 대해서 살펴보려 한다. DNS 처럼 인터넷에서 하나하나 찾아보기엔 양이 방대하여 책을 구매해서 해당 책을 기준으로 하여 학습할 것이다. 이번 글에서는 HTTP를 공부하기 전에 그와 연관된 지식에 대해서 배워보겠다. 이 블로그에서 적을 HTTP 학습글 시리즈는 "그림으로 배우는 HTTP&Network Basic" 이라는 책을 기반으로 했다. 해당 책은 아직 HTTP 2.0도 나오지 않은 시점에서 서술한 책이므로 다소 최신과 먼 정보가 있을 수 있으므로 참고하자. HTTP란 HyperText Transfer Protocol의 준말로 하이퍼텍스트는 문서(웹페이지)끼리 이동할 수 있도록 해주는 텍스트이며 프로..

현재 진행중인 프로젝트의 방대한 코드를 MFA 방식으로 나누기 위해 여러가지 방법을 알아보다 Iframe을 활용한 방식이 있음을 발견하여 iframe에 대해 공부할 필요성을 느껴서 이 글을 쓴다. HTML iframe이란 inline frame의 약자로, 웹 페이지 안에 또 다른 웹페이지를 보여주고자 할 때 사용한다. 사용 방법은 src 태그를 활용하여 원하는 주소를 연결시키면 된다. iframe을 사용한다면 새로운 컨텐츠를 쉽게 추가 할 수 있으며, 별도의 페이지 이동이 없으므로 사용자한테 더 풍부한 화면을 보여줄 수 있다. 하지만 HTML 코드량이 너무나도 방대해지고, 또한 iframe으로 삽입된 컨텐츠는 크롤링하지 못하는 검색엔진도 존재하기에 SEO 측면에서 좋지 않다. 이 밖에도 사용성에 불편함이..

결과의 변경 없이 코드의 구조를 재조정하는 리팩토링이라는 단계가 별도로 존재하는 만큼 코드를 이쁘고 가독성있게 짜는 것은 중요하다. 많은 개발자들이 리팩토링 단계가 중요하다는 것을 알고 또 이를 위해 많은 공부를 한다. 이번에 내가 클린코드 책을 읽은 이유 또한 좀 더 나은 코드를 짜기 위해서였다. 아직 책을 완독하지는 못하였지만 책을 읽고 생각하게 되었던 점을 정리해서 글로 옮겨본다. 클린 코드는 왜 필요한가? 우리는 코드가 효율적으로 돌아가도록 그리고 최적화 할 수 있도록 여러가지 기법을 사용하고 또 그러한 환경을 마련하기 위해 많은 노력한다. 하지만 코드를 깔끔하게 짜고 정리하는 것은 컴퓨터가 코드를 이해하는 속도에 관한 것이나 혹은 최적화 하는 것과는 약간 결이 다른 작업이라 생각한다. 클린 코드..

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를 구축하..

한 프로그램을 만들고 그 서비스를 널리 알리기 위해서는 도메인 주소가 필요할 것이다. 도메인을 파는 업체에서 도메인을 구입함으로써 특정 DNS 서버에 해당 도메인을 입력시켰으면, 이제 그 도메인이 어떤 IP 주소와 매핑되는지 등 도메인에 대한 설정을 해야할 것이다. 이와 관련하여 이번 글에서는 도메인에 대한 설정 중 하나인 DNS Record에 대해 알아보겠다. DNS Record란 DNS 서버는 여러가지 일을 하지만 그 중에 하나는 도메인에 대한 정보를 저장하는 것이다. 어떤 하나의 도메인을 DNS 서버에 등록하고 그에 관한 정보를 기록해둘 것인데 이러한 도메인에 대한 정보들을 DNS Record라고 한다. 결국 DNS Record는 DNS 서버에 저장된 하나의 도메인에 대한 정보 조각들이라 할 수 있..