juhl_daily.log https://velog.io/ 코딩 배우는 애둘맘의 학습일지 Fri, 16 Dec 2022 15:31:57 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed juhl_daily.log https://velog.velcdn.com/images/juhl_daily/profile/d3db75d1-aeaa-45f3-b56d-6ef2e8ce964e/image.jpeg https://velog.io/ Copyright (C) 2019. juhl_daily.log. All rights reserved. <![CDATA[WIL|[스파르타코딩클럽] 웹개발 종합반 완강~!!!]]> https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-%EC%99%84%EA%B0%95 https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-%EC%99%84%EA%B0%95 Fri, 16 Dec 2022 15:31:57 GMT WIL을 더 열심히 써보고 싶었으나... 육아는 현실... 하아.. 아무튼 그럼에도 불구하고 완강을 해냈다.

5주차를 4주차로 착각하여.. 이번주 좀 빠듯하게 들었고..

사실 수업자체가 밀렸다기 보단..

맥북을 사용중인데.. certifi 세팅(?)해야하는 걸 몰랐어서, 아무리 코드를 입력하고, 오타를 찾고 하는데도 mongodb에 올라가지 않는거다. 어휴..

밤에만 살짝살짝 들여다 봐야해서 결국 강의노트를 정독하듯이 보고서야 내가 무엇을 놓치고 있는지 확인을 했다.

겨우겨우 해결을 하고, 페이지를 돌려보는데, 내가 전부터 궁금하고 알고 싶었던.. 하지만 너무 막연하게 생각했던 것을 이번에 좀 알게된 느낌?

모히또 원샷해서 기분?

어찌됐든 완강!!!

좋아하는 가수나 연예인 팬페이지 만드는게 숙제였는데, 나는 드라마를 좋아하니까, 인상깊었던 드라마 '나의 해방일지' 어록페이지를 만들었다.

http://juhls.shop

많이 엉성하지만 뿌듯하다~!

남편에게 보내서 자랑도 했다.

내가 백수 만들어 주겠다고.ㅋㅋㅋㅋ

]]> <![CDATA[WIL|[스파르타코딩클럽] 웹개발 종합반 - 2주차]]> https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-2%EC%A3%BC%EC%B0%A8 https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-2%EC%A3%BC%EC%B0%A8 Mon, 28 Nov 2022 15:26:37 GMT 음... 지난 주에 진즉에 2주차 숙제까지 끝내놨는데, WIL를 아직 작성을 못해서, 3주차로 못넘어 가고 있다.

  1. 개발 진행 및 완료상황. 무엇을 더 하면 좋을지. 1주차에 시작한 Javascript를 복습(?)하고, JQuery, JSON, AJAX에 대해 공부함.
  2. 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용 첫주차에 Javascript를 처음 접했을 때, 버엉~ 하게 넘어가게 되어서 다시 한번 수업을 듣느라 진도가 더뎌짐.
  3. 오늘 새로 배운 내용 Javascript를 미리 작성해 둔 것이 JQuery. 잘만 이용하면 개꿀~ API JSON은 Key:Value로 이루어짐. 크롬 익스텐션 JSONView를 이용하면 좀더 보기 편함. https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko AJAX

Ajax 기본 골격

        $.ajax({
          type: "GET",
          url: "여기에URL을입력",
          data: {},
          success: function(response){
            console.log(response)
          }
        })

Ajax 코드 해설

    $.ajax({
      type: "GET", // GET 방식으로 요청한다.
      url: "http://spartacodingclub.shop/sparta_api/seoulair",
      data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
      success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
      }
    })

$ajax 코드 설명 - type: "GET" → GET 방식으로 요청한다. - url: 요청할 url - data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요) GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. ex) http://naver.com?param=value&param2=value2 POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' }, - success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행.

  1. 참고할 만한 레퍼런스들 https://www.w3schools.com/jquery/jquery_ref_overview.asp

  2. 특이사항(아이디어, 메모 등)

  3. 지시사항 및 고객 요구사항(숙제?)

     <script>
     $(document).ready(function () {
         $.ajax({
             type: "GET",
             url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
             data: {},
             success: function (response) {
                 let temp = response['temp']

                 $('#temp').text(temp)
             }

         })
     });
 </script>

  4. 회고(반성 또는 피드백 받은 것) 중간중간 작업하던걸 끊어가며 하는 상황이라.. 머릿속이 빙글빙글... 그냥 강의는 한번 쭉 듣고.. 다시 듣고 해야지..ㅠㅠ

  5. To-do list 뜬금 없지만, Github 프로필 꾸미기 해보고 싶어졌다..(응?)

]]> <![CDATA[WIL|[스파르타코딩클럽] 웹개발 종합반 - 1주차]]> https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-1%EC%A3%BC%EC%B0%A8-7ktvk7jx https://velog.io/@juhl_daily/WIL%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-1%EC%A3%BC%EC%B0%A8-7ktvk7jx Thu, 17 Nov 2022 15:17:00 GMT 와.. 두 애들 잠자는 시간을 노려서 강의 듣기 은근 빡세다.

암튼 이틀만에 1주차 강의듣기/숙제제출 성공.

:: 1주차 수업 목표

  1. 서버와 클라이언트의 역할에 대해 이해.
  2. HTML, CSS의 기초 지식을 이해. "부트스트랩" 활용하기
  3. Javascript 기초 문법.

:: 준비작업 | 필수 프로그램 설치

  • Pycharm Professional 설치. https://www.jetbrains.com/pycharm/download/

  • JetBrains 회원가입.

  • AWS 가입. AWS는 개인에게 클라우드 환경의 가상서버를 제공. 기본 사양의 서버(EC2)를 1년 동안 무료로 사용가능

:: HTML과 CSS의 개념 _HTML은 뼈대, CSS는 꾸미기!

HTML 기초 | HTML은 크게 head와 body로 구성.

  • head안에는 페이지의 속성 정보 head안에 들어가는 대표적인 요소들: meta, script, link, title 등페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것.
  • body 안에는 페이지의 내용
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="<http://naver.com/>"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="<https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png>" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

  • 외울 필요 없음. 대신 내게 필요한 것들은 찾아서 사용하거나, 찾기 쉽게 계속 업데이트 하기.

  • 정렬은 중요! Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능

CSS 기초 | 

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.
class="mytitle"를 가리킬 때, .mytitle { ... } 라고 써야 함.

배경관련 background-color background-image background-size background-positon

사이즈 width height

폰트 font-size font-weight font-family color

간격 margin | 바깥 여백 padding | 안쪽 여백

테두리 border-radius

그 밖에..

:: 구글웹폰트 활용하기 https://fonts.google.com/?subset=korean

:: 주석 달기 주석은 언제? 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용.

주석은 브라우저/컴퓨터가 읽지 않음. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것.

단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + /(슬래시)

:: CSS 파일 분리 | style 부분이 너무 길어지면 파일을 별도로 저장해서 불러오게 하는 것이 가능.

style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

:: 부트스트랩(bootstrap) | 예쁜 CSS 모음집(개이득) 부트스트랩 컴포넌트 5.0 https://getbootstrap.com/docs/5.0/components/buttons/ 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)

#코드줍줍 이미지 어둡게 하기 | linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

1주차 숙제 | 예시화면을 보고, 부트스트랩 또는 템플릿을 활용해서 팬명록의 메인 페이지를 완성하기 https://juhlsuh.github.io/homework/

  1. 개발 진행 및 완료상황. 무엇을 더 하면 좋을지. 팬명록을 만들라 했는데, 딱히 생각나는 가수가 없어서(있다해도, 팬페이지 만들정도는 아니라.. 차라리 드라마 덕질을 하자고 마음을 먹고 나의 해방일지드라마 어록모음 페이지를 만들었다.

  2. 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용 타이틀 부분 높이가 준비한 이미지들과 맞지 않아서 높이를 조정해서 낮추고, 어록페이지 폭은 대폭 확대했다. 작업을 하고 나니, 텍스트가 많지 않은 세번째 카드의 폭이 위의 텍스트가 많은 다른 카드 부분과 폭이 달랐다. card 부분에 width: 100%; 으로 설정해서 문제 해결 함.

         .card {
         margin-top: 10px;

         max-width: 900px;
         width: 100%;
     }
     .mycards {
         max-width: 1000px;
         width: 95%;
         margin: 20px auto 0px auto;

         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }

  3. 오늘 새로 배운 내용 모바일에 맞춰 폭을 조절하는 방법 max-width활용.

  4. 참고할 만한 레퍼런스들 부트스트랩 사이트 정말 마음에 든다.+ㅅ+

  5. 특이사항(아이디어, 메모 등)

  1. 지시사항 및 고객 요구사항(숙제?) 숙제의 가이드라인과 내가 구현하고 싶은 페이지가 달라서.. 과연 이 숙제는 통과 될 것인가.. 하는 의문이 더 큼.
  2. 회고(반성 또는 피드백 받은 것) 아직 뭐가 뭔지 모름.
  3. To-do list 아직 계획 없음.

와.. 개발일지 쓰는 것도 빡시다... 내용정리하고, 가독성 좋게 정리해야하고..
그나저나 자바스크립트 어쩌나... 아 몰라 일단 2회차 수업들어보자.

]]> <![CDATA[WIL|[스파르타코딩클럽] 웹개발 종합반 - 0주차]]> https://velog.io/@juhl_daily/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-0%EC%A3%BC%EC%B0%A8 https://velog.io/@juhl_daily/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-0%EC%A3%BC%EC%B0%A8 Sat, 12 Nov 2022 17:40:11 GMT :: 낚인 물고기는 코딩해야지.. 웹개발 종합반 수업을 듣기로 결심했다. 끝까지 완주 못하면 매일 108배를 하겠다고.. 해버렸다. 음음.. 버피랑 비슷해서..

:: 수업전 준비 과제

✅ 노트북 필수사양 확인하기 | Mac 필수사양: 버전 11.7 (Big Sur) 이상 _맥북을 새로 들이길 잘했구나 처음 생각함.

✅ Chrome 설치하기 _설치 되어 있더라 얼쑤~!

✅ Slack 설치 & 가입하기 _이것도 완료.

✅ 덤으로 개발일지 기록하기 숙제도 끝.

]]> <![CDATA[WIL | MyProfile 만들기_ver.0]]> https://velog.io/@juhl_daily/%EB%82%98%EB%A7%8C%EC%9D%98-%ED%94%84%EB%A1%9C%ED%95%84-%EB%A7%81%ED%81%AC-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-WIL0%EC%A3%BC%EC%B0%A8 https://velog.io/@juhl_daily/%EB%82%98%EB%A7%8C%EC%9D%98-%ED%94%84%EB%A1%9C%ED%95%84-%EB%A7%81%ED%81%AC-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-WIL0%EC%A3%BC%EC%B0%A8 Sat, 12 Nov 2022 17:28:53 GMT :: 개발일지를 써보자 어쩌다 또 광고로 줍줍 하게 된 [나만의 프로필 링크 페이지 만들기] 앗.. 링크 잃어버렸다..

찾았다~ https://spartacodingclub.kr/online/special/myprofile

:: 알게 된 것

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;  

text-decoration: none;

box-shadow: 3px 3px 5px 0px black;

:: 일단 완성한 것 https://juhlsuh.github.io/mypage/

:: 결과물에 대한 개인적인 평가 링크를 걸 게 없어서 직전에 만들었던 동기부여 홈 화면이랑 인스타그램, 그리고 Velog링크를 걸었다. 뭔가 좀더 체계적인 나만의 링크를 만들 수 있으면 좋겠다.

_box-shadow 코드를 써봤다. 이걸 응용해서 동기부여 홈화면은 좀더 업그레이드 해야겠다.

_프로필 페이지에도 최종적으로 손대기 귀찮아서 그냥 넘긴 것도 있는데 좀더 수정을 해야겠다.

_프로필 템플릿도 살펴봐야지.

]]> <![CDATA[WIL | MY Momentum_ver.0]]> https://velog.io/@juhl_daily/%EB%82%98%EB%A7%8C%EC%9D%98-%EB%8F%99%EA%B8%B0%EB%B6%80%EC%97%AC-%ED%99%88%ED%99%94%EB%A9%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.io/@juhl_daily/%EB%82%98%EB%A7%8C%EC%9D%98-%EB%8F%99%EA%B8%B0%EB%B6%80%EC%97%AC-%ED%99%88%ED%99%94%EB%A9%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0 Sat, 12 Nov 2022 15:38:15 GMT :: 개발일지를 써보자

여기저기서 코딩코딩해서 코딩이 대체 무언가..궁금해만 하다 일이 커질 것 같아서 발을 안담그려고 했는데, 우연히 어떤 인스타 광고를 보고 “걸렸구나~!”하고 떡밥 문 물고기가 되어 대차게 낚여 올랐다.

내가 낚긴 첫 수업 이름은 [나만의 동기부여 홈화면 만들기] https://spartacodingclub.kr/online/special/momentum

:: 알게 된 것 _구글 추가기능(Extension) 모멘텀(Momentum) 배경화면 꾸미기, 실시간 시간표시, 오늘의 할일, 명언을 볼 수 있는 기능 등을 제공. 실제로 빈 크롬화면보다 더 나은 생산성을 주어 많은 분들이 사용하는 도구.

바로 내가 혹 했던 페이지 이미지의 정체였고, 그걸 구현해 보는 것이 숙제.

:: 완성한 것 https://juhlsuh.github.io/Momentum/

:: 결과물에 대한 개인적인 평가 아무래도 맛보기 수업이라 시각적 완성도가 내가 감탄할 만큼은 아니었다. 그래서 더 코딩을 공부하고 싶어졌는지 모르겠다. 더 예쁘고 실용적으로 구현하기 위해..

:: 경험한 것들 _Visual Studio Code 설치 후_Live Server 설치하기 https://code.visualstudio.com/Download

_Github | https://github.com 인터넷에서 코드를 업로드 할 수 있는 사이트 동시에 이 코드를 배포해서 마치 홈페이지처럼 접속할 수 있습니다!

_Unsplash | https://unsplash.com/ 저작권이 무료인 사진을 다운로드 받을 수 있는 웹사이트

]]> <![CDATA[벨로그 시작!]]> https://velog.io/@juhl_daily/%EB%B2%A8%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EC%9E%91 https://velog.io/@juhl_daily/%EB%B2%A8%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EC%9E%91 Sat, 12 Nov 2022 14:25:03 GMT 개발일지를 써야 한다.

]]>