본문 바로가기

분류 전체보기211

Cloudflare로 https 적용하기 지난 인터넷 프로토콜 HTTP와 HTTPS 포스트에서는 https가 무엇이며, 어떤 역할을 하는지에 대해 알아보았습니다. 오늘은 운영중인 사이트에 실제로 https 연결을 적용해보는 방법에 대해 알아봅니다. 적용 방법 https는 인증과 암호화를 통해 연결의 보안성과 무결성을 확보합니다. 이때 필요한 것이 바로 인증서인데, 가장 안전한 방법으로는 신뢰할 수 있는 기관이 발급해주는 인증서를 사용하는 방법이 있습니다. 여기서 말하는 신뢰할 수 있는 기관이란 국제적으로 인정받은 전문 인증서 발급기관으로, 대표적으로는 GeoTrust나 GlobalSign 등이 있습니다. 이러한 기관에서 발급 받은 인증서는 기관 차원에서 인증서를 보증한다는 장점과, 관리를 위한 전문가가 존재한다는 장점이 있지만 개인이 사용하기에.. 2023. 9. 10.
인터넷 프로토콜 HTTP와 HTTPS 오늘은 네트워크 기본 지식이자 면접 단골 질문 주제이기도 한 HTTP와 HTTPS에 대해 정리해보겠습니다. TCP/IP란? HTTP와 HTTPS에 대해 알기 위해서는, TCP/IP의 개념부터 알아야합니다. 컴퓨터가 네트워크 장비나 다른 컴퓨터와 통신하기 위해서는 반드시 서로 같은 방법을 사용하여 통신해야 합니다. 사람끼리의 의사소통에서도 서로 같은 언어를 사용해야 제대로 된 의미를 전달할 수 있겠죠? 사는 지역이 다르고, 성별이나 나이가 달라도, 심지어 국적이 다르더라도 같은 언어를 사용하는 사람들끼리는 소통이 가능합니다. 이는 컴퓨터도 마찬가지입니다. 지금 주위를 둘러보면 데스크톱이나 노트북, 스마트폰처럼 일반적으로 많이 사용하는 개인용 컴퓨터나, 스위치 장비나 게이트웨이 같은 네트워크 장비끼리들도 통.. 2023. 9. 3.
TDD 스터디 #4 - 화폐 예제 (유연한 통화 구현) 지난 포스트에서 이어집니다. 저번 시간까지 우리는 Dollar 하나만 존재했던 돈의 단위를 Dollar와 Franc 두 가지로 나누었고, Money 클래스를 통해 공통 부분을 상속받도록 하였습니다. 이번 시간에는 좀 더 유연한 통화 클래스를 구현해 보도록 하겠습니다. Dollar vs Franc 우선 지난 시간의 마지막 테스트 코드를 보겠습니다. example.test.js it("equals() 테스트", () => { expect(new Dollar(5).equals(new Dollar(5))).toBe(true); expect(new Dollar(5).equals(new Dollar(6))).toBe(false); expect(new Franc(5).equals(new Franc(5))).toBe(.. 2023. 8. 22.
solved.ac Grand Arena #1 참여 후기 문제 리뷰나 해설이 아닌 정말 짤막한 후기입니다. 정해가 궁금하신 분들은 아래 링크를 참고해주시기 바랍니다. solved.ac Grand Arena #1 에디토리얼(해설) 바로가기 지난 일요일엔 solved.ac에서 열리는 Grand Arena #1가 처음으로 개최되었습니다. 기존에는 해결한 문제들로만 레이팅을 매겼었는데요. 여기에 더해 직접 개최하는 대회를 통해 따로 레이팅을 매겨주는 시스템이 추가하였고, 이번이 그 첫 번째 대회였습니다. 마치 codeforce의 round와 유사한 느낌인데, 대신 반례를 통해 다른 참가자들의 코드를 공격하는 hack 단계가 없는 순수한 문제 풀이 대회입니다. 평소에 대회 같은게 열리면 기웃거리고, solved.ac 주는 배지들이 갖고 싶어서 한 두 문제 정도 풀고 나.. 2023. 8. 8.
리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5.
좌충우돌 블로그 Next.js로 마이그레이션하기 저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로.. 2023. 7. 28.