[개발 회고록] 4월 2주차

💭 1. 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까

4월 9일(일)

📜 CS공부

오늘의 핵심

1. JWT : 인증과 권한 부여를 위해 사용되는 JSON 기반의 토큰

• 보안을 위해 accessToken은 cookie에 저장하여 XSS(Cross Stie Scripting)을 막고, refeshToken은 localStorage에 저장하여 CSRF(Cross Site Request Foregery)를 막는다.

2. CORS : 웹 브라우저에서 실행되는 스크립트가 다른 출처의 리소스에 접근하는 것을 허용하는 보안 방식. 여기서 다른 출처란, 프로토콜, 호스트, 포트 중에서 하나라도 다른 것

3. reconsiliation : React가 가상 DOM과 실제 DOM을 비교하여 변경된 부분을 식별하고, 최소한의 업데이트만 수행하여 UI를 업데이트하는 프로세스

 

4월 10일(월)

📜 프리온보딩 커리어 킥오프 : React 성능최적화

오늘은 성능 최적화 관련한 내용이었다. 강사님이 직접 한 수강생의 프로젝트를 뜯어보며 성능 최적화하는 것을 시현해 주셨다.

오늘도 역시 앞으로 배워야 할 것들이 많고, 더더욱 열심히 성장해야겠다는 생각을 했다. 아래 사진은 추가로 공부 및 실천할 것들이다.

추가로 공부 및 실천할 것들

• ?? 메서드
• react-query의 캐싱 기능
• http, https의 차이
• 스켈레톤 로딩
• LCP(Largest Contential Pain)
• suspense
• Intersection Oberver API, 블로그
• dynamic import
• RNA로 웹뷰 만들기

📜 CS 공부

오늘의 핵심

1. HTTP : 제삼자가 데이터를 볼 수 있을 정도로 보안에 취약함 -> HTTPS : SSL(Secure Sockets Layer), TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화 & 인증서를 사용하여 서버의 신원 확인

2. JS에서 ?? 는 널 병합 연산자로, 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자 반환. 그렇지 않다면 왼쪽 피연산자 반환

3. suspense : React에서 비동기적으로 데이터를 불러오거나 계산하는 작업을 수행할 때, 사용자 경험을 개선하기 위한 기술

 

4월 11일(화)

📜 : 학교 공부 & CS공부

슬슬 시험기간이 다가오고 있다. 그래서 학교에서 배운 내용들도 정리하고, 남는 시간 동안 LeetCode문제를 풀고, CS공부와 독서까지 하였다. 👍

CS공부라는 게 정말.. 끝이 없는 거 같다. 그리고 약간의 밑 빠진 독에 물을 붓는 듯한 기분이 사뭇 들었다. Closer에 대해 며칠 전에 분명히 공부를 했는데 다시 또 외워보려니 까먹은 것이다. 머리가 안 좋은 것일까. 정말 머리가 안 좋아서 그런 것이라면, 그만큼 반복에 반복을 거듭해야겠다. 요즘, 나의 집중력이 상당히 약하다는 것을 느꼈다. 오전 수업으로 인해 잠을 충분히 취하지 못해서 그런가, 수업시간이나 공부할 때 정신차려보면 다른 생각을 하고 있는 나를 발견할 수 있다.

나는 얼마 전부터 뽀모도로 공부법을 실천하고 있다. 25분 동안만은 정말 '최선을 다해' 내가 하고 있는 공부에 집중하도록 하자. 집중력 또한 "습관"이다. "공부할 때는 집중"을 하버릇하면, 항상 공부할 때 집중하는 것이고, "공부할 때 다른 생각하는" 습관이 생기면 계속해서 다른 생각을 하는 것이다. "습관"을 만들자. 뽀모도로 25분 동안, 공부하는 동안은 "공부 생각"만 하고, 공부에만 전념할 것.

오늘의 핵심

1. JS는 단일 스레드 언어이기에, 비동기적으로 작업을 처리하기 위해 이벤트 루프 메커니즘을 사용 -> call stack : 현재 실행 중인 호출 정보 저장 & task queue : 비동기적으로 실행되어야 할 작업 저장

2. reducer : 각각의 컴포넌트에서 여러 개의 상태를  관리하는 훅 vs redux : 하나의 중앙 상태 저장소 store를 이용하여 전역 상태를 관리하는 라이브러리

> 이름이 비슷해서 헷갈렸었다.. 이번 기회에 명확히 구분하자.

 

4월 12일(수)

📜 : CS공부

수업이 3개나 들은 오늘이었지만, 틈틈이 CS공부를 하며 기초를 탄탄하게 다졌다.

오늘의 핵심

1. DOM : Document Object Model의 약자로, HTML, XHTML, XML문서를 객체 모델로 표현한 것. 즉, 웹사이트에서 HTML태그, 속성, CSS 스타일 등을 JS객체로 표현한 것

2. JS는 싱글 스레드 언어로, 싱글 콜 스택으로 동기적인 처리를 함. 이러한 동기적인 특징에서 벗어나 효율적으로 스케줄링하기 위해 비동기 처리를 사용 : 이벤트 루프를 통해 동시성(비동기 처리)을 가능하게 함

3. 디버깅 : 컴퓨터 프로그램에서 발생한 오류를 찾고 수정하는 과정 : 로그 & 디버거 & 테스트

 

4월 13일(목)

📜 프리온보딩 커리어 킥오프 : Frontend 필수개념

추가로 공부할 것들 및 실천할 것들

1. SSG(Static Site Generation) : React + Gatsby

2. MSA(MicroService Archecture : 하나의 프로젝트를 작은 단위로 나누는 것 & Backend for Frontend 

참고 링크들 -> '강연 정리' 노션에 있으니 읽어 볼 것

3. FE 디자인 패턴 - 요즘 많이 쓰는 Atom디자인 패턴에 대해서 깊이 있게 공부

4. 테스트 코드 : Unit Test, Integration Test -> 이전 프로젝트 기반으로 & 블로그 작성

5. 이전 프로젝트 -> devDependency와 dependency 구분해서 라이브러리 install 하기

6. 새로운 라이브러리, 프레임워크를 사용하기 전, 이걸 내 프로젝트에 '왜' 적용해야 하는지 명확히 하기 -> 면접 때 물어봄. 확실히 정립하는 것이 중요

7. 나는 이전 프로젝트에서 왜 Next.js를 사용했는가? -> Next.js의 장점을 극대화시킬 것

오늘의 핵심

1. 지원을 계속하기 -> 면접도 계속 보기 -> 경험을 쌓는 것이 중요

2. Frontend 하나 진득하게 하기 -> 전환이 쉬움

3. 신입 포트폴리오 : 2개면 충분. 진득하게 쭉 파는 것이 중요 : 다 끝나고 리펙토링, 테스트 코드, 운영/유지/보수 경험이 중요

4. 유지보수 개발업무 / 신입 FE SI : 좋은 경험. 배울 점이 많음 -> 1~2년 후 이직하기

 

4월 14일(금)

📜 이론 공부

오늘도 상당히 많은 CS공부를 했다.

오늘의 핵심

1. 실행 콘텍스트 : 코드가 실행될 때 필요한 정보를 모아서 구성한 객체

• 변수 객체 : 현재 실행 콘텍스트에서 사용하는 변수, 함수 선언, 매개변수 등의 정보를 저장
• 스코프 체인 : 변수 객체와 상위 실행 콘텍스트의 스코프 체인을 참조하여 식별자 해결
• this 바인딩 : this키워드가 참조하는 객체를 결정

2. 순수 JS에서의 이벤트

• 이벤트 등록 : button.addEventListner('click', addItem)
• 이벤트 버블링 : 하위의 요소에서 상위의 요소로 전달되어 가는 특성
• 이벤트 캡처 : 이벤트 버블링의 반대. addEventListener의 세 번째 인자로 {capture:true} 전달
• event.stopPropagation() : 해당 이벤트가 더 이상 전파되는 것을 막음
• 이벤트 위임 : 하위 요소 각각에 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

3. 객체를 바인딩하는 방법

• 함수. call(객체, 인자)
• 함수. apply(객체, [인자])
  call과 apply는 일시적으로 bind 하여 함수 호출
• 새로운 함수 = 함수. bind(객체)
  bind는 this를 영구적으로 함수에 객체를 bind시킴

 

👨‍💻 oopy 블로그 개설

oopy 블로그를 개설했다. 확실히, 노션보다 oopy가 기능도 많고, 디자인이 깔끔하다. oopy를 사용하기 전에는 '노션에도 공유 기능이 있는데 굳이?'라는 생각이었는데, oopy를 직접 사용해 보니 이 생각이 바뀌었다. 오늘 하루 써보고 내가 느낀 oopy가 노션 공유보다 뛰어난 점이다.

1. 빠른 로딩 속도

노션은 한 페이지의 깔끔한 도메인(xxx.notion.site)을 제공한다. 도메인 주소는 깔끔하지만, 로딩 속도는 여전히 느리다. '클릭하면 xxx. 노션 사이트로 이동합니다.'라는 멘트가 뜨기도 하고, 뜨지 않을 때도 있는데 두 경우 모두 속도가 느리다.

2. 깔끔한 디자인

왼쪽 사진이 노션이고, 오른쪽 사진이 oopy이다. 사진도 모서리가 둥글게 자연스럽게 끊어지고, 양 옆 좌우 간격도 넓고, 글씨체도 내가 원하는 것을 변경할 수 있다.

3. 다양한 플러그인

oopy에는 카카오 채널, 채널톡, Disqus, Google Analytics 등 다양한 플러그인을 제공한다. 그럼으로써 채널톡을 화면에 띄음으로써 접속자가 메시지를 보낼 수 있는 기능을 추가하고, Disqus를 통해 댓글 기능도 추가할 수 있다. 뿐만 아니라, Google Analytics를 연결하여 정밀한 통계 분석도 가능하다.

 

이력서가 예쁘다고 해서 안 붙던 이력서가 붙고, 점수를 많이 받는 것은 절대 아니다. 그러나, 이렇게 '나를 표현하는'사이트가 예쁘면 눈이 가고, 나 또한 이런 이력서를 가꾸고 키우는데 흥미가 자연스레 생기기 마련이다. 이러한 시너지 효과는 정말 크다고 생각한다. oopy를 등록한 지 하루 채 안되었는데, 벌써부터 oopy를 내 기록물로 블로그 화할 생각에 설렌다. oopy는 내가 애용하던 Notion에 조회수 측정 기능, 접속자와 상호작용 기능 등 블로그의 기능을 추가해 준 최고의 서비스라 생각한다.

 

앞으로 내가 oopy를 통해 Notion블로그를 활성화할 것들 목록이다.

1. 개발 Memo내용 깔끔하게 정리하여 oopy블로그에 연결

2. Tistory 블로그에 적던 '매일 습관'들 노션 > oopy로 옮기는 것 고려해 보기

• Tistory와 oopy의 장단점이 각각 있다. Tistory는 매주 매주 업로드하여 방문객에 의해 보이기 때문에 더욱 의무감과 경각심을 가지고 할 수 있다. 그리고, 지금까지 Tistory로 쌓아왔기에 oopy로 옮기게 되면 다시 시작한다는 생각으로 해야 한다.
• oopy로 하게 되면, 노션의 깔끔한 정리와 oopy의 디자인으로 더욱 예쁘게 업로드할 수 있다. 그리고, 노션의 템플릿화를 통해 보다 간편하게 업로드 및 정리할 수 있다.
• 급한 것은 아니니 일단 Tistory 블로그를 유지하고, 시간을 두고 생각해 보자.

4월 15일(토) : 오늘은 OFF

---

😊 3. 이번주를 돌아보며

🎖️ 이번 주 이룬 성과는?

1. 원티드 프리온보딩 하루도 빠짐 없이 열심히 듣고, 메모하고, 앞으로의 방향성을 모색
=> 앞으로 어떤 부분을 보완해야 할 지, 추가로 공부해야 할 지 생각해볼 수 있게 됨

2. 매일매일 틈틈이 CS공부를 하며 기초를 다짐

3. oopy블로그 개설 : 할까? -> 바로 실천. 행동력 Good
=> 앞으로 Tistory에 작성하던 일부를 노션-oopy블로그로 마이그레이션 예정

🏃‍♂️ 다음 주의 목표는?

1. 시험 공부에만 몰두할 예정