https://johnyworld.github.io 프론트엔드 개발자 조니의 블로그입니다. ko 김재환 Fri, 21 Aug 2026 07:08:38 GMT https://johnyworld.github.io/post/%EB%B3%B5%EC%9E%A1%ED%95%9C%20z-index%20%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/%EB%B3%B5%EC%9E%A1%ED%95%9C%20z-index%20%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 안녕하세요. 월급쟁이부자들 커뮤니티 스쿼드에서 프론트엔드 개발을 담당하고 있는 로틴(김재환)입니다. 2024년에 월급쟁이부자들에 입사한 후, "쌓임 맥락"과 관련된 여러 문제들을 경험하고 해결했던 과정을 이 글에서 소개하고자 합니다. Thu, 26 Jun 2025 00:00:00 GMT 에세이 https://johnyworld.github.io/post/z-index%20%EB%A1%9C%20%EA%B3%A0%ED%86%B5%EB%B0%9B%EC%A7%80%20%EC%95%8A%EB%8A%94%20%EB%B0%A9%EB%B2%95 https://johnyworld.github.io/post/z-index%20%EB%A1%9C%20%EA%B3%A0%ED%86%B5%EB%B0%9B%EC%A7%80%20%EC%95%8A%EB%8A%94%20%EB%B0%A9%EB%B2%95 MDN 문서는 쌓임 맥락을 다음과 같이 이야기하고 있습니다. 쌓임 맥락(Stacking context)는 뷰포트 또는 웹페이지를 향하고 있다고 가정한 사용자를 기준으로 가상의 z축을 따라 HTML 요소를 3차원으로 개념화한 것입니다. Thu, 07 Nov 2024 00:00:00 GMT 공부 https://johnyworld.github.io/post/%EC%9B%94%EA%B8%89%EC%9F%81%EC%9D%B4%EB%B6%80%EC%9E%90%EB%93%A4%EC%97%90%EC%84%9C%EC%9D%98%206%EA%B0%9C%EC%9B%94 https://johnyworld.github.io/post/%EC%9B%94%EA%B8%89%EC%9F%81%EC%9D%B4%EB%B6%80%EC%9E%90%EB%93%A4%EC%97%90%EC%84%9C%EC%9D%98%206%EA%B0%9C%EC%9B%94 월급쟁이부자들(이하 월부)은 유튜브를 통해 이름만 알고 있는 정도였다. 부동산에 관심이 있지는 않았기 때문에 이 회사에 대해서도 처음에는 큰 관심은 없었다. 그러던 어느 날, 개발자를 채용하고 있다는 공고를 봤고 적어도 이름은 들어봤던 곳이라서 궁금증이 생겨 회사에 대해서… Mon, 12 Aug 2024 00:00:00 GMT 에세이 https://johnyworld.github.io/post/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%ED%83%AD%EC%9D%84%20%EB%8B%AB%EC%95%84%EB%8F%84%20clean-up%20%ED%95%A8%EC%88%98%EA%B0%80%20%EC%8B%A4%ED%96%89%20%EB%90%98%EC%A7%80%EB%8A%94%20%EC%95%8A%EB%8A%94%EB%8B%A4 https://johnyworld.github.io/post/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%ED%83%AD%EC%9D%84%20%EB%8B%AB%EC%95%84%EB%8F%84%20clean-up%20%ED%95%A8%EC%88%98%EA%B0%80%20%EC%8B%A4%ED%96%89%20%EB%90%98%EC%A7%80%EB%8A%94%20%EC%95%8A%EB%8A%94%EB%8B%A4 채팅 기능을 구현하는 중 유저가 브라우저 탭을 닫는다면 해당 유저를 채널에서 내보내고 채팅에서 로그아웃 하도록 구현해야 했다. 나는 아무 생각 없이 useEffect의 clean-up 함수 내에 그러한 로직을 담았다. Fri, 19 Jan 2024 00:00:00 GMT 팁 https://johnyworld.github.io/post/Error%20Hiding%20%EC%9D%84%20%ED%94%BC%ED%95%98%EC%9E%90 https://johnyworld.github.io/post/Error%20Hiding%20%EC%9D%84%20%ED%94%BC%ED%95%98%EC%9E%90 부제 : RHF - handleSubmit 은 더이상 onSubmit 콜백 에러를 잡지 않는다. 이 글은 회사에 근무하고 있을 때 해결했던 일을 기록한 글입니다. 어느 날, 제출에 한 번 실패했던 폼 버튼의 로딩이 풀리지 않는 이슈를 겪었다. Tue, 05 Dec 2023 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%8F%84%20%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C%20%EB%A8%BC%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81%EB%90%9C%EB%8B%A4 https://johnyworld.github.io/post/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%8F%84%20%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C%20%EB%A8%BC%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81%EB%90%9C%EB%8B%A4 Next 13버전 이후 App Router 를 사용하게 되면, 서버 컴포넌트와 클라이언트 컴포넌트라는 개념을 마주하게 된다. "use client" 를 tsx 파일 최상단에 선언하면 클라이언트 컴포넌트를 사용할 수 있다. Thu, 30 Nov 2023 00:00:00 GMT 공부 https://johnyworld.github.io/post/%EB%8A%A6%EC%97%88%EC%A7%80%EB%A7%8C%20tailwind%20CSS%20%EB%A5%BC%20%EC%8D%A8%EB%B4%A4%EB%8B%A4 https://johnyworld.github.io/post/%EB%8A%A6%EC%97%88%EC%A7%80%EB%A7%8C%20tailwind%20CSS%20%EB%A5%BC%20%EC%8D%A8%EB%B4%A4%EB%8B%A4 의뢰를 받아 모 서비스의 프로젝트 기초를 만들고 있는데, 그걸 하면서 tailwind CSS 를 처음으로 사용해봤다. 약 3년 전부터 이것의 존재는 알고 있었는데, 당시에는 CSS 이름은 의미가 있어야 한다라는 믿음이 있었기에 클래스명에 단순히 인라인 방식으로 스타일만 나열… Tue, 14 Nov 2023 00:00:00 GMT 에세이 https://johnyworld.github.io/post/css%20module%20%EB%A1%9C%20%EC%83%9D%EC%84%B1%EB%90%98%EB%8A%94%20classname%20%EC%9D%98%20prefix%20%EB%A5%BC%20%EB%B0%94%EA%BF%94%EB%B3%B4%EC%9E%90 https://johnyworld.github.io/post/css%20module%20%EB%A1%9C%20%EC%83%9D%EC%84%B1%EB%90%98%EB%8A%94%20classname%20%EC%9D%98%20prefix%20%EB%A5%BC%20%EB%B0%94%EA%BF%94%EB%B3%B4%EC%9E%90 Next (@^13) 에서 css module 을 사용하다보니, .SomeComponentsomeClassNamehash 이런 이름으로 생성되는 클래스 이름이 마음에 들지 않았다. Fri, 27 Oct 2023 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/css%20module%20%EC%82%AC%EC%9A%A9%EC%8B%9C%20%ED%83%80%EC%9D%B4%ED%95%91%20%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95 https://johnyworld.github.io/post/css%20module%20%EC%82%AC%EC%9A%A9%EC%8B%9C%20%ED%83%80%EC%9D%B4%ED%95%91%20%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95 typescript + nextjs 환경 기준이다. 아마 react 에서도 될 것 같긴 하다. style.module.scss 이런식의 확장자를 가지고 있는 css 모듈은 클래스네임의 중복을 방지해주기 때문에 유용하다. 이걸 사용하다보니 타이핑이 제대로 안돼서 불편을 겪었다. Fri, 27 Oct 2023 00:00:00 GMT 팁 https://johnyworld.github.io/post/Next%20JS%20%EC%8A%A4%ED%83%80%EC%9D%BC%20%EB%B2%88%EB%93%A4%20%EC%A4%91%EB%B3%B5%20%EC%9D%B4%EC%8A%88 https://johnyworld.github.io/post/Next%20JS%20%EC%8A%A4%ED%83%80%EC%9D%BC%20%EB%B2%88%EB%93%A4%20%EC%A4%91%EB%B3%B5%20%EC%9D%B4%EC%8A%88 이 글을 쓴 날짜 (2023년 10월 26일) 기준 Next JS 버전에 존재하는 이슈에 관한 이야기이다. Next 는 각 route 마다 css 번들을 생성해주고 있다. 덕분에 같은 컴포넌트의 스타일이 중복되어버리는 이슈가 있다. 아래 현상을 보자. Thu, 26 Oct 2023 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%9E%85%EB%A0%A5%20%ED%8F%BC%EC%9D%84%20%EA%B0%9C%EB%B0%9C%ED%95%A0%20%EB%95%8C%20%EC%A3%BC%EC%9D%98%ED%95%B4%EC%95%BC%20%ED%95%A0%20%EA%B2%83%EB%93%A4 https://johnyworld.github.io/post/%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%9E%85%EB%A0%A5%20%ED%8F%BC%EC%9D%84%20%EA%B0%9C%EB%B0%9C%ED%95%A0%20%EB%95%8C%20%EC%A3%BC%EC%9D%98%ED%95%B4%EC%95%BC%20%ED%95%A0%20%EA%B2%83%EB%93%A4 각 폼이 필수 값인지, 최대값, 최대길이, 최소값, 최소길이는 얼마나 돼야 하는지. 값의 타입이 무엇인지. 숫자의 경우 소수점이나 음수 입력을 허용할지 말지 등을 고려하자. validation 은 기획단에서 고려 되어야 할 사항이지만, 기획자가 놓칠 수 있다. Wed, 25 Oct 2023 00:00:00 GMT 팁 https://johnyworld.github.io/post/Referencing%20Values%20with%20Refs https://johnyworld.github.io/post/Referencing%20Values%20with%20Refs 컴포넌트가 어떤 정보를 "기억"하고 싶지만 새로운 렌더링을 발생시키게 하고싶지 않을 때 ref 를 사용할 수 있다. 컴포넌트에 ref를 어떻게 추가하는지 ref의 값을 어떻게 업데이트 하는지 ref가 state와 어떻게 다른지 ref를 어떻게 안정하게 쓰는지 리액트로부터… Mon, 06 Feb 2023 00:00:00 GMT 번역 https://johnyworld.github.io/post/You%20Might%20Not%20Need%20an%20Effect https://johnyworld.github.io/post/You%20Might%20Not%20Need%20an%20Effect https://beta.reactjs.org/learn/you-might-not-need-an-effect Effects는 React 패러다임으로부터의 탈출구이다. 그것들은 너를 리액트와 리액트가 아닌 외부 시스템과 싱크된 컴포넌트나 브라우저 DOM에서 한발짝 뒤로 물러나게… Mon, 30 Jan 2023 00:00:00 GMT 번역 https://johnyworld.github.io/post/Manipulating%20the%20DOM%20with%20Refs https://johnyworld.github.io/post/Manipulating%20the%20DOM%20with%20Refs Refs로 DOM 조작하기 리액트는 렌더 결과를 보여주기 위해 자동으로 DOM을 업데이트 한다, 그래서 컴포넌트는 돔을 자주 조작할 필요가 없다. 하지만, 종종 리액트에서 DOM 에 접근해야 할 수 있다. Fri, 13 Jan 2023 00:00:00 GMT 번역 https://johnyworld.github.io/post/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81 https://johnyworld.github.io/post/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81 웹 브라우저는 아래 구성요소들로 이루어져 있습니다. 렌더링 엔진이 어떻게 화면에 문서를 파싱하여 그리는지 과정에 대해 알아봅시다. 서버로 요청한 문서들이 클라이언트로 전달 받게 되면 렌더링엔진은 HTML문서를 파싱합니다. 그 순서는 아래와 같습니다. Fri, 04 Mar 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/Javascript%EC%9D%98%20This https://johnyworld.github.io/post/Javascript%EC%9D%98%20This 자바스크립트로 코드를 짜다보면 this가 의도하지 않은 객체를 가리키는 경우를 한번쯤은 겪게 되는 것 같습니다. 그래서 .bind() 메서드를 주로 사용하곤 합니다. 처음에는 스택 오버플로우 형님들이 그렇게 알려줘서 그렇게 쓰곤 했지만, 왜 그런지 개념을 더 명확히 하기 위해… Thu, 03 Mar 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/CORS https://johnyworld.github.io/post/CORS CORS는 Cross Origin Resource Sharing의 약자로, 서로 다른 Origin끼리 자원을 공유할 수 있게 하는 정책을 말합니다. 그렇다면 Origin은 무엇일까요? 위 그림은 URI의 각 부분의 명칭입니다. Thu, 03 Mar 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/Event%20Flow%20(Capturing%2C%20Bubbling%2C%20Delegation) https://johnyworld.github.io/post/Event%20Flow%20(Capturing%2C%20Bubbling%2C%20Delegation) 이벤트는 기본적으로 3단계 순서로 흐릅니다. Capturing Target Bubbling 브라우저는 기본적으로 모든 이벤트를 Bubbling으로 처리합니다. 하지만 개발자는 addEventListener 의 세번째 인자로 true 값을 부여함으로써 해당 이벤트를… Thu, 03 Mar 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/Peer%20Dependencies%20%EC%97%90%20%EB%8C%80%ED%95%98%EC%97%AC https://johnyworld.github.io/post/Peer%20Dependencies%20%EC%97%90%20%EB%8C%80%ED%95%98%EC%97%AC NPM package로 UI library를 개발하면서, 처음에는 중요한지 몰랐던 peer dependencies 에 대해서 공부하게 되었고, 공부한 내용들을 정리한다. peer dependencies 를 알아보기 위해서는 dependencies와 dev… Tue, 01 Mar 2022 00:00:00 GMT 공부 NPM https://johnyworld.github.io/post/React%20%EC%97%90%EC%84%9C%EC%9D%98%20List%EC%99%80%20key https://johnyworld.github.io/post/React%20%EC%97%90%EC%84%9C%EC%9D%98%20List%EC%99%80%20key 다들 아시다시피 리액트에서 리스트를 구현할 때 우리는 리스트 아이템의 가장 부모되는 jsx 태그에 key 속성을 부여한다. 안그러면 자꾸 에러가 뜬다. 위 코드에서 어떤 점이 잘못됐는지 바로 알아챘을 것이다. Thu, 24 Feb 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/Kakao%20OAuth2%20%EC%88%9C%EC%84%9C%EC%99%80%20%EA%B0%9C%EB%85%90%20%EC%A0%95%EB%A6%AC https://johnyworld.github.io/post/Kakao%20OAuth2%20%EC%88%9C%EC%84%9C%EC%99%80%20%EA%B0%9C%EB%85%90%20%EC%A0%95%EB%A6%AC 이 글에는 자세한 코드나 사용법은 다루지 않음. 틀린 부분이 있을 수 있음. 건강한 토론의 댓글은 환영 합니다. 그냥 내가 느낀 점 백엔드와 클라이언트 소스 코드가 분리되어있는 경우에는 SDK가 마음 편함. Tue, 08 Feb 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/React%EC%99%80%20Modal https://johnyworld.github.io/post/React%EC%99%80%20Modal @deprecated : 이 글에서 설명한 방법은 더 이상 사용하고 있지 않다. 조합형 UI 라이브러리인 Radix 의 모달이 여러가지 방법을 유연하게 제공하고 있다고 생각한다. 리액트에서 Modal을 띄울 때 여러가지 고민을 했었고 몇가지 패턴으로 Modal을 사용해보았다. Fri, 04 Feb 2022 00:00:00 GMT 에세이 https://johnyworld.github.io/post/%EC%8B%A4%ED%96%89%20%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%20(Execution%20Context) https://johnyworld.github.io/post/%EC%8B%A4%ED%96%89%20%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%20(Execution%20Context) 자바스크립트의 실행컨텍스트는 중요하다. 실행컨텍스트를 이해하면 Scope, Hoisting, Closure 를 함께 이해하기 쉬워지며, Event Loop와도 관련이 있다. 실행컨텍스트란 자바스크립트 코드가 실행되는 환경(맥락)을 말한다. Sat, 29 Jan 2022 00:00:00 GMT 공부 https://johnyworld.github.io/post/Clean%20Code%20%EB%A5%BC%20%EC%9D%BD%EA%B3%A0 https://johnyworld.github.io/post/Clean%20Code%20%EB%A5%BC%20%EC%9D%BD%EA%B3%A0 저자: 로버트 C. 마틴 드디어 이 책을 읽었다. 클린코드에 대해 관심이 없던 것은 아니고, 인터넷 상에는 클린코드에 대해 정리한 글들이 많았고, 비슷한 주제의 라는 책도 읽었었다. 하지만 책을 읽어야 더 깊고 많은 내용을 이해할 수 있을 것 같아서 책을 구입했다. Fri, 28 Jan 2022 00:00:00 GMT 독서 https://johnyworld.github.io/post/%EB%AC%B8%EC%84%9C%20%EC%A3%BC%EB%8F%84%20%EA%B0%9C%EB%B0%9C https://johnyworld.github.io/post/%EB%AC%B8%EC%84%9C%20%EC%A3%BC%EB%8F%84%20%EA%B0%9C%EB%B0%9C 프로젝트 초기단계. 빠르게 유저 반응을 보기 위해서 많은 스타트업에서는 빠르게 제품을 개발한다. 정리되지 않은 코드 위에 새로운 기능들이 얹혀지고, 또한 어떤 코드들은 더 이상 사용하지 않는 기능이 되어 한쪽 저편에 먼지처럼 자리하게 된다. Tue, 25 Jan 2022 00:00:00 GMT 에세이 https://johnyworld.github.io/post/%EC%82%BD%EC%A7%88%EC%9D%98%20%EC%A4%91%EC%9A%94%EC%84%B1 https://johnyworld.github.io/post/%EC%82%BD%EC%A7%88%EC%9D%98%20%EC%A4%91%EC%9A%94%EC%84%B1 익숙하지 않은 부분을 공부하면서, 다시금 초심으로 돌아가게 되고 수도 없이 삽질만 하게 된다. 그리고 삽질을 하다보면 스트레스도 많이 받게 되고 의욕도 떨어지게 된다. 주니어 초기 1년차 때는 보통 5시간, 8시간 정도 삽질을 했다. Mon, 27 Dec 2021 00:00:00 GMT 에세이 https://johnyworld.github.io/post/%EC%97%AC%EB%9F%AC%20github%20%EA%B3%84%EC%A0%95%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EA%B2%BD%EC%9A%B0%20ssh%20%EC%A0%91%EC%86%8D%EC%8B%9C%20Permission%20Denied%20%EC%9D%B4%EC%8A%88%EB%A5%BC%20%ED%95%B4%EA%B2%B0%20%ED%95%B4%EB%B3%B4%EC%9E%90. https://johnyworld.github.io/post/%EC%97%AC%EB%9F%AC%20github%20%EA%B3%84%EC%A0%95%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EA%B2%BD%EC%9A%B0%20ssh%20%EC%A0%91%EC%86%8D%EC%8B%9C%20Permission%20Denied%20%EC%9D%B4%EC%8A%88%EB%A5%BC%20%ED%95%B4%EA%B2%B0%20%ED%95%B4%EB%B3%B4%EC%9E%90. 한 노트북에서 회사계정과 개인계정 이렇게 2개의 깃헙 계정을 사용하고 있다. 2개를 사용하면서 두 계정 모두 ssh 로 접속을 설정 해두었는데, 그 중 하나의 계정에서 Permission Denied 가 발생하는 이슈에 대해서 다뤄보고자 한다. Mon, 13 Dec 2021 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/EC2%20%EC%83%9D%EC%84%B1%20%ED%9B%84%20Django%20%ED%99%98%EA%B2%BD%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/EC2%20%EC%83%9D%EC%84%B1%20%ED%9B%84%20Django%20%ED%99%98%EA%B2%BD%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 메모용으로 작성하는 글입니다. 아래 조건을 만족시킨 이후의 이야기 입니다. EC2 인스턴스를 생성 후 ssh 로 접속 후 프로젝트를 클론 받기 위해서 먼저 ssh로 로그인 할 수 있도록 키를 등록해야 한다. Ubuntu 20.04 LTS 버전에는 이미 git이 설치되어있다. Mon, 04 Oct 2021 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/%EC%B4%88%EC%83%9D%EC%82%B0%EC%84%B1%EC%9D%84%20%EC%9D%BD%EA%B3%A0 https://johnyworld.github.io/post/%EC%B4%88%EC%83%9D%EC%82%B0%EC%84%B1%EC%9D%84%20%EC%9D%BD%EA%B3%A0 초생산성에서 이야기하는 전체를 관통하는 하나의 주제는 꼭 필요하지 않는 일을 버리고 꼭 해야만 할 일을 하기 이다. 어떻게 하면 꼭 필요하지 않는 일을 버릴 수 있을까? 도대체 어떤 일이 나에게 있어서 꼭 해야만 할 일 일까? 그것 조차 가만히 생각해 보면 쉽게 떠오르지… Sun, 22 Aug 2021 00:00:00 GMT 독서 https://johnyworld.github.io/post/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80%20Atomic%20Design%20System%EC%97%90%20%EB%8C%80%ED%95%98%EC%97%AC https://johnyworld.github.io/post/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80%20Atomic%20Design%20System%EC%97%90%20%EB%8C%80%ED%95%98%EC%97%AC Atomic Design System을 React와 함께 사용한지 1년 6개월정도 된 것 같다. 프론트엔드 사수가 없던 두 번의 회사 프로젝트와 한번의 개인 프로젝트에 적용해 보았고 여러가지 삽질을 해보면서 점점 더 나은 방법을 찾게 되었다. 리팩토링을 몇번을 한건지... Sat, 21 Aug 2021 00:00:00 GMT 에세이 https://johnyworld.github.io/post/Github%20SSH%20%EC%A0%91%EC%86%8D%EC%8B%9C%20Operation%20Timeout%20%EB%AC%B8%EC%A0%9C https://johnyworld.github.io/post/Github%20SSH%20%EC%A0%91%EC%86%8D%EC%8B%9C%20Operation%20Timeout%20%EB%AC%B8%EC%A0%9C Github 연결을 Password 방식으로 하고있다가, 더 이상 Password 방식을 지원하지 않는다고 들어서 SSH 연결로 바꾸게 되었다. 그렇게 크게 문제 없이 쓰고 있었는데, 어느 날 스타벅스에서 작업을 하다가 작업중인 branch 에서 동료가 작업한 내용을 pull… Fri, 16 Jul 2021 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/django%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%20ServiceWorker%20%ED%8C%8C%EC%9D%BC%20%EA%B2%BD%EB%A1%9C https://johnyworld.github.io/post/django%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%20ServiceWorker%20%ED%8C%8C%EC%9D%BC%20%EA%B2%BD%EB%A1%9C django에 ServiceWorker를 등록하는 과정에서 sw.js 파일의 경로를 설정하는 부분에서 꽤나 애를 먹었다. sw.js파일은 example.com/sw.js 위치에 존재해야 하는데 django는 example.com/static/sw.js 로 정적 파일을 제공하기… Fri, 11 Jun 2021 00:00:00 GMT 팁 https://johnyworld.github.io/post/ec2%EC%97%90%20ssh%20%EC%A0%91%EC%86%8D%EC%8B%9C%20timeout%20%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0 https://johnyworld.github.io/post/ec2%EC%97%90%20ssh%20%EC%A0%91%EC%86%8D%EC%8B%9C%20timeout%20%EB%AC%B8%EC%A0%9C%20%ED%95%B4%EA%B2%B0 서버 환경설정을 진행하면서 도메인을 구입하고 HTTPS를 적용하고 나서 며칠 뒤, PWA를 이것저것 삽질하며 테스트 해본 뒤 서비스에 적용해보기 위해 ssh에 접속을 시도 했다. 하지만 나에게 돌아오는 것은 ssh: connect to host ... Fri, 11 Jun 2021 00:00:00 GMT 문제해결 https://johnyworld.github.io/post/VSCODE%20%EC%97%90%EC%84%9C%20%ED%95%9C%EA%B8%80%EB%A1%9C%20%EB%90%9C%20%EB%B6%80%EB%B6%84%EB%A7%8C%20%EA%B2%80%EC%83%89%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/VSCODE%20%EC%97%90%EC%84%9C%20%ED%95%9C%EA%B8%80%EB%A1%9C%20%EB%90%9C%20%EB%B6%80%EB%B6%84%EB%A7%8C%20%EA%B2%80%EC%83%89%ED%95%98%EA%B8%B0 영어가 아닌 문자열을 검색해주는 방법인데, 영어가 아닌 문자는 한글만 사용하고 있기 때문에 한글로 된 부분만 검색하기 라는 제목을 사용했습니다. Cmd(Ctrl) + F 또는 Cmd + Shift + F 를 눌러서 [^\x00-\x7F]+ 키워드로 검색합니다. Mon, 08 Feb 2021 00:00:00 GMT 팁 https://johnyworld.github.io/post/React%20i18next%20lazy%20loading https://johnyworld.github.io/post/React%20i18next%20lazy%20loading 회사에서 점점 언어가 늘어나자, i18next의 lazy loading을 구현해야 할 필요가 생겼다. 한개의 언어 파일이 60kb 를 넘는데 벌써 서비스 언어가 9개가 됐다. 언어만 500kb를 넘는다. Wed, 11 Nov 2020 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/React%2C%20TS%20%ED%99%98%EA%B2%BD%EC%97%90%20Redux%20Toolkit%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/React%2C%20TS%20%ED%99%98%EA%B2%BD%EC%97%90%20Redux%20Toolkit%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 현재 회사 프로젝트에 MobX 를 몇개월 동안 쓰면서 잘 사용하긴 했는데, useObserber를 쓰고 싶지 않았던 점과, console.log 를 찍어볼 때 자꾸 Proxy 로 출력이 되어서, toJS 함수를 써야 한다는 점 등이 좀 귀찮게 다가왔다. Fri, 16 Oct 2020 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/React%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98%20%EC%97%AD%ED%95%A0%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%83%9D%EA%B0%81 https://johnyworld.github.io/post/React%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98%20%EC%97%AD%ED%95%A0%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%83%9D%EA%B0%81 글이 길다. 리액트로 4개의 큰 프로젝트와 여러개의 작은 프로젝트를 진행하면서 컴포넌트를 어떻게 정리해야 하는가 에 대한 많은 생각을 하게 된다. 이 생각은 지금도 진행중이고 앞으로도 진행 될 것이다. 그 생각을 여기 정리해본다. Wed, 14 Oct 2020 00:00:00 GMT 에세이 https://johnyworld.github.io/post/Styled%20Components%20%EB%A1%9C%20Dark%20Mode%20%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/Styled%20Components%20%EB%A1%9C%20Dark%20Mode%20%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 React, Typescript 환경에서 styled-components 적용하기에서 이어지는 글. GlobalStyles와 styled 기본 기능만 이용해도 충분히 가치가 있지만, 우리는 Dark Mode 를 한번 만들어보고 싶지 않은가! styled-component 를… Sun, 11 Oct 2020 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/React%2C%20Typescript%20%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%20styled-components%20%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/React%2C%20Typescript%20%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%20styled-components%20%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 styled-components 를 많은 프로젝트에 적용해보았지만 이제서야 정리해본다. 먼저 GlobalStyles 를 작성해보자. 앱 전체를 아우르는 스타일을 작성하는 파일이다. 아래 파일을 생성한다. Fri, 09 Oct 2020 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/React%2C%20Typescript%20%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%20%EB%8B%A4%EA%B5%AD%EC%96%B4%20(i18next)%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/React%2C%20Typescript%20%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%20%EB%8B%A4%EA%B5%AD%EC%96%B4%20(i18next)%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 개인 프로젝트와 두개 회사에서 적용했었던 i18next 를 이제서야 정리해본다. 현재 리액트 다국어에서 가장 많이 사용되는 모듈인 것 같다. json 파일 기반이라서 사용하기도 좋고 여러 번역자들과 협업시 https://lokalise.com/ 와 같은 다국어 관리 사이트와… Fri, 09 Oct 2020 00:00:00 GMT 튜토리얼 https://johnyworld.github.io/post/Express%20%EC%84%9C%EB%B2%84%EB%A1%9C%20React%20build%20%EC%A0%95%EC%A0%81%20%ED%8C%8C%EC%9D%BC%20%EB%9D%BC%EC%9A%B0%ED%8C%85%ED%95%98%EA%B8%B0 https://johnyworld.github.io/post/Express%20%EC%84%9C%EB%B2%84%EB%A1%9C%20React%20build%20%EC%A0%95%EC%A0%81%20%ED%8C%8C%EC%9D%BC%20%EB%9D%BC%EC%9A%B0%ED%8C%85%ED%95%98%EA%B8%B0 React로 정적 페이지를 만들 때, 두가지 문제점이 있었다. 첫번째는 SEO 문제. 두번재는 Routing 문제. SEO를 해결하려면 SSR(Server Side Rendering) 을 해야했다. 그래서 최근에 했던 프로젝트에서는 Next.js 를 사용해봤다. Mon, 05 Oct 2020 00:00:00 GMT 튜토리얼