전체 글105 Next.js에서 vanilla-extract 사용 시 storybook 설정하는 방법 + 예시 코드 vanilla-extract는 linaria에 비해 공식문서가 잘 되어 있고, next용 plug-in도 따로 제공해줘서 어렵지 않게 설정 할 수 있었다.하지만 Storybook을 적용하려니 또 난관에 부딪혔다.조금 더 찾아보니 이것도 셋팅이 필요했다!storybook 공식 문서 > setup에서 vanilla-extract를 셋팅하는 방법을 제공해 주고 있었다. https://storybook.js.org/recipes/@vanilla-extract/css Integrate Vanilla Extract with Storybook | StorybookGet zero-runtime stylesheets in TypeScript.storybook.js.orgpnpm 사용 시 다음과 같이 설치를 진행 해주면 .. 2024. 5. 29. Next14 ES 모듈에서 linaria 스타일 사용하기 / config 설정 Using linaria with Next.js 14 ES module리뉴얼 프로젝트를 시작 하기 위해 프레임워크는 Next 14 app router를 사용하기로 했는데기존에 emotion을 사용하던 환경이라 style 라이브러리를 새로 결정해야 했다.우선 여러 후보 중 vanilla-extract 와 linaria 둘로 좁혀졌다.나는 linaria를 poc 해보기로했는데 공식문서의 불친절..함으로 여러 문제에 직면했다.https://linaria.dev/next 설치가 돼있는 상태에서 다음 과정을 따라하면 쉽게 linaria를 사용할 수 있다.linaria는 zero-runtime css-in-js이므로 런타임이 아닌 빌드 타임에 컴파일하기때문에 JavaScript 코드에서 이 CSS 파일을 로드하는 .. 2024. 5. 22. 패키지 의존성 관리: 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. 스파르타코딩클럽 내일배움캠프 : 수료 3개월이 지난 후기 내배캠 수료 후 3개월이 지났습니다. 수료 후는 수료 전과 다름없이 매일 매일이 치열한 하루였습니다. 개발자가 되기 위해서는 코딩만 잘해선 안되는구나.. 고루고루 갖춰진 인재가 되어야겠구나.. 라고 매일 되새기며 취업준비를 했었더랬죠ㅎㅎ 결과적으로 만족스러운 취업을 했고, 열심히 적응해가며 어떻게 발전하는 개발자가 될 수 있을지 배워가는 중입니다! 1) 내일배움캠프를 참여하기 전 백그라운드 개발 공부 해본 적 있나요? 네, 있습니다! 저는 직장을 다니다가 개발자가 되고 싶어서 회사를 그만두고 1년 간 편입 준비를 해서 컴퓨터공학과에 진학해 2년간 학사 생활을 하고 2023년 2월에 졸업했습니다. 부트 캠프를 하실거라면 굳이 대학에 다시 가신 이유가 있나요? 대학에 다시 간게 미련한 일이라 생각하실 수 있.. 2023. 6. 19. 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. 이전 1 2 3 4 ··· 12 다음
