티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

개발의 올바르지 않은 용례
검색하기
블로그 홈

블로그 홈

개발의 올바르지 않은 용례

usage.tistory.com/m
신고

개발 못하는 학생의 공부 노트

구독자
21
방명록 방문하기
구독하기

주요 글 목록

  • TanStack-Query 효율적으로 활용하기 이 글의 코드는 Tanstack-Query V4 코드를 기준으로 작성되었습니다.   들어가며TanStack Query (전 React-Query)는 클라이언트에서 서버 상태를 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 대표적으로 캐싱, 자동 업데이트, 로딩과 에러 등의 통신 상태에 관련된 추상화 된 인터페이스들을 제공하는데, 그 기능들이 굉장히 강력하고 편리해서 프론트엔드 생태계 전반적으로 널리 사용되는 인기있는 라이브러리가 되었습니다. 오늘은 이 TanStack Query가 지원하는 기능들을 통해 프로젝트에서 유용하게 활용했던 몇 가지 방법에 대해 정리하려 합니다.  쿼리 무효화 (Query Invalidation)캐시된 데이터를 강제로 갱신하기 위해 refetch() 를 사용하는 방법도 있지만.. 공감수 1 댓글수 0 2025. 3. 4.
  • 간단하게 넘어가는 2024 회고 여기에는 다른 내용으로 추가로 적어볼까 했는데,올해 회고는 감정회고에 남겼던 2024 회고로 대체한다.  2024 회고추운 연말blog-usageness.vercel.app  정리하고 싶었던 말들은 위 링크에 모두 적어두어서, 기술 블로그에는 액션 플랜 정도만 함께 남겨두겠다.  올해의 액션 플랜새롭게 배운 기술적인 내용들은 블로그에 정리하기사이드 프로젝트 한 달에 한 번은 업데이트 해주기꾸준히 러닝하기 - 단거리 마라톤 참여해보기달마다 회고하기 어느덧 2년차가 됐으니, 2025년에도 힘내서 많은 일들을 해보자! 공감수 2 댓글수 4 2025. 1. 20.
  • 타입 안정성을 위한 as unknown as Type as 타입스크립트를 사용하면 가끔 as를 사용한 타입 단언을 해야 할 때가 있습니다.보통 아래처럼, 컴파일러의 자연스러운 타입 추론이 불가능한 경우 강제로 타입을 지정해줄 때 사용합니다. // 1. DOM 요소const element = document.querySelector("#App") as HTMLInputElement;// 2. API의 응답 값const data = getNativeAPIValue() as APIResponse;// etc...  이런 케이스에서는 개발자가 타입을 지정해주고, 타입 시스템은 개발자를 신뢰합니다.단언은 타입 시스템을 무시 할 정도로 강력하지만, 그만큼 휴먼 에러를 일으킬 가능성이 있기 때문에타입 시스템이 정상적으로 동작할 수 없는 특수한 상황에만 사용하는게 좋습니.. 공감수 3 댓글수 1 2024. 10. 21.
  • Impression log 사용하기 들어가며사용자의 행동을 추적하고 분석하기 위해서는 유저의 활동 기록을 남기는 작업이 필수적인데요, 이를 로깅이라고 합니다. 제품을 개발하는 입장에서는 이러한 로깅을 통해 프로그램의 품질을 개선하고 예기치 않게 발생하는 문제를 해결하는 데 도움을 받을 수 있습니다. 프론트엔드에서 주로 기록하는 로그는 크게 세 가지입니다. 페이지 뷰(page view), 클릭(click), 임프레션(impression) 이 바로 그것인데요. 오늘 글에서 다뤄볼 주제는 임프레션 로그입니다. 이 글에선 임프레션 로그가 무엇이고 React 기반의 프론트엔드 환경에서 어떻게 구현할 수 있을지, 그리고 구현 중에 마주할 수 있는 문제들과 그 해결 방법에 대해 알아보겠습니다.   임프레션 로그(Impression Log)임프레션 로그.. 공감수 0 댓글수 1 2024. 7. 1.
  • '코딩 자율학습 제로초의 자바스크립트 입문' 도서 리뷰 본 포스트는 길벗 24차 개발자 리뷰어로 선정되어 도서를 제공받아 작성한 글입니다.      기술 도서 리뷰를 작성하는건 오랜만인데, 우연찮게 좋은 기회를 받아 작성할 기회가 생겼습니다.  이번에 리뷰할 도서는 제로초(zerocho) 라는 이름으로 각종 강의와 집필 활동을 하고 계신 조현영님의 "코딩 자율학습 제로초의 자바스크립트 입문" 입니다. 이전에도 제로초님의 강의나 책을 읽으며 공부했던 적이 있었는데, 마침 최신 도서를 리뷰하게 되어 기대가 많이 되었습니다. 약 2주간 책을 읽으며 느꼈던 감상을 결론부터 말하자면, 프로그래밍 입문자들을 대상으로 추천하고 싶은 책입니다. 다른 언어를 충분히 익히신 상태에서 자바스크립트를 새로 배워보려는 분들보다는, 프로그래밍 자체를 처음 시작하시는 분들에게 적합하다.. 공감수 2 댓글수 2 2024. 5. 15.
  • React 19? 18.3 먼저 살펴보기 들어가며 지난달 25일, React 19가 공개되었습니다. 여러가지 기능이 추가된 버전을 사용할 수 있게 되었는데, 기존 프로젝트에서 곧바로 버전을 올리기엔 고려해야 할 점들이 꽤 존재합니다. 18에서 19로 업그레이드를 생각하는 사용자들을 위해, React 18.3이 함께 공개 되었습니다.    18.3 은 이전과 기능상으로 완전히 동일하지만, 19에서 deprecated된 API들에 대한 경고가 추가되었습니다. 리액트 팀은 버전 업 이전에 먼저 적용해보고, 충분한 수정 작업을 거친 뒤 올리기를 권장하고 있네요. 이 포스트에서는 개인적으로 중요하다고 생각되는 변경점들을 일부만 살펴 볼 예정이고, 전체 변경 내용은 React 19 업그레이드 가이드 문서나 릴리즈 노트를 참고해주세요.   변경점문자열 re.. 공감수 3 댓글수 0 2024. 5. 5.
  • classname으로 스타일 간결하게 관리하기 React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classnames 라이브러리를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다. 설치 // npm을 사용한다면, npm install classnames // yarn을 사용한다면, yarn add classnames 먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다. 적용 이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다. import * as styles form './style.css.ts'; exp.. 공감수 0 댓글수 0 2024. 3. 24.
  • useEffect 내부에서는 기명함수를 사용하자 useEffect useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로, 공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다. 코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다. 이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다. 따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다. 이 상태에서, 임의로 오류를 발생시켜 보겠습니다. Uncaught Error: Error occurred! at (/src/App.jsx?t=1710664770335:24:11) 에러가 발생한 위치의 stack trace에 at 뒤로 파일의 .. 공감수 0 댓글수 0 2024. 3. 17.
  • Redux와 RTK로 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보.. 공감수 0 댓글수 0 2024. 3. 3.
  • 2024년도 신입의 취업 후기 들어가며 23년도 회고를 작성한지 얼마 되지 않았는데 좋은 일이 생겨 후기를 작성하게 되었다. 겨울동안 줄기차게 진행했던 취업 준비를 마무리하고, 2월부터 프론트엔드 개발자로 커리어를 시작하게 되었다. (이 글을 쓰는 지금이 출근 3일차의 따끈따끈한 신입인 상태다!) 사진에는 모두 담지 못했지만, 취업까지의 과정이 쉽지만은 않았다. 우테코를 수료하고 학업을 마무리하러 돌아오긴 했지만, 동시에 간간히 개인 프로젝트를 진행하고 이력서를 넣으며 취업의 문을 두드리곤 했었다. 그 결과, 지금까지 47번의 지원 중 2곳의 합격을 받아 최종적으로는 현재 캐치테이블에 신입 프론트엔드 개발자로 합류하게 되었다. 그동안 취업을 위해 어떻게 준비했었는지 잊어버리기전에 이 자리를 빌려 간단히 기록해두려고 한다. 나의 장점은.. 공감수 14 댓글수 17 2024. 2. 8.
  • Cookie와 Web Storage (Local Storage와 Session Storage) 서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다. 현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 웹 스토리지 API를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해서 간단히 알아보겠습니다. 쿠키 쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송.. 공감수 2 댓글수 1 2024. 1. 24.
  • good bye, 2023! 2023년이 시작한게 엊그제 같은데 벌써 끝이라니... 아직 달리 한 것도 없는 것 같은데 오늘이 2023년의 마지막 날이라는게 믿기지가 않는다. 분명 이것저것 했을텐데, 막상 적어보려하니 기억이 흐릿해지는게 적어두지 않았다면 큰일날 뻔 했겠구나 싶다. 올 한 해를 후회없이 매조지기 위해 했던 것들을 정리해보자. 블로그 기록하지 않는 지식은 휘발된다. 무엇인가를 배우면 개인 노션에 적고, 적고, 또 적었다. 그 중에 어느정도 내용이 되는 것들은 블로그에 옮겼는데, 그 비율이 절반정도 된 것 같다. 올해는 블로그에 총 53개의 글을 남겼다. (현재 회고글까지 포함해서) 이 회고가 올라간 티스토리 블로그에 50개, 직접 만들어서 운영중인 회고 블로그에 3개. 블로그에는 말로 표현하기 어려운 애착이 가서 계속.. 공감수 3 댓글수 10 2023. 12. 31.
  • 주소창에 google.com을 입력하면 들어가며 "브라우저 주소창에 google.com을 입력하면 어떤 일이 일어날까요?" 위 질문은 기술 면접에 종종 나오는 단골 주제로 굉장히 유명합니다. "개발자 신입 기술 면접 대비" 와 같은 주제의 글에서는 빠지지 않고 등장하는 편인데, 브라우저 렌더링에 대해서만 정리되어 있거나, 해당 서버에 접근하는 과정만 있는 글이 많길래 이번 포스트에서는 두 내용을 한 번에 담아보았습니다. 과연 브라우저에 페이지 주소를 입력하면 어떤 일이 일어나는지 시간 순서에 따라 알아보겠습니다. 데이터 받아오기 브라우저에 특정 사이트의 주소를 입력하게 되면 잠깐의 시간 뒤에 해당 사이트가 나타납니다. 우리는 이 과정을 두 가지로 분리해 볼 수 있습니다. 데이터를 받아오는 과정 받아온 데이터를 띄워주는 과정 먼저 데이터를 받아.. 공감수 3 댓글수 1 2023. 12. 30.
  • Zustand로 전역 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법에는 대표적으로 Context API가 있습니다. 단방향의 데이터 흐름을 해치지 않으면서도, Provider를 통해 각 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다. React에서 공식적으로 지원하는 기능이기에 공식 문서에서도 이 방법을 추천하고 있습니다. 아직 Context API에 대해 잘 모른다면 아래 포스트를 참고해주세요. Context API 개념 잡기 그러나 Context API를 직접 사용하지 않고 서드 파티 라이브러리를 이용해 전역 상태를 관리하는 방법도 있습니다. 대표적으로 Zustand, Recoil, Jotai 등이 있는데요, 오늘은 Zustand를 사용하는 방법과 주의할 점들을 알아보도록 하겠습니다. 구성 먼저 사용하는 패키지.. 공감수 0 댓글수 1 2023. 12. 20.
  • 자바스크립트로 비동기 처리하기 : Generator 들어가며 지난 시간까지 자바스크립트에서 효과적인 비동기 작업을 위해 사용하는 Promise 와 Async / Await 키워드에 대해 알아보았는데, 여기에 이어 오늘은 Generator 까지 한 번 공부해보겠습니다. Generator는 흐름상 async / await 과 함께 소개되는 것이 자연스러웠으나, 이전 글은 Promise에서 async / await으로 이어지는 흐름에 집중했던 글이라 간단히만 짚고 넘어가게 되었습니다. 거기에 따로 담고 싶은 내용도 있었던터라 이렇게 포스팅 하나를 할애하게 되었네요. 바로 시작하겠습니다. Generator란? Generator는 실행 중 일시 정지와 재개가 가능한 함수로, 순서에 따른 동작들을 담기에 용이한 데이터 구조를 갖고 있습니다. function* gen.. 공감수 1 댓글수 0 2023. 11. 28.
  • 우아콘 2023 후기 우아한형제들의 기술 공유 컨퍼런스인 우아콘 2023이 11월 15일 삼성역 그랜드 인터컨티넨탈 서울 파르나스 5층에서 열렸습니다. 그동안 유튜브 생중계를 통해 진행되었던 우아콘의 첫 오프라인 컨퍼런스였는데, 그래서인지 당일 현장에서도 엄청나게 많은 사람들이 모인 풍경을 볼 수 있었습니다. 특히 컨퍼런스 시작 시간인 10시가 지나서도 입장 대기 줄이 길게 늘어졌었는데, 얼마나 많은 분들이 참여해주셨는지 가늠할 수 있었던 장면이 아닐까 싶습니다. 요즘 핫하게 쓰이고 있는 개발 기술들이나 배달이라는 도메인, 나아가 우아한형제들이라는 회사 자체에 관심 있으신 분들이라면 그냥 놓치기 아까운 빅 이벤트인만큼 더욱 뜨거운 관심을 보여주신것 같습니다. 이번 우아콘에 대한 더 자세한 소개는 배민다움에서 확인하실 수 있습.. 공감수 7 댓글수 1 2023. 11. 17.
  • 자바스크립트로 비동기 처리하기 : Async / Await 들어가며 지난 포스트인 자바스크립트로 비동기 처리하기 : Callback 과 Promise 와 이어지는 글입니다. 자바스크립트는 Callback에 이어 Promise라는 객체를 맞이하며 좀 더 편리하고 안전한 방식으로 비동기 작업을 처리할 수 있게 되었습니다. 이번 시간에는 비동기를 처리하는 또 다른 키워드인 async / await 에 대해 알아보겠습니다. async / await async / await은 ES8에 등장한 키워드로, 비동기 작업들을 마치 동기 작업을 처리하는 것과 비슷한 스타일로 보이도록 만들어준다는 특징이 있습니다. 가독성과 사용성을 높이기 위해 고안된 키워드인만큼, 사용 방법도 어렵지 않습니다. 비동기 작업을 감싸고 있는 함수에 async를, 해당 비동기 작업(promise 객체).. 공감수 1 댓글수 7 2023. 11. 9.
  • Next.js 13에서 Kakao 로그인 처리하기 with Firebase (2) 들어가며 지난 글에서는 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고, 카카오 서버와 통신까지 진행해보았습니다. 이번 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다. Firebase 연동 Firebase를 이용하기 위해서는 먼저 프로젝트를 등록하는 절차가 필요합니다. Firebase Console에 접속합니다. 최근 프로젝트의 "프로젝트 추가" 버튼을 눌러 새 프로젝트를 만듭니다. 구글 애널리틱스는 반드시 설정할 필요는 없습니다. 그냥 넘어가셔도 구현에 문제는 없으니 구성하지 않으셔도 좋습니다. 프로젝트가 생성되면 위와 같은 화면으로 들어올 수 있습니다. 바로 우리 서비스에 Firebase를 추가해봅시다. 우리는 웹 서비스이므로, 버튼을 눌러 다.. 공감수 0 댓글수 0 2023. 11. 2.
  • 자바스크립트로 비동기 처리하기 : Callback과 Promise 들어가며 자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 쓰레드 언어입니다. 따라서 모든 작업은 동기적으로 처리되는것을 기본으로 합니다. 그러나 실제로는 네트워크 통신 등 비동기적인 처리가 꼭 필요한 상황들이 많기 때문에, 자바스크립트는 런타임의 도움을 받아 이러한 비동기 처리를 지원해왔습니다. 여기서의 런타임은 브라우저나 Node.js와 같은 실행 환경을 의미하는데, 브라우저의 경우 Web API라는 인터페이스를 지원하여 이러한 기능들을 수행할 수 있는 런타임에 접근할 수 있습니다. 정확히 어떤 과정을 거쳐 비동기 작업이 진행되는지는 아래 포스팅에 정리해두었으니, 아래 내용을 읽기 전 확인해보시면 이해에 도움이 될 것 같습니다. 싱글 쓰레드 Javascript의 비동기적 동작 오늘 살펴볼 것.. 공감수 0 댓글수 3 2023. 10. 24.
  • Next.js 13에서 Kakao 로그인 처리하기 with Firebase (1) 들어가며 오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다. 먼저 로그인을 적용하는 과정을 크게 한 번 살펴보겠습니다. 크게 보면 카카오 로그인, 회원 확인 및 가입, 서비스 로그인의 세 단계로 나뉘어집니다. 이 포스트에서 알아볼 것은 step1의 카카오 로그인 부분입니다. 서비스 등록 카카오 API를 사용하기 위해서는 먼저 사용할 서비스를 등록해야 합니다. Kakao Developers에서 "애플리케이션 추가하기" 를 통해 서비스를 등록해줍니다. 환경 설정 서비스가 등록되었다면, [요약 정보] 메뉴의 [앱 키] 에서 서비스 인증에 사용될 키.. 공감수 2 댓글수 0 2023. 10. 16.
  • Next.js Page Router와 App Router Next.js 13 버전에서 새롭게 공개된 App Router 방식은 몇 번의 업데이트를 거쳐 현재(포스팅 작성 시점 기준 13.5) 는 꽤 높은 수준의 안정성을 가지게 되었습니다. 저도 작은 프로젝트들에서 App Router 방식의 Next.js 프로젝트를 새로 시작하거나 마이그레이션 해보며 직접 사용해 보았는데, Emotion 호환 정도를 제외하곤 안정성 면에서 큰 문제를 느끼지 못했습니다. (MSW에 대한 문제도 있다고는 들었지만 직접 확인해보지는 못했습니다.) 위처럼 몇 가지 단점들이 존재하더라도 App Router는 그것을 감수하고 사용할만큼 충분히 매력적인 선택지입니다. 이번 포스팅에서는 App Router가 등장하게 된 배경과 이유, Page Router와는 어떤 부분들이 달라졌는지에 대해 .. 공감수 0 댓글수 0 2023. 10. 8.
  • Github에 2FA 설정하기 들어가며 오는 2023년 말부터 Github를 이용하려면 2FA(2단계 인증, Two-Factor Authenication)를 반드시 설정해야합니다. 2FA 자체는 이전에도 지원했던 기능이지만 Github 정책의 변경으로 선택에서 필수가 되어, 해당 기능을 사용하지 않는 유저는 로그인시 일주일간의 적용 유예 기간을 알림을 보게 됩니다. 당장은 건너뛸 수 있지만 일주일 이후에는 Github의 기능을 정상적으로 사용하기 어려워보이니 이참에 적용해보겠습니다. 2FA 적용하기 먼저 인증용 기기와 Github 계정을 연동하는 것부터 시작합니다. PC라면 브라우저 확장프로그램이나 모바일 앱등을 이용하여 인증 기기를 추가할 수 있는데, 저는 앱을 이용하겠습니다. 앱에서 QR 코드를 스캔하여 토큰을 발급받고, Veri.. 공감수 0 댓글수 0 2023. 9. 30.
  • Next.js로 metadata 구성하기 얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 굉장히 중요한 요소가 되었습니다. 그 중에서도 페이지가 갖고 있는 메타데이터(Metadata)는 SEO에 있어 가장 중요한, 빼놓을 수 없는 요소입니다. 그러나 우리가 주로 사용하던 React.js의 일반적인 CSR 방식으로는 이러한 수요를 만족하는데 한계가 있었습니다. 그러한 이유로 SEO에 유리한 Next.js를 선택하게 되었는데, 오늘 포스팅에서는 Metadata에 대해 알아보고 이를 통하여 어떻게 SEO를 향상시킬 수 있는지 알아보겠습니다. SEO SEO 수준을 결정하는 .. 공감수 0 댓글수 1 2023. 9. 24.
  • 오픈 소스 라이센스에 대해 (Open Source License) 소프트웨어 개발을 직업으로 하고 있는 사람들이라면 이미 수많은 오픈 소스 라이브러리를 사용했던 경험이 있을겁니다. 시중에는 훌륭한 퀄리티의 오픈 소스 프로그램들이 무료로 배포되고 있기 때문에, 오픈 소스에 대한 경험 자체는 개발자가 아니더라도 한 번쯤은 갖고 있기 마련인데요. 오늘은 오픈 소스에서 빠질 수 없는 친구인, 라이센스에 대해 알아보려고 합니다. 오픈 소스 프로그램 오픈 소스 소프트웨어란 소스 코드가 공개되어 누구든 특별한 제한 없이 그 코드를 보고 사용할 수 있는 라이센스를 만족하는 소프트웨어를 통칭합니다. (wikipedia - open source software) 대표적으로 응용 프로그램에는 개발자들이 사랑해 마지 않는 IDE인 이클립스(농담입니다)나 버전 관리 프로그램인 Git, 가장 .. 공감수 1 댓글수 0 2023. 9. 17.
  • Cloudflare로 https 적용하기 지난 인터넷 프로토콜 HTTP와 HTTPS 포스트에서는 https가 무엇이며, 어떤 역할을 하는지에 대해 알아보았습니다. 오늘은 운영중인 사이트에 실제로 https 연결을 적용해보는 방법에 대해 알아봅니다. 적용 방법 https는 인증과 암호화를 통해 연결의 보안성과 무결성을 확보합니다. 이때 필요한 것이 바로 인증서인데, 가장 안전한 방법으로는 신뢰할 수 있는 기관이 발급해주는 인증서를 사용하는 방법이 있습니다. 여기서 말하는 신뢰할 수 있는 기관이란 국제적으로 인정받은 전문 인증서 발급기관으로, 대표적으로는 GeoTrust나 GlobalSign 등이 있습니다. 이러한 기관에서 발급 받은 인증서는 기관 차원에서 인증서를 보증한다는 장점과, 관리를 위한 전문가가 존재한다는 장점이 있지만 개인이 사용하기에.. 공감수 0 댓글수 0 2023. 9. 10.
  • 인터넷 프로토콜 HTTP와 HTTPS 오늘은 네트워크 기본 지식이자 면접 단골 질문 주제이기도 한 HTTP와 HTTPS에 대해 정리해보겠습니다. TCP/IP란? HTTP와 HTTPS에 대해 알기 위해서는, TCP/IP의 개념부터 알아야합니다. 컴퓨터가 네트워크 장비나 다른 컴퓨터와 통신하기 위해서는 반드시 서로 같은 방법을 사용하여 통신해야 합니다. 사람끼리의 의사소통에서도 서로 같은 언어를 사용해야 제대로 된 의미를 전달할 수 있겠죠? 사는 지역이 다르고, 성별이나 나이가 달라도, 심지어 국적이 다르더라도 같은 언어를 사용하는 사람들끼리는 소통이 가능합니다. 이는 컴퓨터도 마찬가지입니다. 지금 주위를 둘러보면 데스크톱이나 노트북, 스마트폰처럼 일반적으로 많이 사용하는 개인용 컴퓨터나, 스위치 장비나 게이트웨이 같은 네트워크 장비끼리들도 통.. 공감수 0 댓글수 0 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(.. 공감수 0 댓글수 0 2023. 8. 22.
  • solved.ac Grand Arena #1 참여 후기 문제 리뷰나 해설이 아닌 정말 짤막한 후기입니다. 정해가 궁금하신 분들은 아래 링크를 참고해주시기 바랍니다. solved.ac Grand Arena #1 에디토리얼(해설) 바로가기 지난 일요일엔 solved.ac에서 열리는 Grand Arena #1가 처음으로 개최되었습니다. 기존에는 해결한 문제들로만 레이팅을 매겼었는데요. 여기에 더해 직접 개최하는 대회를 통해 따로 레이팅을 매겨주는 시스템이 추가하였고, 이번이 그 첫 번째 대회였습니다. 마치 codeforce의 round와 유사한 느낌인데, 대신 반례를 통해 다른 참가자들의 코드를 공격하는 hack 단계가 없는 순수한 문제 풀이 대회입니다. 평소에 대회 같은게 열리면 기웃거리고, solved.ac 주는 배지들이 갖고 싶어서 한 두 문제 정도 풀고 나.. 공감수 1 댓글수 0 2023. 8. 8.
  • 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 공감수 0 댓글수 0 2023. 8. 5.
  • 좌충우돌 블로그 Next.js로 마이그레이션하기 저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로.. 공감수 2 댓글수 0 2023. 7. 28.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.