본문 바로가기

분류 전체보기177

[ JavaScript ] HTMLCollection 은 forEach가 안된다? 작업을 할 때 HTML 요소를 불러 console.log를 찍어보면 배열 형태 안에 담겨있어서 당연하게도 배열의 모든 메소드를 사용할 수 있을거라고 생각했는데, 어째 사용이 안됩니다！? 자세히 보니 HTMLCollection.prototype에 배열 메서드가 없습니다. 그렇다면 어떻게 순회하면서 원하는 작업을 할 수 있을까？ 방법 1) for문으로 순회하기 for(let i=0; i { console.log(element.className); }) 방법 4) Array.from 사용하기 Array.from(document.getElementsByClassName("events")).forEach(function(item) { console.log(item.id); }); 방법 5) HTMLCollecti.. 2023. 12. 2.
[ JavaScript ] Object.freeze Object.freeze 를 사용하면 좋은 점 ReadOnly여서 해당 값이 보인다. 이게 무슨 말이냐 하면, export const NAV = { ABOUT: 'About', ARCHIVE: 'Archive', SKILLS: 'Skills', PROJECTS: 'Projects', CONTACT: 'Contact', }; export const NAV = Object.freeze({ ABOUT: 'About', ARCHIVE: 'Archive', SKILLS: 'Skills', PROJECTS: 'Projects', CONTACT: 'Contact', }); 2023. 11. 27.
[ JavaScript / 레벨 0 / 오답 ] 소인수분해 문제) 소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 2 ≤ n ≤ 10,000 입출력 예 12 [2, 3] 17 [17] 420 [2, 3, 5, 7] 입출력 예 #1 12를 소인수분해하면 2 * 2 * 3 입니다. 따라서 [2, 3]을 return합니다. 입출력 예 #2 17은 소수입니다. 따라서 [17]을 return 해야 합니다. 입출력 예 #3 420을 소인수분해하면 2 * 2 * 3 * 5 * 7 입니다. 따라서 [2, 3, 5,.. 2023. 11. 25.
[ Next.js ] Static Site Generation vs Server Side Rendering 원문 Static Site Generation (SSG) 란? 서버에 배포하기 전에 빌드하는 단계에서 HTML 페이지를 생성하는 것을 말한다. SSG 장점 페이지 로드 시간이 빠르다. 향상된 Search Ending Optimization (SEO) 서버에서 생성될 필요가 없기 때문에 비용적인 면에서 효율적이다. Next.js 로 SSG 구현하기/실행하기 => getStaticProps 사용하기 빌드 단계에서 반환된 prop로 미리 페이지를 렌더하는 기술을 말한다. 사전에 data fetching 과 page content generation이 진행돼 정적 파일로 보관되어 유저가 request를 하자마자 제공할 수 있다. export default function Home({ data }) { retur.. 2023. 11. 24.
노션을 데이터베이스로 사용하는 포트폴리오 사이트 만들기(3) - 기존에 만든 포트폴리오 사이트 리팩토링 기존에 만든 포트폴리오 사이트도 Next.js 로 만들었지만, 모든 내용을 하드코딩되어 있어서 노션 DB에서 내용을 가져오는 형태로 리팩토링하려고 한다. 기존 포트폴리오 사이트 깃허브 https://github.com/www-r/portofolio GitHub - www-r/portofolio: 김영은 포트폴리오 사이트 김영은 포트폴리오 사이트. Contribute to www-r/portofolio development by creating an account on GitHub. github.com 새로운 포트폴리오 사이트 깃허브 https://github.com/www-r/PorfolioWithNotionDB GitHub - www-r/PorfolioWithNotionDB Contribute to w.. 2023. 11. 21.
노션을 데이터베이스로 사용하는 포트폴리오 사이트 만들기(2) - 노션 API 사용하기 노션 API 문서는 번역본이 없고 영어로만 있어서 하나하나 기록해두면 도움이 될 것 같아서 기록을 해봅니다. 노션API문서 사이트 노션API 포스트맨 노션API 스택오버플로우 노션API FAQ morethanlog 깃허브 integrations (통합)에는 두 가지 타입이 있습니다. (What is Integrations?) Internal (default) - 하나의, 특정 워크스페이스에서 사용 가능하다. - 해당 워크스페이스의 멤버만 통합을 사용가능하다 - 페이지에 연결 추가 방법 Public - 기본적으로 internal 로 시작해서, integration settings page 에서 public 으로 변경할 수 있다. 통합 생성하기 많은 블로그들이 통합 생성하는 방법을 사진들과 함께 친절하게 설.. 2023. 11. 21.

티스토리툴바