오늘 공부할 내용

• HTML 수업준비
• JAVA 수업준비
• 수업 복습
• 모의 면접 준비
• TiL 정리 및 블로그 업데이트

오늘 공부한 것 & 배운 내용

• 출근시간 공부

  • 인성 면접 준비 영상

    • 내용정리
      • 직군 - 산업 - 특정 기업 순으로 명확한 목적을 가지고 취업 준비를 하라
        • 나의 경우에는 java 벡엔드 개발자라는 직군이 정리되어 있어서 고민할 필요가 없는 장점이 있는 것 같다
        • 산업의 경우 어디든 가면되지 라고 생각했는데 그렇게 불명확하게 설정을 하면 준비에 도움이 안된다는 것을 생각을 했고 산업군이라도 정리를 해봐야 될 것 같다
          • 이번에 밀리의 서재 모의면접을 준비하면서 느낀건데 확실히 내가 관심을 가지고 있는 분야의 서비스는 말할거리도 생기고 의욕도 생기는 것 같다
          • 어떤부분이 나한테 잘맞을지 몇가지 산업분야는 선택해놓고 준비를 하면 준비내용도 더 구체적이 될것이고 그러면 합격합률도 올라갈 있을 것이다.

• 개발자 취업 영상

  • 내용정리
    • 하나의 기술스택에 포트포리오가 필요하다
    • 취업을 위해 필요한것은 해당 기술 관련 포트폴리오, 코딩테스트, 기술 면접, 인성 면접이다
      • 이런 명확한 목표들이 있어야 어떻게 준비하고 얼마나 준비해야 되는지 정할 수 있는 것 같다
      • 지금은 기술을 배워서 포트폴리오를 진행할 준비를 하지만 한쪽으로만 치우치지 않고 병렬적으로 준비해 나갈 수 있는 부분들을 찾아가면 더 효과적이고 목표지향적으로 준비할 수 있을 것 같다

• 준비시간

  • 채용공고 읽기

    • 용어정리

      • 백오피스 : 생산, 판매, 거래 등 부가가치 생상하는 프론트 오피스에 반대되는 개념으로 그것을 지원하는 업무와 시스템
      • API: Application Programming Interface : 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청과 명령을 받을 수 있는 수단 : API가 있으면 쉽게 프로그래밍할수있다
      • REST API : API가 어떤 역할을 하는지 명확히 명시될수 있게 약속되어 있는 API

    • 느낀점

      • 읽다보니 모집 공고가 불분명해서 어떤 직무를 알수 없거나 이제 막 스타트업을 시작해서 들어가서 개발환경을 구축해야 하는 곳은 신입개발자로서는 어려울 것 같다.

        • 이런식으로 구분할 수 있는 눈이 생기는 것도 채용공고읽기에 좋은 효과인 것 같다

• 아침 공부시간

  • HTML & CSS day3 수업

    • 수업 요약

      • 어제에 이어 main에 group1 로그인 파트를 스타일링 해나가면서 차근차근 요소들도 작성해 그룹1 부분을 마무리하였다.

    • 수업 정리

      • 로그인파트

        • 어제 마크업한 부분에 아래쪽에 회원가입과 아이디/비밀 번호 찾기 칸을 추가하기 위해 폼이 끝난 영역에 ul 클래스를 추가해서 마크업하였다

          • 연속된 기능들은 대부분 ul로 작성하시고 나중에 css로 레이아웃 처리하시는게 하나의 패턴으로 보였다

        • 마크업으로 표현된 설계를 바탕으로 디자인 하기

          • 둥근모소리, 백그라운드 색, 로그인 위치 어떻게 설정할것인지, 폼의 서식을 어떻게 줄것인지등 필요한 부분들을 그림으로 그리시면서 디자인 설계를 하셨다

        • 스타일링 시작

          • fieldset에 segend는 눈에 보이지 않게하는게 일반적임으로 숨기기 위해서 position:absoulte width height :1px 을 주어 1px짜리 점으로 만들고 clpi-path polygon을 그점마저 보이지 않게 해었다
            • 참고사이트 : https://bennettfeely.com/clippy/
            • 이후 legend에 .a11y-hidden 태그를 추가해주어 해당 나중에 숨기고 싶은 클래스들에 적용할 수 있게 확장을 하였다
              • 이렇게 비슷한 것들을 클래스로 묶어서 관리하는 것이 효율적으로 마크업과 스타일링을 하는 방법인 것 같다
          • login-heading에 text-indent를 통해 들여쓰기를 주어 레이아웃을 준것 같은 효과를 주었다
            • 일반적으로 form은 div로 묶어서 일괄적으로 스타일링을 하는게 용이해서 그렇게 하는경우가 많지만 우리는 각자 form에 스타일링을 하기로하고 login-form과 sign을 각각 스타일링을 일관 되게 주어서 하나로 묶인 것처럼 스타일링 하였다
          • input에 위치를 정렬하기 위해 inline인 label을 inline-blcok으로 바꾸어주고 width를 주었고 input을 여러속성들을 사용해 정렬한 이후 label과 input의 높이를 정렬하기 위해 2개를 묶어 vertical-alighn:middel을 주었더니 크기가 더큰 input에 맞추어 label이 정렬되었다
            • css에서 요소들을 배치하는 것이 어려운 것 같은데 강사님이 뭐든지 척척 맞추어 나가는 것보면 신기하기만 하다
          • 로그인 버튼의 배치를 위해 Position을 활용하기 위해 fieldset을 relative로 만든뒤 top right를 0을 주니 원하는 위치에 배치가 되었고 이후 속성들을 이용해 스타일링하였다
          • 디자인상 sign 위쪽에 있는 줄을 표시하기 위해 login-filedset아래에 border를 만들어주고 패딩을 주어 적당한 위치에 배치하였다
            • 줄을 긋는데 어느 요소를 활용할 것인가 패딩을 어디서 줄것인가 같은 문제가 경험이 필요한 부분인 것 같아서 보통 어떻게 표현하는지 알고있으면 좋을 것 같다
          • filedset이 어떤 요소인지 다시 찾아보니 form태그아래 filedset으로 감싸고 그 아래 legend가 있고 그 다음에 label&input을 감싼 div들이 들어가는 구조로 이루어진것을 알수있었다
            • 잘짜여진 html구조를 보니 어디에 뭐가있는지 명확해지고 시멘틱 태그와 적절한 naming이 그역할들을 알려주니 코드를 통해 구조를 확인하기가 정말 편하다는 것을 느꼇다
            • 스프링에서 활용할 form태그와 관련된 것이니 기억해두는게 좋을 것 같다
          • sign 앞에 아이콘을 입력하기 위해 fontello에서 웹폰트를 받았고 css import는 지난번에 해서 마크업만 수정하였더니 해당위치에 아이콘이 들어갔다
            • 클래스명을 추가한 것만으로 아이콘이 추가된게 굉장히 신기했다
            • 어제 수업에서도 해봤지만 이렇게 웹폰트를 사용하여 사용환경에 상관없이 일관된 디자인을 유지하게 해주는 기술들이 굉장히 유용하게 느껴졌다
            • 참고사이트 : https://fontello.com/
          • sign에 li들을 배치하기 위해 flex를 사용하여 row로 배치하고 justify-content: space-between을 통해 정렬하였다
          • 로그인창 마무리하시면서 처음에는 오래걸려도 꼭 설계를 해보고 하라고 말씀 하셨다 그래야 문제해결 구조를 습관하 할 수 있고 습관화 될 수록 해결속도도 빨라진다고 말씀해주셨다
            • 올바른 문제해결방식을 배우고 반복하여 습관화 하여 실무환경에서도 해당 문제해결방식을 자연스럽게 적용할 수 있는 능력을 갖추는 것이 현재 내가 공부하는 공부에 목표가 아닌가 싶다

    • Valdation파트

      • 구조설계
        • 새로운 section을 만들고 h2를 이용해 header를 만들지만 보이지 않아도 되기에 숨긴 헤더로 만들자고 설계하였고 이번에도 ul을 통하여 2개의 validation 창을 표현하기로 설계하였다
          • validation에는 링크를 갖게 하고 새로운창에서 열것이니 target을 주고 title도 줘서 링크를 설명할 수 있도록 하기로 하였다
            • target에는 blank가 아닌 _black를 주어야 진정한의미에 새창을 띄우는 것이라는것 배운게 인상적이었다
            • 뭘하나 해도 제대로 알고 사용하는 사람은 다른 것 같다. 강사님이 어디서 간단히 보고 사용하더라도 코드 사용하더라도 어떤코드인지는 명확히 알고나서 사용하라고 하신 의미를 알 것 같다
      • 마크업
        • gropup1에 loign section이 끝난곳에 이어서 section valiadation을 만들었다
        • header를 h2로 선언하고 class를 a11y-hidden로 네이밍하여 숨긴 헤딩이되도록 하였다
        • ul valdation-list를 만들고 그안에 li 2개를 넣고 각각 a태그를 통해 해당 링크 사이트 주소를 넣고 target=_bank와 title을 각각 주었다
      • 디자인 설계를 생략하고 바로 스타일에 들어갔다
        • valdation-list에 margin-top을 주어 login section과 분리된 section으로 보이도록 하였다
        • valdation-list li에 margin을 주어 box를 크게 만들고 margin-top을 주어 box들이 적당히 배치될 수 있도록 하였다
          • 다른 효과들보다 이렇게 기본적인 margin같은 속성들로 스타일링을 해나갈수 있다는 것을 기억하라고 말씀하셨다
        • backgorund에 image를 링크하여 li에 아이콘을 넣어주고 linear-gradient를 통해 배경을 입혀주었다
          • 아이콘을 넣는것도 배경을 넣는것과 마찬가지 효과이기 때문에 먼저 gradient를 주면 아이콘이 안나오는 현상이 발생하니 먼저 아이콘을 배경으로 입혀주어야 한다고 말씀하셨다
        • 글자에만 링크가 걸리는 효과를 전체 box로 확장하기 위해 .validation-list li를 .validation-list a로 바꾸어 주었더니 box가 겹쳐서 display를 bolck으로 바꾸어 주었더니 제자리를 다시 찾아가고 전체 박스에 링크가 걸리도록 하였다
          • 이런 사소해 보이는 불편함들을 해소하는 것들이 프론트 개발자의 중요한 포인트인 것 같다

    • Term파트

      • 논리 적인 순서
        • 시안을 보고 어떤순서로 구조를 설계해야 하는지 고민해보았다
          • 1.제목 2. 소제목- 이미지와 내용은 어떤게 먼저들어가도상관없을 거 같아서 3.이미지 4.내용으로 정하였다
      • 구조 설계
        • group1에 새로운 section을 추가하기로 하고 term이라고 네이밍 하기로 하였다
          • 강사님이 naming은 컨텐츠에 내용을 명확히 담아야 하는데 그것을 영어로 지으려고 하니 정말 어려운 작업이라고 하셨다
            • 프론트나 백엔드나 상관없이 naming은 정말 중요하구나 싶고 코드가 영어로 되어있고 원어민이 아닌 이상 더 많은 래퍼런스를 접하면서 해결해나는 방법밖에는 없는 것 같다
          • 1차적으로 h2로 heading하고 h3로 소제목을 주고 p(단락)2개를 넣어 img와 txt를 처리라할 수 있는 방안을 설계했다
          • 2차적으로 dl태그를 소개시켜주시며 자식으로 key 역할을 하는 dt와 value 역할을 하는 dd가 존재하는데 dd는 여러개 올수가 있어서 소제목과 그것을 보충하는 내용들처럼 사용할 수 있어서 이 방식을 선택하기로 하였다
      • 설계한대로 마크업을하고 디자인 설계로 넘어가 subject와 thumbnail을 어떻게 배치할까 고민하다가 float으로 하기로 하고 스타일링으로 넘어갔다
      • 스타일링
        • .term에 속성을 주어 적당한 크기로 키워놓고 term-heading에 font를 조정해 배치하였다
        • term-list-subject를 float:right하여 오른쪽으로 띄우고 정렬하기 위해 width를 주었더니 적당한 위치에 정렬이 되었다
          • float은 width값을 안주면 contents size만큼 box를 만드는 특성을 이용한 것이다
        • term-list-thumbnail은 float left하고 breif는 float:right 주고 width를 주어 정렬되도록 하였다
        • 정렬하고 나니 모든 요소가 float이 되어 header에 침범하는 사태가 벌어져서 .term-list::after에 가상의 content를 만들고 dsiplay:block으로 만들고 clear :both를 했더니 요소들이 다시 자리를 찾아갔다
          • 가상의 content를 만들어 clear:both를 하는 것이 float된 요소들이 둥둥떠나니면서 침범하지 않게 하는 대표적인 방법인 것 같다.
      • oveflow:hidden도 하나의 방식이지만 추천하지는 않아서 알아두기만 하는것 같다
        • 정렬하고 보니 Thumbnail아래 갭이 생기는 형상이 발생해서 term-list-thumbnail img에 vertical-align : top을 주었더니 gap이사라졌다
      • 아니면 block으로 만들어서 해결하는 방식도 있다고 알려주셨다
        • 마지막으로 subject에 위아래 공백이 생겨서 margin-top에 -5px를 주었더니 약간 밀려올라가면서 img에 맞추어 정렬이 되었다
      • 아직 margin 값을 -로 주는것은 익숙하지 않은데
        • 마지막으로 주말에 한파트라도 스스로 만들어보고 월요일에 질문해보라는 숙제를 주시고 수업을 마무리 하셨다

    • 용어정리

      • 썸네일(Thumbnail): 사진 또는 그림을 엄지손톱 만하게 작게 표현한 것이 어원으로 페이지 전체의 레이아웃을 검토할 수 있게 페이지 전체를 작게 줄여 화면에 띄운 것을 뜻한다

    • 느낀점

      • 수정 중간중간 프론트 개발자와 디자이너와의 소통이 어떻게 이루어지고 디자니너가 만든 시안을 어떻게 웹페이지화 해나가는지 얘기해주시는 부분들에서 되게 재미를 느끼며 디자인대로 웹페이지를 만들어내는게 얼마나 힘든일인가.. 라는 생각을 해봤다

    • 수업이 반복되서 그런지 아니면 어제 TIL정리를 해서 그런지는 모르겠지만 어제보다 훨씬 수업을 따라가기 수월했고 수업 노트도 모든것을 다적는다기보다는 수업 flow를 적어 나가기로 마음먹고 했더니 훨씬 많은 내용들 적어서 복습하는데 도움이 많이 되었다 -> 굿!

      • 수업내용이 논리적순서 - 구조설계 - 마크업 - 디자인 설계 - 스타일링의 구조를 반복하기 때문에 몇번째 수업을 듣다 보니 그 구조에 점점 익숙해 져나가서 듣기가 점점 편해지는 것도 있는것 같다

      • 복습하면서 css중 속성에 효과가 궁금하면 수치만 조금바꿔서 적용하고 웹페이지 가보면 바로 확일 할 수 있기 때문에 너무 편리하게 느껴졌다

        • 이런 직관성이 프론트엔드를 공부하는 매력중에 하나지 않을까 싶다

      • 강사님이 프론트 수업진행하실 때는 스스로 문제 해결구조 갖추어서 실습해보고 그뒤에 같이 해보는 방식을 하여 스스로많이 해보는 방식으로 진행하신다는데 이렇게 해야 진짜 문제해결 능력이 거 같다

        • 나도 어떻게 하면 이런방식으로 혼자 공부할 수 있는지 생각해 봐야될 것 같다

• 저녁 공부시간

  • TIL 정리
    • HTML부분을 정리하고 나니 2시간 40분이 걸렸다. 3시간 수업이니 정리하는데 비슷한 시간이 걸리는게 맞는 것 같고 시간을 더 투자해서 실습까지 해볼 수 있으면 베스트 일 것 같다
    • Java 수업은 주말을 이용해 수업내용을 정리해야 할 것 같다

  공부하면서 느낀점

• 오늘 HTML 수업중에 TIL 적느라 너무 오랜시간 걸린다면 TIL을 왜적는지 한번 생각해보라고 누구한테 보여주려고 적는 것인지 아니면 스스로 정말배운것을 정리하기 위해서 쓰는지 점검해보라고 말씀하셨는데 공감이 갔다

  • 하루하루 배운내용들을 정리하면서 어제보다 더 성장한 자기자신의 모습을 확인하기 위해서 TIL을 적는다는 것을 잊지말고 목적에 맞게 TIL을 작성해 나가 보자

• 동료가 commit message를 어덯게 할까 고민하면서 물어봤는데 나도 대충하고 있어서.. 도움이 되지 못한다 . 약간 검색해 보니 자료는 충분한 것 같으니 이제라도 조금씩 공부해서 제대로 commit해보면 좋을것 같다

내일 공부할 내용

• Java 수업 내용정리
• 모의면접 준비
• TiL 정리 및 블로그 업데이트