실습 중심

한입챌린지

완강챌린지

토이프로젝트

퀴즈

약 2주동안 "한 번에 끝내는 자바스크립트 : 바닐라 자바스크립트로 SPA 개발까지" 강의를 진도표, 미션과 함께 완강하는 챌린지입니다.

효빈 Hyobin

이정환 Winterlood

입문

초급

중급이상

자바스크립트

JavaScript

싱글 페이지 애플리케이션

vanilla-javascript

vanillajs

한입 챌린지 7기 - 자바스크립트

<div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="-1"><h1 style="text-align:left"><span style="background-color:inherit;color:rgb(26, 27, 30)">한입 챌린지 7기 - 자바스크립트</span></h1></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="info-box info-box--infgreen" aria-labelledby="info-box__editable-aria"><div class="info-box__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM404.4 276.7L324.4 404.7C320.2 411.4 313 415.6 305.1 416C297.2 416.4 289.6 412.8 284.9 406.4L236.9 342.4C228.9 331.8 231.1 316.8 241.7 308.8C252.3 300.8 267.3 303 275.3 313.6L302.3 349.6L363.7 251.3C370.7 240.1 385.5 236.6 396.8 243.7C408.1 250.8 411.5 265.5 404.4 276.8z"></path></svg></div><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:100%;max-height:100%;min-height:24px;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="-1"><p>본 챌린지는 아래의 <strong>한 번에 끝내는 자바스크립트 </strong>강의를 수강하시는 분들을 위한 프로그램입니다. (React.js, 타입스크립트, Next.js 신청은 별도로 제공됩니다.)</p></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="two-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-n8kjrv3n9-dropdown" id="mantine-n8kjrv3n9-target" data-node-view-wrapper="" style="white-space:normal"><a data-drag-handle="true" href="https://inf.run/zTUBt" target="_blank" rel="noopener noreferrer nofollow"><img class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbbyeap8243w2n2a36mets2e?w=960" title="image.png" alt="image" width="329" height="214"></a><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><p><strong>[한입 챌린지 7기 - 자바스크립트]</strong>를 신청하는 챌린지 페이지입니다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/zTUBt"><span style="color:rgb(0, 167, 96)"><strong>한 번에 끝내는 자바스크립트 : 바닐라 자바스크립트로 SPA 개발까지</strong></span></a><strong></strong>강의를 구매하신 분들만 참가하실 수 있습니다.</p><p><span style="color:rgb(26, 27, 30)"><strong>30% 할인 링크</strong></span> : <a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/iTbpZ">https://inf.run/iTbpZ</a></p><p><span style="color:rgb(26, 27, 30)">커뮤니티 링크 : </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://link.onebitefe.com/r/4jy7ac"><u>https://link.onebitefe.com/r/4jy7ac</u></a></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><h3 style="text-align:left"><strong>[한입 챌린지 7기] 다른 강의로 신청하기</strong></h3></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="three-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-sojz530o1-dropdown" id="mantine-sojz530o1-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbbyp6vfmznm9ngk7mss4ff5?w=960" title="image (1).png" alt="image (1)" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/dGq5Z"><strong>[한입 챌린지-React.js] 신청</strong></a></p></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-8c80wsw7a-dropdown" id="mantine-8c80wsw7a-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbbyphs2gtfnjqks4phpj5rw?w=960" title="image (2).png" alt="image (2)" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/1H4aE"><strong>[한입 챌린지-타입스크립트] 신청</strong></a></p></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-5xqd6tjaj-dropdown" id="mantine-5xqd6tjaj-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbbypp4zta7gf7rqqgxws2ay?w=960" title="image (3).png" alt="image (3)" width="213" height="138"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/98ERU"><strong>[한입 챌린지-Next.js] 신청</strong></a></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><h3 style="text-align:left">[한입 챌린지 7기 OT] 무료 세미나 신청하기</h3></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="two-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><div class="react-renderer node-resizableMedia ProseMirror-selectednode" contenteditable="false" draggable="true"><div as="div" class="resizable-media-node-view  " aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-zgbj7w3sy-dropdown" id="mantine-zgbj7w3sy-target" data-node-view-wrapper="" style="white-space:normal"><img data-drag-handle="true" class="resizable-media-img" src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbca6sj2j2zkm3jtpvdv87q1?w=960" title="01kbc412zkr53qdp25jwax24re.png" alt="01kbc412zkr53qdp25jwax24re" width="329" height="214"><div class="resize-media-handle resize-media-handle--left" title="왼쪽 리사이즈 핸들바" aria-label="왼쪽 리사이즈 핸들바"></div><div class="resize-media-handle resize-media-handle--right" title="오른쪽 리사이즈 핸들바" aria-label="오른쪽 리사이즈 핸들바"></div></div></div></div></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display:flex;flex-direction:column;height:auto;max-height:100%;min-height:auto;border-radius:8px"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color:rgb(255, 255, 255);cursor:auto"><div role="textbox" translate="yes" class="tiptap ProseMirror" tabindex="0"><p><span style="color:rgb(0, 167, 96)"><strong>Live OT 신청하기</strong></span></p><ul><li><p>일시 : <strong>25.12.06(토)</strong></p></li><li><p>시간 : 오후 4시~오후 6시</p></li><li><p><strong>링크 : </strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/Atnp8">https://inf.run/Atnp8</a></p></li></ul></div></div></div></div></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="separator-element"><div class="separator-element__line"></div></div></div></div></div><div class="grid-wrapper "><div class="left-action-menu-wrapper css-1jj2wwy action-menu-wrapper--view-mode" tabindex="0"><div class="one-column-grid"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg,image/webp,image/bmp,image/x-icon,image/vnd.microsoft.icon,image/tiff" style="display:none"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size:32px;color:rgb(134, 142, 150);width:32px;height:32px"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content  " src="https://cdn.inflearn.com/public/files/courses/339774/builder/01kbc4fctmt2zr2ebdxrsv318b?w=960" alt="자산 14@2x"></div></figure></div><div class="action-menu-wrapper action-menu-wrapper--view-mode"></div></div></div></div></div></div></div>

챌린지를 시작하며

1주차 :: Day1~Day5

2주차 :: Day6~Day10

3주차 :: Day11~Day14

이제까지는 완강한 강의가 사실 별로 없었습니다.
바쁘고 몸이 지친 것을 핑계로 며칠 안 듣다 보면 그 전에 들었던 내용들이 기억이 안나 나중에 처음부터 다시 들어야지 하고 말았더랬죠. 그러다보면 또 다른 강의를 시작하게 되고.. 의 반복이었던 것 같습니다. 
이번에 3주동안 챌린지를 진행하게 되면서 정말 오랜만에 완강을 해보았습니다.
매일 적절한 과제와 피드백 덕분에 동기부여가 되어 완강을 할 수 있었던 것 같습니다.
덕분에 연말 전 뿌듯한 기분을 느낄 수 있었습니다.
언제 챌린지가 또 열릴지 모르겠지만 빨리 열렸으면 좋겠네요! 이번엔 TypeScript를 완강해보고 싶네요.
챌린지를 열어주신 효빈님 정환님께 감사의 말씀을 드립니다.
2025년 얼마 남지 않았는데 다들 새해 복 많이 받으시길! 🙇‍♀️

한입챌린지로 효율적으로 완강할 수 있었습니다. 
혼자하면 자꾸 미루게 되는데 그런 점에서 매우 도움이 되었고 미션도 난이도 적절해서 혼자 해나갈 수 있었습니다. 감사합니다.

자바스크립트를 실무에서 계속 써왔음에도 처음 접하는 개념들이 너무 많았습니다. 아직까지도 이해되지 않는 개념들은 강의를 무한반복하고, 참고자료들을 찾아보며 복습중입니다.
순수 자바스크립트에 대한 존재와 그 개념을 학습할 수 있는 좋은 강의였고, 혼자 했으면 완강하지 못했을 거 같은데.. 미션을 수행하는 재미와 오늘은 어떤 피드백이 달릴지 기대하며 시간가는 줄 모르고 강의에 집중할 수 있었습니다. 또한 효빈님의 다음강의도 너무 궁금해졌습니다!!

<p><strong>미션1.</strong></p><img src="https://cdn.inflearn.com/public/files/posts/fb6c8cd6-a2d3-44f9-ac39-daf9ffd584af/959d17fb-7745-41e2-99d1-6a8c687afc41.webp" media-type="img" alt="스크린샷 2026-01-05 220122.png.webp" title="스크린샷 2026-01-05 220122.png.webp" width="542" height="295"><p><strong>미션2. </strong></p><img src="https://cdn.inflearn.com/public/files/posts/bbde621f-e423-4da4-b694-338783164cca/dc959944-045d-4224-a5c5-104929fce474.webp" media-type="img" alt="스크린샷 2026-01-05 223154.png.webp" title="스크린샷 2026-01-05 223154.png.webp" width="542" height="220"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/jy2058/vanilla-javascript/tree/master/vanilla-javascript/pokemon">https://github.com/jy2058/vanilla-javascript/tree/master/vanilla-javascript/pokemon</a><br><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/jy2058/vanilla-javascript/tree/master/vanilla-javascript/pokemon"><strong>미션3. </strong></a></p><img src="https://cdn.inflearn.com/public/files/posts/e52584b0-ba3c-47a8-9a3a-d29fb7576f9f/ee9c55c5-db30-49bd-9250-5d58bfd7591e.webp" media-type="img" alt="스크린샷 2026-01-05 223411.png.webp" title="스크린샷 2026-01-05 223411.png.webp" width="449" height="311"><p><br></p>

Day14 미션 안내

미션 제출합니다.

Day14 미션

부여

Day13 미션 안내

Day13 미션

Day12 미션 안내

Day12 미션

<p><strong>미션1. 완성된 TripWiki 사이트를 캡쳐해서 제출해주세요(화면만)</strong></p><img src="https://cdn.inflearn.com/public/files/posts/f457d8c0-83e8-4089-9b45-4eb18ded69f1/dc4e2cf7-bdd4-4d2a-a55c-22c6fdab4d32.webp" media-type="img" alt="mission 14_1_실행화면1.png.webp" title="mission 14_1_실행화면1.png.webp" width="527" height="333"><hr><p style="text-align: left"><strong>미션2. Pokemon 도감을 완성 후 코드와 화면을 제출해주세요</strong></p><img src="https://cdn.inflearn.com/public/files/posts/e1e98aad-47f8-4fe9-8d8c-de1a13c5f0ea/63c299c9-9baa-4454-93dc-1022454ace22.webp" media-type="img" alt="mission 14_1_실행화면2.png.webp" title="mission 14_1_실행화면2.png.webp" width="527" height="333"><hr><p style="text-align: left"><strong>미션3. 한입 챌린지 7기-자바스크립트 후기를 남겨주세요</strong></p><img src="https://cdn.inflearn.com/public/files/posts/e307bf47-30f8-4180-8986-2a9e5dc0715a/05cadb95-39b8-47a0-b7eb-11a3124cca15.png" media-type="img" alt="image.png" title="image.png" width="527" height="168">

Mission 14.

다나

<p><strong>미션1. 지금까지 개발한 TripWiki 사이트를 캡쳐해서 제출해주세요(화면만)</strong></p><img src="https://cdn.inflearn.com/public/files/posts/90ad882e-2be9-4c65-9ff4-c2fe403af37e/42e28ee3-1c7b-4bd0-b69b-678697d9e840.webp" media-type="img" alt="mission 13_1_실행화면2.png.webp" title="mission 13_1_실행화면2.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/09c385e3-fb79-4098-8ee3-4e2d112aae83/97253dd0-7913-4362-a9f3-2c060c980bc9.webp" media-type="img" alt="mission 13_1_실행화면3.png.webp" title="mission 13_1_실행화면3.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/9691ae55-7e52-43c9-a8e0-9d290ef41b86/ac624e43-0b51-4c9e-bfd2-e9087cc38c29.webp" media-type="img" alt="mission 13_1_실행화면1.png.webp" title="mission 13_1_실행화면1.png.webp" width="527" height="333"><hr><p style="text-align: left"><strong>미션2. 지금까지 배운 내용을 토대로 Pokemon 도감의 Header 컴포넌트를 완성해보세요</strong></p><img src="https://cdn.inflearn.com/public/files/posts/7da5654a-1bf8-4fc1-961e-de3fdfcf60b7/c90b7b48-4421-4dbd-8c63-a4f03b80cae6.webp" media-type="img" alt="mission 13_2_실행화면1.png.webp" title="mission 13_2_실행화면1.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/c18d2fd0-d147-44d1-bbe2-b08553564465/f352cc00-fd5f-4ebb-b693-c0988a2d7d97.webp" media-type="img" alt="mission 13_2_실행화면2.png.webp" title="mission 13_2_실행화면2.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/a1a8cb6a-a257-41ee-9cc5-6abc310bd5a2/fbabfc89-e33b-4802-894e-f7b769b481de.webp" media-type="img" alt="mission 13_2_실행화면3.png.webp" title="mission 13_2_실행화면3.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/9209f5d6-eabc-46a8-905e-ea2332dd1e13/3b73f09b-1aff-4941-83cb-f368b35f03fa.webp" media-type="img" alt="mission 13_2_실행화면4.png.webp" title="mission 13_2_실행화면4.png.webp" width="527" height="333"><p>&nbsp;</p>

Mission 13.

<p><strong>미션1. </strong></p><img src="https://cdn.inflearn.com/public/files/posts/536adbb2-2f9e-41fb-b777-ec7e4a1e068e/b617cf2d-35a4-4846-920c-abf9734c3954.webp" media-type="img" alt="스크린샷 2025-12-30 143020.png.webp" title="스크린샷 2025-12-30 143020.png.webp" width="542" height="167"><p>&nbsp;</p><p><strong>미션2. </strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/jy2058/vanilla-javascript/tree/master/vanilla-javascript/pokemon">https://github.com/jy2058/vanilla-javascript/tree/master/vanilla-javascript/pokemon</a></p><img src="https://cdn.inflearn.com/public/files/posts/7fad8ad8-9ed7-4e4a-be34-fbb1be059553/78c3bf33-19fe-4444-be27-b71dfb587d62.webp" media-type="img" alt="스크린샷 2025-12-30 160150.png.webp" title="스크린샷 2025-12-30 160150.png.webp" width="527" height="257"><p>&nbsp;</p>

Day7 미션 안내

Day7 미션 제출

김두운

Day 14 미션 제출

귀한 불도새

Day9 미션 안내

Day9 미션 제출합니다!

insub2004

<p><strong>미션1. 완성된 TripWiki 사이트를 캡쳐해서 제출해주세요(화면만)</strong></p><img src="https://cdn.inflearn.com/public/files/posts/317ca931-944a-4d55-b723-b437b34facc5/4ab614b6-4432-4d6f-83d6-107d859ed819.webp" media-type="img" alt="스크린 캡처_20251229_141554.webp" title="스크린 캡처_20251229_141554.webp" width="527" height="489"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: left"><strong>미션2. Pokemon 도감을 완성 후 코드와 화면을 제출해주세요.</strong></p><img src="https://cdn.inflearn.com/public/files/posts/f6023ad0-ebc8-40af-8075-466f992d7523/a9c4f674-f31d-47bb-ba0a-90bb0658033e.webp" media-type="img" alt="스크린 캡처_20251229_140841.webp" title="스크린 캡처_20251229_140841.webp" width="527" height="504"><p>&nbsp;</p><p style="text-align: left"><strong>미션3. 한입 챌린지 7기-자바스크립트 후기를 남겨주세요</strong></p><p style="text-align: left"><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/RTQfP">https://inf.run/RTQfP</a></p>

[Day 14] TripWiki + Poketmon 완성

seong2

Day 14 미션

재환

<p><strong>미션1. 지금까지 개발한 TripWiki 사이트를 캡쳐해서 제출해주세요(화면만)</strong></p><img src="https://cdn.inflearn.com/public/files/posts/94a94dae-f81c-4cdf-949a-bf04c46309e6/ed608400-db73-47cb-b029-2ae46bd8ca3a.webp" media-type="img" alt="mission 12_1_실행화면1.png.webp" title="mission 12_1_실행화면1.png.webp" width="527" height="283"><img src="https://cdn.inflearn.com/public/files/posts/da390545-974f-477d-9267-ed08323b7690/c728b40e-faa7-429f-80d1-750a11bc2073.webp" media-type="img" alt="mission 12_1_실행화면2.png.webp" title="mission 12_1_실행화면2.png.webp" width="527" height="283"><img src="https://cdn.inflearn.com/public/files/posts/0df03543-9fa8-4dab-8313-dbb334ad4121/d329bfab-2faf-4823-97d5-0a62787fafee.webp" media-type="img" alt="mission 12_1_실행화면3.png.webp" title="mission 12_1_실행화면3.png.webp" width="527" height="283"><hr><p style="text-align: left"><strong>미션2. PokemonList 컴포넌트만 완성 후 코드와 화면을 제출해주세요</strong></p><img src="https://cdn.inflearn.com/public/files/posts/15f78c5c-d05a-4c1f-976a-ef25bcd06892/3e6878ac-5611-4dea-b9f1-4b02788d02b0.webp" media-type="img" alt="mission 12_2_실행화면1.png.webp" title="mission 12_2_실행화면1.png.webp" width="527" height="283"><img src="https://cdn.inflearn.com/public/files/posts/095974e7-d369-4a96-b404-0cc5e760b766/f277961e-b33e-485d-b768-3c2075055a02.webp" media-type="img" alt="mission 12_2_실행화면2.png.webp" title="mission 12_2_실행화면2.png.webp" width="527" height="283"><p>&nbsp;</p>

Mission 12

<p><strong>미션1. 지금까지 개발한 TripWiki 사이트를 캡쳐해서 제출해주세요(화면만).</strong></p><img src="https://cdn.inflearn.com/public/files/posts/b742a288-1af8-430f-9546-d197d4c0ca18/f31cefdb-032d-4e5e-8902-30c5f83bd06b.webp" media-type="img" alt="_20251226_191414-ezgif.com-optiwebp.webp" title="_20251226_191414-ezgif.com-optiwebp.webp" width="527" height="338"><p>&nbsp;</p><p style="text-align: left"><strong>미션2. 지금까지 배운 내용을 토대로 Pokemon 도감의 Header 컴포넌트를 완성해보세요.</strong></p><img src="https://cdn.inflearn.com/public/files/posts/8ed0838b-6076-477e-8309-736eb3913279/934f9588-7ade-4b89-97ba-f2af733c628f.webp" media-type="img" alt="미션2.-지금까지-배운-내용을-토대로-Pokemon-도감의-Header-컴포넌트를-완성해보세요..png.webp" title="미션2.-지금까지-배운-내용을-토대로-Pokemon-도감의-Header-컴포넌트를-완성해보세요..png.webp" width="527" height="997"><p>&nbsp;</p>

[Day 13] TripWiki + Poketmon

이혜나

<p><strong>미션1. 완성된 TripWiki 사이트 캡쳐</strong><br><strong>localhost:3000</strong></p><img src="https://cdn.inflearn.com/public/files/posts/d00a2bc8-b098-4959-82b2-3d7c2d2cb19f/25f2f4f9-e405-48e2-9160-d4233cdc2e4a.png" media-type="img" alt="image.png" title="image.png" width="527" height="385"><p><strong>&nbsp;localhost:3000/city/1</strong></p><img src="https://cdn.inflearn.com/public/files/posts/ff9f675b-c232-45fe-94bf-4db64008e829/4710db1b-649e-4e49-985c-c9c277407147.png" media-type="img" alt="image.png" title="image.png" width="542" height="565"><p><strong>미션2. Pokemon 도감 완성 -&gt; 코드, 화면 제출</strong><br><strong>깃허브 코드 링크</strong><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/JisooPyo/javascript-study-log/tree/main/challenge/final_pokemon_wiki">https://github.com/JisooPyo/javascript-study-log/tree/main/challenge/final_pokemon_wiki</a><br><strong>화면</strong></p><img src="https://cdn.inflearn.com/public/files/posts/866176bc-3041-4aad-81df-b691ad034f1a/47e4ae76-b4c1-4a85-ab54-b96603e373f4.png" media-type="img" alt="image.png" title="image.png" width="527" height="398"><p><br><strong>미션3. 한입 챌린지 7기-자바스크립트 후기 링크</strong><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/3R5SR">https://inf.run/3R5SR</a></p>

[DAY14] 미션 제출합니다.

SSAMI

<pre><code class="language-javascript">//미션1. server 폴더 내부의 server.js 파일에 알맞은 코드를 작성하고 제출해주세요
const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;

app.use(express.static(path.join(__dirname, "..")));

app.get("/*", (req, res) =&gt; {
  res.sendFile(path.join(__dirname, "..", "index.html"));
});

app.listen(PORT, () =&gt; {
  console.log("START SERVER");
});
</code></pre>

Day11 미션 안내

Mission 11.

<p><strong>미션1. 지금까지 개발한 동물 앨범 사이트를 캡쳐해서 제출해주세요.</strong></p><img src="https://cdn.inflearn.com/public/files/posts/0ce34783-d520-4d77-a180-addaef17a006/1dfb38f6-8d16-4de3-ae09-37654e3c0c96.webp" media-type="img" alt="mission 10_1_실행화면1.png.webp" title="mission 10_1_실행화면1.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/3d6a8b3f-e7c1-48cf-b1bb-c2f99a705216/18fa43aa-0074-4e33-8a94-5727fcdd87c2.webp" media-type="img" alt="mission 10_1_실행화면2.png.webp" title="mission 10_1_실행화면2.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/bd53ea26-f06f-4e7d-82f3-d38b9291f548/876a13fb-df56-4641-ac5d-ec5733ae6b2f.webp" media-type="img" alt="mission 10_1_실행화면3.png.webp" title="mission 10_1_실행화면3.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/5d488e0e-4a90-4fb4-a84f-85d48d07fcc8/4ec4755d-ab95-402e-825a-90bb59d4863e.webp" media-type="img" alt="mission 10_1_실행화면4.png.webp" title="mission 10_1_실행화면4.png.webp" width="527" height="333"><p>&nbsp;</p>

Day10 미션 안내

Mission 10.

Mission 9.

<pre><code class="language-javascript">//미션1. 자바스크립트의 this
var value = 42; // 1. 전역 변수를 선언하기

const obj = {
  value: 42,
  regularFunction: function () {
    console.log(this.value); // 여기서 this는 무엇을 가리키나요?
  },
  arrowFunction: () =&gt; {
    console.log(this.value); // 여기서 this는 무엇을 가리키나요?
  },
  // 2. 일반 함수로 변경하기
  editArrowFunction: function () {
    console.log(this.value);
  },
};

obj.regularFunction(); // 출력: 42
obj.arrowFunction(); // 출력: undefined (이유를 설명해보세요)
obj.editArrowFunction();</code></pre><img src="https://cdn.inflearn.com/public/files/posts/c11abfdf-e674-4593-87ef-6c4cd9ec5d46/13de1a8f-4566-4982-b9de-c5289131c2bb.webp" media-type="img" alt="mission 08_1_실행화면.png.webp" title="mission 08_1_실행화면.png.webp" width="527" height="549"><p>1] regularFunction 내의 this.value<br>  --&gt; 메서드를 포함하고 있는 obj 객체의 value</p><p>2] arrowFunction 내의 this.value <br>  --&gt; 화살표 함수이기 때문에 자신을 포함하고 있는 obj 객체의 상위인 전역 객체의 value</p><p>3] obj.arrowFunction() 의 출력 결과가 undefined 인 이유<br>  --&gt; 전역 객체의 value가 정의 되어 있지 않아서 undefined가 출력 되며 "var value=42;" 로 값을 정의하면 undefined 대신 42 로 출력할 수 있음</p><p>&nbsp;</p><p>this.value 값이 정상출력 되게 하려면 var 타입으로 value를 선언하거나 arrowFunction 함수를 일반 함수로 수정하면 된다.</p><hr><p><strong>미션2. 6-2 동물앨범 만들기-1-2</strong></p><img src="https://cdn.inflearn.com/public/files/posts/92a0cfe4-89cf-450b-ad5f-80d0a4d71cc9/f021a81c-4a76-413d-9cca-1d87a62ebecb.webp" media-type="img" alt="mission 08_2_실행화면1.png.webp" title="mission 08_2_실행화면1.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/a14aabd6-ee21-4f9c-970d-0ab19b727f1c/260e4801-5782-4283-9f6d-4be8846c82c1.webp" media-type="img" alt="mission 08_2_실행화면2.png.webp" title="mission 08_2_실행화면2.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/01a50689-f7f8-45f1-98e6-0a8745c9af84/5af091b8-ef43-4ca5-9655-f521daf248a0.webp" media-type="img" alt="mission 08_2_실행화면3.png.webp" title="mission 08_2_실행화면3.png.webp" width="527" height="333"><img src="https://cdn.inflearn.com/public/files/posts/76832742-d9fd-42d4-9d56-dc0d455cc8ac/1ca2e6c9-a0c1-426e-b940-3fb4f32a3bf0.webp" media-type="img" alt="mission 08_2_실행화면4.png.webp" title="mission 08_2_실행화면4.png.webp" width="527" height="333">

Day8 미션 안내

Mission 8.

<pre><code class="language-javascript">//미션1. DOM API
let $button = document.getElementById("changeTextButton");
let $text = document.getElementById("text");

$button.addEventListener("click", () =&gt; {
  $text.textContent = $button.innerText;
});</code></pre><img src="https://cdn.inflearn.com/public/files/posts/eb182119-7244-4073-b348-57ac88217716/335660cb-e11a-4b3b-a62b-91e9daa8ca2d.webp" media-type="img" alt="mission 07_1_실행화면.png.webp" title="mission 07_1_실행화면.png.webp" width="527" height="381"><pre><code class="language-javascript">//미션2. DOM API &amp; Select Tag
let $selectBox = document.createElement("select");
$selectBox.id = "skills";

let $javascript = document.createElement("option");
$javascript.value = "javascript";
$javascript.textContent = "Javascript";

let $next = document.createElement("option");
$next.value = "next";
$next.textContent = "Next.js";

let $react = document.createElement("option");
$react.value = "react";
$react.textContent = "React.js";

let $typescript = document.createElement("option");
$typescript.value = "typescript";
$typescript.textContent = "TypeScript";

$selectBox.appendChild($javascript);
$selectBox.appendChild($next);
$selectBox.appendChild($react);
$selectBox.appendChild($typescript);

let $divTag = document.getElementById("app");

$divTag.appendChild($selectBox);

$selectBox.addEventListener("change", (event) =&gt; {
  console.log(event.target.value);
});</code></pre><img src="https://cdn.inflearn.com/public/files/posts/9c54a7c9-4423-4a8f-9013-d23da1a4b19d/07953568-b88d-4c17-a18f-eb8ed19ada39.webp" media-type="img" alt="mission 07_2_실행화면.png.webp" title="mission 07_2_실행화면.png.webp" width="527" height="491"><p>&nbsp;</p>

Mission 7.

<pre><code class="language-javascript">//미션1. API 호출1
function fakeApiCall() {
  return new Promise((resolve) =&gt; {
    setTimeout(() =&gt; {
      resolve({ name: "John Doe", age: 30 });
    }, 2000);
  });
}

// fetchUserData 함수 완성
const fetchUserData = async () =&gt; {
  let res = await fakeApiCall();

  console.log(res.name);
};

fetchUserData();</code></pre><img src="https://cdn.inflearn.com/public/files/posts/836f9a76-b2d8-43aa-aaa4-14516c96ff0e/9f43b166-837d-47e5-9501-9db3c9917dff.webp" media-type="img" alt="mission 06_1_실행화면.png.webp" title="mission 06_1_실행화면.png.webp" width="527" height="287"><pre><code class="language-javascript">//미션2. API 호출2
const API_URL = "https://pokemon-api-ecru-eta.vercel.app";

const printGreenPokemon = async () =&gt; {
  try {
    let res = await fetch(API_URL);
    let pokemonData = await res.json();

    let greenPokemon = pokemonData.data.filter(
      (pokemon) =&gt; pokemon.color == "green"
    );

    console.log(greenPokemon);
  } catch (err) {
    console.log(err);
  }
};

printGreenPokemon();</code></pre><img src="https://cdn.inflearn.com/public/files/posts/7385bbe3-d83d-4437-944d-6c7f1964945c/82431103-2686-44e5-b1da-9542a4fb8ec0.webp" media-type="img" alt="mission 06_2_실행화면.png.webp" title="mission 06_2_실행화면.png.webp" width="527" height="470"><p>&nbsp;</p>

Day6 미션 안내

Mission 6.

<pre><code class="language-javascript">//미션1. sort 메서드 사용하기
const items = ["apple", "kiwi", "banana", "fig", "watermelon"];

const lengthCompare = (a, b) =&gt; {
  if (a.length &gt; b.length) return -1;
  else if (a.length &lt; b.length) return 1;
  else return 0;
};

console.log(items.sort(lengthCompare));</code></pre><img src="https://cdn.inflearn.com/public/files/posts/1bd9d3e6-c2f1-4a3d-8503-04967cfbeaf4/0d918b6d-ca78-4a22-ba2f-4a0d9d73aaf0.webp" media-type="img" alt="mission 05_1_실행화면.png.webp" title="mission 05_1_실행화면.png.webp" width="527" height="411"><pre><code class="language-javascript">//미션2. 상품 목록에서 특정 정보만 구조 분해로 꺼내기
const products = [
  { id: 1, name: "모니터", price: 300000, stock: 12 },
  { id: 2, name: "키보드", price: 50000, stock: 5 },
  { id: 3, name: "노트북", price: 1200000, stock: 3 },
];

let [firstProduct, secondProduct, thirdProduct] = products;

let { name: spName, stock: spStock } = secondProduct;

console.log(`${spName}의 재고는 ${spStock}개입니다.`);
</code></pre><img src="https://cdn.inflearn.com/public/files/posts/b3a48a0e-b747-43fa-99d7-31a6418facb0/07489916-938e-494b-a535-2d0186d2a876.webp" media-type="img" alt="mission 05_2_실행화면.png.webp" title="mission 05_2_실행화면.png.webp" width="527" height="439"><pre><code class="language-javascript">//미션3. spread&amp;rest 간단 빈칸 채우기
const arr1 = [1, 2];
const arr2 = [3, 4];

// 1) spread 문법을 사용하여 두 배열을 합친 newArr을 만드세요.
const newArr = [...arr1, ...arr2];

const user = {
  name: "효빈",
  age: 26,
  hobby: "게임",
};

// 2) rest 문법을 사용해 name만 따로 분리하고 나머지를 restUser에 담으세요.
const { name, ...restUser } = user;

console.log(newArr); // [1, 2, 3, 4]
console.log(name); // "효빈"
console.log(restUser); // { age: 26, hobby: "게임" }</code></pre>

Day5 미션 안내

Mission 5.

ViewContent.1769741914.339774.9727c037-592f-4748-ba48-e031eb5b2543