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

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

4주차 회고록 4주차는 기존과는 다르게 개인 과제로 진행이 되었고 라이브러리의 제한도 풀렸다. 과제의 난이도는 라이브러리를 사용한다면 기존과 비슷하다고 생각이 들었다. 과제를 진행하면서 4주차는주어진 데이터를 바탕으로 막대 그래프와 영역 그래프를 그리는 과제이다. 그렇기에 나는 차트를 그리기 위한 방법을 생각하기 시작했다. 라이브러리를 사용하지 않고 그래프를 그릴것인지 혹은 라이브러리의 제한도 없으니 차트를 그리는 라이브러리를 사용할 것인지! 결국 짧은 기간인 것을 고려하여 나는 라이브러리를 사용하여 보다 퀄리티 있는 차트를 그리기로 결정하였다. 이후에 나는 차트 라이브러리를 고르고자 npm trends를 통해 인기있는 차트 라이브러리를 찾아보았다. 그리고 나는 2가지의 라이브러리를 추려냈다. 첫번째는 ..

3주차 회고록 3주차는 1주차,2주차와 다르게 기능을 많이 요구하지는 않았지만 한가지 기능에 대해서 어떻게 구현하고 왜 이렇게 구현했는지에 대해서 기술하는 주차라고 생각한다. 대부분의 조건은 이전과 동일하지만 큰 차이는 제공된 API 서버를 본인이 직접 호스팅하여 과제를 진행해야했고, 본인이 직접 API 서버를 배포시켜야 했다. 과제를 진행하면서 3주차는 과제를 진행하기에 앞서 나는 관심사를 분리하고 커스텀 훅을 적극적으로 사용하는 방식으로 프로젝트를 진행했다. 기존에는 비슷한 기능을 하는 함수들을 모아 하나의 파일에 만들어 컴포넌트 단에서 함수를 호출하여 진행하는 방식으로 진행했으며 그로인하여 컴포넌트는 절차적인 형태의 코드가 많이 내포되어 있었다. 또한 커스텀 훅을 기존에는 많이 어렵게 생각했다. 그..

2주차 회고록 2주차는 1주차와 동일한 방식으로 4일동안 주어진 과제를 각자 만들어 팀원들과 회의를 통해서 Best Practice를 선정하는 것이다. 2주차는 1주차와 다르게 약간의 라이브러리의 자유도와 난이도가 조금 더 올라갔다고 생각한다. 팀프로젝트를 진행하면서 2주차는 원티드 인턴십에 대해서 약간의 실망감이 드는 주간이였다. 원티드 인턴십은 프로젝트를 구현할 수 있는 지식을 갖고 있는 사람들과 함께 4주간 팀프로젝트를 진행한다고 소개하고 있다. 그리고 합격하면 약 5~6명 정도로 팀이 구성되고 이 팀원들과 프로젝트를 진행하게 된다. 근대 이렇게 팀원들 만들고 난 후에 불참을 하는 사람들도 존재하고, 회사에 합격해서 빠지게 되는 사람들도 존재하게 된다. 그래서 구성된 팀보다 적은 인원으로 진행되기도..

1주차 회고록 1주차에는 총 4일이 주어지고, 4일동안 사전과제를 바탕으로 팀원들과 토론하여 best practice를 선정하여 사전과제를 리팩토링하는 과제가 주어졌다. 팀프로젝트를 진행하면서 해당 프로그램에서의 팀프로젝트는 우리가 알고 있는 팀 프로젝트와 다르게 팀원들 모두가 코드를 작성하면 해당 코드에 대해서 의견을 나누고 best Practice를 선정해서 이를 하나의 프로젝트에 합치는 것이다. 그래서 첫 회의때는 프로젝트의 환경 세팅을 설정하였다. 자바스크립트로 진행할 것인지, 타입을 적용시킬 것인지 혹은 어떤 CSS를 적용시킬 것인지, 라이브러리의 버전은 몇으로 통일할 것인지에 대한 회의가 진행됬고, 이는 수월하게 진행되었다. 그렇게 첫 환경 세팅이 이루어지고 두번째 회의때는 각자의 코드에 대해..

원티드 온보딩이란? 개발자를 희망하거나 재직중인 사람들은 대부분 알고 있는 원티드에서는 매달 온보딩을 진행한다. 매월 다른 주제로 온보딩을 진행하며, 평소에는 제한된 인원이 없고, 사전 과제가 의무가 아니기 때문에 듣는 것에 대해서 부담감이 없는 프로그램이다. 나는 온보딩 프로그램에 대해서는 알고 있었지만 직접 참여해본 경험은 없었다. 하지만 최근에 Next.js에 대해서 공부를 하던 중에 8월 온보딩 주제가 Next.js인것을 알고 나는 처음으로 참여해보았고, 결과적으로 매우 만족하는 결과를 얻었다. 그리고 9월달에 프론트엔드 인턴십 온보딩을 진행하는 공고를 보게되었다. 나는 한치의 망설임도 없이 바로 지원을 하기로 다짐했다. 인턴십 온보딩은 뭐하는 걸까? 해당 온보딩은 한달동안 4개의 과제를 팀과 개..

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

1. CSR이란 무엇이며, 그것의 장단점에 대하여 설명해주세요 CSR(Client-side-rendering)이란 CSR은 브라우저에서 자바스크립트로 페이지를 직접 렌더링하는 것을 의미한다. 즉 모든 로직과 데이터 패칭, 템플릿과 라우팅등을 서버가 아닌 클라이언트에서 처리하는 렌더링 방식을 말한다. 이러한 렌더링 방식으로 인해 서버에서 사용자 기기로 더 많은 정보를 전달할 수 있지만 그에따른 단점도 존재한다. 반대로 SSR(Server-side-rendering) 방식은 서버에서 페이지 전체의 HTML을 생성하여 브라우저에서 렌더링 하는 방식이다. 장점 향상된 사용자의 경험 CSR은 렌더링시 최소한의 자바스크립트와 CSS 파일이 포함된 HTML을 받아와 클라이언트에 전달해준 후 클라이언트는 스크립트를 동..