<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>siy__n.log</title>
        <link>https://velog.io/</link>
        <description></description>
        <lastBuildDate>Sun, 27 Aug 2023 14:01:18 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>siy__n.log</title>
            <url>https://velog.velcdn.com/images/siy__n/profile/166269da-34de-460e-b50e-d7141541b0ae/social_profile.png</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. siy__n.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/siy__n" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[멋쟁이 사자처럼 6기 프론트엔드 스쿨 JavaScript 프로젝트를 마치고]]></title>
            <link>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-6%EA%B8%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-JavaScript-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EA%B3%A0</link>
            <guid>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-6%EA%B8%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-JavaScript-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EA%B3%A0</guid>
            <pubDate>Sun, 27 Aug 2023 14:01:18 GMT</pubDate>
            <description><![CDATA[<p>다사다난 했던 이번 프로젝트 ! 어제 마쳤으니 따끈따끈하게 쪄온 리뷰입니다.</p>
<p>공식적으로는 4일이지만, 주말이 포함되어있어 6일 가량 작업한 내용입니다.</p>
<h2 id="프로젝트-주제-🍇">프로젝트 주제 🍇</h2>
<p>지난 html, css 프로젝트에서 진행했던 소스를 js까지 입히는 내용이었습니다.
조는 프로젝트마다 바뀌기 때문에 이전 프로젝트에서 작업했던 주제가 달랐습니다 !
저희 조는 마켓컬리를 오마주한 <strong>마켓칼리</strong>를 작업하였습니다.</p>
<h2 id="프로젝트-기간-🕰️">프로젝트 기간 🕰️</h2>
<p>2023.07.28(Fri) - 2023.08.02(Wed)</p>
<h2 id="깃허브-주소-💗">깃허브 주소 💗</h2>
<p><a href="https://github.com/1plus1equal11/11_Karly">https://github.com/1plus1equal11/11_Karly</a></p>
<h2 id="팀원-소개-🫂">팀원 소개 🫂</h2>
<h2 id="프로젝트-작업-내용-🖥️">프로젝트 작업 내용 🖥️</h2>
<p><img src="https://velog.velcdn.com/images/siy__n/post/19a31bc0-c0ae-40e3-8bd2-f10150af5bb5/image.png" alt=""></p>
<h3 id="메인페이지">메인페이지</h3>
<ul>
<li><p>담당 내용: <code>navigation</code>, <code>footer</code>의 <strong>css</strong>, <code>header</code> 부분의 고객센터에 hover시 나오는 창 마크업, <code>메인 배너</code>와 <code>상품 리스트</code>와 <code>최근 본 상품</code>의 <strong>swiper</strong>, <code>최근 본 상품</code>의 <strong>javascript</strong>를 맡았습니다.</p>
</li>
<li><p>메인페이지에는 swiper를 많이 사용하였고, 스타일링은 tailwind를 필수로 사용하는 것이 조건이었어서 tailwind로 작업하였습니다.</p>
<ul>
<li>tailwind는 수업 진행이 촉박하여 거의 하루 남짓 배웠던 걸로 기억해서 잘 할 수 있을까 걱정이 많았는데 오히려 더 간단하고 빠르게 작업할 수 있었던 거 같아 재밌게 작업했습니다 !
다만 가독성 측면에서는 정말 최악이었던 것 같습니다.. <br></li>
</ul>
</li>
<li><p>메인 페이지에서는 swiper를 제외하면 최근 본 상품 부분만 javascript 작업이 들어갔습니다.</p>
<ul>
<li>상품 부분을 클릭하면 최근 본 상품에 이미지와 링크가 추가되는 로직과 그 상품을 localStorage에 넣어주는 것, 한 번 들어간 상품은 중복으로 들어가지 않게 하는 로직을 작성했습니다.</li>
<li>swiper와 함께 사용하다보니 작업이 쉽지 않았습니다.. 레이아웃도 깨지고 원인을 아직도 잘 모르겠으나 버튼이 나오지 않고 멋대로 들어간 상품에 height 값이 지정되는 이상한 일이 있었답니다..<br></li>
</ul>
</li>
<li><p>footer 부분은 항상 레이아웃 잡기가 참 쉽지만은 않은데 사람들이 많이 신경쓰지 않는 부분인 것 같아 아픈 손가락이라고 생각이 들었습니다 🥲</p>
</li>
</ul>
<p><img src="https://velog.velcdn.com/images/siy__n/post/ca67c5e9-b418-4aab-9cff-70ea36cbf4cd/image.png" alt=""></p>
<h3 id="로그인-페이지">로그인 페이지</h3>
<ul>
<li>담당 내용: header와 footer를 제외한 <code>로그인 section</code> <strong>마크업</strong>과 tailwind를 이용한 <strong>css</strong>, 로그인 버튼 클릭시 지정된 아이디와 비밀번호를 설정하여 일치할 시 loginSuccess 페이지로 이동, 지정된 값과 다를 경우 알림창이 뜨게 했습니다. (사진 이하 첨부)</li>
</ul>
<p><img src="https://velog.velcdn.com/images/siy__n/post/c44921d3-ff06-4d9d-a1f1-87c939422f91/image.png" alt=""></p>
<p>로그인 실패 시 화면입니다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/d127b7d9-3ca1-4e92-a8f3-1b69746faf49/image.png" alt="">
로그인 성공 시 화면입니다.</p>
<ul>
<li><p>로그인 레이아웃과 스타일링은 그리 어렵지 않았습니다 ! 로그인 성공과 실패 validation도 이전에 과제로 작업했었던 적이 있어 작업했던 코드를 참고하여 더 쉽게 작업할 수 있었습니다. (그러나 작업했던 내용이 없었으면 혼자서 잘 해낼 수 있었을지는 모르겠습니다..)</p>
</li>
<li><p>로그인 성공 페이지는 비동기 통신을 이용하여 해보고 싶었으나 시간과 실력의 문제로 구현하지 못한 게 아쉬움이 남습니다.</p>
</li>
</ul>
<p><img src="https://velog.velcdn.com/images/siy__n/post/da4d30b5-c96a-4eff-bc6f-58edf9441a7c/image.png" alt=""></p>
<h3 id="회원가입-페이지">회원가입 페이지</h3>
<ul>
<li><p>이 부분은 제가 담당하지 않아 간단히 소개만 하겠습니다 !</p>
</li>
<li><p>마찬가지로 tailwind를 사용하여 스타일링하였고, javascript는 들어가지 않았습니다..!</p>
</li>
</ul>
<h2 id="좋았던-점🙂">좋았던 점🙂</h2>
<ol>
<li>포기하지 않고 열심히 할 수 있었다.
 사실 초반부터 조원 한 분께서 나가셔서 다들 기운이 조금은 빠졌던 것 같습니다.
 손 하나, 머리 하나가 비는 게 얼마나 큰지 다들 알 것이라고 생각합니다,, 다행히 프로젝트 시작 전에 마음을 단단히 먹었던 상태라 타격이 그리 크지는 않았는데 다 끝나고 나니 속상하기는 했습니다 🥲 그래도 다른 조원 분들이 정말 소통도 잘해주시고 노력 많이 해주셔서 그런지 으쌰으쌰 하는 분위기로 끝까지 힘을 낼 수 있었던 것 같습니다. <br></li>
<li>많은 부분들을 담당할 수 있었다.
 손이 조금 빠른 편이었어서 그런지 다른 조원 분들께서 하고 계시는 중에 끝내는 일이 종종 있어서 시안에 있지 않은 스타일링도 최대한 더 해보려고 하고 로그인 마크업도 짬내서 했답니다 ! 이번에 욕심을 많이 냈어서 가족 외식 갔다가 알바 가기 전에 카페 가서도 노트북 켜고, 마감 알바 다녀와서도 작업하고, 생전 해본 적도 없는 밤새기까지...(에너지드링크는 좋아하지 않는 편인데 마감 전날 한번에 3캔을 마셨답니다^_^...) <br></li>
<li>어려운 일들을 헤쳐나갈 오기와 동력을 얻었다.
 원래 힘든 일이 생기면 조금이라도 좌절하는 시간을 갖게 되는데, 이번에는 시간도 촉박했고 인원도 적었기 때문에 제가 하지 않으면 시간과 프로젝트가 지체되는 게 싫어서 힘든 생각이 들어도 무시하고 그냥 하는,,, 그런 프로젝트가 되었습니다 !
<img src="https://velog.velcdn.com/images/siy__n/post/c89f3d5f-9e00-4bc0-88ad-f2d69ff7e11f/image.png" alt=""></li>
</ol>
<p>이 짤을 마음에 새기며,, 그냥 하는 제가 되었습니다 !^^</p>
<h2 id="아쉬웠던-점🥲">아쉬웠던 점🥲</h2>
<ol>
<li>js 프로젝트이지만 JavaScript를 많이 구현해내지 못했다.
 자바스크립트가 개인적으로 많이 부족하다고 생각했는데, 아니나다를까 프로젝트에서 구현할 수 있는 부분이 많지 않았던 것 같습니다. 조원분들도 아쉽게도 자바스크립트에 자신이 있진 않았고, 욕심이 많았던 거에 비해 실력과 공부가 많이 부족하지 않았나 를 다시금 깨닫는 시간이 되었습니다.
 그치만 페이지 욕심을 줄이는 대신, 자바스크립트로 구현할 수 있는 부분은 최대한 구현하자고 마음을 먹어 계획한 부분은 모두 해낼 수 있었습니다 ! <br></li>
<li>기록에 대한 부분이 아쉬웠다.
 다른 조들을 보면 github를 이용하여 다양하게 기록하고 소통할 수 있는 장이 있었는데, 저희 조에서는 그런 점이 많이 부족하지 않았나 싶습니다. wiki나 issue 창을 이용하여 소통한 다른 조들을 발표 때 보며, 아쉬운 마음이 드는 건 어쩔 수 없었습니다.
 그래도 이 마음을 갖고 다음 프로젝트 때는 좀 더 효과적으로 소통하고 협업하는 시간을 만들 예정입니다 !</li>
</ol>
<br>    

<hr>
<h2 id="마치며">마치며</h2>
<p>글을 미루다 미루다보니 벌써 리액트 프로젝트를 앞두고있는 상황이 되었네요,,,,^_^
프로젝트 당시에는 뭐가 그리 힘들었는지 마음적으로 체력적으로 정말 힘들었던 것 같은데, 역시 시간이 지나니 힘든 일은 다 잊혀지는 것 같습니다 !
다음 글은 아마도 리액트 프로젝트와 멋사 수료 후기를 가져오지 않을까 싶네요.
최근 첫 코로나를 걸렸었는데 너무 힘들더라구요... 이 글 보시는 분들 모두 건강하세요 ! 건강이 최고입니다 🥲
<br>
여기까지 긴 글 읽어주셔서 감사합니다 🙂💗</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[멋쟁이 사자처럼 6기 프론트엔드 스쿨 HTML, CSS 프로젝트를 마치고]]></title>
            <link>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-6%EA%B8%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-HTML-CSS-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EA%B3%A0</link>
            <guid>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-6%EA%B8%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-HTML-CSS-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EA%B3%A0</guid>
            <pubDate>Thu, 29 Jun 2023 06:48:26 GMT</pubDate>
            <description><![CDATA[<p>4일 간의 프로젝트를 마치며 회고를 남겨봅니다 !</p>
<p>저는 6조 능히할수있조였고, 4명의 조원들과 함께 OTT 홈페이지인 티빙을 오마주한 타잉 이라는 홈페이지 디자인을 정했습니다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/5762a4da-08e3-4540-bfb1-d8c6176c6902/image.png" alt=""></p>
<p>이는 저희가 만든 페이지의 전체 화면입니다.</p>
<p>반응형(모바일, 태블릿, 데스크탑)으로 구현하였고, 메인페이지와 프로필 선택, 프로필 변경페이지, 회원가입과 비밀번호/아이디 찾기 페이지를 제작하였습니다.</p>
<p>약 한달 정도가 되는 기간의 HTML/CSS 수업이 있었고, Git을 활용한 버전 관리, 3일 정도의 Sass 수업이 있었습니다.</p>
<p>얼마 되지 않는 기간밖에 배우지 못한 Sass를 쓰는 게 조금 욕심일까, 싶었으나 오히려 시간을 더 단축할 수 있었던 것 같았고, css보다 정말 편했어서 Sass를 사랑하게 되었습니다...(물론 mixin을 많이 사용하지 못해서 크게 아쉬움으로 남네요..)</p>
<hr>
<h2 id="작업한-내용">작업한 내용</h2>
<p>페이지 중에서 제가 작업한 부분을 소개드리겠습니다.</p>
<ul>
<li>메인페이지
<img src="https://velog.velcdn.com/images/siy__n/post/d4e8f82f-7958-457d-b5bd-f8778b097dff/image.png" alt="">
<img src="https://velog.velcdn.com/images/siy__n/post/231386de-3144-440c-8433-7008c8f5e2f3/image.gif" alt=""></li>
</ul>
<p>메인 페이지 중 이 두 부분을 맡아 구현하였고, 다른 분들과 구역을 나눈 부분을 제가 취합하여 한 페이지로 만들었습니다.</p>
<p>Javascript도 사용할 시간이 있었으면 작동을 시키고 싶었는데 제출마저도 부랴부랴 하느라 마크업과 스타일링에만 신경을 썼습니다..!</p>
<p>크게 어려움을 느낀 부분은 없었으나, 말 줄임표과 빨간 점을 같이 두는 것에 고민을 좀 했습니다.</p>
<p>앞에 순위가 나오는 부분도 반응형마다 높이가 달라져서 조정을 계속 했습니다 ㅎㅎ;</p>
<ul>
<li>프로필 관련 페이지
<img src="https://velog.velcdn.com/images/siy__n/post/6a63e33f-50da-405e-b2ed-8fad0a97f630/image.png" alt="">
<img src="https://velog.velcdn.com/images/siy__n/post/32cb7ebc-5c7f-4fc3-b3c8-db92fce9ed5f/image.png" alt="">
<img src="https://velog.velcdn.com/images/siy__n/post/ddceeb1d-8929-4535-b206-b946d45e9dda/image.gif" alt=""></li>
</ul>
<p>푸터부분은 조원분께서 작업해주신 내용을 붙였습니다.
프로필 편집 부분과 선택 부분을 반응형으로 작업한 내용입니다. Flex속성을 이용해 모바일 환경일 때 프로필이 두 칸씩 배열될 수 있게 했습니다.</p>
<p>선생님께서 리뷰해주실 때 보니 button 태그로 했었어야 했는데 a 태그로 넣은 점이 아쉽습니다....</p>
<hr>
<p>기간이 짧았던만큼 조급한 마음이 정말 크게 들었고, 조원 모두가 처음 맡아보는 프로젝트라 어려움을 많이 겪었던 것 같습니다.</p>
<h3 id="👍🏻-좋았던-점">👍🏻 좋았던 점</h3>
<ol>
<li>git으로 협업을 하는 것을 배울 수 있었다.
 저는 개인적으로 git으로 관리하는 일이 무척 어렵고 크게 다가왔는데, 이렇게 조원들과 함께 협업을 해보니 100%까진 아니더라도 어느정도 익힐 수 있었던 정말 귀한 시간이 되었던 것 같습니다 ! <br></li>
<li>혼자였으면 어려웠을 일들을 함께 하니 할 수 있었다.
 개발자는 협업이 많다고 하여 면접이나 자소서에서도 빠지지 않는 질문이 협업 관련 질문인 것 같습니다. 사실 팀플은 직접 해보지 않으면 자신이 팀 내에서 어떻게 반응하고, 어떤 행동을 하는지 알 수 없는 것 같습니다. 저는 이전에 팀플을 경험한 적이 많지 않았는데 몰랐던 저의 태도나 역할을 알 수 있는 기회였던 것 같습니다. 또한, 저희 팀은 소통을 정말 열심히 해서 힘도 많이 되고 원활하게 진행할 수 있었던 것 같습니다. <br></li>
<li>자신감을 얻을 수 있었다.
 다른 사람들 앞에서 말하는 일이 조금은 부끄럽기도 하고 자신이 없었는데, 적은 인원이지만 서로 소통하며 의견을 나누다보니 제 의견을 말하는 것에 자신감을 가질 수 있는 기회가 되었다고 생각합니다.</li>
</ol>
<h3 id="🤔-아쉬웠던-점">🤔 아쉬웠던 점</h3>
<ol>
<li>시간을 효율적으로 쓰지 못했다.
 첫 프로젝트라 어쩔 수 없는 부분이 있었다고 치더라도 시간이 촉박했던 것은 어쩔 수 없었던 것 같습니다. 처음에 메인페이지를 네명이 나누기로 하고 작업을 했는데, 아무래도 작업 속도가 다르기도 하고 각자의 습관이 있다보니 메인 페이지에서 시간을 조금 크게 할애한 것 같습니다.
 물론 메인 페이지의 비중이 가장 높아 네명이서 나눈 것은 나쁘진 않았다고 생각하지만, 이후엔 페이지 기준으로 나누는 것이 Merge하기에도 수월하고, 효율성 측면에서도 더 좋을 것 같습니다.
 그리고 git으로 처음에 테스트도 좀 해보고 그러느라 첫 날 오전시간을 다 써버린 것,,,, 물론 그렇게 했기 때문에 git 관련 이슈는 거의 없었습니다.<br></li>
<li>개개인의 작업 방식과 속도가 다르다.
 이건 어딜 가든 어쩔 수 없는 것이지만, 서로 거의 알지 못하는 상태에서 같은 목표를 가지는 것은 언제나 어려운 일인 것 같습니다. 누군가는 빨리 많이를 원하고, 누군가는 천천히 꼼꼼하게를 원하기도 합니다. 게다가 조원 중 어떤 분께선 몸이 안좋으셔서 참여를 많이 못하셔서 이런 갑작스러운 이슈들도 대비할 수 있어야할 것 같습니다.<br>  </li>
<li>컨디션 관리 실패
 조원 분께서도 아프셨지만,,, 저도 이렇게 정신적으로 체력적으로 힘들었던 적은 많지 않았던 것 같습니다... 스트레스에 취약한 편이다보니 프로젝트를 완벽하게 마무리하고 싶다는 욕심과 부담감에 잠도 잘 자지 못했고, 안좋은 일이 겹쳤어서 끼니도 제대로 챙기고 다니질 못해 막판에는 많이 힘들었던 것 같습니다. 어렸을 때는 몰랐지만 건강 관리는 정말 갈 수록 뼈저리게 느끼게 되는 것 같습니다 ㅎㅎ;</li>
</ol>
<hr>
<h2 id="마치며">마치며</h2>
<p>앞으로 테킷 수업에서 두 개의 프로젝트가 더 저희를 기다리고 있다고 합니다. 시원섭섭했던 이번 프로젝트를 기억하며 두번째, 세번째는 더욱 발전하고 배우는 시간이 되었으면 좋겠습니다 ! 저희 조가 프로젝트 배포한 링크는 아래쪽에 남겨두겠습니다. 감사합니다 😬</p>
<p>배포링크 <a href="https://candoit.netlify.app/">https://candoit.netlify.app/</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[dl, dt, dd 태그에 대해 알아보자]]></title>
            <link>https://velog.io/@siy__n/dl-dt-dd-%ED%83%9C%EA%B7%B8%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</link>
            <guid>https://velog.io/@siy__n/dl-dt-dd-%ED%83%9C%EA%B7%B8%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</guid>
            <pubDate>Mon, 19 Jun 2023 08:41:55 GMT</pubDate>
            <description><![CDATA[<p>안녕하세요 ! 오늘은 html에서 dl 태그에 관하여 얘기해보겠습니다.</p>
<p><strong>dl태그</strong>는 정의형 목록으로, definition(혹은 description이라고도 하더라구요) list의 약자입니다.
말 그대로 설명을 하거나 정의를 할 때 사용하는 태그입니다.</p>
<p>dl 태그 밑로는 dt태그와 dd 태그가 있습니다.</p>
<p><strong>dt 태그</strong>는 definition term의 약자로, 정의하려는 용어의 제목을 나타냅니다.</p>
<p><strong>dd 태그</strong>는 definition description의 약자로, 용어에 대한 설명을 적을 수 있습니다.</p>
<hr>
<p><img src="https://velog.velcdn.com/images/siy__n/post/3d6b3619-c4c0-4ac2-b078-92b0af00802d/image.png" alt="">
위 사진은 네이버 영한사전에 &#39;정의하다&#39;를 검색했을 때 나오는 창입니다.</p>
<p>위 사진에서 define이라는 영단어는 dt태그가, 아래 설명들은 dd태그가 해당되겠죠 ?</p>
<p>dl 태그는 용어를 설명할 때 자주 사용됩니다 !
ul-li 혹은 ol-li 태그처럼 dl-dt-dd 태그는 항상 짝을 이루며 사용되며, 1대 다, 다대 1로도 사용이 가능합니다.</p>
<hr>
<p>dl태그를 활용한 예시를 보여드리겠습니다.</p>
<pre><code>&lt;dl&gt;
    &lt;dt&gt;사과&lt;/dt&gt;
    &lt;dd&gt;[명사] 사과나무의 열매.&lt;/dd&gt;
    &lt;dd&gt;[명사] 자기의 잘못을 인정하고 용서를 빎.&lt;/dd&gt;
  &lt;/dl&gt;</code></pre><p>저는 사과를 dt로 잡고 그에 대한 설명을 dd 태그에 담아주었습니다.
이 코드를 라이브 서버로 오픈하면</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/c690549e-0109-4494-b91c-013f0c77bc9b/image.png" alt=""></p>
<p>위 사진과 같은 결과가 나옵니다.</p>
<p>저는 아무 스타일링을 하지 않았지만, dd태그에 담긴 글들은 들여쓰기가 되어있다는 걸 확인할 수 있습니다.</p>
<hr>
<p>짧은 포스팅이지만 도움이 되셨길 바랍니다.
추가적으로 필요한 사항들이 있다면 추후에 보충하겠습니다 !</p>
<p>봐주셔서 감사합니다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[float 속성과 flow-root 속성값]]></title>
            <link>https://velog.io/@siy__n/float-%EC%86%8D%EC%84%B1%EA%B3%BC-flow-root-%EC%86%8D%EC%84%B1%EA%B0%92</link>
            <guid>https://velog.io/@siy__n/float-%EC%86%8D%EC%84%B1%EA%B3%BC-flow-root-%EC%86%8D%EC%84%B1%EA%B0%92</guid>
            <pubDate>Thu, 15 Jun 2023 14:04:00 GMT</pubDate>
            <description><![CDATA[<p>안녕하세요 ! 오늘은 수업을 들으며 헷갈렸던 float 속성에 대하여 간단하게 얘기해보겠습니다.</p>
<p>display: flex; 를 자주 사용하다보니 float를 주는 것이 제법 헷갈리더라구요,,!</p>
<h2 id="float-속성이란-">float 속성이란 ?</h2>
<p><img src="https://velog.velcdn.com/images/siy__n/post/246fad51-d0a0-41f3-863f-2eee89feabff/image.png" alt="">
<a href="https://developer.mozilla.org/ko/docs/Web/CSS/float">https://developer.mozilla.org/ko/docs/Web/CSS/float</a>
mdn에서의 float에 대한 설명입니다.</p>
<p>float를 준 요소를 화면에서 띄워서 보여줍니다. 이미지와 텍스트를 신문처럼 자연스럽게 흐르는 느낌으로 배치하기 위하여 만들어졌다고 합니다.</p>
<p>float의 속성값은 크게는 4가지가 있습니다.</p>
<pre><code>float: none; //초기값으로 float가 적용되지 않습니다.
float: left; //해당 요소를 왼쪽으로 띄워줍니다.
float: right; //해당 요소를 오른쪽으로 띄워줍니다.
float: inherit; //부모 요소의 속성값을 상속받습니다.</code></pre><p>띄워준다는 말이 조금 추상적이라 와닿지 않을 것 같아 예제를 준비했습니다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/dee23c65-a609-4cba-a0de-45fbc88aeea2/image.png" alt="">
위 사진은 float를 전혀 사용하지 않고 section 안에 img 태그와 p 태그를 넣은 모습입니다.</p>
<p>이때, img 태그에 float: left 를 넣어보겠습니다.
<img src="https://velog.velcdn.com/images/siy__n/post/59d8dbe8-2a3a-400a-8b48-4dce0f4e2a4c/image.png" alt="">
p 태그에 있는 내용이 이미지 바로 옆으로 붙은 게 보이시나요 ?</p>
<p>mdn 문서에서 설명하듯이, img태그가 노멀 플로우에서 벗어나 공중에 떠있기 때문에 p 내부의 텍스트들이 오른쪽으로 와서 붙어있습니다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/2aac2dd5-196c-4386-97bb-235b2c924ff1/image.png" alt=""></p>
<p>이번엔 img 태그에 float: right 를 넣은 모습입니다.
이미지는 오른쪽으로 이동하였고, 텍스트는 이미지를 따라 흐르는 모습으로 보이네요.</p>
<hr>
<p>float를 요소에 적용하면 해당 요소가 공중에 떠있기 때문에 normal flow로 흐르지 않기 때문에 요소의 height값이 플로우에 적용되지 않습니다.</p>
<p>이번엔 노란색의 배경에서 height값을 빼보겠습니다.
<img src="https://velog.velcdn.com/images/siy__n/post/ea38696d-9856-43a7-8392-80d25b743a32/image.png" alt=""></p>
<p>img 태그의 height를 전혀 인지하지 않고, normal flow에 해당하는 텍스트 부분만 인식을 하네요.</p>
<p>이런 상황을 해결하기 위한 방법에는 여러가지가 있는데, 저는 flow-root를 이용해보겠습니다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/54567f0d-81a8-4df6-acb1-53d4643656a2/image.png" alt="">
노란색 배경을 가진 section 태그에 display: flow-root 속성을 주었습니다. </p>
<p>display: flow-root는 자식 요소에 float가 들어가더라도 normal flow에 자식 요소의 width값과 height값이 남아있는 것처럼 보입니다.</p>
<p>이를 이용하면 float를 사용하더라도 레이아웃을 짜기가 더 수월할 것 같습니다 !</p>
<hr>
<p>아직 많이 부족하고 잘 알지 못하는 것 같습니다 🥲 조언과 문제 지적은 달게 받겠습니다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[멋쟁이 사자처럼(테킷) 프론트엔드 스쿨 2주차 후기]]></title>
            <link>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC%ED%85%8C%ED%82%B7-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-2%EC%A3%BC%EC%B0%A8-%ED%9B%84%EA%B8%B0</link>
            <guid>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC%ED%85%8C%ED%82%B7-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-2%EC%A3%BC%EC%B0%A8-%ED%9B%84%EA%B8%B0</guid>
            <pubDate>Fri, 09 Jun 2023 11:42:59 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/siy__n/post/6ff18c6a-4feb-4733-be86-ffa50c12deed/image.png" alt="">
5월 24일 개강 후 약 2주 하고 이틀 정도가 지난 시점에서 써보는 후기 !</p>
<hr>
<h2 id="장점">장점</h2>
<ul>
<li>운영진분들께서 친절하시고, 체계적이다.</li>
</ul>
<p>부트캠프 과정이 시작되기 이전에 짧은 시간 내로 생각보다 할 게 꽤 많다...! 노션과 줌, 디스코드에서 작성해야할 것도 많고, 아무래도 국비 지원 과정이다보니 고용센터와 통화하는 일도 종종 있었다.   </p>
<p>운영진분들은 작성해야하는 것들을 세세하게 안내해주시고, 물어보는 사항들을 정말 친절하게 말해주신다 🥹</p>
<p>또한, 디스코드에서 대화방(?)이 잘 구분되어 있으며, 운영진분들께서 수업 중에도 상주하셔서 문의 사항을 금방 해결해주신다.</p>
<ul>
<li>매주 주간 설문을 진행한다.</li>
</ul>
<p>물론 나는 좋은 말 밖에 쓸 게 없다... 너무 만족하면서 다니고 있기 때문에 🫶🏻</p>
<p>그치만 수강생들의 진도 체크나 만족도 등을 매주 금요일마다 무기명으로 구글 폼 조사를 하여 강사 선생님께 전달이 된다. </p>
<p>진도 따라잡기에 벅찬 사람도, 오히려 진도가 너무 느리다고 생각하는 사람도 자유롭게 작성할 수 있다는 점이 좋은 것 같다.</p>
<ul>
<li>강사 선생님이 좋으시다.</li>
</ul>
<p>무엇이 좋으냐고 물으신다면,,, 안 좋은 점이 없으시다🥹</p>
<p>이전에 국비 지원으로 프론트엔드 과정을 수강한 적이 있는데, 강사 선생님께서 질문 받는 것도 좋아하지 않으시고 모든 태그들을 별 다른 설명 없이 줄줄 적어만 주셨기에,,, html 태그들과 구조를 이해하는 데 거의 한달은 걸렸다..
9시부터 6시까지 현강으로 진행했는데 정작 수업을 진행하시는 시간은 2-4시간으로 불규칙하게 진행되었고, 나머지는 의미없는 자습시간이었다.
물론 그 시간을 알차게 쓰는 수강생들도 분명히 있었지만, 목적도 없고 아는 게 없던 나는 그 시간에 무엇을 해야할지 알 수 없었다.</p>
<p>결국 그 학원은 수강 포기를 하게 되었고 패널티도 달게 받았다.(내일배움카드 20만원 차감이었지만 남은 시간동안 그 과정을 듣느니 20만원 가져가는 건 행복했다.)</p>
<p>서론이 너무 길었는데, 강사 선생님은 HTML과 CSS를 담당하시는 선생님, Javascript를 담당하시는 선생님, React를 담당하시는 선생님으로 총 세 분이시다.</p>
<p>현재는 HTML과 CSS를 배우고 있는데, 선생님께서 정말 지식이 많으시고 가르쳐주시는 것이 많다.</p>
<p>선생님께선 열정이 많으시고 한명한명 디스코드로 dm도 주시는 것 같다 !</p>
<p>무엇보다 강의의 질이 정말 남다르다고 생각했다. 이전에 그런 태그들을 왜, 어디에, 어떻게 사용하는 지도 알려주지 않았던 강사님께 듣다가 모든 설명을 건너뛰지 않으시고 오히려 하나하나 꼼꼼하게 알려주셔서 많이 배워가는 것 같다.</p>
<p>학원 커리큘럼과는 별도로 보충 수업(현재는 복습 위주)도 따로 진행해주시고, 수업 시간 외에도 질문이나 대화를 반겨주신다..🥹</p>
<p>너무 좋은 점만 쓰는 거 같은데 진짜 좋기만 하다</p>
<ul>
<li>수업 이외의 영상 강의를 제공한다.</li>
</ul>
<p>현재 이듬에서의 강사분들께서 관리하시고 진행하시는데, 이듬 강사 선생님들의 영상 강의들을 따로 제공해주셔서 복습과 예습을 개인 시간에 효과적으로 할 수 있다. </p>
<ul>
<li>회고조가 있다.</li>
</ul>
<p>아직 회고조가 결성된지는 일주일 정도 되었다. 아직은 다들 서먹해하고 적극적으로 의견 피력을 하시진 않지만, 이렇게 회고조가 있다는 점이 서로에게 도움도 자극도 되는 것 같다. 아무래도 수강생이 현재 70명이 넘는데, 70명 내에서 같은 &quot;팀&quot;이 존재한다는 것이 힘이 되기도 하고, 서로 상호작용을 하며 얻어갈 수 있는 기회가 되는 것 같다.</p>
<h2 id="단점">단점</h2>
<ul>
<li>온라인으로 100% 진행된다.</li>
</ul>
<p>이 사항은 알고 있었지만 집에서 9시간(점심시간 제외하면 8시간)을 앉아서 강의를 듣는 일은 여간 쉬운 일은 아니다. 물론 통학을 한다면 더 힘들기도 하지만(경험자) 또 현강에서 얻어가는 것들이 분명히 있으니 아쉽기도 하다.</p>
<p>또한, 내 Visual Studio, 선생님의 Zoom 화면, 디스코드, 중간중간 노션 문서들,, 등등 띄워 놓거나 봐야할 화면이 제법 많기에 듀얼 모니터가 거의 필수라고 보면 된다,,,!
나는 다행히 집에 썩어빠진 데스크탑이라도 있어서 노트북과 같이 보고 있는데, 모니터가 하나라면 조금 부담이 될 것 같다.</p>
<p>온라인 100%의 장점: 교통비와 식비가 절약된다 !</p>
<ul>
<li>수강생들의 사전 지식이 많이 다르다.</li>
</ul>
<p>기존에 공부를 많이 하고 온 학생이라면 적극 추천하진 않는다. 나는 다행히(?) 이전에 학원에서 제대로 가르쳐주지 않았기 때문에(🥲) 현재 진도도 재밌게 따라가고 있고, 훨씬 자세히 가르쳐주시기 때문에 잘 듣고 있다.
그치만 전공자나, 공부를 깊게 하고 온 사람이라면 처음부터 세세하게 진행되기 때문에 다소 답답하게 느낄 수 있을 것 같다.</p>
<ul>
<li>과정이 더 길었으면 좋겠다,,!(이건 개인적인 희망)</li>
</ul>
<p>자세하고 꼼꼼하게 잡아주시는만큼 과정이 더 길었으면 더 많이 배울 수 있을 것 같으나,,, 이미 정해진 기간이 있으니 주어진 기간 안에 내가 배로 더 열심히 해서 많은 것을 얻어가는 게 좋을 것 같다.</p>
<hr>
<p>사실 단점은 거의 없는 멋사 후기..
궁금한 게 있으시면 댓글 남겨주세요 !</p>
<p>앞으로는 좀 더 일상적이지만은 않은 기록으로 돌아오겠습니다 !</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[멋쟁이 사자처럼 (테킷) 프론트엔드 스쿨 6기 합격 !]]></title>
            <link>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-%ED%85%8C%ED%82%B7-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-6%EA%B8%B0-%ED%95%A9%EA%B2%A9</link>
            <guid>https://velog.io/@siy__n/%EB%A9%8B%EC%9F%81%EC%9D%B4-%EC%82%AC%EC%9E%90%EC%B2%98%EB%9F%BC-%ED%85%8C%ED%82%B7-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-6%EA%B8%B0-%ED%95%A9%EA%B2%A9</guid>
            <pubDate>Fri, 09 Jun 2023 08:18:35 GMT</pubDate>
            <description><![CDATA[<p>너무 늦은 합격 후기이지만 지금이라도 작성해본다..^^</p>
<p>패스트캠퍼스 부트캠프를 무참하게 1차부터 떨어지고,, 거의 2주-한달은 멘붕와서 팽팽 놀다가 마침 멋사에서 프론트엔드 스쿨 부트캠프를 시작한다고 해서 당장 지원서를 작성하기 시작했다.</p>
<h2 id="1차-지원">1차 지원</h2>
<p>1차에서는 3개의 문항이 나오는데, 각각 500자 이내로 작성하여야 해서 생각보다 어려움이 있었다.</p>
<p>질문 자체가 아주 어렵거나 힘든 문항들은 아니었으나, 500자로 질문에 대해 충분히 나를 표현하기에는 부족했다.</p>
<p>한달 정도의 지원 기간이 있었기에 정말 충분히 오래 생각하고, 주변 지인들에게 보여주며 수정도 하며 원래 5월 초에 지원서를 내려던 계획은 포기하고 20일이 더 지나서 제출했던 것 같다.</p>
<p>바로 이전에 타 부트캠프를 떨어졌기 때문에 자신감이 많이 떨어졌었는데 1차 합격 발표일이 하루 당겨졌다고 문자가 왔다.
안그래도 벌벌 떨며 기다리고 있었는데
<img src="https://velog.velcdn.com/images/siy__n/post/7a62eb17-f17f-4220-b753-ac07f4ec9d67/image.jpeg" alt=""></p>
<p>합격 문자가 와서 정말 정말 기뻤다 🥲
그러나 1차 합격 발표 후 2차 전형에서는 1차 합격일 기준 약 3-4일 뒤 영상 과제를 제출해야했고 일주일 뒤에는 프로그래밍 테스트가 있었다.</p>
<h2 id="2차-지원">2차 지원</h2>
<p>1차를 생각보다 여유 없이 준비했기에 2차는 화요일부터 당장 대본을 쓰고 영상을 찍었다.</p>
<p>영상 과제는 3문항에 대한 대답을 약 1분 내외로 촬영하여 3분 이내로 제출하는 과제였다.</p>
<p><img src="https://velog.velcdn.com/images/siy__n/post/9f52cd87-586b-407f-b776-08d3eaae2c4d/image.png" alt=""></p>
<p>위 이미지는 순서대로</p>
<ol>
<li>2차 지원 영상 과제 제출 할 때 작성했던 대본</li>
<li>1차 지원서에서 3문항을 모두 최종으로 정리하여 취합한 문서</li>
<li>1차 지원서에서의 한 문항(프론트엔드에 관심을 갖게 된 계기 ? 등을 썼던 걸로 기억)</li>
<li>1차 지원서에서의 한 문항(협업 경험을 서술하고 갈등 해결을 어떻게 했는지 서술하기)
이다.</li>
</ol>
<p>(1차 지원서는 지원서 작성시 바로 나오기 때문에 간략하게라도 작성하였으나 2차 지원서는 1차 합격자 지원시 공개되기 때문에 해당 내용은 공개하지 않겠습니다 🥹)
<br></p>
<p>2차에서는 프로그래밍 테스트까지 있어서 걱정이 많이 되었다...!
프로그래밍 테스트는 테킷 측에서 보내준 강의 영상 몇개를 시청하고 구글 폼으로 된 문제들에 대한 답을 작성하는 것이었다.</p>
<p>난이도가 아주 어렵진 않았으나, 코딩 관련하여 전혀 지식이 없다면 많이 어려울 수 있을 것 같았다,,!
(javascript를 공부한 적 있다면 영상을 3-4번 &#39;꼼꼼히&#39; 시청한다면 어렵지 않게 작성할 수 있을 정도라고 생각한다)</p>
<p>문항은 약 10개였는데 7개(객관식이었던 걸로 기억)는 모두 맞게 답한 것 같고, 3문제는 직접 간단하게 코딩을 하는 내용이었는데 이해만 하고 암기는 전혀 하지 않은 나는 어떤 속성이나 함수를 사용하는지만 적어내고 아무것도 적어내지 못했다,,,^^</p>
<p>2차 테스트가 끝나고 나서야 이전 기수 합격하신 분들의 영상 과제들을 유튜브에서 찾아봤고, 더더욱 떨어질거라는 확신이 들었다...🥲</p>
<hr>
<br>
발표가 나기 이틀 전부터 떨어질 생각을 하니 잠도 안오고 손이 벌벌 떨려서 정말 힘들었는데 발표 당일,,,!

<p><img src="https://velog.velcdn.com/images/siy__n/post/947863e0-8ca1-4e35-a7f2-6959304398b8/image.jpeg" alt=""></p>
<p>이런 문자가 와서 진짜 눈물나기 직전이었다🥹🥹🥹</p>
<hr>
<p>합격 이후 훈련 과정 시작이 거의 일주일도 안되기 때문에 내일배움카드나 고용 형태 변경사항등을 미리미리 준비하는 것이 좋을 것 같다고 생각했다.</p>
<p>현재 부트캠프가 시작된지 2주가 조금 넘은 타이밍인데, 아주 만족하며 다니고 있다 !</p>
<p>다니고 있는 후기는 이어서 다른 포스팅으로 돌아오겠습니다 😌</p>
]]></description>
        </item>
    </channel>
</rss>