혼자 적어보는 노트

회사 내에서 한 주에 한 번씩 글을 쓰는 스터디에 참여하게 되었다. 글의 주제는 자유고 아무 글이라도 하나씩 쓰는 것을 목적으로 둔 스터디라 처음엔 큰 부담은 없었으나 스터디를 진행한 지 2주 차 되던 쯤에는 앞으로 잘할 수 있을지 걱정이 되기도 했다.. 하지만 벌써 3개월이 흘렀고 다음 분기의 시작을 기다리며 나의 3개월간의 글쓰기 스터디를 짧게 회고해보기로 했다. 사실 중간에 '한번 쯤 안 써도 되지 않을까' 하는 흔들리는 마음도 있었지만ㅎ 열심히 함께 해준 스터디원들(+패널티) 덕분에 빠지지 않고 잘 쓸 수 있었던 것 같다. (모두 감사드리고,, 앞으로도의 9개월도 잘 부탁드립니다,, 🙇‍♀️) 💭 느낀 점 (+ 좋았던 점) 혼자서라면 하지 않았을 일인데 함께 하다보니 동기부여도 되고 의무적으로라..

코어 자바스크립트 책과 함께하는 스터디가 어제부로 끝났다. 목차가 1~7장 까지 있어서 한 주에 한 장씩 7주간 하기로 했었는데 드디어 마무리를 짓게 되었다. 이전에 한 번 코어자바스크립트 책을 읽은 적이 있었지만 이번 기회에 다시 정독을 하기로 마음을 먹고 2주 차 때 급하게 참여하게된 스터디다ㅎㅎ 스터디를 진행했던 방법: 1. 주에 한 챕터씩 읽고 책의 내용 혹은 추가로 조사한 내용을 자유롭게 정리한다. 2. 해당 챕터에 다룬 내용을 바탕으로 퀴즈를 낸다. 3. 스터디 날 당일 룰렛을 통해서 2명의 발표자를 정한다. 👍 좋았던 점. 1. 주 1회 스터디 아무래도 각자 다른 공부들을 하고 있다보니 너무 무리하지 않는 선으로 주 1회로 정했고 중간프로젝트때는 프로젝트에 집중하자는 의견이 다수를 차지해서 ..

타입스크립트를 가볍게 접한 후에 프로젝트를 진행하며 사용을 해보니 조금 더 깊게 알아야겠다는 생각이 들어서 구매했다. 알고 있던 부분은 넘어가고 알게된 부분이나 기억해야될 부분을 정리해서 작성해보기로 했다. 1장~2장 동적 타입의 자바스크립트는 프로그램 실행 전에는 타입을 알 수 없다. 또한 암묵적 타입 변환을 통해 원하지 않는 값으로 타입 변환이 되는 문제가 생겼을 경우 런타임 시점에 알게되니 추적하기에 어려움이 있다. 타입스크립트는 정적으로 코드를 분석해서 코드를 실행하기 전인 컴파일 시점에서 에러를 띄운다. 타입스크립트는 그저 동적으로 타입을 지정하는 자바스크립트에 정적인 타입을 붙여준 것이니 점진적으로 마이그레이션이 가능하다. 3장. 타입의 모든 것 - 어노테이션은 생략할 수 있다면 생략하자 : ..

✅ 오늘의 학습 📌 데이터 시각화(1) 데이터 시각화에 대한 이론적인 부분과 라이브러리 소개, 그리고 SVG의 기본 태그, 속성들에 대해 학습했다. D3(Data Driven Documents) 데이터 기반으로 DOM을 다루는 자바스크립트 기반의 라이브러리이다. 데이터 시각화를 하기 위해 사용된다. 특징 - 다양한 데이터 포맷 처리 - HTML과 SVG 웹 표준 기줄을 다양하게 사용 - 데이터와 DOM element를 결합 - 화면의 해상도에서 깨지지 않는 Visualizing 가능 => 분석툴이 아니고 하나하나 구현을 해주어야 한다. D3을 사용하기 전에 SVG로 도형을 직접 만들면서 조금 익히는 시간을 가졌다. SVG로 도형만들기 SVG를 사용하여 그래프 만들기 기본적인 SVG 도형을 다루고 실습으로..

✅ 오늘의 학습 📌 React 심화(7) - Strapi + Apollo + GraphQL+ Next.js NextLinkComposed Component Next의 Link는 스타일이없는 바닐라 태그를 렌더링하기 때문에 a태그로 구성된 Link컴포넌트를 새로 만들어주어 사용할 수 있다. import Link, { LinkProps } from "next/link"; interface NextLinkComposedProps extends Omit, Omit { href: LinkProps["href"]; as?: LinkProps["as"]; } const NextLinkComposed = ({ as, href, replace, scroll, shallow, prefetch, locale, ...prop..

✅ 오늘의 학습 📌 React 심화(6) - Strapi + Apollo + GraphQL+ Next.js 이해가 잘 안되었던 부분이나 처음 알게된 부분 위주로 정리했다 1. Strapi Relation 유저는 여러개의 포스트를 가지기 때문에 일대 다의 관계를 가짐 post에서는 user를 가지고 user에서는 posts를 가진다. 지정한 field가 어떤 것인지 잘 확인해야 함. 2. Strapi User 데이터 연결 테스트를 통해 게시물을 등록해보면 relations에 user가 자동으로 연결되지 않는다. 해당 게시물의 주인을 구분할 수 없으니 create/update/delete를 모든 유저가 할 수 있게 된다. -> 그래서 strapi 서버 파일에서 직접 설정해주어야 한다. (복잡주의) REST ..

✅ 오늘의 학습 📌 React 심화(5) - GraphQL - Apollo Client GraphQL - RestAPI의 한계를 극복하기 위해 등장했다. - RestAPI의 경우 특정 데이터를 받기 위해 필요없는 데이터 까지 불러올 때가 있다 - GraphQL의 쿼리 문법을 통해 필요한 데이터만 받아올 수 있고 페이지에 필요한 데이터를 한번에 받아올 수 있다. GraphQL의 규칙 1. POST 메서드로만 요청한다. 2. 백엔드에서 타입을 정의해야 한다. 3. 쿼리 변경은 mutaion을 사용한다. GraphQL의 단점? - 러닝커브가 RestAPI에 비해 높다. - HTTP 캐싱 -> 하나의 URI로만 모든 데이터를 가져오다보니 캐싱이 애매하다 -> 라이브러리를 통해 해결 가능 - 필요한 필드를 모두 ..

✅ 오늘의 학습 📌 React 심화(2) - 서버사이드렌더링(SSR) - Next.js 서버 사이드 렌더링 이해하기 서버 사이드 렌더링(Server Side Rendering)이란? 브라우저가 페이지에 처음 진입했을 때 서버로부터 HTML을 받아서 렌더링을 하는 것 서버사이드 렌더링의 특징 1. 검색엔진 최적화 => 과거에는 ajax 호출을 통한 렌더링 결과를 수집하지 못했지만 요즘엔 검색 엔진이 발전해서 수집하는 경우도 있다. 2. 더 빠른 초기 로딩 속도. Client-side 렌더링은 브라우저 렌더링 후 데이터를 가져오기 위한 로직이 수행되기 때문에 초기 로딩 속도가 느리다. 기존 SSR의 문제점 서버와 클라이언트의 각각 렌더링을 위한 코드를 따로 만들어야 한다. Isomorphic Javascri..