1. 주제 정하기

    - 내가 만들고 싶어 하는 게 무엇인지 생각하기

    - 내가 사용할 것을 만들어야 배움의 깊이가 훨씬 깊습니다.

    - 아무거나 정하는 것 보단 현실에서 있는 문제를 찾고 그 문제를 해결한 경험을 높게 쳐줌 아무거나 하지말자!

2. 내가 하고 싶은 게 뭔지 어떻게 아나요?

    - 가장 쉽게 시작할 수 있는 것은 나의 생활에서 바꿀 수 있는 것을 찾아보는 것입니다. 요즘 내 감정은 어떤가요?

    - ex) 내 하루 루틴이 어떤가요?

3. 구체적으로 접근하기

    - 5-WHY 기법을 통해 아이디어를 찾아보자!

       1. 처음 시작은 내 일상 속에서 찾아보기

       2. 문제를 기술로 해결할 수 있는지 아닌지 생각하기

    - 불편한 상황이 잘 기억나지 않아요… 어떡하죠?

       1. 평소에 메모하는 습관이 중요합니다.

       2. 불편한 것을 느꼈을 때, 그 순간 왜 불편한지 메모!!

ex) 5-WHY 기법

기본적으로 프로젝트의 전반적인 이해가 필요할 때 듣기 좋아 보여서 샀는데 아직 1일 차지만 내용이 너무 좋네요!! 개발자가 되고 싶어서 사이드 프로젝트를 아무거나 일단 하면서 기술적 레벨업을 해야 해!!!라고 생각한 저에게 잘못된 방향성이란 걸 꺠우치게 된 날인 것 같습니다!!

흠... 정리할게 많네요...

오늘의 목표 : 사이드 프로젝트 주제 정하기 및 5-WHY기법을 통해 기술적으로 해결이 가능한지 알아보기!

지금 듣고 있는 강의 : https://fastcampus.co.kr/dev_online_spdutch

기억에 남는 일

1. 로그인 토큰 관리

2. FullCalendar를 사용한 데이터 집어넣기

3. 의사전달의 명확성

메인 프로젝트는 나에게 있어서 진화를 시켜줬다!

원래 코드를 치는 것을 재밌어하는 사람이었습니다. 하지만 요즘 들어 점점 지쳐가고 있었습니다. 하지만 지쳐가고 있을 때 메인 프로젝트를 시작하게 되는 데 프로젝트를 하면서 사람과 소통을 하고 Figma를 짜면서 구상을 해 나아가는 게 너무 재밌었습니다. 그리고 난 뒤 결과물을 보는 데 와... 이게 내가 만든 사이트구나 싶고 너무 뿌듯하고 너무 기분이 좋았습니다. 그리고 난 뒤 메인이 끝난 지금은 약간의 공허함이 있는 것 같습니다. 매일 많이 잘 때는 4~5시간 적게 잘 때는 2~3시간 자고 한 달 동안 개발만 하다가 갑자기 끝나니 먼가 기분이 묘하더라고요.... 그리고 코딩에 재미를 다시 찾게 된 것 같아요! 그래서 저는 메인 프로젝트가 저에게 있어서 진화를 시켜준 계기가 되었다고 생각합니다!!!!

배운 거

1. 로그인 토큰 관리 

 개발을 하면서 처음으로 로그인 관련 토큰 관리하는 로직을 처음으로 만들어 봤는 데 처음에 접근할 때 겁부터 먹었던 것 같아요... 이유는 토큰이 뭔지도 모르겠고... 토큰을 관리하라고 하는데 맨날 게시판 CRUD만 만들다가 관리하라고 하니... 뭔지 모르겠던 거죠.. 아.. 먼산 같은 토큰.... 이였죠 하지만 구글 신은 항상 답을 알고 있고 그 답을 찾아 로컬 스토리지, 세션 스토리지, 쿠키를 알게 되었죠!!! 알게 된 저장소를 통해 관리하는 법을 알게 되어 다음에 로그인 로직을 만들면 더 잘할 수 있을 것 같다는 생각을 품으며 이번 프로젝트가 막을 내린 것 같습니다.

참고 : 로컬 스토리지는 사이트를 나가도 저장소에 남아있고, 세션 스토리지는 사이트를 나가면 저장소가 비어있게 돼요! 

2. FullCalendar에 데이터 집어넣기

 맨 처음 풀 캘린더 라이브러리에 데이터를 어떻게 집어넣을까를 많이 고민한 것 같아요!! 구글 신의 검색이 없었다면 300년은 걸렸겠지만 구글 신은 항상 정답을 알고 있죠... FullCalendar에 데이터를 집어넣을 때 events라는 곳에 배열로 집어넣으면 되는 거였죠! 그래서 배열로 내가 넣고 싶은 데이터를 배열화시켜 넣는 로직을 만들어 넣었어요!

<FullCalendar
              viewClassNames="calendar"
              dayCellClassNames="calevent"
              defaultView="dayGridMonth"
              plugins={[dayGridPlugin]}
              contentHeight="600"
              locale="ko"
              events={datelist}
            />

3. 의사전달의 명확성

서로가 생각의 차이가 존재하고 프로젝트의 각오도 달라서 눈치를 보면서 말을 했었습니다. 하지만 뒤로 갈수록 의사전달의 명확성이 있어야 서로가 피곤하지 않게 작업을 할 수 있을 것 같아서 안되는 거랑 되는거 그리고 같이 언제까지 어느 정도 할지 등.. 프로젝트에는 상대와 나의 의사소통이 가장 중요하단 걸 깨닫게 된 것 같아요!! 그래서 다음 프로젝트에는 더 명확하지만 쿠션어로 전달할 수 있게 하려고 노력할 겁니다!! 물론 이번 프로젝트도 좋았지만 아쉬운 거죠!!

이번 프로젝트로 저는 성장했다고 생각합니다. 그리고 이제부터는 매일 블로그를 쓸려고 노력할 겁니다... 아마?

JavaScript

• Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

브라우저 렌더링

• 브라우저 렌더링 방식에 대해 설명하세요.
• 리플로우와 리페인트에 대해 설명하세요.
• 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
• 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

번들링과 웹팩

• 번들링은 왜 필요한가요.

번들링이 왜 필요한가요?

번들이란 묶는다는 뜻으로 뭔가를 묶는 작업이라는 것을 이름에서 유추할 수 있습니다. 

번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈이란 분리된 파일입니다.

그렇다면 파일을 모듈로 분리한 이유는 무엇일까요? 그것은 작업의 효율성을 위해서입니다. 스크립트의 크기가 점점 커지고 복잡해지면서 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡하기 때문입니다. 그렇기 때문에 머리, 가슴, 팔, 다리를 따로 떼어서 모듈로서 작업을 할 필요가 생겼습니다.

분리된 모듈들은 연계성을 띄어야하기 때문에 모듈 내부에는 import로 외부 모듈의 기능을 가져오고 export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보냅니다.

모듈 import와 export 외에도 번들링이 필요한 이유는 여러개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하 될 수 있고 모듈 간의 변수 충돌 등의 위험성이 존재하기 때문입니다.

번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는 도구를 의미합니다.

번들러를 사용하게 되면, 아래와 같은 장점등을 얻습니다.

1. 모듈 단위의 코드 작성

2. 네트워크 병목 완화 (최적화)

3. 웹 개발 작업 자동화

React

• Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
• Class Component와 Function Component의 차이점이 무엇인가요?
• React Hook의 사용 규칙에 대해 설명하세요.

운영체제

• Node.js는 싱글 스레드인가요?
• JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
• Event Loop에 대해 설명할 수 있나요?
• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

자료구조

• Stack과 Queue의 차이점은 무엇인가요?

스택(stack)이란 쌓아 올린다는 것을 의미한다.

따라서 스택 자료구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말한다.

📌 스택의 특징

스택은 위의 사진처럼 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을수 있고,

top으로 정한 곳을 통해서만 접근할 수 있다.

top에는 가장 위에 있는 자료는 가장 최근에 들어온 자료를 가리키고 있으며,

삽입되는 새 자료는 top이 가리키는 자료의 위에 쌓이게 된다.

스택에서 자료를 삭제할 때도 top을 통해서만 가능하다.

스택에서 top을 통해 삽입하는 연산을 'push' , top을 통한 삭제하는 연산을 'pop'이라고 한다.

따라서 스택은 시간 순서에 따라 자료가 쌓여서 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는

구조적 특징을 가지게 된다.

이러한 스택의 구조를 후입선출(LIFO, Last-In-First-Out) 구조이라고 한다.

• Tree와 Graph의 차이점은 무엇인가요?
• 이진 탐색 방법에 대해 설명할 수 있나요?

CORS 정책이 필요한 이유

다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다는 것

CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 합니다. 서버에서 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생하기 때문입니다.

Proxy

proxy를 통해 백엔드 서버로 요청을 우회하여 보내게 됩니다. 그러면 백엔드 서버는 응답을 React 앱으로 보내고, React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달합니다.

원래는 브라우저가 중간관리를 했는데 Proxy를통한 우회하여 요청/응답을 하여 Cors에러가 안나온다!

전통적인 개발 프로세스 VS 모던 개발 프로세스

DevOps

DevOps 특징

DevOps는 개발에서 운영까지 하나의 통합된 프로세스로 묶어내고 사용하는 툴과 시스템을 표준화하여 의사소통의 효율성을 확보하고 일련의 작업들을 자동화합니다.

CI/CD란

"CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다.

"CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미합니다.

CI/CD의 단계

- 지속적 통합(Continuous Integration, CI) : Code - Build - Test

• Code : 개발자가 코드를 원격 코드 저장소 (Ex. github repository)에 push하는 단계입니다.
• Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계입니다.
• Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는 지 확인하는 과정입니다.

- 지속적 배포(Continuous Delivery/Deployment, CD)

     지속적인 서비스 제공(Continuous Delivery) 및 지속적인 배포(Continuous Deployment)를 의미하며 Release - Deploy - Operate단계를 거친다.

• Release : 배포 가능한 소프트웨어 패키지를 작성합니다.
• Deploy : 프로비저닝을 실행하고 서비스를 사용자에게 노출합니다. 실질적인 배포 부분입니다.
• Operate : 서비스 현황을 파악하고 생길 수 있는 문제를 감지합니다.

사이트를 검사하여 성능 측정을 할 수 있는 도구인 Lighthouse를 소개합니다. Lighthouse는 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공해줍니다.

Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴입니다. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있습니다.

Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있습니다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행합니다.

그 후, 위 이미지처럼 검사 결과에 따른 리포트를 생성하고 개발자는 해당 리포트를 통해 점수가 낮은 지표에 대해 개선을 꾀할 수 있습니다. 또한 각각의 지표가 왜 중요한지, 어떻게 개선할 수 있는 지에 대한 레퍼런스도 리포트에서 참고할 수 있습니다.

Lighthouse 시작하기

Lighthouse를 이용할 수 있는 방법은 다양합니다. 여러분의 개발환경에 가장 친숙한 방법을 골라 Lighthouse를 실행할 수 있습니다.

Chrome 개발자 도구에서 실행하기

1. 크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
2. 개발자 도구를 엽니다.
3. lighthouse 탭을 클릭합니다.
4. Generate report를 클릭합니다. Categories에서 특정한 지표만 선택하여 검사할 수도 있습니다.
5. 대략 30-60초간 검사가 실행됩니다. 그 후 아래와 같이 리포트가 해당 페이지의 개발자 도구내에 생성됩니다.

function solution(s) {
    const l = s.length;
    if(l !== 4 && l !== 6) return false;
    
    // return s.split('').map(Number).filter(isNaN).length === 0;
    return Number(s) === parseInt(s);
}

/*
NaN 특징:
-특별한 숫자형 value, (typeof NaN // 'number')
-'잘못된 입력으로 계산할 수 없음'을 의미하는 값임
-Number('a'), Math.~(), 'a'/2 ... 등 함수의 결과 혹은 연산 결과로 등장한다
 + Number.NaN 즉, 전역객체 Number의 프로퍼티이다 (console.dir(Number) // { NaN: NaN }) -> 브라우저에 내장된 변수이다.


*NaN은 판별에 주의해야함*
1) isNaN(NaN) // true 
2) NaN === NaN // false 
  *** [1,2,NaN,4].indexOf(NaN) // -1  <-> [1,2,NaN,4].includes(NaN) // true

따라서 자료구조에서 NaN를 구별해야하는 로직에서는 콜백함수를 통해 isNaN() 함수를 사용하는 것이 바람직해보임. (고차함수: forEach, find, findIndex)
(typeof NaN === 'number' // true)


3줄요약
1. 숫자형 데이터에는 숫자가 아닌 값을 나타내는 특별한 값이 존재. NaN
2. 배열 메소드 중에 NaN을 판별하지 못하는 메소드가 존재함
3. NaN의 판별은 함수 isNaN()을 사용할 것
*/