<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>sbsnonofficial 님의 블로그</title>
    <link>https://sbsnonofficial.tistory.com/</link>
    <description>sbsnonofficial 님의 블로그 입니다.</description>
    <language>ko</language>
    <pubDate>Sat, 4 Apr 2026 16:23:04 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>sbsnonofficial</managingEditor>
    <item>
      <title>(신병선) 나만의 취업 노트 만들기</title>
      <link>https://sbsnonofficial.tistory.com/16</link>
      <description>&lt;p data-ke-size=&quot;size18&quot;&gt;시작 하겠습니다.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;STEP 1.&amp;nbsp;&lt;/h3&gt;</description>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/16</guid>
      <comments>https://sbsnonofficial.tistory.com/16#entry16comment</comments>
      <pubDate>Fri, 23 May 2025 01:48:21 +0900</pubDate>
    </item>
    <item>
      <title>트러블 슈팅 (lol-information-app)</title>
      <link>https://sbsnonofficial.tistory.com/15</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;이번 프로젝트 간 만든 작품은 리그 오브 레전드 정보 앱으로 이름을 lol-information-app로 만들어 보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;시작 전 여러 문제 점이 있었는데 우선 이번에 배우기 시작한 타입스크립트를 이용하다 보니 어색한 부분이 많았고&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;강의 시청에만 시간을 쏟아부었고 강의를 보는 동안 이해가 안되는 부분이 많아 베이직 반 강의를 더 많이 다시 본 것 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;강의를 보며 이해를 해보려고 했지만 이해하지 못한 부분이 상당히 많았던것 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇게 일주일이 넘어가도록 강의만 보았다. 결국 월요일부터 프로젝트를 시작하였고 완벽하게 완성하지는 못했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이번에 다행인 부분은 시간안에 문제를 잡아 몇몇 기능은 구현이 된 상태로 제출 할 수 있었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우선 항상 있는 문제인데 폴더를 이동하는 과정에서 한번씩 오류가 발생하여 항상 프로젝트를 못 마무리 하거나 오류가&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;난 상태로 제출을 하였는데 오늘도 새벽에 폴더를 옮기는 와중에 완전히 꼬여버려 기존 코드에서 다시 초기를 만들어 금방 금방 수정하였다. 결국 로테이션과 캐릭터 상세 페이지를 제외 하고는 완성을 하긴 하였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아쉬운 부분이 몇가지 있는데 상세페이지 까지는 완성하고 싶었는데 시간이 부족하여 캐릭터를 클릭하였을때는 그 캐릭터 상세페이지로 이동하도록은 가능했는데 불러온 기록을 넣을 틀을 못 만들었고 로테이션 기능은 아예 건들지 못하였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;API도 한번씩 읽어보느라 상당히 시간 분배를 잘못했던것 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우선 메인 페이지 작성 간 이미지를 넣는 부분에서 오류가 나 상당 시간동안 애먹었는데 public의 위치를 바꾸고 다양한 방법을 통해 결국 메인 페이지(홈페이지)에 이미지를 넣을 수 있었다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1858&quot; data-origin-height=&quot;1405&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/q3jvB/btsMOrqlccE/rAkI8yYQdy8jSoVWbPctE1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/q3jvB/btsMOrqlccE/rAkI8yYQdy8jSoVWbPctE1/img.png&quot; data-alt=&quot;이런 식으로 홈페이지가 완성이 되었다. 이미지는 일부로 어느정도 크게 넣어두었다.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/q3jvB/btsMOrqlccE/rAkI8yYQdy8jSoVWbPctE1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fq3jvB%2FbtsMOrqlccE%2FrAkI8yYQdy8jSoVWbPctE1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1858&quot; height=&quot;1405&quot; data-origin-width=&quot;1858&quot; data-origin-height=&quot;1405&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;이런 식으로 홈페이지가 완성이 되었다. 이미지는 일부로 어느정도 크게 넣어두었다.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;첫번째 홈페이지는 원하던 모습처럼 잘 나온것 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 두번째 문제가 생겼다. 챔피언 목록을 만들던 중 생각보다 시간이 너무 오래 걸려버렸다. 챔피언 목록 작성 간에&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;틀을 어느정도 맞춰두고 챔피언 이미지와 정보를 불러오도록 기능을 넣는데 오류도 많았고 시도를 꾸준히 해본 결과&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정보를 받아오는것에 성공했다. 다음으로 챔피언 상세페이지를 만들려고 했지만 우선 목록에서 클릭 시 해당 챔피언&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;페이지로 이동은 하도록 만들어 두었지만 그 이상 기능을 넣기보다는 아이템 목록을 챔피언 목록과 비슷한 양식으로&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;금방 끝낼것 같아 먼저 도전하였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;당연하게 정보를 받아오는 부분과 틀은 동일하게 작성하여 확실히 시간을 단축할 수는 있었지만 상세페이지에서 계속&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오류가 나와 제출 시간에는 작성한 곳까지만 만들고 이전으로 돌려 두고 제출을 하였다. 상세페이지 까지는 직접 작성해&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;볼 예정이다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1842&quot; data-origin-height=&quot;848&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cmijb2/btsMPmaP3mx/Gl1noqb0d3KRusAke7DQlK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cmijb2/btsMPmaP3mx/Gl1noqb0d3KRusAke7DQlK/img.png&quot; data-alt=&quot;챔피언 목록&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cmijb2/btsMPmaP3mx/Gl1noqb0d3KRusAke7DQlK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcmijb2%2FbtsMPmaP3mx%2FGl1noqb0d3KRusAke7DQlK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1842&quot; height=&quot;848&quot; data-origin-width=&quot;1842&quot; data-origin-height=&quot;848&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;챔피언 목록&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1839&quot; data-origin-height=&quot;897&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/L7ibi/btsMOEiGIWE/k0Kkrwqws6UbveRT5NK3kK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/L7ibi/btsMOEiGIWE/k0Kkrwqws6UbveRT5NK3kK/img.png&quot; data-alt=&quot;아이템 목록&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/L7ibi/btsMOEiGIWE/k0Kkrwqws6UbveRT5NK3kK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FL7ibi%2FbtsMOEiGIWE%2Fk0Kkrwqws6UbveRT5NK3kK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1839&quot; height=&quot;897&quot; data-origin-width=&quot;1839&quot; data-origin-height=&quot;897&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;아이템 목록&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우선은 이정도로 한눈에 볼 수 있도록 만들어 보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;시간 관계 및 이해도로 인해 로테이션 페이지는 아래와 같다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1847&quot; data-origin-height=&quot;737&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b4rio9/btsMOtPajSn/fFP9PVqy8VEtIof0u5Sph1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b4rio9/btsMOtPajSn/fFP9PVqy8VEtIof0u5Sph1/img.png&quot; data-alt=&quot;작성을 못한 것을 볼 수 있다.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b4rio9/btsMOtPajSn/fFP9PVqy8VEtIof0u5Sph1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4rio9%2FbtsMOtPajSn%2FfFP9PVqy8VEtIof0u5Sph1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1847&quot; height=&quot;737&quot; data-origin-width=&quot;1847&quot; data-origin-height=&quot;737&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;작성을 못한 것을 볼 수 있다.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;중간에 디자인 적으로도 수정한 부분은 있지만 이번에는 디자인이 우선이 아니였기 때문에 따로 적도록 하지는 않겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우선 최대한 만들어 보았지만 아직 내 수준으로는 많이 부족한 것처럼 느껴졌다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;강의를 쭉 다시 한번 더 보고 다시 짜도록 해봐야겠다.&lt;/p&gt;</description>
      <category>lol</category>
      <category>로테이션</category>
      <category>주특기 심화</category>
      <category>타입스크립트</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/15</guid>
      <comments>https://sbsnonofficial.tistory.com/15#entry15comment</comments>
      <pubDate>Wed, 19 Mar 2025 11:51:28 +0900</pubDate>
    </item>
    <item>
      <title>Pokemon Dex 만들기</title>
      <link>https://sbsnonofficial.tistory.com/12</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;이번 과제는 포켓몬 도감에서 내 포켓몬 6마리를 지정해서 데리고 있을 수 있는 그런 프로그램인데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아래 사진과 같이 만들어야 함.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;포켓몬.png&quot; data-origin-width=&quot;2048&quot; data-origin-height=&quot;1628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ZPK8B/btsL7AUDP2a/Z0nF1Az1FwJ9Wfs8Oq9FLK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ZPK8B/btsL7AUDP2a/Z0nF1Az1FwJ9Wfs8Oq9FLK/img.png&quot; data-alt=&quot;역시 근본 1세대&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ZPK8B/btsL7AUDP2a/Z0nF1Az1FwJ9Wfs8Oq9FLK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZPK8B%2FbtsL7AUDP2a%2FZ0nF1Az1FwJ9Wfs8Oq9FLK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2048&quot; height=&quot;1628&quot; data-filename=&quot;포켓몬.png&quot; data-origin-width=&quot;2048&quot; data-origin-height=&quot;1628&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;역시 근본 1세대&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우선은 브랜치를 사용하여 상태 관리 방식을 단계별로 나눠 구현하는데 prop-drilling 브랜치를 먼저 생성하여 작업하고 이 브랜치에서는 각 컴포넌트가 필요한 데이터를 props로 전달받아 사용하는 방식으로 상태를 관리하게 된다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;후에 모든 기능 구현이 되면 context 브랜치를 새로 만들어 Context API 적용해 prop drilling 문제를 해결한 후 상태 관리를 하는데 사실 아직 구현 간에 문제가 생겨 두 차이를 볼 수 없었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;기능은 위 사진 처럼 포켓몬 볼 6칸에 본인이 원하는 포켓몬을 골라 추가를 하게 되는데 6마리 이상으로 추가되면 그 이상으로는 추가가 불가능하고 아래 도감처럼 포켓몬 창을 누르면 포켓몬 관련된 정보가 나오는 창이 나오며 특징이나 타입 그 외에도 이름 도감넘버를 볼 수 있는 기능이 있어야 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 브랜치 구분 해두고 페이지 작성 중인데 아직 코드 작성 간 구현에는 문제가 있어 크게 진전이 없는 것으로 보인다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;더 수정해보고 일단 구현가능하게 만든 후 다음 단계를 나가던 해야겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;955&quot; data-origin-height=&quot;1031&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/8TKYB/btsL8nmSkEp/h56rx3zkIegffNsZQLTcxk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/8TKYB/btsL8nmSkEp/h56rx3zkIegffNsZQLTcxk/img.png&quot; data-alt=&quot;현재 구분은 이정도로 해두고 아직 추가해야 할 부분이 많다.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/8TKYB/btsL8nmSkEp/h56rx3zkIegffNsZQLTcxk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8TKYB%2FbtsL8nmSkEp%2Fh56rx3zkIegffNsZQLTcxk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;955&quot; height=&quot;1031&quot; data-origin-width=&quot;955&quot; data-origin-height=&quot;1031&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;현재 구분은 이정도로 해두고 아직 추가해야 할 부분이 많다.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일단 고민을 해보고 있는데 내일까지 틀은 완전히 작성 해볼 예정이다. Git에 정리해두고 오늘 운동가야겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어제 다시 운동 시작 했는데 팔이 아파 오늘 코딩 중간중간에 팔이 저렸다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아오 그냥 유산소해야지 오늘은 근력 쉬는 날~&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일단 틀만 잡아보고 잠들 예정이다. 새벽에 코드 짜야겠다.&lt;/p&gt;</description>
      <category>Pokemon</category>
      <category>새벽 코딩</category>
      <category>포켓몬</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/12</guid>
      <comments>https://sbsnonofficial.tistory.com/12#entry12comment</comments>
      <pubDate>Tue, 4 Feb 2025 21:09:39 +0900</pubDate>
    </item>
    <item>
      <title>Visual Studio Code 마스터 하기</title>
      <link>https://sbsnonofficial.tistory.com/11</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;오늘 특강에서 창식튜터님의 VSCode 마스터 하기 강의를 2시간이나 하셨는데 여러 기능에 대해 알려주셨다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;첫번째로는 Git 쉽게 활용하는 방법, 두번째로는 사용하는 VSCode 확장 프로그램 &lt;s&gt;(예시로 80개 이상 있다고...),&lt;/s&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;남은 시간동안은 VSCode 단축키 이외에도 다양한 정보를 알려주었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;첫번째로는 Git을 쉽게 만들 수 있는 방식이 있는데 Github에서 맨 처음 만드는것부터 뭘 적용해야하는지 vscode에서&lt;br /&gt;바로 Repositories 를 바로 등록하는 방법부터 알려주었고 그 외에도 add, commit, push 클릭으로만 적용할 수 있고&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;실제 Git에 올라가는 것까지 확인 시켜주었는데 이전에도 방식을 한번 알려줘서 유용하게 써먹고 있었지만 추가 기능도&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;알 수 있었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가로 Git 관련된 다양한 기능 및 추가로 작성하는 방법을 알려주었는데 확실히 유익한 정보를 알려주었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;두번째로는 VSCode를 사용하는 동안 확장 프로그램들을 추천해주었는데 하나 하나 필수로 다운받아야 하는&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;확장 프로그램을 일일이 예시를 보여주며 설명해주었는데 여기서 거의 1시간에 가깝게 설명을 해주셨다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아직 정리를 덜 해서 TIL에 적지는 못하겠지만 오늘 받아야하는 확장 프로그램들이 상당히 많아졌다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;세번째 기억으로는 단축키가 아래와 같은데 맥(Mac), 윈도우(Window) 마다 단축키 또는 각자 아는 VSCode 단축키들을&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;공유하며 다양한 사람들의 추가로 사용하는 단축키와 예전에 있었던 단축키 관련된 이야기를 풀어주는데 확실히&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;창식튜터님의 입담이 역시 다양한 짤들과 아시는 정보들이 상당히 많은것으로 느껴졌다,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다른 분들이 정리해주신 단축키는 아래와 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;VSCode 단축키 [window편]&lt;/h4&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&amp;lt;이동관련&amp;gt; &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;방향키&amp;nbsp;블럭&amp;nbsp;이동&amp;nbsp; &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;shift&amp;nbsp;+&amp;nbsp;방향키&amp;nbsp;=&amp;nbsp;블럭&amp;nbsp;단위&amp;nbsp;선택 &lt;br /&gt;end&amp;nbsp;=&amp;nbsp;줄의&amp;nbsp;끝으로&amp;nbsp;이동 &lt;br /&gt;home&amp;nbsp;=줄의&amp;nbsp;처음으로&amp;nbsp;이동 &lt;br /&gt;shift&amp;nbsp;+&amp;nbsp;end&amp;nbsp;=&amp;nbsp;처음부터&amp;nbsp;끝까지&amp;nbsp;전체선택 &lt;br /&gt;shift&amp;nbsp;+&amp;nbsp;home&amp;nbsp;=&amp;nbsp;끝에서&amp;nbsp;처음까지&amp;nbsp;전체선택 &lt;br /&gt;shift&amp;nbsp;&amp;nbsp;+&amp;nbsp;마우스&amp;nbsp;스크롤&amp;nbsp;=&amp;nbsp;좌우이동 &lt;br /&gt;&lt;br /&gt;&amp;lt;alt&amp;nbsp;단축키&amp;gt; &lt;br /&gt;alt&amp;nbsp;+&amp;nbsp;방향키(&amp;uarr;,&amp;nbsp;&amp;darr;)&amp;nbsp;=&amp;nbsp;줄이동&amp;nbsp;(여러&amp;nbsp;줄&amp;nbsp;가능) &lt;br /&gt;alt&amp;nbsp;+&amp;nbsp;shift&amp;nbsp;+&amp;nbsp;방향키(&amp;uarr;,&amp;nbsp;&amp;darr;)&amp;nbsp;=&amp;nbsp;코드&amp;nbsp;복사&amp;nbsp; &lt;br /&gt;alt&amp;nbsp;클릭으로&amp;nbsp;커서&amp;nbsp;추가&amp;nbsp;가능&amp;nbsp; &lt;br /&gt;&lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;x&amp;nbsp;=&amp;nbsp;&amp;nbsp;한줄&amp;nbsp;잘라내기&amp;nbsp; &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;d&amp;nbsp;=&amp;nbsp;같은&amp;nbsp;단어,&amp;nbsp;여러줄&amp;nbsp;선택 &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;alt&amp;nbsp;+&amp;nbsp;방향키&amp;nbsp;=&amp;nbsp;커서&amp;nbsp;추가&amp;nbsp; &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;space&amp;nbsp;=&amp;nbsp;자동완성&amp;nbsp;제안&amp;nbsp;실행 &lt;br /&gt;ctrl&amp;nbsp;+&amp;nbsp;z&amp;nbsp;/&amp;nbsp;ctrl+&amp;nbsp;shift&amp;nbsp;+z&amp;nbsp;=&amp;nbsp;되돌리기&amp;nbsp;/&amp;nbsp;다시실행 &lt;br /&gt;&lt;br /&gt;f2&amp;nbsp;-&amp;gt;&amp;nbsp;파일다른&amp;nbsp;함수,&amp;nbsp;변수이름&amp;nbsp;변경가능 &lt;br /&gt;f1&amp;nbsp;-&amp;gt;&amp;nbsp;organize&amp;nbsp;import&amp;nbsp;하면&amp;nbsp;안쓰는&amp;nbsp;import&amp;nbsp;삭제&lt;/blockquote&gt;</description>
      <category>githhub</category>
      <category>vscode</category>
      <category>단축키</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/11</guid>
      <comments>https://sbsnonofficial.tistory.com/11#entry11comment</comments>
      <pubDate>Mon, 27 Jan 2025 21:38:15 +0900</pubDate>
    </item>
    <item>
      <title>트러블 슈팅 (Olympic-Medal-Tracker)</title>
      <link>https://sbsnonofficial.tistory.com/10</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;이번 트러블 슈팅은 Olympic-Medal-Tracker로 두번째 개인 과제 주제였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이번 프로젝트를 진행하며 여러가지의 트러블 슈팅이 있었는데 지금부터 정리해 보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;프로젝트를 하며 기존에 components들을 아래 이미지와 같이 작성했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 캡처 2025-01-24 132542.png&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/QzbCH/btsL2dMbMq9/FWokK7Au3IVtyKKK57qPJ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/QzbCH/btsL2dMbMq9/FWokK7Au3IVtyKKK57qPJ1/img.png&quot; data-alt=&quot;components 구분&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/QzbCH/btsL2dMbMq9/FWokK7Au3IVtyKKK57qPJ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQzbCH%2FbtsL2dMbMq9%2FFWokK7Au3IVtyKKK57qPJ1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1919&quot; height=&quot;1030&quot; data-filename=&quot;화면 캡처 2025-01-24 132542.png&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;components 구분&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;br /&gt;components 구분도 이전에는 작성을 못했다가 튜터님의 도움으로 기존 2개 이하로 만들었던 파일들을 추가로 더 만들었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;br /&gt;작성을 하며 기존 틀은 아래와 같이 만들었는데 여러가지 이유로 모양과 창 크기가 원하던 방식으로 나오지 않았음.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screenshot 2025-01-24 at 13.27.05.JPG&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b4rVtu/btsL0MI4aDa/KKsKQHA1OwSZXcjZDgXjyK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b4rVtu/btsL0MI4aDa/KKsKQHA1OwSZXcjZDgXjyK/img.jpg&quot; data-alt=&quot;초기 css 작성 (수정 전)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b4rVtu/btsL0MI4aDa/KKsKQHA1OwSZXcjZDgXjyK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4rVtu%2FbtsL0MI4aDa%2FKKsKQHA1OwSZXcjZDgXjyK%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1919&quot; height=&quot;1030&quot; data-filename=&quot;Screenshot 2025-01-24 at 13.27.05.JPG&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;초기 css 작성 (수정 전)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;원래 계획대로면 국가명 작성 후 메달을 적고 업데이트 버튼을 누르게 되면 메달 기록이 수정되도록 바랬지만 수정이 안되었고 코드 작성 간 수정하는 기능을 추가로 작성하였음.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bVuSVA/btsL1jGmLbB/RhFJhwdOX11jVkdebh0bbk/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bVuSVA/btsL1jGmLbB/RhFJhwdOX11jVkdebh0bbk/img.jpg&quot; data-is-animation=&quot;false&quot; data-origin-width=&quot;1917&quot; data-origin-height=&quot;1033&quot; data-filename=&quot;Screenshot 2025-01-24 at 13.52.15.JPG&quot; data-widthpercent=&quot;33.29&quot; style=&quot;width: 32.5145%; margin-right: 10px;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bVuSVA/btsL1jGmLbB/RhFJhwdOX11jVkdebh0bbk/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVuSVA%2FbtsL1jGmLbB%2FRhFJhwdOX11jVkdebh0bbk%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1917&quot; height=&quot;1033&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cBn49n/btsL0Nuyy6B/RONKVdYWvYJZZ0TbNtY9w1/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cBn49n/btsL0Nuyy6B/RONKVdYWvYJZZ0TbNtY9w1/img.jpg&quot; data-is-animation=&quot;false&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1033&quot; data-filename=&quot;Screenshot 2025-01-24 at 13.52.03.JPG&quot; data-widthpercent=&quot;33.32&quot; style=&quot;width: 32.5484%; margin-right: 10px;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cBn49n/btsL0Nuyy6B/RONKVdYWvYJZZ0TbNtY9w1/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBn49n%2FbtsL0Nuyy6B%2FRONKVdYWvYJZZ0TbNtY9w1%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1919&quot; height=&quot;1033&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bC1mRn/btsL2ofSsl4/QN06qWwkhop0zA1FJM3UEk/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bC1mRn/btsL2ofSsl4/QN06qWwkhop0zA1FJM3UEk/img.jpg&quot; data-is-animation=&quot;false&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1031&quot; data-filename=&quot;Screenshot 2025-01-24 at 15.01.22.JPG&quot; data-widthpercent=&quot;33.39&quot; style=&quot;width: 32.6115%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bC1mRn/btsL2ofSsl4/QN06qWwkhop0zA1FJM3UEk/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbC1mRn%2FbtsL2ofSsl4%2FQN06qWwkhop0zA1FJM3UEk%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1919&quot; height=&quot;1031&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;이미지와 같이 업데이트 시 기존 메달의 숫자가 아닌 새로 수정한 숫자가 나옴.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이후에 css도 기존에 양식처럼 국가명, 금메달, 은메달, 동메달 아래에 입력칸이 위치되도록 하고 싶었고 업데이트, 국가 추가 버튼의 글자도 끊어져 나오는 것이 아닌 한번에 나오길 바랬었음.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screenshot 2025-01-27 at 09.16.23.JPG&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/diOhQG/btsL3lJzrWC/4c6kjJsJcguekNeP2bzHDK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/diOhQG/btsL3lJzrWC/4c6kjJsJcguekNeP2bzHDK/img.jpg&quot; data-alt=&quot;두번의 css 수정으로 위 이미지와 같이 분리는 했지만 국가 추가, 업데이트가 아래로 내려감&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/diOhQG/btsL3lJzrWC/4c6kjJsJcguekNeP2bzHDK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdiOhQG%2FbtsL3lJzrWC%2F4c6kjJsJcguekNeP2bzHDK%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1919&quot; height=&quot;1030&quot; data-filename=&quot;Screenshot 2025-01-27 at 09.16.23.JPG&quot; data-origin-width=&quot;1919&quot; data-origin-height=&quot;1030&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;두번의 css 수정으로 위 이미지와 같이 분리는 했지만 국가 추가, 업데이트가 아래로 내려감&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사실 국가 추가와 업데이트도 한 줄에 한번에 있기를 바랬지만 위 같은 결과물이 나옴.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;외형으로 크게 나쁘지는 않지만 기능면에서도 필수 과제는 다 돌아가는 정도로 작성이 됨.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 프로젝트 간 추가 기능 구현을 시간 내 완성하지 못하였고 아직 부족한 부분이 보였음. (예시로 css 부분)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가 기능은 이번에 추가를 해볼 예정.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이외에도 기능 구현 간 국가 추가를 눌러도 국가가 추가가 안되는 상황이나 다듬을 CSS가 더 많았는데 트러블 슈팅으로&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;작성할 이미지를 중간에 캡쳐해두지 못했음.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;트러블 슈팅을 할 것이 나오면 바로 캡쳐해두고 보관하는 습관을 들여야 할 것으로 보임.&lt;/p&gt;</description>
      <category>Medal</category>
      <category>Olympic</category>
      <category>Tracker</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/10</guid>
      <comments>https://sbsnonofficial.tistory.com/10#entry10comment</comments>
      <pubDate>Fri, 24 Jan 2025 15:52:08 +0900</pubDate>
    </item>
    <item>
      <title>트러블 슈팅 (MovieSearch)</title>
      <link>https://sbsnonofficial.tistory.com/9</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;1. 첫번째로 작성간에 HTML, CSS, JS에서 오타가 많이나와 코드오류가 많이 나와 상당한 시간을 잡아 먹었음&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;ex) .을 빼먹거나 {}, (), ; 빼먹은 경우들이 있어 중간중간 수정을 계속 해줘야 했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2. 처음 TMDB API 연동부분에서 상당한 시간을 소비함. API가 이해가 안되는 부분도 많았지만 적용 시키려고 3일&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정도를 사용한것으로 기억하는데 강의를 듣고도 상당히 이해가 안되어 계속 시도해 보다가 연결은 성공하였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;3. UI 구현 간 CSS 무너짐이 발생하고 꾸준한 수정으로 어느정도 틀을 만들고 나서야 겨우 모양이 나옴.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;CSS 수정에서 시간을 거의 다 씀.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;4. JS 작성 간 기능에 문제가 있어 많은 도움을 받고 상세 모달 구현까지는 성공하였는데 추가 기능이 하나도 없어&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;상당히 아쉬움 다시 추가할 예정&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;5. 검색 기능을 상세 모달보다 우선으로 했어야 했는데 생각했던 순서대로 진행하지 못하였고 작성간에 평점, 이름,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;상세 정보를 만드느라 검색 창만 만들어 두고 검색 기능은 구현을 못하였음.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;6. 결과적으로 모양은 어느정도 갖추어 두었지만 기능적으로는 부족한 부분이 많음. 프로젝트 종료후에 시간을 좀 더&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사용하여 더욱 완성해볼 예정&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;7. 트러블 슈팅이나 READ ME 같은 경우에도 작성하는 것을 놓치고 있다가 급하게 적어 중간에 비어 있는 부분이 많거나 없음. &lt;s&gt;(큰 사고)&lt;/s&gt;&lt;/p&gt;</description>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/9</guid>
      <comments>https://sbsnonofficial.tistory.com/9#entry9comment</comments>
      <pubDate>Fri, 17 Jan 2025 12:55:52 +0900</pubDate>
    </item>
    <item>
      <title>API 알아가기</title>
      <link>https://sbsnonofficial.tistory.com/8</link>
      <description>&lt;h2 style=&quot;color: #000000; text-align: left;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;API란?&lt;/span&gt;&lt;/h2&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;API는 (Application Programming Interface) 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다고 한다.&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;운영체제나 C, C++, Pascal 등과 같은 언어로 응용 프로그램을 만들 때, 윈도우를 만들고 파일을 여는 것과 같은 처리를 할 수 있도록 1,000여 개 이상의 함수로 구성되어 있는데 API는 프로그래머를 위한 운영체제나 프로그램의 인터페이스로서 사용자와 직접 대하게 되는 그래픽 사용자 인터페이스나 명령형 인터페이스와 뚜렷한 차이가 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;API는 응용 프로그램이 운영체제나 데이터 베이스 관리 시스템과 같은 시스템 프로그램과 통신할 때 사용되는 언어나 메시지 형식을 가지며, API는 프로그램 내에서 실행을 위해 특정 서브루틴에 연결을 제공하는 함수를 호출하는 것으로 구현된다고 하는데 그래서 하나의 API는 함수의 호출에 의해 요청되는 작업을 수행하기 위해 이미 존재 하거나 또는 연결되어야 하는 몇 개의 프로그램 모듈이나 루틴을 가진다고 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;쉬운 예시로는 햄버거 &lt;span style=&quot;color: #222222; text-align: start;&quot;&gt; &lt;/span&gt; 를 주문해보는것을 예시로 해보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;1. 햄버거를 사기위해 나는 식당에 갔다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;2. &quot;햄버거 주세요!&quot; 라고 웨이터에게 말한다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;3. 웨이터는 주방에 가서 요청을 전달한다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;4. 주방에서 햄버거를 만들고 웨이터에게 전달한다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;5. 웨이터는 햄버거를 나에게 가져다 준다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 상황을 쉽게 정리하면 위의 나는 API를 사용하는 사람이고 웨이터는 API이고 주방은 서비스를 제공하는 서버가 된다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;API는 즉 &quot;요청하고 응답&quot; 하는 방법을 표준화한 약속이라고 이해 할 수도 있다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이번 프로젝트는 그 API를 통해 영화 타이틀, 평점, 정보, 이미지 들을 끌어와서 사이트를 만드는 과제인데 노력중이다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;사진 자료를 첨부하고 싶지만 아직 형태가 완벽하지 않아 다음 TIL에 어느정도 다듬어진 사진을 올릴 예정이다.&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;아직도 이해가 안되는 부분도 많고 어려운 부분도 많지만 내일도 화이팅!&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>API</category>
      <category>햄부기</category>
      <category>햄부기온앤온</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/8</guid>
      <comments>https://sbsnonofficial.tistory.com/8#entry8comment</comments>
      <pubDate>Thu, 9 Jan 2025 23:51:42 +0900</pubDate>
    </item>
    <item>
      <title>오늘도 한발 더</title>
      <link>https://sbsnonofficial.tistory.com/7</link>
      <description>&lt;h2 style=&quot;color: #000000; text-align: left;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;DOM 조작하기&lt;/span&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;&quot;&gt;DOM이란?&lt;/span&gt;&lt;span style=&quot;&quot;&gt;Document Object Model의 줄임말로 Javascript로 HTML을 조작 할 수 있게 가공해놓은 데이터인데&lt;/span&gt;&lt;span style=&quot;&quot;&gt;단어 하나 하나 구분하면 Document (문서) Object (객체) Model (모델) 말 그대로 문서 객체 모델이다.&lt;/span&gt;&lt;span style=&quot;&quot;&gt;DOM은 HTML, XML 문서의 프로그래밍 interface 이다.&lt;/span&gt;&lt;span style=&quot;&quot;&gt;DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 DOM 구조에&lt;/span&gt;&lt;span style=&quot;&quot;&gt;접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다.&lt;/span&gt;&lt;span style=&quot;&quot;&gt;이 정도로 볼 수 있겠다. 현재 강의에서 5주차에 배운다고 나왔지만 현재 나는 아직 2~3주차 정도 실력이라&lt;/span&gt;&lt;span style=&quot;&quot;&gt;확실히 미숙했다. (&lt;s&gt;상당히 생소했음.&lt;/s&gt;)&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp;HTML에 있는 태그를 가져오게 되면&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;document.getElementsByTagName(선택자)&lt;/li&gt;
&lt;li&gt;document.getElementById(선택자)&lt;/li&gt;
&lt;li&gt;document.getElementsByClassName(선택자)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;document.querySelector(선택자)&lt;br /&gt;☝️&lt;/b&gt; 어렵다면 이거 하나만 외워서 써도 됨. 이 함수 하나로 id, class, 태그명 모두 가져올 수 있음&lt;b&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다양한 예시들을 읽어보고 하나씩 사용해보며 감을 찾고 있는 동안 실습 과제가 내려왔다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;문제는 총 6개로 직접 파일 생성 해서 풀어보기 형식인데&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;텍스트 변경하기&lt;/li&gt;
&lt;li&gt;글자 색상 변경하기&lt;/li&gt;
&lt;li&gt;이미지 주소 변경하기&lt;/li&gt;
&lt;li&gt;버튼 클릭으로 텍스트 표시&lt;/li&gt;
&lt;li&gt;콘솔 로그 출력하기&lt;/li&gt;
&lt;li&gt;변수 사용하기&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 총 6문제 인데 문제 중 하나를 예시로 들면 4번 문제인데&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;ex4.html 파일을 생성합니다.&lt;/li&gt;
&lt;li&gt;HTML 파일에 &amp;lt;button id=&quot;show-btn&quot;&amp;gt; 보이기 &amp;lt;/button&amp;gt;와 &lt;br /&gt;&amp;lt;p id=&quot;hidden-text&quot; style=&quot;display: none;&quot;&amp;gt;이제 보입니다!&amp;lt;/p&amp;gt;를 추가하세요.&lt;/li&gt;
&lt;li&gt;JavaScript를 사용해 버튼을 클릭하면 id가 hidden-text인 요소가 화면에 표시되도록 구현하세요.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;850&quot; data-origin-height=&quot;667&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/BbVBD/btsLEp1z3zb/BFpsvaCvjXnDWibsF0nao0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/BbVBD/btsLEp1z3zb/BFpsvaCvjXnDWibsF0nao0/img.png&quot; data-alt=&quot;4번 문제를 이렇게 풀어보았다.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/BbVBD/btsLEp1z3zb/BFpsvaCvjXnDWibsF0nao0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBbVBD%2FbtsLEp1z3zb%2FBFpsvaCvjXnDWibsF0nao0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;525&quot; height=&quot;412&quot; data-origin-width=&quot;850&quot; data-origin-height=&quot;667&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;4번 문제를 이렇게 풀어보았다.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이런 식으로 문제를 풀고 모두 작성 시에 검사 받은 후 다시 자리에 돌아가 공부가 가능했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어떻게든 문서 참고해서 하나하나 다 풀어냈고 시간이 생각보다 더 걸렸지만 풀어서 다행이였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞으로도 이와 같은 방식으로 작성하고 풀어나갈 텐데 빨리 강의 완강 해야겠다.&lt;/p&gt;</description>
      <category>dom</category>
      <category>걷기반</category>
      <category>문제풀기</category>
      <category>오블완</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/7</guid>
      <comments>https://sbsnonofficial.tistory.com/7#entry7comment</comments>
      <pubDate>Mon, 6 Jan 2025 21:23:32 +0900</pubDate>
    </item>
    <item>
      <title>KPT 회고 [Keep, Problem, Try]</title>
      <link>https://sbsnonofficial.tistory.com/6</link>
      <description>&lt;h2 style=&quot;color: #000000; text-align: left;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;1. KPT 회고란?&lt;/span&gt;&lt;/h2&gt;
&lt;p&gt;&lt;span style=&quot;&quot;&gt;KPT는 Keep, Problem, Try의 약자로,&lt;/span&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Keep : 잘했던 점이나 유지하고 싶은 것&lt;/li&gt;
&lt;li&gt;Problem : 개선이 필요하거나 아쉬웠던 점&lt;/li&gt;
&lt;li&gt;Try : 앞으로 시도하고 싶은 것&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 세 가지를 정리하며, 프로젝트를 돌아보고 앞으로 더 나아질 방향을 찾는 회고 방법&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 style=&quot;color: #000000; text-align: left;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;2. KPT 회고 작성 (2024.12.30.)&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  회고 날짜: 2024.12.30.(월)&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  프로젝트/업무 이름: BeTheBestTeam&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  작성자/팀원: 신병선&lt;/b&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;1. Keep (잘했던 점 / 유지하고 싶은 것)&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;✅ 개인적인 성과: Memberinfo&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;수정 버튼에 따른 뷰 변화&lt;/li&gt;
&lt;li&gt;수정 후 db 전송&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;✅ 팀의 성과: Main, Login, Nav, Member&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;재원님의 1대1 케어&lt;/li&gt;
&lt;li&gt;지선님의 발표와 디자인&lt;/li&gt;
&lt;li&gt;지수 팀장님의 팀원들과의 소통과 리더십&lt;/li&gt;
&lt;li&gt;경민님의 꾸준함과 열심히 하시는 모습&lt;/li&gt;
&lt;li&gt;지은님의 팀에서 화합 소통 및 꾸준히 열심히 하시는 모습&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;2. Problem (개선이 필요하거나 아쉬웠던 점)&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;⚠️ 개인적인 아쉬움:&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;부족한 부분이 많아서 도움을 너무 많이 받았고 주변팀원들과의 수준 차이가 많이 났던 것 같음.&lt;/li&gt;
&lt;li&gt;팀 프로젝트간 의견이나 표현을 거의 못했음.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;⚠️ 팀 차원의 문제: x (없음)&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;팀 간 문제는 없었음. 재원님이 한명씩 케어 해주며 소통을 꾸준히 하시고 다들 열심히 하셔서 완성을 할 수 있었다고 생각함.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;3. Try (앞으로 시도해보고 싶은 것)&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  새로운 도전:&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;부족한 실력을 채우기 위해 주말에도 강의내용을 따라해보고 공부를 추가로 해야할 것 같음. 아직도 firebase 뿐만 아니라 git도 많이 어색함.&lt;/li&gt;
&lt;li&gt;프로젝트 간 의견을 거의 못 낸 것 같아 다음 프로젝트에는 공부를 해서 의견을 낼 수 있을 정도로는 갖춰 두어야 할 것 같음.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  문제 해결 방안:&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;강의 뿐만 아닌 직접적인 추가 개인공부 시간을 추가해야 할 것.&lt;/li&gt;
&lt;li&gt;팀원들과 원활한 소통을 위한 기본적인 내용은 다 숙지해야 할 것 같음.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;✍️ 자유 메모&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;프로젝트와 관련하여 추가로 남기고 싶은 생각: 이번 프로젝트에서 팀원분들이 너무 잘 해주셔서 도움을 너무 많이 받아서 다음에는 개인 임무를 도움을 최소한으로 하고 직접 할 수 있도록 노력해봐야 겠음.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style1&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;느낀점&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;개인적으로 이번 프로젝트 간에 상당히 아쉬운 부분이 많고 개인적인 실력을 확실히 알아볼 수 있는 계기가 되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금은 첫주차가 지나가며 새로운것도 경험해보고 연습해보고 부족한 부분에 대해 한 번씩 피드백을 받게 되니&lt;br /&gt;확연히 눈에 보이게 된 느낌이다. 부족한 부분이나 앞으로 나아갈 방향도 이번 기회로 확실해졌다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아직도 부족한 부분많은 초보 개발자라도 언젠간 이 글을 보며 이럴때도 있었지 하겠지!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어서 강의하나라도 한번이라도 더 보고 공부해야겠다. 용어도 한번씩 정리하고.&lt;/p&gt;</description>
      <category>KPT</category>
      <category>느낀점</category>
      <category>스파르타</category>
      <category>초보개발자</category>
      <category>팀프로젝트</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/6</guid>
      <comments>https://sbsnonofficial.tistory.com/6#entry6comment</comments>
      <pubDate>Mon, 30 Dec 2024 21:38:22 +0900</pubDate>
    </item>
    <item>
      <title>BT(x2)</title>
      <link>https://sbsnonofficial.tistory.com/5</link>
      <description>&lt;h2 style=&quot;color: #000000; text-align: left;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;1. 작업 이어서 하기&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;오늘은 기존에 만들었던 html, css를 정리하고 js 기능 추가로 구현시키기 위해 시간을 쏟아 부었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;중간 중간 여러 고비가 있었지만 팀원 분의 도움으로 점점 완성해 가고 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;&quot;&gt;기능을 추가하다보니 코드에서 오류도 많았다.&lt;s&gt; (그냥 뭔가 따라했는데 오류가 떠서 원하는 방식으로 안나옴.)&lt;/s&gt;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;많이 아쉬웠지만 일단은 해낼려고 강의도 보고 노력하는 ing....&lt;/span&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cpTQwh/btsLzEczbsR/9zyHuq1fZUXRm2KEhO0GuK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cpTQwh/btsLzEczbsR/9zyHuq1fZUXRm2KEhO0GuK/img.png&quot; data-alt=&quot;기존에 입력 방식이던 창을 DB를 끌어와서 정보를 넣어주는 방식을 위해 내용 예시 수정&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cpTQwh/btsLzEczbsR/9zyHuq1fZUXRm2KEhO0GuK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcpTQwh%2FbtsLzEczbsR%2F9zyHuq1fZUXRm2KEhO0GuK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1871&quot; height=&quot;885&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;기존에 입력 방식이던 창을 DB를 끌어와서 정보를 넣어주는 방식을 위해 내용 예시 수정&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cSFGt9/btsLzuVizGp/Tx7VShaAgc7f3PECMHjHak/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cSFGt9/btsLzuVizGp/Tx7VShaAgc7f3PECMHjHak/img.png&quot; data-alt=&quot;아래와 같이 수정 버튼을 누르면 수정이 가능하고 Save 버튼으로 바뀌도록 설정.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cSFGt9/btsLzuVizGp/Tx7VShaAgc7f3PECMHjHak/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcSFGt9%2FbtsLzuVizGp%2FTx7VShaAgc7f3PECMHjHak%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1871&quot; height=&quot;885&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;아래와 같이 수정 버튼을 누르면 수정이 가능하고 Save 버튼으로 바뀌도록 설정.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;만들다 보니 Firebase를 통해 DB를 넣고 끌어오도록 만들어야 했는데 계속 못하고 있어 강의를 참고해야 겠다고 했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;4주차 강의를 보려면 3주차 숙제를 끝내야만 4주차 강의를 들을 수 있었는데 그 때문에 숙제를 하게 되었다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1883&quot; data-origin-height=&quot;1611&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/PoKbn/btsLAbAWnxH/oU0QDb4NKbxbOKSOvouv11/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/PoKbn/btsLAbAWnxH/oU0QDb4NKbxbOKSOvouv11/img.png&quot; data-alt=&quot;(뜬금 없지만) 오늘 3주차 숙제를 마쳤다.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/PoKbn/btsLAbAWnxH/oU0QDb4NKbxbOKSOvouv11/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPoKbn%2FbtsLAbAWnxH%2FoU0QDb4NKbxbOKSOvouv11%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1883&quot; height=&quot;1611&quot; data-origin-width=&quot;1883&quot; data-origin-height=&quot;1611&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;(뜬금 없지만) 오늘 3주차 숙제를 마쳤다.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇게 고난이 하나 끝나고 강의를 보기 시작했는데 강의 전 정리되어 있는 내용들 한번 읽어보고 만들어 보려고 했지만&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아직 그렇게 익숙해지기 쉽지 않았고 역시나 코드가 다 엉망진창으로 나와버리거나 안나와버리는 상황이 발생했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그 부터 바로 4주차 강의를 몰아 듣기 시작했고 어느정도가 이해가 되어 TIL 정리 후 한번 시도 해보고 오늘 안에 처리하는것이 내 목표다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b8X9Qy/btsLAbOvFBD/DYXH3XxWIAdpM7qyxPtVfK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b8X9Qy/btsLAbOvFBD/DYXH3XxWIAdpM7qyxPtVfK/img.png&quot; data-alt=&quot;클라우드 파이어스토어로 팀원들이 넣어둔 정보들도 볼 수 있음.&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b8X9Qy/btsLAbOvFBD/DYXH3XxWIAdpM7qyxPtVfK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb8X9Qy%2FbtsLAbOvFBD%2FDYXH3XxWIAdpM7qyxPtVfK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1871&quot; height=&quot;885&quot; data-origin-width=&quot;1871&quot; data-origin-height=&quot;885&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;클라우드 파이어스토어로 팀원들이 넣어둔 정보들도 볼 수 있음.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;빨리 이해를 해보고 내일 큰 문제 없게 페이지 정리를 하고싶다. 확실히 뭔가 잘하는 분 옆에 있으니 하나라도 배울 수 있고 다양한 경험을 해볼 수 있어 좋지만 뭔가 수준의 차이가 나는것 같다. &lt;s&gt;(아직 가끔 무슨 이야기인지 못 알아 먹을때가 있다..)&lt;/s&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;figure contenteditable=&quot;false&quot; data-ke-type=&quot;emoticon&quot; data-ke-align=&quot;alignCenter&quot; data-emoticon-type=&quot;challenge&quot; data-emoticon-name=&quot;001&quot; data-emoticon-isanimation=&quot;false&quot; data-emoticon-src=&quot;https://t1.daumcdn.net/keditor/emoticon/challenge/large/001.png&quot;&gt;&lt;img src=&quot;https://t1.daumcdn.net/keditor/emoticon/challenge/large/001.png&quot; width=&quot;150&quot; /&gt;&lt;/figure&gt;
&lt;h4 style=&quot;color: #000000; text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;오늘 하루 느낀 점&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #222222; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;여전히 천천히 배워가고 있지만 그래도 어제의 나보다는 하나 더 알아가고 한발자국씩 내 목표에 가까워지려고 노력하는 내가 자랑스럽다 생각하기엔 아직 그정도 까지는 아니지만 그래도 하나 확실한건 어제 나보다 나은 사람이 된건 사실이니까 소소하게 자존감을 올릴 수 있다. &lt;/p&gt;
&lt;p style=&quot;color: #222222; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;아직도 부족한게 많지만 첫 술에 배 부를 수는 없지 않나? 마찬가지로 꾸준히 버티며 공부하며 시간이 지나면 이정도 css나 간단한 코딩테스트 같은것은 그냥 앉은 자리에서 순식간에 뚝딱 처리하는 코(딩)쟁이가 되는게 아닐까? 라는 생각을 &lt;br /&gt;가져본다. 오늘의 TIL 끝.&lt;/p&gt;</description>
      <category>3일차</category>
      <category>BTBT</category>
      <category>Firebase</category>
      <category>Git</category>
      <category>GitHub</category>
      <author>sbsnonofficial</author>
      <guid isPermaLink="true">https://sbsnonofficial.tistory.com/5</guid>
      <comments>https://sbsnonofficial.tistory.com/5#entry5comment</comments>
      <pubDate>Thu, 26 Dec 2024 23:11:19 +0900</pubDate>
    </item>
  </channel>
</rss>