[What I Learned] 2주간 배운 것들 간단하게 정리하기

 
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다.
 

 
 

---

리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증

싱글스레드와 이벤트 루프의 상관관계

• 자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.
• 자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다.

 
 

이벤트 루프

• 자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나
• 코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.
• 즉, 브라우저 동작 타이밍을 제어하는 관리자이다.

 
 

프로미스와 이벤트 루프의 상관관계

• 프로미스는 비동기 코드의 처리를 더 간단하게 만들기 위한 패턴 중 하나이다.
• 이벤트 루프를 통해 비동기 작업의 스케줄링과 관리에 사용된다.

 
 
👉 이 부분은 동기-비동기, 이벤트 루프, 프로미스까지 엮어서 공부할 수 있어서 좋았다. 처음 자바스크립트 공부할 때는 봐도 봐도 무슨 말인지 아리송했는데 요즘 공부할 때는 그 조각들이 하나의 책으로 엮이는 기분이 든다. 뿌듯함! 좀 더 깔끔하게 정리해서 블로그에 업로드해 볼 예정.
 
 
 

---

Next.js / Nuxt.js를 쓰는 이유

리액트, 뷰에 굳이 왜 넥스트, 넉스트를 붙여서 쓰는지, 그리고 왜 넥/넉스트는 SPA도 지원하고 MPA도 지원한다고 하는 건지 써보지 않아서 이해가 가지 않았다. 그러다 진행 중인 프로젝트에서 Nuxt에서 지원하는 메서드인 asyncData() 를 사용해 vue의 생명주기가 시작되기도 전에 서버에서 받아온 데이터를 가지고 있다가 바로 뿌려주는 코드를 보게 되었다.
 
 
SPA의 생명주기가 시작하기 전에 SSR 방식으로 해당 데이터를 미리 가지고 있기 위해 미들웨어 같은 느낌으로 쓰는 게 맞나요? 라고 여쭤봤는데 맞다고 말씀해주셨다. SPA는 어쨌든 화면이 그려지면서 조작이 되기 때문에 그 전에 처리하기 위함이라고! 작은 프로젝트는 괜찮지만 프로젝트가 커질수록 필요성이 더 커진다고 한다. 대답해주신 부분이 약간 가물가물해서 이 부분은 주말에 더 깔끔하게 공부해봐야 한다.
 
 
 

---

게시판을 만들 때 table이 더 좋은지, li가 더 좋은지

게시판을 만들 때 편하게 만들기는 table 태그가 더 편한데, 게시판 구현에 이걸 쓰는 게 시맨틱한 태그가 맞나? 라는 생각이 있었고 다른 웹사이트들을 살펴보니 div나 li 등 사용하는 태그가 다양했다. 퍼블리셔셨던 프론트엔드분께 여쭤보고 드디어 답을 내릴 수 있었다!
 
 
결론적으로 table 태그보다 li를 쓰는 게 시맨틱하다. 게시글 리스트기 때문에 li를 쓰는게 더 적합하기 때문이다. 또한 table의 경우 반응형 웹에서는 크기 조정이 자동적으로 되지 않는다. 이전에는 화면 레이아웃 자체를 table로 잡았었는데, 요즘은 flex, grid 등의 반응형이나 의미에 맞는 태그들이 있기 때문에 table을 레이아웃을 잡는 데 사용하지 않는다.
 
 
 

---

컴포넌트로 이루어진 화면에서는 시맨틱을 완벽하게 지키기 어렵다.

해당 컴포넌트가 어느 부분에 들어갈지 미리 알 수 없는 경우도 존재하기 때문. 특히 heading 태그가 더 어렵다고 하셨는데, 해당 컴포넌트의 상단에 h1 태그가 올지, h2 태그가 올지 미리 알 수 없으면 어느 헤딩 태그에 종속될지 파악이 어렵다고 하셨다. 그렇기 때문에 배울수록 시맨틱 태그를 할 줄 안다고 확답으로 말하기가 어려워서 할 줄 안다보다 하려고 노력한다고 작성하신다고 하셨다.
 
 
웹 접근성을 위해서는 조금 품을 들이더라도 당연히 시맨틱 하게 작성해야지, 라고만 생각했지 대형 프로젝트에서 내가 파악하지 못한 컴포넌트들이 있을 때 이 태그가 어디에 종속될지까지는 아직 생각해보지 못했어서 이력서에 시맨틱 태그를 지킨다고 썼던 게 살짝 부끄러워졌다. 이 대화를 계기로 더 넓은 시야로 코드를 고민해서 작성하는 것에 대해 또 하나 배울 수 있었다!
 
 
 

---

vuex

뷰도 처음인데 vuex로 서버 데이터를 받아오는 코드는 정말.. 낯설었다. 코드를 보고 또 보고, 의미를 찾고 또 찾으면서 단어에 익숙해지려고 노력했다. 그다음엔 데이터를 받아오는 요소 하나를 붙잡고 해당 요소가 어떻게 함수를 호출하고, 통신해서 vuex로 저장하는지 코드를 쭉쭉 따라가면서 한 줄씩 해석했다. (진짜 필기하다가 손 저렸음) 한 이틀정도 붙잡고 보니까 actions → mutations → state → 다시 render 해서 view로 넘어가는 흐름이 파악됐고, 어느 부분에서 어떤 역할을 하는지도 파악이 됐다. 역시 코드는 흐름을 따라가면서 콘솔 찍어보고 이해될 때까지 보는 게 답이다.
 
 
 

---

scss scoped

리액트에서 스타일드 컴포넌트를 쓰면 빌드할 때 이름을 고유값으로 바꿔주기 때문에 충돌날 일이 없었다. 그런데 지금 코드는 그냥 클래스 네임에 스타일이 걸려있어서.. 내가 A페이지의 클래스 이름 a를 수정할 때 다른 페이지에 영향이 가지 않을까 찾아보고 고민하면서 코드를 썼음에도 불구하고! 결국 공통으로 걸리는 다른 페이지가 있어서 이걸 어떡해야 하나 싶었다. scss가 scoped 속성을 지원한다는 걸 알고 해당 컴포넌트에 scoped를 걸어두긴 했는데 스타일이 아예 컴포넌트 별로 scoped가 걸려있는 것도 아니고, 분리되어 있는 것도 아니라 영 찜찜하다. 그렇다고 내가 이걸 갈아엎을 수 있는 것도 아니고.. 일단 내가 받는 티켓이라도 최대한 정리해 보는 게 답일 듯하다.
 
 
 

---

rem

모바일 환경에서 rem을 쓰는 이유는 글자 크기를 -, + 했을 때 조정할 수 있기 때문이다. default size는 꼭 16px이 아니어도 된다. 그러면 웹앱 같은 경우는 rem을 쓰는 게 더 나은지 여쭤봤는데 가능하다면 그게 좋다고 말씀해 주셨다! 그리고 피그마에서도 rem으로 볼 수 있게 세팅해 주셨다.. 몰라서 계산기 두드렸었는데.. 대박🥹 사수님은 피그마로 발표 자료도 만드시고 이력서를 만들었던 동기분도 계셔서 피그마 자료를 읽는 것뿐만 아니라 어느 정도 만들 수 있게 공부를 좀 해야 하나? 싶다.
 
 
 

---

MSA(Micro Service Architecture)

• 애플리케이션을 느슨하게 결합된 서비스의 모임으로 구조화하는 서비스 지향 아키텍처(SOA) 스타일의 일종인 소프트웨어 개발 기법
• SOA는 애플리케이션 구성 요소가 통신 프로토콜을 통해 다른 구성요소에 서비스를 제공하는 아키텍처 접근 방식
• MSA는 API를 통해서만 상호작용할 수 있다.
• 마이크로 서비스는 서비스의 엔드 포인트를 API 형태로 외부에 노출하고, 실질적인 세부 사항은 모두 추상화하기 때문이다.