티스토리

그래도 해야지

검색하기

블로그 홈

그래도 해야지

subtlething.tistory.com/m

해야의 해야만하는 블로그

구독자: 13

방명록 방문하기

주요 글 목록

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 사용 시 다음과 같이 설치를 진행 해주면 .. 공감수 1 댓글수 0 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 파일을 로드하는 .. 공감수 0 댓글수 0 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와 같이 버전에 대한 부가 설명을 붙이고자 할 때 문자열로 작성한다. 유의적 .. 공감수 0 댓글수 0 2023. 10. 10.
스파르타코딩클럽 내일배움캠프 : 수료 3개월이 지난 후기 내배캠 수료 후 3개월이 지났습니다. 수료 후는 수료 전과 다름없이 매일 매일이 치열한 하루였습니다. 개발자가 되기 위해서는 코딩만 잘해선 안되는구나.. 고루고루 갖춰진 인재가 되어야겠구나.. 라고 매일 되새기며 취업준비를 했었더랬죠ㅎㅎ 결과적으로 만족스러운 취업을 했고, 열심히 적응해가며 어떻게 발전하는 개발자가 될 수 있을지 배워가는 중입니다! 1) 내일배움캠프를 참여하기 전 백그라운드 개발 공부 해본 적 있나요? 네, 있습니다! 저는 직장을 다니다가 개발자가 되고 싶어서 회사를 그만두고 1년 간 편입 준비를 해서 컴퓨터공학과에 진학해 2년간 학사 생활을 하고 2023년 2월에 졸업했습니다. 부트 캠프를 하실거라면 굳이 대학에 다시 가신 이유가 있나요? 대학에 다시 간게 미련한 일이라 생각하실 수 있.. 공감수 10 댓글수 25 2023. 6. 19.
JavaScirpt 테스팅 프레임워크 Jest 기초 기본 패턴 describe("테스트 그룹화", ()=>{ test("테스트 설명", ()=>{ expect("검증 대상").toXxx("기대 결과"); }); }); 기본 개념 키워드 describe(): Jest에서 제공하는 테스트 스위트 함수, 테스트를 그룹화할 때 사용한다. test() 또는 it(): 테스트를 작성할 때 사용한다. it() 는 test() 의 alias이다. expect(): 실제 테스트를 수행할 때 예상되는 값을 검사한다. expect() 와 함께 다양한 Matcher함수를 사용하여 테스트를 작성할 수 있다. beforeEach(): 각 테스트가 실행되기 전에 반복 실행될 코드를 작성한다. afterEach(): 각 테스트가 실행된 후에 반복 실행될 코드를 작성한다. before.. 공감수 0 댓글수 0 2023. 5. 21.
[Develog] 기술 면접 대비 질문과 답 #2 1. 웹 페이지가 브라우저에 렌더링되는 과정을 설명해주세요. 답변1 웹페이지가 브라우저에 렌더링되는 과정은 브라우저가 HTML 파일을 받아들이고, 이를 해석하여 DOM(Document Object Model)을 생성합니다. 이후 브라우저는 CSS(Cascading Style Sheets) 파일을 처리하며, 각 요소들의 위치와 크기 등을 계산하여 화면에 표시할 내용을 준비합니다. 마지막으로, 브라우저는 계산된 내용을 토대로 화면에 웹페이지를 렌더링합니다. 이러한 과정을 통해 사용자는 브라우저에서 웹페이지를 확인할 수 있습니다. 답변2 웹페이지가 브라우저에 렌더링되기 위해서는 브라우저가 서버로부터 HTTP 요청을 보내고, 서버가 응답으로 HTTP 메시지를 반환해야 합니다. 이후 브라우저는 HTTP 파싱 과정.. 공감수 0 댓글수 1 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를.. 공감수 0 댓글수 0 2023. 3. 22.
[Develog] 링크드리스트로 투두리스트 구현하기.js 며칠 전에 진산님께서 모의면접시 `투두리스트 구현을 배열로 할래요 링크드리스트로할래요?`라는 질문을 받았다고 해서 생각해봤다. 그 동안은 배열로 구현하는게 편하니까 배열로만 구현했었다. 저 질문의 의도는 삽입,삭제가 유리한 링크드리스트를 쓸거냐 자료에 접근이 빠른 배열을 쓸거냐인데 투두리스트는 일단 데이터를 삽입하고 삽입한 데이터를 순서에 상관없이 접근해서 상태를 변경시켜줘야한다. 삭제를 할 때도 있지만 보통은 내가 뭘했는지 확인하기 위해 삭제를 잘 하지 않는다(나의 경우) 그래서 삽입과 자료 접근의 비율이 거의 1:1이라고 생각해서 어느 것을 써도 상관이 없을 것 같지만 완료될 때마 삭제하는 유저가 있을 수도 있으니 그런 상황을 생각하면 삽입,삭제 : 자료 접근 = 2:1의 비율이 된다. 이런 상황에서.. 공감수 1 댓글수 0 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를 기반으로 동작.. 공감수 0 댓글수 0 2023. 3. 16.
[Develog] SSR과 CSR 비교 SSR(Server Side Rendering) 서버에서 렌더링 하는 방식 = 서버에서 HTML을 생성하고 클라이언트에게 전송하는 방식 장점 : 서버에서 HTML을 생성하기 때문에 초기 로딩 속도가 빠름 단점: 서버에 부하가 많이 걸릴 수 있다. CSR(Client Side Rendering) 클라이언트에서 렌더링 하는 방식 = 클라이언트에서 HTML을 생성하는 방식 장점: 클라이언트에서 HTML을 생성하기 때문에 페이지를 넘길 때 어색함이 줄어드는 등 사용자 경험이 좋고 SSR보다 더 많은 상호작용을 제공할 수 있다. 단점: 초기 로딩 속도가 느리고 검색엔진이 HTML을 인식하지 못하기 때문에 SEO에 좋지 않다. 공감수 0 댓글수 0 2023. 3. 15.
[Develog] JAMStack과 정적 사이트 생성기 JAMStack은 JavaScript, APIs, and Markup의 줄임말로, 정적 웹사이트를 구축하는 방식이다. 이 방식은 기존의 서버 사이드 렌더링 방식과는 달리, 모든 콘텐츠가 미리 생성되어 있으므로, 더욱 빠르고 안정적인 성능을 제공한다. 이를 위해서는 정적 사이트 생성기를 사용해야 한다. 정적 사이트 생성기는 입력 데이터와 사이트 디자인을 결합하여, 미리 생성된 HTML, CSS, JavaScript 파일 등의 정적 파일을 만들어낸다. 이 파일들은 미리 만들어졌기 때문에 서버에서 동적으로 페이지를 렌더링할 필요가 없다. 이를 통해 웹사이트 로딩 시간을 크게 단축할 수 있다. 정적 사이트 생성기에는 여러 종류가 있으며, 가장 많이 사용되는 것은 Jekyll, Hugo, Gatsby 등이 있다... 공감수 0 댓글수 0 2023. 3. 14.
[Develog] npm의 --save, --save-dev 등의 플래그와 그 종류 npm은 Node.js 패키지 매니저로서, 프로젝트에 필요한 의존성(dependencies)을 관리하는데 사용된다. 의존성은 다른 모듈이나 라이브러리를 포함할 수 있으며, 해당 모듈이나 라이브러리가 제대로 작동하기 위해서는 그에 따른 의존성이 필요하다. npm에서 플래그란? npm에서 플래그(Flag)란, 특정한 옵션 또는 설정을 전달하기 위해 npm 명령어와 함께 사용되는 특별한 인자(argument)이다. 플래그는 npm 명령어와 함께 사용되며, 명령어와 함께 전달되어 실행되는 옵션과 설정값을 지정한다. 일반적으로 플래그는 "-" 또는 "--"로 시작하며, 다양한 옵션을 지정할 수 있다. 예를 들어, "npm install" 명령을 사용하여 패키지를 설치할 때, "--save" 플래그를 추가하면 해당.. 공감수 0 댓글수 0 2023. 3. 12.
[자바스크립트] !! 느낌표 두개 문법 JavaScript에서 !! 연산자는 값을 불리언으로 변환하는 데 사용된다. 일반적으로 값의 존재 여부를 확인하기 위해 사용된다. !! 연산자는 다음과 같이 작동된다. 피연산자의 값을 불리언으로 변환한다. 이후에, 불리언 값이 true일 경우 true를 반환하고, false일 경우 false를 반환한다. 즉, 이 연산자는 항상 불리언 값을 반환하는 것이다. 예를 들어, 다음과 같은 코드가 있다고 가정해보자 const myValue = 'hello'; console.log(!!myValue); // true 위 코드에서 !!myValue는 'hello' 값을 불리언으로 변환한 후, true를 반환한다. 그게 무엇이든 null이나 undefined가 아니고 값이 존재하면 true를 반환한다. 따라서 !! 연.. 공감수 0 댓글수 0 2023. 3. 11.
기술 면접 대비 질문과 답 #1 1. 웹의 동작 방식에 대해 설명해주세요. 웹의 동작 방식은 클라이언트-서버 모델로 이루어져 있습니다. 클라이언트는 브라우저에서 실행되며, 서버는 웹 애플리케이션을 호스팅하는 서버입니다. 클라이언트는 서버에 HTTP 요청을 보내고, 서버는 이 요청을 처리한 후 클라이언트에 HTTP 응답을 반환합니다. 클라이언트는 이 응답을 받아서 브라우저에 결과를 렌더링합니다. 2. HTTP와 HTTPS의 차이점에 대해 설명해주세요. HTTP는 인터넷 상에서 데이터를 주고받을 때 사용되는 프로토콜이며, 암호화되지 않은 평문으로 데이터를 전송합니다. 반면, HTTPS는 SSL 또는 TLS 프로토콜을 이용하여 데이터를 암호화하고 인증하는 보안 프로토콜입니다. HTTPS는 기밀성, 무결성, 인증성을 보장하여 중간자 공격이나 .. 공감수 0 댓글수 0 2023. 3. 10.
[Develog] D-day와 옵저버 D-day 기능 구현과 옵저버 유저 피드백을 받으면서 D-day가 생겼다. 마감일을 기준으로 프로젝트 모집이 며칠이나 남았는지 보였으면 좋겠다는 피드백이었다. 처음 짠 코드는 이랬다. //디데이 계산 export const getDays = (milliseconds: number) => { const date = new Date(milliseconds); const day = `${date.getDate() - 1}`.padStart(2); return `${day}`; }; 생략 const day = Number(getDays(deadline - today)); return( {isRecruiting && day >= 0 && ( // 현재 모집 중이고 남은 일자가 0일 이상이면 {day === 0 ?.. 공감수 0 댓글수 1 2023. 3. 9.
[React] useQuery의 onMutate 옵션 onMutate 속성은 useQuery 또는 useMutation 훅에서 제공하는 옵션 중 하나로, 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다. 보통 useMutation 훅을 사용하여 mutation을 처리할 때, optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 발생 시 처리 등을 수행한다. 이 때, useQuery 훅에서 제공하는 onMutate 속성을 사용하면 mutation 전에 수행할 작업을 정의할 수 있다. onMutate 속성에 전달할 수 있는 값은 함수이다. 이 함수는 다음과 같은 형태를 가진다. onMutate?: (variables: TVariables) => Promise | R | undefined; 여기서.. 공감수 1 댓글수 2 2023. 3. 8.
[React] optimistic update(낙관적 업데이트) React Query는 API 호출과 관련된 데이터를 캐시하고 관리하는 라이브러리이다. 이 라이브러리는 optimistic updates(낙관적 업데이트)를 지원하며, 이는 데이터를 서버로부터 성공적으로 업데이트하기 전에도 UI를 업데이트할 수 있도록 한다. optimistic updates는 요청을 보내기 전에 UI를 업데이트하는 기능이다. 예를 들어, 사용자가 게시물을 좋아요 했을 때, UI에서 즉시 좋아요 수가 증가하도록 할 수 있다. 이 때 서버로 요청을 보내기 전에 UI를 업데이트하는 것이 낙관적 업데이트이다. 낙관적 업데이트는 사용자 경험을 개선하고, 서버에서 응답을 받을 때까지 기다리지 않고 사용자에게 빠른 피드백을 제공할 수 있다. 하지만 요청이 실패하면 이전 상태로 되돌려야 하므로, 이를.. 공감수 1 댓글수 0 2023. 3. 7.
[Develog] yarn berry Yarn Berry란 무엇인가요? Yarn Berry는 Facebook에서 개발한 오픈소스 자바스크립트 패키지 매니저인 Yarn의 새로운 버전이다. Yarn Berry는 이전 버전인 Yarn Classic에서 겪었던 문제점들을 해결하고 개선된 기능들을 제공한다. 주요 기능으로는 Plug'n'Play (PnP)이 있다. PnP는 의존성 설치 및 관리를 더욱 효율적으로 수행할 수 있도록 도와주고 이를 통해 패키지 설치 속도 상승에 도움을 준다. 또한, PnP를 선택적으로 사용할 수 있기 때문에 기존의 Yarn Classic에서 사용되던 node_modules 디렉토리와 함께 사용할 수 있다. Yarn Berry는 Workspaces를 지원하며 Workspaces는 여러 개의 패키지를 하나의 프로젝트로 관리할.. 공감수 1 댓글수 0 2023. 3. 6.
[React] useMemo()와 React.memo의 차이점 useMemo()와 React.memo는 React의 성능 최적화를 위해 사용되는 두 가지 도구이다. useMemo() 계산 비용이 높은 함수의 반환값을 캐시하여, 같은 인자가 전달될 경우 다시 계산하지 않고 캐시된 값을 반환한다. 이를 통해 불필요한 계산을 줄이고 컴포넌트의 렌더링 성능을 개선할 수 있다. 예시 import { useMemo } from 'react'; function MyComponent(props) { const { data } = props; // data 값이 변경될 때마다 data의 길이를 계산하고, // 그 값을 캐시하여 같은 data가 전달될 때 재사용합니다. const dataLength = useMemo(() => data.length, [data]); return {d.. 공감수 0 댓글수 0 2023. 3. 5.
[React Query] 캐싱 / useQuery의 생명주기 react query를 통해 관리하는 쿼리 데이터는 다음과 같은 다섯가지 상태를 가진다. fresh | 초록색 새로 추가된 쿼리이다. staleTime이 설정되어있다면 설정된 시간만큼 fresh 상태로 유지된다. staleTime이 설정이 안되어있다면 기본값이 0이기 때문에 fresh 직후에 stale 상태로 전환된다. fresh 상태일 때는 mount, update 시에 데이터를 재요청하지 않는다. fetching | 파란색 요청 상태인 쿼리이다. mount, update 시에 코드에 해당하는 데이터가 fetch 또는 refetch 된다. stale | 노란색 데이터가 fetching이 완료되어 만료됐다고 판단하는 쿼리이다. stale 상태인 쿼리를 재호출하면 캐싱된 데이터가 반환되기 때문에 새로운 값.. 공감수 0 댓글수 0 2023. 3. 3.
[React] reactQuery queryKey와 queryFn의 관계, refetch() useQuery를 사용하면서 알게 된 몇가지 사실들! 1. queryKey와 queryFn의 관계 const { data: activeProjectsData } = useQuery({ queryKey: ['myProjects', filteredPidList], queryFn: getActiveProjects, staleTime: staleTime.myProjects, enabled: !!currentPidList, }); => queryKey에 있는 데이터를 queryFn이 매개변수로 사용할 수 있다. queryFn에 정의해준 함수에서 매개변수를 콘솔로 찍어보면 아래와 같이 객체가 찍히는 것을 알 수 있다. 이 객체 중 하나로 queryKey가 들어가기 때문에 이를 활용해서 함수 안에서 자유롭게 사용할 .. 공감수 0 댓글수 0 2023. 3. 2.
[React] React 상태 관리 라이브러리 Recoil 리코일이란? 리코일(Recoil)은 React 상태 관리 라이브러리 중 하나이다. 리액트에서 상태를 관리하기 위해서는 일반적으로 상태를 컴포넌트 내부에서 관리하거나 Redux와 같은 라이브러리를 사용한다. 하지만 Redux는 보일러플레이트 코드가 많고, 컴포넌트와 액션 사이의 연결을 설정하는 작업이 번거로울 수 있다. 반면, 리코일은 상태를 단일 원천으로 중앙 집중적으로 관리하면서도 이러한 불편함을 해소한다. 리코일은 상태 값을 저장하고 업데이트하는 데 사용되는 atom과 여러 selector로 구성된다. atom은 원자적으로 업데이트 가능한 상태 값을 나타내며, selector는 atom을 기반으로 다른 값을 계산하는 데 사용된다. 리코일은 기존의 리액트 상태 관리 방법보다 더 직관적이고 간단하게 상태.. 공감수 2 댓글수 0 2023. 3. 1.
[Develog] 좋아요 기능 구현2 이전 글 [Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감 subtlething.tistory.com React Query를 처음 쓰는데 생각보다 옵션들이 너무 많아서 제대로 활용하지 못하는 것 같았다. 그리고 내가 짰던 좋아요 로직에 대한 의심이 계속 들었던 와중에 좋아요가 적용이 안되는 오류가 발생했다. 그래서 하루종일 좋아요만 붙들고 수정했다. 커밋 링크 [PR] 프로젝트 상세보기 페이지 수정 by jeLee94 · Pull Request #261.. 공감수 0 댓글수 0 2023. 3. 1.
[Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감소한 숫자는 post 컬렉션의 like 필드에 저장되고 내가 좋아한 프로젝트는 myproject 컬렉션의 likedProjects 필드에 배열로 저장이된다. 1. 초안 처음에는 좋아요를 누를 때마다 데이터를 업데이트 해주는 방식으로 구현했다. 대신 데이터를 조회하는 건 초기 렌더링 한번만 할 수 있도록 했고 이 후 토글될 때 마다 클라이언트 사이드에서는 state로 상태를 관리할 수 있도록 했다. //api/projectDetail.tsx //좋아요 수 업데이트 export const updateLike =.. 공감수 0 댓글수 0 2023. 2. 25.
[React] 서버 상태 관리 라이브러리 react-query의 개념과 useQuery, useMutation react-query 개념 react-query란? 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리 react-query를 사용하는 이유? 서버 데이터만 따로 관리하기 위해서! 기존의 redux와 같은 라이브러리들은 클라이언트 쪽 데이터를 관리하기 적합했지만 서버 쪽 관리에는 적합하지 않는 점들이 있었다. 기존에는 서버의 데이터와 클라이언트의 데이터가 공존하게 되고 그 데이터가 서로 상호작용하면서 섞여버린다. (예, 서버에는 이미 패치된 데이터가 저장되어 있고 클라이언트에는 패치되기 전 데이터가 유저에게 사용되고 있음) 기존 라이브러리들은 미들웨어를 통해 서버 데이트 관리를 할 수는 있지만 보일러 플레이트가 많아서 코드양이 많아지고 유지.. 공감수 0 댓글수 0 2023. 2. 19.
[Develog] VS Code 꿀팁! 단축키 정리 변수나 단어 찾기, 바꾸기 Ctrl + F 현재 문서에서 일치하는 텍스트 찾기 Ctrl + Shift + F 전체 문서에서 일치하는 텍스트 찾기(현재 오픈돼있는 폴더) Ctrl + H 일치하는 텍스트 찾아 바꾸기 (Ctrl + Alt + Enter 모두바꾸기) 창 열기 닫기 Ctrl + ,(콤마) 설정창 열기 Ctrl + `(백틱) 터미널 열기/닫기 Ctrl + B 왼쪽 탐색기 창 끄기/ 켜기 Ctrl + '+' or '-' 폰트 사이즈 키우기/ 줄이기 Ctrl + Shift + P 확장 기능 선택하기 주석 처리하기 Ctrl + '/' 한 줄 또는 여러 줄 주석 처리하기 Alt + Shift + A 블록 주석 처리하기 이동하기 Ctrl + P 파일 이동하기 Ctrl + (← , →) 덩어리 단위로 커서 .. 공감수 2 댓글수 0 2023. 2. 11.
[Develog] Craco란? Craco 설치 방법 Craco란? Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지 Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 Craco, react-app-rewired 등이 있다. 일단 craco를 이해하려면 eject를 알아야 한다. CRA 즉 Create React App으로 프로젝트를 만들고 나면 최소한의 필요한 기능만으로 설정이 되어 있다. 이 때 package.json 파일에서 script 파일을 보면 eject 라는 명령어를 볼 수가 있다. "scripts": { "start": "react-scripts start", "build": "react-scripts b.. 공감수 0 댓글수 0 2023. 2. 8.
[Develog] 번들러 Webpack은 무엇이고 Webpack을 사용하는 이유는?(+ vite와 차이점) Summary 자바스크립트 파일을 기능 단위로 모듈화하고 이것을 하나로 묶어 관리할 방법이 필요하게되면서 번들러의 역할도 중요해졌다. 번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다. -모듈: 프로그램을 구성하는 구성요소로 관련된 데이터와 함수를 하나로 묶은 단위 -번들러: 의존성이 있는 모듈 코드를 하나 또는 여러개의 파일로 만들어주는 도구 -webpack: 모듈 번들러 -vite: 빠르고 간결한 개발 경험에 초점을 맞춘 번들러 모듈 프로그램을 구성하는 구성요소로 관련된 데이터와 함수를 하나로 묶은 단위로 모듈은 번들러가 등장하게 된 결정적 요소이다. 전통적인 자바스크립트 개발 방식은 기능별 또는 페이지별로 자바스크립트 파일을 분리하고.. 공감수 1 댓글수 0 2023. 2. 8.
[React] Next.js란 무엇이고 왜 사용하는가 Overview Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 **서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)**과 같은 다양하고 풍부한 기능을 제공합니다. 서버사이드 렌더링(SSR)을 함으로써 얻는 이득은? 로딩- 클라이언트 사이드 렌더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게되는데 이때까지 사용자는 많은 시간을 대기해야 하는데, 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO- 클라이언트 .. 공감수 4 댓글수 0 2023. 2. 7.
[Develog] 최종프로젝트 S.A 프로젝트 S.A 1. 팀 소개 팀 이름 Detto (Develop Together) 팀원 성효진 (L) 이상원 이유정 (VL) 이정은 배성완 위하연 (D) 2. 그라운드 룰 소통 채팅 - Discord / 프로젝트 관리 - Notion 상호 존댓말 사용하기. 노션 게시글에 댓글 달아주기. Discord 이모지 반응 남기기. ✅👍👀👏 질문이 있을 때, Discord 옥상/진실의방 허들 사용하기. 시간표 ✨ 자율 출퇴근 제도 ✨ 지각비 1000원 / 30분 💸 재택근무🏠 가능 데일리 일정 ~10:00 자율 출근 10:00 데일리 스크럼 (특이사항, 일정 공유, 논의가 필요한 사항) 12:30~14:00 점심 18:00~19:30 저녁 21:00~ 마무리 인사, 자율 퇴근 주기적인 일정 코드 리뷰 - 월,수,.. 공감수 0 댓글수 0 2023. 2. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.