학습내용

반응형 웹디자인

px, em, rem, %

크롬브라우저 -> settings -> appearance 에서 font size를 설정할 수 있는데 크롬브라우저에서 디폴트로 지정한 16px이 1rem이 된다.

px을 사용한 엘리먼트들은 여기서 위에 해당하는 방법대로 사이즈를 변경해도 변화가 적용이 안된다.
하지만 rem단위를 사용한 엘리먼트들은 변경이 일어난다.

cf. h2 태그는 기본 폰트크기의 1.5배가 된다.
=> h2에 씌워진 div태그(부모태그)에 20px을 줬다고 가정하면, h2태그 폰트크기는 30px이 된다.

em - 부모크기 * 숫자
rem - 루트크기에 대해 상대적으로 변함

반응형으로 구현하기 위해 rem과 같은 단위를 사용하는 것이 대체로 더 좋긴하나,
border-radius 속성은 반응형으로 하지말고 px로 남겨두자!
=> 동적으로 적용하면 요소가 변함에 따라 곡률에 변화가 크게 생긴다.

Media Query

미디어 쿼리란 반응형 디자인을 구현하도록 도와주는 CSS 문법이다.
=> 하지만 사용시 css는 종속적이다는 특성을 잊지 말자!

모바일 우선 접근 방식을 더 선호한다!
=> 모바일 장치에 맞게 코드를 우선적으로 작성하고, media query문법 활용하여 큰 장치에 맞게 조정하는 방식
(작은 상태에서 늘리는 것이 더 쉽기 때문에)

@media (max-width: 48rem) {
  #main-header nav {
    display: none;
  }

  main h1 {
    font-size: 1.5rem;
  }

  .menu-btn {
    display: flex;
  }

  #latest-products ul {
    grid-template-columns: 100%;
  }
}

내부링크 연결법

사이드바를 구현하면서 기존 웹사이트에 링크된 기능을 구현하는 연습을 해봤다.

다른 웹사이트로 연결되는 링크와는 달리,

앵커 태그의 id를 정의해 브라우저url에 id가 추가된다.

햄버거 아이콘을 클릭하여 사이드바가 펼쳐지는 기능 구현

햄버거 아이콘 클릭하여 url에 id가 추가되어 사이드바로 넘어갈 수는 있지만
(실제로는 가상target 선택자로 설정하여 display: block 속성을 부여하는 것.)

 html 파일
<a href="#side-drawer" class="menu-btn">
      <span></span>
      <span></span>
      <span></span>
    </a>
    햄버거 태그를 이렇게 구현 가능한것도 배웠다!(span들의 height를 작게 지정해줘서)

CSS 파일

#side-drawer {
  width: 100%;
  height: 100%;
  background-color: rgb(29, 26, 27);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#side-drawer:target {
  display: block;
}

다시 돌아가는 방법은 아래방법들 뿐이다.

1. url에서 이부분을 지우거나
2. #을 추가해서 랜딩페이지의 최상위로 이동하는 방법

핵심

1. 요즘은 모바일 우선방식을 이용하는 편이다.
2. media query
3. px rem em % 차이
4. 내부링크 연결법 (그 이용시 새로고침되는거)
5. 가상 target 선택자

학습내용

팀스터디 준비내용.

우리조는 하루에 하나씩 각자 다룰 주제를 정해와서 공유하고 질문하고 하는 방식으로 진행하기로 하였다.

"주소창에 URL을 입력하면 일어나는 일"

나는 개발자 면접질문에도 자주 나오고 지금 시점에서 한번 웹개발 메커니즘의 큰 틀을 리마인드 하면 좋겠다 싶어서 해당 주제를 선정했다.

CSS 속성

object-fit 속성
fill값: 안에서 찌그러지그나 늘어날 수있음.
contain값 이미지나 기타 리소스의 종횡비가 안무너짐.
cover: 종횡비 유지하면서 컨테이너 채우는거.

cf. margin/padding 강사님 Tip

• 좌우 여백 주고 싶을때 margin 사용하는 편.
• 컨테이너높이에 영향을 주고 싶은 경우 padding사용하는 편

unicode 사용방법

화살표 같은 것은 아이콘으로 넣지 않고 유니코드로 삽입하는 방법도 있다.
UTF 활용해서.
&#x2192 이런식으로 태그안에 작성하여 사용이 가능하다.

Grid

플렉스박스(1차원레이아웃 구성)와 달리 2차원 레이아웃을 구성할때 쓰이는 속성이다.

grid-template-columns, grid-template-rows
해당 속성들로 그리드의 열과 행을 구성한다.

display: grid;
grid-template-columns: 1fr 1fr 1fr;

/* 동일한 비율로 3개읭 열을 구성하게 된다. */

1fr(fraction)은 비율을 1로 가져가겠다는 얘기다.
따라서 위의 코드는 아이템들이 컨테이너 너비에 대해 1:1:1로 동일하게 가져간다는 의미이다.

아래와 같이 %로 표현도 가능하다.

grid-template-columns: repeat(4, 25%);

4개의 열을 구성하며 컨테이너 너비에 대해 각각 25% 비율로 가져가겠다!

WAI-ARIA

WAI - W3C(웹 표준 정하는 컨소시엄)에서 웹 접근성을 담당하는 기관
ARIA - 장애가 있는 사람들이 스크린리더기 등으로 웹 상의 콘텐츠나 애플리케이션에 좀 더 편리하게 접근할 수 있도록 하는 기술

WAI-ARIA는 그를 위한 웹 접근성 기술 규격이다.

role : 요소의 역할 정의
state : 요소의 현재 상태
property : 요소의 특징 정의

1. role

예를 들어 role을 부여하는데
이미 html태그 자체로 파악할 수 있는 것에 부여하는게 아니라

<div role="button">Click Me!</div>  // 버튼의 역할을 수행하는 div

태그 종류와 역할이 맞지 않을때 무슨 역할인지 role을 명시하면 좋다고 한다! (단, 시멘틱 태그 본연의 의미가 퇴색되지 않도록 주의)

2. state

aria-selected : 여러 선택 가능한 엘리먼트 중, 선택된 상태를 명시할 수 있다.(true/false)

aria-expanded : 메뉴, 아코디언 등 펼쳐진 상태인지 아닌지 명시할수있다. (true/false)

aria-hidden : true속성을 지닌 엘리먼트는 스크린 리더로부터 숨겨진다.
콘텐츠로는 존재하지만, 스크린 리더가 읽을 필요가 없는 엘리먼트(e.g. 필수입력사항과 같은 보조적인 문구) 등을 해당 속성을 통해 숨기면 될것 같다!

aria-invalid : 폼 입력 필드에 유효하지 않은 값이 들어갔을때 알려준다.

3. property

aria-label : 요소에 라벨을 붙여준다. 닫기 버튼에 이미지만 들어있는 경우, 어떤 역할인지 파악이 안되니까 라벨을 통해 명시하는 것 같은데,
아마 role 보다 조금 더 구체적으로 명시할일이 있을때 쓰이는 것 같다.

<button aria-label="닫기 버튼"/> <img src="X.png" /> </button>

aria-live : 실시간으로 업데이트 되는 내용을 읽어주기 위해 부여한다.

'aria-live="polite"' : 스크린 리더가 현재 컨텐츠를 다 읽고 업데이트 되는 컨텐츠를 사용자에게 읽어준다.

'aria-live="assertive"' : 현재 읽고 있는 내용을 중단하고 업데이트 내용을 읽어준다.

멘토링

맡게된 도메인이 중요하긴하다.
3년차까지는 뭘하든 상관없다. 잘할 수 있는 도메인을 선택하는 것도 중요하다.
3년차까지의 경험이 너무 중요하다. => 쌓은 경험이나 습관이 앞으로 쭉 영향을 준다.

추천서적

실용주의 프로그래머

문제링크

https://leetcode.com/problems/group-anagrams/description/

문제설명

Given an array of strings strs, group the anagrams together. You can return the answer in any order.

An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Example 1:

Input: strs = ["eat","tea","tan","ate","nat","bat"]
Output: [["bat"],["nat","tan"],["ate","eat","tea"]]

Example 2:

Input: strs = [""]
Output: [[""]]

Example 3:

Input: strs = ["a"]
Output: [["a"]]

Constraints:

• 1 <= strs.length <= 104
• 0 <= strs[i].length <= 100
• strs[i] consists of lowercase English letters.

문제풀이

처음에 문제를 보고 떠오른 아이디어가

각 아이템의 문자열을 정렬을 해서 비교하는 문제이려나 하는 막연한 생각이 들었다.

하지만 그럼 소트 메소드를 쓰면 nlogn인데 for문 안에서 돌려야하니 시간복잡도가 n^2logn 이잖아?.. 하고 과감히 버렸던 아이디어 였지만,

고민끝에 답이 나오지않아 검색한 결과

1. 각 item의 문자열을 정렬하고 => 아나그램이라면 정렬한 문자열이 서로 같을테니까

2. 딕셔너리를 활용.

    { 아나그램: 문자열 } 형태로 삽입한다.

3. 딕셔너리 값들을 정답 리스트에 삽입

 하는 로직으로 구현하면 된다.

코드

class Solution:
    def groupAnagrams(self, strs: List[str]) -> List[List[str]]:
        myDict = {}
        answer = []

        for item in strs:
            anagram = "".join(sorted(item))
            if anagram not in myDict:
                myDict[anagram] = [item]
            else:
                myDict[anagram].append(item)

        for item in myDict:
            answer.append(myDict[item])

        return answer

        # 1. 각 알파벳들을 쪼개서 정렬
        # 2. {애너그램: 원래문자열} 형태로 딕셔너리 삽입
        # 3. 같이 묶여있는 값들 리스트에 삽입 => 리스트 형태로 출력해야하므로

브라우저 주소창에 URL을 입력하면 어떤일이 일어나는지 얘기할 수 있는만큼 얘기해주세요.

• URL을 해석하고 서버와 통신하는 네트워크 관점
• 그리고 렌더링과정을 진행하는 프론트엔드 관점

네트워크 관점

URL을 해석하여
1. www.naver.com을 호스팅하는 서버의 ip주소 찾기
=> 이를 위해 브라우저가 URL을 해석하고 DNS 조회하는데, 바로 질의를 하는것이 아니다.
=> 한번 질의한 도메인을 계속 질의하면 성능면에서 안좋으므로.

1. 자신의 Hosts 파일에서 도메인 네임에 대응하는 ip 주소가 있는지 먼저 확인.
2. 로컬 DNS 캐시 확인
3. DNS 쿼리
4. IP주소 획득

2.해당서버와 통신

5. 서버와 TCP 연결 (3-way handshake)
6. HTTP Request
7. HTTP Response

cf. OSI 7계층 레이어 생각하기
3계층 IP -> 4계층 TCP -> 7계층 HTTP

프론트엔드 관점

서버에서 응답받은 리소스들을 기반으로 파싱/렌더링을 수행한다.

1. 렌더엔진이 HTML과 CSS를 파싱하여 각각 DOM 트리와 CSSOM트리를 생성한다.

2. DOM트리와 CSSOM트리를 결합하여 render 트리를 만든다.
	(보이지 않는 엘리먼트는 포함되지 않는다. e.g. display:none;)

3. 렌더트리를 기반으로 Layout을 계산 (여기서 position, height등 계산됨)

4. 마지막으로 Paint 과정을 거쳐 렌더링 완성

이때 특정 인터렉션에 의해 DOM에 변화가 생기면 render Tree가 재생성되어 3번 4번 과정에서 각각 reflow, repaint가 발생한다.

cf. URL과 URI의 차이.

그림참고: https://github.com/WooVictory/Ready-For-Tech-Interview/blob/master/Network/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90%20naver.com%EC%9D%84%20%EC%B9%98%EB%A9%B4%20%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94%20%EC%9D%BC.md

문제링크

https://leetcode.com/problems/longest-increasing-subsequence/

문제설명

Given an integer array nums, return the length of the longest strictly increasing subsequence.

Example 1:

Input: nums = [10,9,2,5,3,7,101,18]
Output: 4
Explanation: The longest increasing subsequence is [2,3,7,101], therefore the length is 4.

Example 2:

Input: nums = [0,1,0,3,2,3]
Output: 4

Example 3:

Input: nums = [7,7,7,7,7,7,7]
Output: 1

Constraints:

• 1 <= nums.length <= 2500
• -104 <= nums[i] <= 104

Follow up: Can you come up with an algorithm that runs in O(n log(n)) time complexity?

문제풀이

LIS(가장 긴 증가하는 부분 수열)을 구하는 문제로,

대표적인 풀이 방법으로 DP를 사용하는 것이 있다.

D[i]: i번째 원소까지 증가하는 수열의 길이를 저장하는 배열이라 두자.

그리고 i가 순회하는 동안 j가 i번째 까지 순회하며 해당값을 비교해 j인덱스에 위치한 원소가 더 작다면,

D[i]값을 갱신한다. 이때, 원래 존재하는 (D[i]값)과 (D[j]에 1을 더한값)을 비교하여 큰수를 저장.

class Solution:
    def lengthOfLIS(self, nums: List[int]) -> int:
        
        # 가장 긴 증가하는 수열의 길이를 출력
        # ex) [10, 9, 2, 5, 3, 7, 101, 18]
        # Can you come up with an algorithm that runs in O(nlogn)
        # D[i]는? i번째까지 증가하는 수열의 길이

        N = len(nums)
        D = [1] * N
        
        for i in range(1, N):
            for j in range(i):
                if nums[i] > nums[j]:
                    D[i] = max(D[i], D[j]+1)

        return max(D)

하지만 해당 방법으로 풀게 되면 최악의 상황에서 O(N^2)의 시간복잡도를 갖게된다.

따라서 O(NlogN)까지 줄일 수 있는 방법이 DP + binary search 를 활용한 방법이 있다.

코드

class Solution:
    def lengthOfLIS(self, nums: List[int]) -> int:
        
        # 가장 긴 증가하는 수열의 길이를 출력
        # ex) [10, 9, 2, 5, 3, 7, 101, 18]
        # Can you come up with an algorithm that runs in O(nlogn)
        # D[i]는? i번째까지 증가하는 수열의 길이

        lis = [nums[0]]
        for num in nums:
            # 현재요소가 마지막 요소보다 큰 경우 추가 
            if num > lis[-1]:
                lis.append(num)
            else:
                l, r = 0, len(lis) - 1
                while l < r:
                    mid = (l + r) // 2
                    # 이진탐색을 통한 값
                    if lis[mid] < num:
                        l = mid + 1
                    else:
                        r = mid
                lis[l] = num
                
        return len(lis)

학습내용

git 명령어

Merge conflict

서로다른 브랜치 혹은 서로 다른 사용자가,
같은 파일의 같은 코드부분을 수정하고 병합하려고 할때 발생한다.

해결방법은 충돌이 발생한 파일을 열고, git이 표시한 충돌 부분에서 어느 코드를 유지할지 결정하고 변경하면 된다.
=> 충돌난 부분을 작성한 팀원과 꼭 상의가 필요할 것 같다.

fork, clone

둘다 레포지토리 전체내용을 나의 독립적인 저장소로 가져오는 명령어이다.
차이점은,
fork는 원격에서 원격으로
clone은 원격에서 로컬로 받아온다.

fetch vs pull

git fetch 명령어는 원격저장소에 변경사항이 있는지 "확인"만 한다.
git pull은 원격저장소의 변경사항을 로컬로 받아와 merge까지 수행한다.

로고 만드는법

• 추가로 로고를 직접 a태그를 활용하여 텍스트로 만드는것도 예뻤던것같다. ⇒ 폰트변경하고, 텍스트 스타일링 하니까 로고처럼 디자인이 완성됐다!

  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);

CSS 포지셔닝

Flex box란?

display: flex; 처리를 하면 해당 박스안의 요소들이 정렬 및 배치된다.
flex 박스는 내부요소들을 관리하는 컨테이너 역할을 한다.

cf. 관리자도구에서 flex속성을 설정한 DOM요소에 flex버튼이 생기는데 클릭하면 점선이 생긴다!

Flex box의 장점

1. 플렉스 박스에 속한 엘리먼트들의 정렬, 순서변경에 용이하다.
2. 유연한 특성이 있어, flex-grow, flex-shrink, flex-basis 등의 속성을 통해 각 아이템이 차지하는 유연하게 조절할 수 있다.
   => 다양한 화면 크기(높이, 너비)에 맞게 아이템들이 조정되어 반응형 레이아웃 구현에 효과적이다!
   3. 무엇보다 코드가 간소화된다. => 가독성 유지보수성 증대
   cf. display 속성에는 무엇이 있나요??

사용법

display: flex;
flex-direction: row;  /* row값(기본값)은 주축이 가로방향이 되어 가로정렬 된다. */
flex-wrap: nowrap;

row-reverse 속성값을 이용하게 되면 주축의 시작점이 역전된다고 한다.
flex-direction, flex-wrap 속성을 합쳐서
flex-flow: row nowrap; 으로 사용도 가능하다.

박스 모델

border-box vs content-box

요소의 크기 계산방식을 결정하는 역할을 하며, 이들은 box sizing 속성 값으로 사용된다.

content-box
기본값인 content-box가 적용된 엘리먼트의 너비높이는 오직 콘텐츠 영역만을 포함한다.
즉, width가 100px이고 padding: 20px 이 적용되면 요소의 실제 너비는 140px이 된다.

border-box
엘리먼트의 너비 높이가 콘텐츠, 패딩, 테두리 등을 포함한다.
width: 100px 을 설정하면 패딩과 테두리를 포함한 너비가 100px이라는 얘기다.
전체 요소 크기 계산하기가 쉬우며 덕분에 레이아웃 설계에 용이하다는 장점. => 반응형 웹을 디자인하는데에 효과적!

position 속성

position: absolute;  /* 가장 가까운 "위치지정" 부모 요소에 대해 상대적으로 배치 */
top: 4px;
left: 4px;

=> 위치지정 요소란 position 속성값이 relative, absolute, fixed, sticky 등인것을 의미한다. (static은 아님)
position 속성의 기본값은 static이다.

=> 또한 position: absolute; 지정하는 대상이 블록요소라면 inline-block요소로 바뀐다고 한다! (실제로 header element의 크기가 변했따.)

position: relative;     /* 자기 기준으로 해당 top,left 등 속성 값에 따라 배치*/
top: 4px; 
left: 4px;

position: sticky; /* 가장 가까운 스크롤 되는 부모 요소와, 컨테이닝 블록을 기준으로 적용됨 */
top: 20px;

cf. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들고 싶을때, CSS 설계방법은?
=> 비율 기반의 레이아웃을 만드는 것입니다. 대표적으로 Viewport단위(vw, vh) 등을 사용하여 창의 크기에 따라 요소의 크기도 변화시킬수있습니다.
=> 또한 비디오 및 이미지 컨테이너로 활용하는 트릭중 하나인 padding-top을 사용하여 비율을 설정하는 것이 있다.

aspect-ratio: 16/9;        /* 최신브라우저에서 해당 속성 사용하여 16:9 유지 가능 */
padding-top: 56.25%;    /* 16:9 비율로 높이 설정 (9/16)*100% */

cf. 높이를 고정값으로 설정하는게 좋지 않은 이유는?
고정된 높이보다 콘텐츠 양이 더 많을때 잘릴 수 있고, 사용자의 해상도 차이가 있을경우 적절한 UX를 제공하기가 어려움.
따라서 고정값이 아닌 min-height를 이용하여 다양한 장치에서의 화면크기에 유연하게 조절가능하도록 한다.

멘토링

Q) TDD에 대한 글을 읽었는데 효과적으로 실무에 적용하기 위해 고민하는 기업이 있는 반면,
실제로 적용하기에는 시간이나 여러가지 요인으로 제약이 있다는 의견도 있었습니다.
TDD에 대한 멘토님의 생각이 궁금하고,
혼자 사이드프로젝트로 경험을 해보고 가는 것이 현업에 도움이 될지 여쭤보고 싶습니다.
(프론트, 백 양쪽 관점 모두에서 설명해주시면 감사하겠습니다!)

=> TDD에 대해서는 우호적이지 않다고 하셨다.
이유는 개발과정 중 초기 테스트 케이스 작성을 요구하는 것은, 개발 효율이 너무나 떨어지기 때문이다.
그러나 테스트 주도개발에 대해서 비판적일 뿐이지,
개발하면서 테스트 코드 작성은 멘토님도 많이 한다고 하신다.

• 찾아보니 요구사항이 또 너무 자주 변경되는 프로젝트의 경우, 유연성을 감소시킨다고 한다. 테스트케이스를 지속적으로 바꿔야하니...

추가로 DDD에 대한 질문도 주셨는데,
DDD에 대해서는 주니어 개발자들에게 절대 권하지 않는다고 하신다.
객체지향 프로그래밍을 충분히 이해한 상태에서도 DDD는 굉장히 어려운 접근이라고 하셨다.

그것보다는 아래 책들로 공부하기를 추천하셧다.!

• 객체지향의 사실과 오해
• 오브젝트

유데미X사람이 취업부트캠프 첫날(2023.12.13)

웅진씽크빅에서 주관하는 유데미X사람인에서 주관하는 취업부트캠프에 합격을 했다..!

오프라인으로 진행되는 과정인점이 개인적으로 마음에 들었기 때문에 꼭 붙고 싶었는데 다행이다!..

그동안 온라인 생활이 힘들었다..

OT때 말씀해주시기를, 서류-코딩테스트-면접에 걸쳐 선발되기까지 경쟁률이 무려 570:17이라 하였다.
자부심을 갖고 믿음과 기대에 부응할 수 있도록 혼신의 힘을 다해 노력해야겠다고 다짐했다. (초심 잃지 않기를 제발...)

오늘은 가볍게 조원들과 아이스브레이킹 및 자기소개를 하였다.
서로의 얼굴을 그려주기도 하고 일어서서 자기소개를 하는데, 여전히 남들 앞에 서서 발표하는 일은 쉬운일이 아닌 것 같다...

그래도 자기소개를 함으로써 조금 더 친근해진 느낌이 들어서 좋았고, 무엇보다 동기분들의 마음가짐, 개발 경력, 개발 철학, 과거 경험 등을 들을 수 있어 자극도 받고 성공적인 프로젝트를 위해 3개월 동안 혼을 갈아 넣겠다는 목표가 생겼다.
또한 이전보다 개발에 대한 마음가짐에 변화가 온 것이 느껴져서 자신감도 생겼다.
교육과정중에 힘든일이 생기거나, 초심을 잃었다고 판단되었을 때는 이 1일차 블로그를 자주 방문하려고 한다.

학습 내용

주소창에 URL을 입력하면?

웹 브라우저 접속
1. 사용자가 웹 브라우저를 통해 URL을 입력. 웹브라우저는 클라이언트 or 프론트엔드로서 작동.
2. Request : 브라우저가 웹사이트를 호스팅하는 원격컴퓨터(서버)에 Request 보냄.
3. Response : 웹사이트를 호스팅하는 서버(백엔드)는 브라우저의 요청을 처리한 후 Response를 다시 웹 브라우저로 보냄.
4. 브라우저 렌더링
브라우저는 서버로부터 받은 응답을 해석하여, 사용자에게 보여준다.

cf. 브라우저 렌더링 과정

DNS

DNS란?
호스트의 도메인네임(http://www.google.com)을 네트워크주소로 변환하거나, 그 반대의 변환을 수행하는 시스템.

DNS 서버는 이 매핑 테이블이 포함된 서버이다.

다시 주소창에 url을 입력하면 생기는 일을 자세히 다뤄보겠다.
1. 브라우저는 입력받은 도메인을 ip주소로 변환하기 위해 DNS서버와 대화 시도.
2. ip 주소로 변환받으면 웹서버에 request를 보낸다.
3. 서버로부터 response 받는다.

여기서,
도메인을 IP 주소로 변환하려면 DNS서버에 도메인 쿼리하는 과정은 필수다.
하지만 동일한 도메인을 계속 쿼리한다면 성능면에서 안좋다는건 당연한 일이다.
따라서 DNS 서버에 쿼리하기전, DNS 캐시 정보를 먼저 확인하는 방법도 있다.

그래서 자세히 다룬 동작과정은 다음과 같다.

1. 로컬 hosts파일 확인
2. DNS cache 확인(캐싱)
3. DNS에 질의
4. IP 주소획득
5. TCP 연결 (3-way handshake)
6. 연결 성공하면 http request
7. 그리고 그에 따른 response
cf. https://baegopeun-sj.tistory.com/12

HTML

HTML 이란?

HTML은 우리의 웹사이트 컨텐츠가 어떤 구조로 이루어질지 브라우저에게 설명하는 유일한 언어이다.
우리의 웹사이트 문서를 이루는 태그들의 집합이라고 볼 수 있다. 즉 웹페이지라 하면 결국은 html파일이라고 말할 수 있겠다.

<!DOCTYPE html>
브라우저에게 해당문서가 (현대적인 웹 표준을 따르는) HTML 형식을 사용하여 작성됨을 알리는 역할이다.

HTML element

HTML태그 + 콘텐츠

왜 필요할까??
1. 우리가 만든 컨텐츠들이 브라우저에 제목, 텍스트, 이미지 등으로 표시될수있도록 하기 위해.
2. 검색엔진 크롤러의 탐색을 용이하게 하기위해. (HTML 주석 등 필요로함)
3. 눈으로 볼 수 없는 사용자를 위해. ( e.g. 스크린리더기로 인터렉션하는 시각장애인)

HTML 속성

태그의 이름만으로 정보가 부족할때 속성을 통해 추가요소구성을 할 수 있다.

메타데이터

브라우저에는 영향을 끼치나 사용자에게는 보이지 않는 정보.

메타데이터 <- title, 스타일 등
콘텐츠 <- HTML element

title태그 - 탭과 검색엔진에 표시되는 요소
사이트가 서버에 올라가게 되면 검색엔진 크롤러가 볼수있어, SEO에 중요한 역할을 한다.

CSS

CSS의 본질적인 의미

Cascading Style Sheets

Cascading, 사전적의미로는 '계단식', '폭포가 되어 떨어지는것'이다

즉, CSS의 본질적인 의미는 여러개의 스타일 규칙이 동일한 하나의 요소에 적용될 경우 어느 규칙이 우선 적용될지 정의한 것이라고 봐도 무방하다.

또 CSS는 상속(Inheritance)의 원칙을 담고있는데, 대표적인 예시로 부모요소에서 자식요소로 스타일 속성이 전달되는 것을 말할 수 있겠다.

스타일 적용 우선순위

크게 다음과 같이 나눌 수 있다.
0) !important 키워드

1) 인라인 스타일
2) 구체적인 선택자 (id > class == 가상 > 태그 > 전체)
3) 부모요소로부터 상속

cf. 복합 선택자의 경우 각 선택자의 우선순위 점수를 합산해서 정한다고 한다.

배포 및 호스팅

배포
내 웹사이트의 코드(HTML, CSS, JS 및 기타 이미지 등)를 호스팅 서비스 서버에 업로드 하는것.

호스팅
원격컴퓨터(서버)에서 해당 웹사이트의 코드를 저장.

호스팅 서비스에는 AWS, Netlify, Github Pages, Vercel, Google Cloud Platform 등이 있다.

이중에서 Netlify를 활용해 간단하게 만든 사이트를 배포하는 실습을 해보았다.

https://657dc9ca7a73984a7d1d3808--incredible-scone-637124.netlify.app/

버전관리 시스템

Git - 로컬 관리 도구

Github - git으로 관리한 프로젝트를 클라우드로 보내는 역할(클라우드 호스팅 제공자)

멘토링

Q) 포토폴리오로써 효과적으로 어필할 수 있는 프로젝트가 되게 하려면 주제선정이나 실제 구현에 있어서 어떤 부분에 주안점을 둬야하나요?

A) 결국에 기업에서 개발자를 뽑는 이유는 “문제해결능력” 이라고 하셨다.

어떤 문제를 맞닥뜨렸고,
어떤 상황으로 인지했고,
어떻게 해결해 나갔는지 이게 궁금한거지

이력서에 어떤거 만들었다! 이거는 좋은 평가 받기 힘들다. 라고 하셨다.

포토폴리오 작성시에도, 프로덕트의 완성도에 중점을 두기보다는
“개발자 포토폴리오” 이므로
해당 프로덕트가 실제로 사용되고 있는 상황이고, 어떠한 문제가 있을때 어떻게 해결할 거인가를 인지하고 있는 개발자가 경쟁력을 갖출것이다

그리고 코드의 퀄리티도 중요하지만, 경험의 퀄리티에 강조를 많이 하셨던 것 같아서 좋은 경험을 위해 동작할 메커니즘이나 사용할 기술 스택에 대해서도 왜 해당 스택을 사용해야 하는지 그런 고민들을 늘 가져야겠다고 생각했다.

Q) 어떤 개발자가 경쟁력을 갖출것인가

1. 일단 깊이있는 공부, 경험을 하는 것이 절대적으로 유리하다.

(얕고 넓은 기술 스택은 오히려 독이 될 수 있다)
예를들어 패키지를 가져다 쓸 때도, 이사람이 이걸 이유없이 썼는가? 아니면 비교분석을 철저히 했는가가 굉장히 중요한 포인트.

2. 기술 이슈 경험

예를 들어 포토폴리오를 보면, 이러이러한 프로젝트가 있는데 완성도나 그런걸 보는것보다 과연 이 사이드 프로젝트를 하면서 이슈가 없었을까??

있었다면 어떻게 인지했고, 어떻게 해결했을까?? 이게 굉장히 궁금한 포인트다!
기술이슈를 겪을만한 난이도의 프로젝트를 선정하는게 일단 베스트.

3. 오픈소스 작은코드라도 기여를 했다는 사실.

(유명한 오픈소스 아니어도)

4. 다양한 문제상황을 고민하는 개발자인가

다양항 문제상황을 생각해보고 코드를 그에 맞게 작성. 틀려도 좋으니 어느 상황이 발생한다면 어떻게 처리하면 되지 않을까?? 이런 고민을 하는 개발자인가. 원리파악에 관심 자체가 없어보이면 곤란하다.

느낀점

드디어 첫주차를 잘 마무리 했다.

오프라인이라 긴장도 됐었지만, 다른 분들의 열정이 전해져서 자극도 받고 스스로 부족한 부분도 깨달을 수 있어서 좋았던 것 같다.

빨리 동기분들과 친해져서 함께 스터디도하며 어제보다 성장해 나가고 싶다.

다음 주도 매일 한문제씩은 알고리즘 문제를 풀고 CS 및 프론트 지식에 대해 1가지씩 정리를 하도록 해야겠다.

* 유데미(Udemy) 큐레이션을 받고싶다면? : https://bit.ly/43JLW2l

* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb   

본 후기는 유데미 취업부트캠프 프론트엔드&백엔드 리뷰로 작성되었습니다.

학습내용

배포 및 호스팅

배포
내 웹사이트의 코드(HTML, CSS, JS 및 기타 이미지 등)를 호스팅 서비스 서버에 업로드 하는것.

호스팅
원격컴퓨터(서버)에서 해당 웹사이트의 코드를 저장.

호스팅 서비스에는 AWS, Netlify, Github Pages, Vercel, Google Cloud Platform 등이 있다.

이중에서 Netlify를 활용해 간단하게 만든 사이트를 배포하는 실습을 해보았다.

https://657dc9ca7a73984a7d1d3808--incredible-scone-637124.netlify.app/

drop방식으로 파일을 업로드하는 방식도 있기에 배포과정이 굉장히 쉬웠다.
하지만 이 방식은 저장소와의 자동 동기화 같은 고급기능은 사용할 수 없는 단점이 있다. => 더 많은 기능을 위해서 일반적인 배포과정을 활용해보도록 하자.

버전관리 시스템

Git - 로컬 관리 도구

Github - git으로 관리한 프로젝트를 클라우드로 보내는 역할(클라우드 호스팅 제공자

CLI, GUI
인터페이스 - 일련의 상호작용.

즉, 운영체제와의 상호작용을 위해
커맨드라인 방식을 사용하는게 CLI
그래픽으로 상호작용 하는게 GUI

윈도우에서는 CLI로 cmd를 사용한다.

멘토링

myQ) 저번에 말씀하신 부분에 대해, 기술스택이 해당기업에 부합하는 것 보다
부합하지 않더라도 본인만의 기술스택들의 사용이유, 깊이있는 지식 등이 오히려 더 매료시킬수 있다는 것으로 이해했습니다.

타입스크립트나 next.js 등을 사용하는 기업에 가고 싶다고 가정했을경우, 
비교적 얕게 공부하더라도 해당 공부들이 우선 되어야할지,
React,js로 한 프로젝트에서 그런 문제해결능력이나, 기타 라이브러리, 툴사용에 대한 본인만의 고민을 잘 녹여내는 것과
본인이 진행해본 기술스택을 좀더 심도있게 학습하는것이 우선되어야할지 궁금합니다.


+ 더하여 강사님께서 생각하시는 좀 더 경쟁력있는 프론트엔드 개발자로서의 역량이 무엇일지 말씀해주시면 감사하겠습니다!
(문제해결능력, 알고리즘능력, CS지식, 백엔드지식, 넓은 프론트 기술스택, 프로젝트 경험)

프론트엔드 개발자로서 최소한의 기술스택 역량 혹은 백엔드 지식, 또 강사님께서 주니어를 뽑을 수 있다면 어떤 개발자를 원하실 것 같은지 말씀해주시면 감사하겠습니다.

A)

1. 일단 깊이있는 공부, 경험을 하는 것이 절대적으로 유리하다.

(얕고 넓은 기술 스택은 오히려 독이 될 수 있다)
예를들어 패키지를 가져다 쓸 때도, 이사람이 이걸 이유없이 썼는가? 아니면 비교분석을 철저히 했는가가 굉장히 중요한 포인트.

2. 기술 이슈 경험

예를 들어 포토폴리오를 보면, 이러이러한 프로젝트가 있는데 완성도나 그런걸 보는것보다 과연 이 사이드 프로젝트를 하면서 이슈가 없었을까??

있었다면 어떻게 인지했고, 어떻게 해결했을까?? 이게 굉장히 궁금한 포인트다!
기술이슈를 겪을만한 난이도의 프로젝트를 선정하는게 일단 베스트.

3. 오픈소스 작은코드라도 기여를 했다는 사실.

(유명한 오픈소스 아니어도)

4. 다양한 문제상황을 고민하는 개발자인가

다양항 문제상황을 생각해보고 코드를 그에 맞게 작성. 틀려도 좋으니 어느 상황이 발생한다면 어떻게 처리하면 되지 않을까?? 이런 고민을 하는 개발자인가. 원리파악에 관심 자체가 없어보이면 곤란하다.

프론트엔드는 백엔드 보다는 알고리즘 능력이 덜 필요시 되지만,
가져다쓰는 패키지가 어떻게 동작할지 보거나 할때는 또 필요하다.

백엔드 능력은
어느정도 간단한 서비스 구축정도를 경험함으로써 협업 시 이해도면에서 유리하다.

Q) 개발자로서의 문제해결능력?

A) 무엇이 문제인지를 먼저 인식하고 그것을 분명하게 정의하는 것이 진정한 문제 해결 능력이며 창의적 문제 해결의 기본이다.

Q) 프론트엔드 기술이슈 겪을만한거.

A) 1. 느린 속도 경험 2. 컴포넌트 분리?(클린코드)

★오늘의 핵심

• 깊이있는 기술학습이 우선.
• 기술이슈 겪을만한 깊이있는 프로젝트 1개 선정.
• 뭘 배울때 원리파악에 관심 가지는지 (메커니즘의 핵심)
• 오픈소스 작은코드라도 기여
• 저장소에 프로젝트 두가지 방식 나누기
  1. 다양한 기술 많이써보는 프로젝트
  2. 심도있게 다양한 문제상황에서의 고민 및 해결한 프로젝트

학습내용

Cascading Style Sheets

Cascading, 사전적의미로는 '계단식', '폭포가 되어 떨어지는것'이다

즉, CSS의 본질적인 의미는 여러개의 스타일 규칙이 동일한 하나의 요소에 적용될 경우 어느 규칙이 우선 적용될지 정의한 것이라고 봐도 무방하다.

또 CSS는 상속(Inheritance)의 원칙을 담고있는데, 대표적인 예시로 부모요소에서 자식요소로 스타일 속성이 전달되는 것을 말할 수 있겠다.

스타일 적용 우선순위

크게 다음과 같이 나눌 수 있다.
0) !important 키워드

1) 인라인 스타일
2) 구체적인 선택자 (id > class == 가상 > 태그 > 전체)
3) 부모요소로부터 상속

cf. 복합 선택자의 경우 각 선택자의 우선순위 점수를 합산해서 정한다고 한다.

구글 폰트 활용하기

구글 폰트에서 원하는 폰트를 받아오기 위한 코드를 살펴보면 다음과 같은 것들이 있는데 정확히 무슨 역할을 할지 찾아보았다.

<link rel="preconnect" href="https://fonts.googleapis.com">

rel속성은: 현재 링크와 문서와의 관계를 지정하는 속성이다.

preconnect 속성값 : 브라우저에게 특정한 출처에 대한 연결을 미리 설정하도록 지시합니다.

여기서는 구글 주서버에 미리 연결해줘! 이다.

⇒ 이로인해 DNS 조회, TCP 핸드셰이킹 등 초기 연결 단계를 미리 처리함으로써 지연 시간을 줄인다고 한다.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

=> 해당 코드는 "구글의 CDN에 속한 해당 주소에 미리 연결해줘!" 라고 할 수 있겠다. (“fonts.gstatic.com” 해당 도메인은 구글의 CDN에 속한다고 한다.)
=> Google의 정적 자원(JavaScript 라이브러리, 폰트 등)을 로딩 속도를 향상시키는 데 활용된다.

cf. CDN이란?

그리고 crossorigin 속성은
다른 출처에 있는 리소스를 받아오기 위해 사용한다고 한다.
"해당 리소스 요청은 CORS 정책을 준수하니 막지말아줘!"

cf. CORS란?

<link 
    href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Oswald:wght@700&family=Roboto&family=Source+Sans+3:wght@300;400&display=swap" 
    rel="stylesheet"
>

Google Fonts API를 통해 해당하는 폰트를 요청한다. 여기서는 Fira Sans와 Oswald를 사용해보았다.
그리고 rel="stylesheet"는 말그대로 받아올 리소스가 스타일시트임을 의미한다.

cf. 앞서 정리한 preconnect 외에도 preload, prefetch 방식에 대해서도 정리가 잘 되어있는 아래 블로그를 참고하면 좋을것 같다.
https://velog.io/@fepanbr/HTML-preload-preconnect-prefetch

대체 텍스트

이미지 태그는 다음과 같이 사용되어야 한다.
<img src="경로", alt="대체텍스트">

그런데 대체 텍스트가 왜 필요할까?
=> 시각장애인들도 콘텐츠의 의미를 파악할 수 있도록 하기 위해.
스크린 리더기가 대체 텍스트의 내용을 읽어준다.
=> 웹접근성 향상.

웹접근성 관련 레퍼런스 참조 사이트
https://developer.mozilla.org/ko/docs/Web/Accessibility
https://webdir.tistory.com/327

Live Server

VS code에서 우리가 자주 사용했던 Live Server는 로컬 개발 웹서버이다.
우리의 웹사이트를 인터넷에 노출 시키는 것이 아니라,

로컬 컴퓨터에서 로컬 컴퓨터로 웹사이트를 호스트하는 기능을 한다.

inline vs block vs inline-block

inline 엘리먼트
- 줄바꿈없이 한줄에 다른 엘리먼트들과 배치된다.
- 위아래의 여백이나 높이속성 등이 적용되지 않는다.

e.g. span, a, img

block 엘리먼트
- 한줄 전체를 차지한다.
- 전후 줄바꿈이 들어가 다른 엘리먼트를 밀어냄

e.g. h1, div, p, li

inline-block 엘리먼트
- 같은 줄에 다른 엘리먼트와 함께 배치
- block 엘리먼트처럼 높이, 마진, 패딩 제어가능

e.g. button, input, textarea, select

마진상쇄

마진이 더 큰쪽이 우선적용.

block요소에서만 발생한다.
인라인 요소나, display: inline-block; 한경우에는 발생X

TIL 작성에 앞서

웅진씽크빅에서 주관하는 유데미X사람인에서 주관하는 취업부트캠프에 합격을 했다..!
OT때 말씀해주시기를, 서류-코딩테스트-면접에 걸쳐 선발되기까지 경쟁률이 무려 570:17이라 하였다.
자부심을 갖고 믿음과 기대에 부응할 수 있도록 혼신의 힘을 다해 노력해야겠다고 다짐했다. (초심 잃지 않기를 제발...)

오늘은 가볍게 조원들과 아이스브레이킹 및 자기소개를 하였다.
서로의 얼굴을 그려주기도 하고 일어서서 자기소개를 하는데, 여전히 남들 앞에 서서 발표하는 일은 쉬운일이 아닌 것 같다...

그래도 자기소개를 함으로써 조금 더 친근해진 느낌이 들어서 좋았고, 무엇보다 동기분들의 마음가짐, 개발 경력, 개발 철학, 과거 경험 등을 들을 수 있어 자극도 받고 성공적인 프로젝트를 위해 3개월 동안 혼을 갈아 넣겠다는 목표가 생겼다.
또한 이전보다 개발에 대한 마음가짐에 변화가 온 것이 느껴져서 자신감도 생겼다.
교육과정중에 힘든일이 생기거나, 초심을 잃었다고 판단되었을 때는 이 1일차 블로그를 자주 방문하려고 한다.

TIL을 통해 이번 교육과정에서 학습한 내용과 동시에, 얻은 좋은 경험들을 기록하는 것을 놓치지 않으려고 한다.

학습내용

1. 웹 작동방식

1-1. 주소창에 URL을 입력하면?

웹 브라우저 접속
1. 사용자가 웹 브라우저를 통해 URL을 입력. 웹브라우저는 클라이언트 or 프론트엔드로서 작동.
2. Request : 브라우저가 웹사이트를 호스팅하는 원격컴퓨터(서버)에 Request 보냄.
3. Response : 웹사이트를 호스팅하는 서버(백엔드)는 브라우저의 요청을 처리한 후 Response를 다시 웹 브라우저로 보냄.
4. 브라우저 렌더링
브라우저는 서버로부터 받은 응답을 해석하여, 사용자에게 보여준다.

cf. 브라우저 렌더링 과정

1-2. URL

URL이란
웹 상에서 원하는 것을 검색하기 위해 브라우저에서 사용하는 메커니즘.

URL구성
프로토콜://도메인/path 로 이루어져있다.

정리하자면 URL은 결국
"전송받고 싶은 리소스가 있는 웹서버와 그 파일" 을 의미한다.

http://www.n-study.com/network/index.html 라는 url이 있다고 가정하면,
http://www.n-study.com 이라는 서버에 http 요청을 하는거다.
=> 너네가 인터넷에 공개한 network디렉토리 안에 있는 index.html이라는 파일을 http 응답을 통해 보내줘!

자세한 내용은 전에 정리한 티스토리 블로그를 참고하자!
https://baegopeun-sj.tistory.com/23

1-3. DNS

DNS란?
호스트의 도메인네임(http://www.google.com)을 네트워크주소로 변환하거나, 그 반대의 변환을 수행하는 시스템.

DNS 서버는 이 매핑 테이블이 포함된 서버이다.

다시 주소창에 url을 입력하면 생기는 일을 자세히 다뤄보겠다.
1. 브라우저는 입력받은 도메인을 ip주소로 변환하기 위해 DNS서버와 대화 시도.
2. ip 주소로 변환받으면 웹서버에 request를 보낸다.
3. 서버로부터 response 받는다.

여기서,
도메인을 IP 주소로 변환하려면 DNS서버에 도메인 쿼리하는 과정은 필수다.
하지만 동일한 도메인을 계속 쿼리한다면 성능면에서 안좋다는건 당연한 일이다.
따라서 DNS 서버에 쿼리하기전, DNS 캐시 정보를 먼저 확인하는 방법도 있다.

그래서 자세히 다룬 동작과정은 다음과 같다.

1. 로컬 hosts파일 확인
2. DNS cache 확인(캐싱)
3. DNS에 질의
4. IP 주소획득
5. TCP 연결 (3-way handshake)
6. 연결 성공하면 http request
7. 그리고 그에 따른 response
cf. https://baegopeun-sj.tistory.com/12

2. HTML

2-1. HTML 이란?

HTML은 우리의 웹사이트 컨텐츠가 어떤 구조로 이루어질지 브라우저에게 설명하는 유일한 언어이다.
우리의 웹사이트 문서를 이루는 태그들의 집합이라고 볼 수 있다. 즉 웹페이지라 하면 결국은 html파일이라고 말할 수 있겠다.

<!DOCTYPE html>
브라우저에게 해당문서가 (현대적인 웹 표준을 따르는) HTML 형식을 사용하여 작성됨을 알리는 역할이다.

2-2. HTML element

HTML태그 + 콘텐츠

왜 필요할까??
1. 우리가 만든 컨텐츠들이 브라우저에 제목, 텍스트, 이미지 등으로 표시될수있도록 하기 위해.
2. 검색엔진 크롤러의 탐색을 용이하게 하기위해. (HTML 주석 등 필요로함)
3. 눈으로 볼 수 없는 사용자를 위해. ( e.g. 스크린리더기로 인터렉션하는 시각장애인)

2-3. HTML 속성

태그의 이름만으로 정보가 부족할때 속성을 통해 추가요소구성을 할 수 있다.

2-4. 메타데이터

브라우저에는 영향을 끼치나 사용자에게는 보이지 않는 정보.

메타데이터 <- title, 스타일 등
콘텐츠 <- HTML element

title태그 - 탭과 검색엔진에 표시되는 요소
사이트가 서버에 올라가게 되면 검색엔진 크롤러가 볼수있어, SEO에 중요한 역할을 한다.

3. CSS

3-1 CSS의 본질적인 의미

Cascading Style Sheets
★여기서 Cascading이란?? =>

3-2 CSS 선택자

CSS 규칙이 적용되는 요소를 정의하는 역할

3-3 글로벌 CSS 스타일

하나의 CSS 규칙이 페이지의 여러 요소에 적용될 수 있어서 좋다.

4. 브라우저 개발자 도구

네트워크 탭 - 리소스가 정상적으로 받아와졌는지 확인하거나, 리소스의 용량 및 다운로드 시간을 확인할 수 있다. ⇒ 성능 최적화를 위해 활용.

브라우저 개발자도구를 통해 페이지 편집하면?
⇒ 로드된 페이지를 변경하게 된다.

멘토링

Q) 포토폴리오로써 효과적으로 어필할 수 있는 프로젝트가 되게 하려면 주제선정이나 실제 구현에 있어서 어떤 부분에 주안점을 둬야하나요?

A) 결국에 기업에서 개발자를 뽑는 이유는 “문제해결능력” 이라고 하셨다.

어떤 문제를 맞닥뜨렸고,
어떤 상황으로 인지했고,
어떻게 해결해 나갔는지 이게 궁금한거지

이력서에 어떤거 만들었다! 이거는 좋은 평가 받기 힘들다. 라고 하셨다.

포토폴리오 작성시에도, 프로덕트의 완성도에 중점을 두기보다는
“개발자 포토폴리오” 이므로
해당 프로덕트가 실제로 사용되고 있는 상황이고, 어떠한 문제가 있을때 어떻게 해결할 거인가를 인지하고 있는 개발자가 경쟁력을 갖출것이다

그리고 코드의 퀄리티도 중요하지만, 경험의 퀄리티에 강조를 많이 하셨던 것 같아서 좋은 경험을 위해 동작할 메커니즘이나 사용할 기술 스택에 대해서도 왜 해당 스택을 사용해야 하는지 그런 고민들을 늘 가져야겠다고 생각했다.

느낀점

항상 고민하고 그 과정에서 얻은 경험을 기록하자