뒤죽박죽 공책 뒤죽박죽 공책

나는 사전 과제로 인해 5일 내에 SvelteKit을 사용한 과제를 진행했어야 했다. 하지만 나는 React와 Next.js만 사용해 봤다.... 그래도 다행히 Svelte 자체가 러닝 커브가 났기 때문에 해볼 만하다고 생각해 사전과제를 진행해 보기로 했다. Svelte의 등장 Svelte가 등장하기 전 해당 기술이 왜 등장했는지에 대해 알아보았다. 등장을 알기 위해서는 현재 많이 사용되는 React, Vue와 같은 프레임워크(라이브러리)의 동작 원리에 대해서 알고 있어야 한다. 우선 내가 알고 있는 React와 비교해보고자 한다. React의 경우에는 가상돔을 바탕으로 동작하기 때문에 변경 사항이 있을 때마다 돔을 다 바꾸는 것이 아닌 가상돔을 이전 돔과 비교해 가며 차이점이 있다면 차이점을 파악하고 ..

리액트로 개발하기 위해서는 다른 필수적인 라이브러리를 설치하여 사용하는 경우가 많다. 그중 대표적으로 React-router는 모든 프로젝트에 필수적으로 사용되는데 이번 원티드를 통해서 React-router를 설치하지 않고 직접 구현해보고자 한다. React-router React-router는 페이지간 이동시에 사용되는 라이브러리로 path의 경로에 따라 일치하는 경로의 페이지를 보여주는 라이브러리이다. / → root 페이지 /about → about 페이지 React-router의 메인 컨셉은 아래와 같다. History stack을 관찰하고, 조작을 한다. URL과 routes들을 비교한다. 일치하는 route를 렌더링한다. 이를 바탕으로 window API를 사용해서 구현을 해보고자 한다. 조..

제로초 강의를 들으며 nodeJS를 사용하여 백엔드를 직접 구축해 보고, 이를 활용한 프로젝트를 제작해 보았다. 이 프로젝트의 목표는 추후에 백엔드 개발자와 소통하며 프로젝트를 진행해야 하는데 백엔드의 지식이 하나도 없는 상태에서 백엔드 개발자와 소통을 하기에는 무리가 있다고 판단하여 프론트 엔드 개발자가 알아야 할 백엔드의 기본 지식을 알기 위함이다. 사용 기술 백엔드와 프론트엔드 사용기술은 아래와 같다. 세부적인 기술 스택은 생략하였다. 백엔드 NodeJs MySQL Sequelize Passport 어려웠던 점 1. 레고 같은 API들과 여러 가지 옵션들 백엔드 세팅의 경우에는 여러가지 API를 불러와 하나씩 조합하는 과정이 많았다. 그중에서도 하나의 API안에서도 지원하는 여러가지 메서드를 사용하..

CSS전후처리기를 비교하는 글에서 나는 tailwindCSS를 공부해보고 싶다고 했다. 그리고 현재 CRUD를 적용한 프로젝트에서 tailwindCSS를 사용해 봐야겠다는 생각이 들어서 공부하면서 적용 중이다. tailwindCSS를 적용하는 법은 공식 홈페이지의 문서에 잘 나와있기 때문에 적용하는 법에 대해서는 작성하지 않으려고 한다. 장점 1. 이름 짓는 고민이 사라졌다. 대부분의 CSS 전후처리기를 사용하기 위해서는 클래스명 혹은 함수명을 고민해야 한다. 이름이 겹치지 않아야 하고, 생성한 이름이 적용하고자 하는 요소를 잘 표현해줘야 한다. 하지만 tailwindCSS의 경우 클래스에 내가 적용하고자 하는 스타일의 클래스를 작성해주기만 하면 된다. 2. 파일의 개수가 확연히 줄어든다. styled-..

이번에 SCSS을 리액트에 적용하면서 나는 SCSS와 Post CSS, styled-component(emotion)를 모두 사용해 보았는데 각각의 장단점이 너무 뚜렸했다. 물론 디자인을 중점으로 하고있는 것이 아니기 때문에 엄청 깊고 잘알지는 못하기 때문에 경험 + 공부를 통해 작성해보고자 한다. SASS SASS란 CSS 전처리기이다. 보통 이런 전처리기는 믹스인, 중첩셀렉터, 상속셀렉터등이 존재하기 때문에 이를 사용하여 CSS의 가독성을 높이고, 유지보수하기 좋게 해준다. 장점 SASS는 위에서 작성한 문법 외에도 for, if, 변수등이 존재하기 때문에 CSS를 작성할 때 편하게 작성하는 것이 가능하다. 단점 SASS만의 문법이 존재하기 때문에 처음에 배울때 약간의 어려움이 있다. 리액트에서 SA..

https://www.joonganggroup.com/ 중앙그룹 세상과 당신 사이, 중앙그룹이 있습니다 중앙그룹이 있습니다 www.joonganggroup.com 위 사이트와 같이 인터렉티브 한 웹사이트를 만들어본 경험이 적었기에 나는 해당 사이트에 적용되는 개념을 몰랐기 때문에 해당 기술을 공부해보고 싶었다. 스크롤과 포지션 위 페이지에 가서 개발자 창을 열어 코드 구조를 보면 스크롤 위치에 따라 포지션이 바뀌는 것을 볼 수 있었다. 또한 스크롤을 많이 내리면서 화면에서 인터렉션이 발생하는데 나는 이를 위해 각각의 콘텐츠에 고정 픽셀로 높이를 주었는데 이로 인해서 화면을 줄이면 스크롤이 너무 많아지고, 반대로 픽셀 값을 줄이니 웹화 면상에서 스크롤이 제한적이었다. 또한 스크롤에 따라 포지션이 바뀌는 것..

CSS를 공부하면서 나는 별생각 없이 JS를 통해 앨리 먼트의 CSS를 조작하고는 하였다. 그러다가 내가 좋아하는 유튜버의 강의를 듣다가 CRP라는 것을 알게 되었다. CRP란? CRP란 Critical Rendering Path의 줄임말로 한국어로 번역하자면 중요 렌더링 경로라고 한다. 중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다. 이를 간단하게 설명하자면 우리가 웹을 첫 로딩하면 ..

서버사이드 렌더링을 공부하면서 getServerSideProps를 알게 되었다. 쉽게 이야기하면 페이지가 처음 로드될 때 getServerSideProps의 함수를 사용하면 반환된 데이터를 사용하여 페이지를 미리 렌더링 할 수 있게 된다. 이외에도 getStaticPaths, getStaticProps 함수가 존재해 모두 서버사이드 렌더링을 도와준다. 위 함수들은 Next.js에서 기본적으로 제공하기 때문에 추가적인 라이브러리 없이 사용이 가능하다. 하지만 나는 next-redux-wrapper의 라이브러리를 사용하고 있기 때문에 Next.js에서 제공하는 getServeSideProps와 next-redux-wrapper를 섞어 쓰는 것은 추천하지 않는다고 한다. 중요한 것은 나는 next-redux-..