전체 글

들어가며 HTML의 스크립트 요소 는 JavaScript 코드를 포함하거나 외부 스크립트 파일을 불러오는 역할을 수행합니다. 우리는 이러한 요소를 통하여 웹 페이지에 동적 기능과 인터랙티브한 요소들을 추가할 수 있습니다. 이러한 script 요소에는 많은 속성이 존재하는데 본 포스팅에서는 그 중에서 async와 defer에 대하여 알아보고자 합니다. async와 defer 속성을 사용하는 이유는 무엇일까?https://what-time.tistory.com/50 [SEO] script 태그는 html에서 어디에 넣는 것이 가장 좋을까?시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Reques..

들어가며 개발자라면 많이 들어봤을 클린 코드라는 도서가 있습니다. 클린코드 책을 읽은 많은 지인들이 이 책을 추천하고 또 '클린코드는 중요하다'라는 이야기를 많이 접할 수 있었습니다. 하지만 학부 시절에는 크게 클린 코드의 중요성을 느끼기는 쉽지 않았습니다. 대부분의 코드들을 유지보수 할 일도 많지 않았을 뿐더러 어떻게든 돌아가는 코드를 짜는 것 자체의 난이도는 크게 어렵지 않기 때문입니다.  하지만 프론트엔드 개발자로 입사하게 되고, 많은 개발자들이 거쳐간, 많은 사람들이 이용하는 큰 규모의 프로젝트의 코드를 읽으며 클린코드의 중요성을 몸으로 느낄 수 있었습니다.  흔히 말하는 레거시 코드를 맞이할때마다 그 상황을 가장 잘 표현한 사진이라고 할 수 있습니다. 우연찮게 좋은 코드가 작성된 부분을 수정할 ..

에러 로그 로컬 개발 환경에서는 발생하지 않았지만 production 환경에서 위와 같은 에러 로그를 볼 수 있었습니다. Minified React error #418 - Hydration failed because the server rendered HTML didn't match the client.Minified React error #423 - There was an error while hydrating but React was able to recover by instead client rendering the entire root.Minified React error #425 - Text content does not match server-rendered HTML. 3가지 에러 모두 공통적..

문제 설명코니는 매일 다른 옷을 조합하여 입는것을 좋아합니다. 예를 들어 코니가 가진 옷이 아래와 같고, 오늘 코니가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야합니다.- 코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.- 착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 착용한 경우에는 서로 다른 방법으로 옷을 착용한 것으로 계산합니다.- 코니는 하루에 최소 한 개의 의상은 입습니다.코니가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 retu..

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.completion의 길이는 participant의 길이보다 1 작습니다.참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.참가자 중에는 동명이인이 있을 수 있습니다. 문제 링크: https://school.programmers.co.kr/learn/courses..

문제 상황 관리하는 웹 서비스의 이벤트 정책이 변경되어 카카오톡 공유 메시지의 이미지를 변경해야 하는 작업이 있었고 테스트 서버에서의 정상 동작을 확인하여 상용 서버에도 동일한 코드를 적용시켰습니다. 다만 상용 서비스에서 카카오톡 공유 메시지의 '문구'는 변경 되었지만 '이미지'는 여전히 예전 이미지가 노출되는 상황이었습니다. 첫 번째 시도, 실패  이전에 사이드 프로젝트를 진행하면서 페이지의 open graph 이미지를 변경하고 테스트할 때 이용해본 공유 디버거가 생각나서 이를 통하여 이미지의 주소를 초기화 시키려고 하였습니다. 설명에도 '카카오톡 채팅방으로 공유된', '캐시를 초기화'라는 부분 때문에 이를 통하여 문제를 쉽게 해결할 수 있을 것이라 생각하였습니다. 하지만 이는 잘못된 접근이었습니다. ..

문제 보러가기: https://www.acmicpc.net/problem/4158문제상근이와 선영이는 동시에 가지고 있는 CD를 팔려고 한다. CD를 몇 개나 팔 수 있을까?입력입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스의 첫째 줄에는 상근이가 가지고 있는 CD의 수 N, 선영이가 가지고 있는 CD의 수 M이 주어진다. N과 M은 최대 백만이다. 다음 줄부터 N개 줄에는 상근이가 가지고 있는 CD의 번호가 오름차순으로 주어진다. 다음 M개 줄에는 선영이가 가지고 있는 CD의 번호가 오름차순으로 주어진다. CD의 번호는 십억을 넘지 않는 양의 정수이다. 입력의 마지막 줄에는 0 0이 주어진다.상근이와 선영이가 같은 CD를 여러장 가지고 있는 경우는 없다.출력두 사람이 동시에 가지고 ..

들어가며 지난 공모전 출품작 워크인코리아(Work in Korea)는 Vercel을 통하여 배포를 시도하려고 하였습니다. 하지만 Work in Korea는 Organization 저장소에 있어 이를 배포하려면 Vercel 프로 계정이 필요한 상황이었습니다. Vercel Pro는 2주간 무료이지만 그 이후부터는 요금을 지불해야 했기 때문에 좋은 해결 방법은 아니었습니다. 그러던 도중 개인 public 레포지토리를 이용하면 무료로 배포할 수 있다는 사실이 기억났고 fork한 레포지토리를 vercel과 연동시키면 되는 것이었다.  무료로 하는 것은 성공..! 하지만..  가장 큰 문제점은 master 브랜치에 push를 하면 자동으로 배포가 되면 좋겠지만.. 원본 레포지토리가 변경될 때마다 forked 레포지..