본문 바로가기

매일 해내는 개발/Develog62

패키지 의존성 관리: package.json, package-lock.json과 유의적 버전 1. 유의적 버전 패키지의 버전을 숫자로 관리하는 방법 [Major].[Minor].[Patch]-[label] ex: 1.2.3-beta 1) Major : 이전 버전과 호환이 불가능할 때 숫자를 하나 증가한다. Major 버전이 바뀐 패키지를 사용하고자 한다면 반드시 하위 호환성이 깨진 기능(breaking change) 목록을 확인하고 이전 기능을 사용하는 코드를 수정해야한다. 2) Minor: 기능이 추가되는 경우 숫자를 하나 증가시킨다. 기능이 추가되었다고 해서 이전 버전의 하위 호환성을 깨트리지는 않는다. 3) Patch: 버그 수정 패치를 적용할 때 사용 4) label: 선택 사항으로 pre, alpha, beta와 같이 버전에 대한 부가 설명을 붙이고자 할 때 문자열로 작성한다. 유의적 .. 2023. 10. 10.
JavaScirpt 테스팅 프레임워크 Jest 기초 기본 패턴 describe("테스트 그룹화", ()=>{ test("테스트 설명", ()=>{ expect("검증 대상").toXxx("기대 결과"); }); }); 기본 개념 키워드 describe(): Jest에서 제공하는 테스트 스위트 함수, 테스트를 그룹화할 때 사용한다. test() 또는 it(): 테스트를 작성할 때 사용한다. it() 는 test() 의 alias이다. expect(): 실제 테스트를 수행할 때 예상되는 값을 검사한다. expect() 와 함께 다양한 Matcher함수를 사용하여 테스트를 작성할 수 있다. beforeEach(): 각 테스트가 실행되기 전에 반복 실행될 코드를 작성한다. afterEach(): 각 테스트가 실행된 후에 반복 실행될 코드를 작성한다. before.. 2023. 5. 21.
[Develog] 기술 면접 대비 질문과 답 #2 1. 웹 페이지가 브라우저에 렌더링되는 과정을 설명해주세요. 답변1 웹페이지가 브라우저에 렌더링되는 과정은 브라우저가 HTML 파일을 받아들이고, 이를 해석하여 DOM(Document Object Model)을 생성합니다. 이후 브라우저는 CSS(Cascading Style Sheets) 파일을 처리하며, 각 요소들의 위치와 크기 등을 계산하여 화면에 표시할 내용을 준비합니다. 마지막으로, 브라우저는 계산된 내용을 토대로 화면에 웹페이지를 렌더링합니다. 이러한 과정을 통해 사용자는 브라우저에서 웹페이지를 확인할 수 있습니다. 답변2 웹페이지가 브라우저에 렌더링되기 위해서는 브라우저가 서버로부터 HTTP 요청을 보내고, 서버가 응답으로 HTTP 메시지를 반환해야 합니다. 이후 브라우저는 HTTP 파싱 과정.. 2023. 3. 27.
[Develog] 좋아요 기능 optimistic update로 구현하기 react query의 mutate로 optimistic update 구현하기! 개발 기간 동안에도 계속 optimistic update로 구현하고 싶었으나 잘 풀리지 않아서 보류하고 있었던 부분이다. 또 며칠 씨름했었는데 이걸 왜 헤맸지 싶을 정도로 간단하게 해결했다........ 왜 헤맸지 진짜? 그래도 결국 내가해냄 하는 마음이 들어 뿌듯했다. [Develog] 좋아요 기능 구현2 이전 글 [Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬 subtlething.tistory.com 기존에 useState를.. 2023. 3. 22.
[Develog] 링크드리스트로 투두리스트 구현하기.js 며칠 전에 진산님께서 모의면접시 `투두리스트 구현을 배열로 할래요 링크드리스트로할래요?`라는 질문을 받았다고 해서 생각해봤다. 그 동안은 배열로 구현하는게 편하니까 배열로만 구현했었다. 저 질문의 의도는 삽입,삭제가 유리한 링크드리스트를 쓸거냐 자료에 접근이 빠른 배열을 쓸거냐인데 투두리스트는 일단 데이터를 삽입하고 삽입한 데이터를 순서에 상관없이 접근해서 상태를 변경시켜줘야한다. 삭제를 할 때도 있지만 보통은 내가 뭘했는지 확인하기 위해 삭제를 잘 하지 않는다(나의 경우) 그래서 삽입과 자료 접근의 비율이 거의 1:1이라고 생각해서 어느 것을 써도 상관이 없을 것 같지만 완료될 때마 삭제하는 유저가 있을 수도 있으니 그런 상황을 생각하면 삽입,삭제 : 자료 접근 = 2:1의 비율이 된다. 이런 상황에서.. 2023. 3. 21.
[Develog] 자바스크립트에서 SSR 구현하는 방법 SSR(Server-Side Rendering)은 서버에서 HTML, CSS, JavaScript 등을 렌더링하여 클라이언트에게 전달하는 방식이다. 1. Node.js 설치 Node.js는 JavaScript를 실행할 수 있는 서버 측 런타임으로 SSR을 구현하려면 필요하다. 공식 홍페이지(https://nodejs.org/)에서 다운로드하거나, 패키지 매니저를 통해 설치할 수 있다. 2. 프로젝트 생성 SSR을 구현할 프로젝트를 생성해야한다. 프로젝트 생성 방법은 아래와 같다. mkdir my-ssr-project cd my-ssr-project npm init -y 이 명령어를 실행하면 `package.json`파일이 생성된다. 3. 서버 환경 구성 Express.js는 Node.js를 기반으로 동작.. 2023. 3. 16.
[Develog] SSR과 CSR 비교 SSR(Server Side Rendering) 서버에서 렌더링 하는 방식 = 서버에서 HTML을 생성하고 클라이언트에게 전송하는 방식 장점 : 서버에서 HTML을 생성하기 때문에 초기 로딩 속도가 빠름 단점: 서버에 부하가 많이 걸릴 수 있다. CSR(Client Side Rendering) 클라이언트에서 렌더링 하는 방식 = 클라이언트에서 HTML을 생성하는 방식 장점: 클라이언트에서 HTML을 생성하기 때문에 페이지를 넘길 때 어색함이 줄어드는 등 사용자 경험이 좋고 SSR보다 더 많은 상호작용을 제공할 수 있다. 단점: 초기 로딩 속도가 느리고 검색엔진이 HTML을 인식하지 못하기 때문에 SEO에 좋지 않다. 2023. 3. 15.
[Develog] JAMStack과 정적 사이트 생성기 JAMStack은 JavaScript, APIs, and Markup의 줄임말로, 정적 웹사이트를 구축하는 방식이다. 이 방식은 기존의 서버 사이드 렌더링 방식과는 달리, 모든 콘텐츠가 미리 생성되어 있으므로, 더욱 빠르고 안정적인 성능을 제공한다. 이를 위해서는 정적 사이트 생성기를 사용해야 한다. 정적 사이트 생성기는 입력 데이터와 사이트 디자인을 결합하여, 미리 생성된 HTML, CSS, JavaScript 파일 등의 정적 파일을 만들어낸다. 이 파일들은 미리 만들어졌기 때문에 서버에서 동적으로 페이지를 렌더링할 필요가 없다. 이를 통해 웹사이트 로딩 시간을 크게 단축할 수 있다. 정적 사이트 생성기에는 여러 종류가 있으며, 가장 많이 사용되는 것은 Jekyll, Hugo, Gatsby 등이 있다... 2023. 3. 14.
[Develog] npm의 --save, --save-dev 등의 플래그와 그 종류 npm은 Node.js 패키지 매니저로서, 프로젝트에 필요한 의존성(dependencies)을 관리하는데 사용된다. 의존성은 다른 모듈이나 라이브러리를 포함할 수 있으며, 해당 모듈이나 라이브러리가 제대로 작동하기 위해서는 그에 따른 의존성이 필요하다. npm에서 플래그란? npm에서 플래그(Flag)란, 특정한 옵션 또는 설정을 전달하기 위해 npm 명령어와 함께 사용되는 특별한 인자(argument)이다. 플래그는 npm 명령어와 함께 사용되며, 명령어와 함께 전달되어 실행되는 옵션과 설정값을 지정한다. 일반적으로 플래그는 "-" 또는 "--"로 시작하며, 다양한 옵션을 지정할 수 있다. 예를 들어, "npm install" 명령을 사용하여 패키지를 설치할 때, "--save" 플래그를 추가하면 해당.. 2023. 3. 12.

티스토리툴바