window.etheruem에 대해서 아는가? 이 객체는 메타마스크를 설치한 사람만 볼 수 있는 정말 신기한 객체이다. 별다른 패키지 설치 없이 메타마스크를 설치했는지, 설치했다면 주소를 가져올 수도 있다. 다만 이건 오로지 데스크탑에 한정된다. chrome의 확장 프로그램으로 있는 메타마스크가 모바일 브라우저에선 당연히 없기 때문이다. 따로 meta mask 앱을 실행시켜서 인증을 받아야한다. 메타마스크의 window.ethereum 객체에 관해서 Best Practices | MetaMask Docs Best Practices If this page doesn't answer your question, please feel free to open an issue in our repository (op..

드디어 메인 페이지에서 벗어났다! 무한한 감사를....🙏 이제는 우리 웹사이트에서 가장 중요한 콘텐츠인 docs를 만들어야 한다. 우리나라 웹 특성상 kr/en을 제공해야 할 일들이 종종 있다. 보통 우리나라와 해외 타깃으로 하는 UI 감성이 꽤나 다르게 때문에 아예 페이지를 다르게 파는 경우도 많다. 예를 들어, 메타콩즈를 살펴보자! 메타콩즈(for korean) MetaKongz Welcome to Kongz Universe ! themetakongz.com 메타콩즈(for global) MetaKongz Welcome to Kongz Universe ! www.themetakongz.com 막상 쓰고 보니 큰 차이가 있는 것 같진 않지만, 콘텐츠를 말하려는게 아니니.. 잘 보면 아예 url을 다르게..

Three.js 처럼은 아니어도 마우스에 따라 움직이는 UI 요소들을 하나씩 넣고 싶을 때가 종종 있다. 꼭 이 웹사이트 처럼! https://www.nytimes.com/paidpost/allbirds/the-view-from-above.html PAID POST by Allbirds — The View From Above Why our future may depend on the fate of birds www.nytimes.com 잘 보면 마우스의 움직임에 따라 저 돌이랑 솔방울들이 약간은 반대 방향으로 움직이는 걸 확인할 수 있다. 이 정도면 나도 만들 수 있지 않을까..? 하는 생각에 한 번 만들어봤다. 일단 먼저 결과물부터 보여주는 걸로 1. Today's TO-DO 올해 4월, 5월..? 한..

간혹 정부 관련된 홈페이지에서 많이 보이는 효과인 hover 시 밑에 줄이 생기는 애니메이션 입니다. css 만으로도 구현이 가능합니다. 방법은 정말 여러 개가 있을 수 있겠습니다. box-shadow로 transition을 줘도 되구요. 저는 저 선이 좀 둥글둥글 했으면 좋겠어서 pseudo element를 추가해줘서 구현했습니다. 1. Pseudo Element 가끔 개발자 도구로 보다보면 저렇게 ::after나 ::before 같은 걸 볼 수 있는데 저게 바로 의사 요소(pseudo element) 입니다. 우리가 자주 쓰는 hover나 active와 같은 클래스는 의사 클래스(psudo class)라고 하는데요. 마찬가지로 내장되어 암시적으로 사용할 수 있는 css 요소입니다. 어떤 클래스를 기준..

저번에 2차원 배열의 누적합을 다뤄봤었는데, 이미 카카오는 작년부터 누적합을 엄청 물어보고 있었네요.이 문제도 역시 누적합에 관한 문제입니다. 문제 요약 "죠르디"의 동영상 재생시간 길이 play_time, 공익광고의 재생시간 길이 adv_time, 시청자들이 해당 동영상을 재생했던 구간 정보 logs가 매개변수로 주어질 때, 시청자들의 누적 재생시간이 가장 많이 나오는 곳에 공익광고를 삽입하려고 합니다. 이때, 공익광고가 들어갈 시작 시각을 구해서 return 하도록 solution 함수를 완성해주세요. 만약, 시청자들의 누적 재생시간이 가장 많은 곳이 여러 곳이라면, 그 중에서 가장 빠른 시작 시각을 return 하도록 합니다. [제한사항] play_time, adv_time은 길이 8로 고정된 문자..

프론트엔드 개발자의 코딩테스트🎞️ 올해 초에 네이버의 FE 코딩테스트를 본 적이 있었는데, 타 사의 코딩테스트와는 꽤 결이 달랐다. promise를 해체한다던가, 시맨틱 웹에 대해서 물어본다던가, 진짜 프론트엔드를 다룬다면 이런게 훨씬 실무적일텐데.. 라는 생각이 드는 테스트였다. (vanila JS에 대해서 내가 많이 모르는 구나.. 라는 것도 느꼈다.) 시맨틱 태그 오늘 이야기 해볼 것은 시맨틱 태그이다. 시맨틱 태그라는 건 완전 처음 생활 코딩으로 html을 공부할 때 처음으로 보고 기억 저 멀리에 넣어둔 바로 그 태그. 시맨틱 태그라고 해서 특별한 기능이 있는 건 아니다. 태그나 태그와 똑같다. 다만, 이 태그는 브라우저, 그리고 개발자에게 콘텐츠를 명확히 표기해줄 수 있는 역할을 한다. 태그만으..