til

백엔드를 따로 관리하기 어려운 프론트엔드 개발자들끼리의 협업에서 firebase는 낮은 러닝커브를 가지고, 폭넓은 생태계를 가지기에 손쉽게 접근 가능한 백엔드 플랫폼으로서 높은 위상을 가지고 있다. 하지만 이번 프로젝트에서는 supabase를 사용하는데, 구글이 관리하기에 어느 정도 신뢰성도 보장되며, 그 외 다양한 기능을 제공하는 firebase를 두고 왜 supabase를 사용하는 걸까?supabase는 PostgreSQL 기반으로 복잡한 쿼리와 트랜잭션을 지원하며 관계형 데이터 베이스를 사용하기에 보다 정교하고 직관적으로 DB를 확인할 수 있다. 또한 오픈소스 기반이기 때문에 발전 속도가 빠르며 자체 호스팅도 지원한다. 또한 DB, 인증, 스토리지 등 애플리케이션 개발에 필요한 필수 백엔드 기능을 ..

벌써 3번째 팀프로젝트 발제날! 뉴스피드라고 해서 grid 형태가 갖춰진 무언가라고 생각했는데, SNS, 블로그, 커뮤니티 등 상당히 범위가 넓게 잡혔다.   우리 팀은 깔끔한 UI로 평가받는 velog의 디자인을 조금 변형하여 제작해 보기로 하였고, 주제는 게임 뉴스피드로 결정되었다. 프로젝트 내 여러 기능 중 글 작성 및 상세 글 보는 페이지를 맡았는데, 처음 맡겠다고 했을 때는 간단할 줄 알았는데 에디터 라이브러리가 종류도 엄청 많고 사용법도 처음 보는 입장에선 꽤 복잡해서 생각했던 것보다 시간을 더 쏟아야겠다. 오늘은 팀 그라운드 룰을 정하고, 코드 컨벤션, 작업 환경 세팅을 주로 정했다. router를 설정하고 기본 globalstyle도 지정하고, prettier, eslint까지 우리 팀에 ..

tailwind css 사용 후 환경설정을 하는데 tailwind.config.js에서 다음과 같은 메시지가 떠서 어떤 종류인지 알아보았다.해당 메시지를 직역하자면 '파일은 CommonJS 모듈이며 ES 모듈로 변환될 수 있습니다'로 해석된다. 모듈? 모듈은 많이 들어봤는데 CommJS 모듈과 ES module이라는 것이 어떤 건지 모르기에 한 번 알아보았다. 1. Common JSCommonJS는 서버 사이드 JavaScript를 위해 개발된 모듈 시스템이며, Node.js가 이를 채택하면서 널리 사용되기 시작하였다. 때문에 Node.js 에서 자바스크립트 패키지를 불러올 때 사용되며, 브라우저에서도 사용될 수 있다. ※ Common JS 사용법모듈을 정의하고 내보낼 때 module.exports를 사..

※ Zustand? - Zustand는 리덕스의 복잡함과 너무 많은 보일러 플레이트를 극복하기 위해 나온 전역 상태관리 라이브러리로, 현재 낮은 러닝커브로 많이 사랑받고 있다. 그에 맞게 설치와 사용법도 무척 간단하다. 1. 설치npm i zustand 2. 사용법import { create } from 'zustand'// 함수를 넣어 객체를 리턴const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() { const { count, inc } = useStore() return ( {count} one up ..

이번 과제는 일부러 props-drilling → context api → redux 순으로 점차 리팩토링을 해나가는 과제였다. 전역 상태 라이브러리로 Zustand만 써보았기 때문에 리팩토링을 하면서 context api나 redux 사용법을 익혀나갈 수 있었다, 특히나 컴포넌트나 파일 구조를 더 깔끔하게 짜고 싶어 이리저리 많이 찾아보았는데 그렇게 썩 만족스러운 로직이 구현된 것 같지 않다. 그래도 처음 과제를 받고 어떻게 이걸 구현하지 싶어 열심히 노력한 부분도, 과제가 끝나고 보면 아쉬움이 남는 걸 보니 프로젝트를 통해 어느 정도 보는 시야가 넓어진 것 같은 느낌이다! 이번 주차는 10일동안 useEffect, useCallback, useMemo 같은 hook 뿐만 아니라 router v6에 r..

내배캠 챌린지반 과제로 데스크톱 메모앱을 보고 만든 프로젝트를 최대한 똑같이 만들어보는 걸 내주셨다.메모 앱의 기능 구현 자체는 어떻게 동작할지 보자마자 감은 왔는데, 처음 써보는 redux와 함께하니 어떤 방식으로 상태를 넘겨받고 사용할지 조금 헤맸다. 그래도 이번 프로젝트 덕분에 막막했던 리덕스 사용법을 어느 정도 익힐 수 있어서 다행이다. 전에 Zustand를 써본 경험이 있어서 그런지, 상태관리 하나하는데 만들어야 할 기본 보일러 플레이트 구조가 더욱 복잡하게 느껴졌고 '이래서 개발자들이 다른 전역상태 라이브러리를 따로 만들었겠구나란 생각이 절도 들었다. Styled-components도 제대로 써본 경험은 많지 않은데 이번 기회를 통해 많이~많이 써보았다. 태그에 ID를 쓸지, Class를 쓸지..

리액트 숙련주차 강의를 열심히 듣고, 과제에 열심히 적용한 날. 전체적인 UI를 구성했기 때문에 특별한 트러블 슈팅도 별로 없었다.  ※ 테두리, 사이즈 재조절, 클릭시 border 없애는 방법 // css 내 적용 border: none; resize: none; outline: none;  ※ Context API가 있음에도 Redux로 Global state를 관리하면 좋은 이유(강의 내용)1.성능 최적화 => Context Api는 Provider 하위의 모든 컴포넌트를 리렌더링 하게 할 수 있습니다. 상태가 변경될 때마다 관련된 모든 컴포넌트가 불필요하게 업데이트 되는 것을 막기 위해 복잡한 최적화가 필요합니다. 반면, Redux는 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트할 ..

키워드가 없이 변수에 값이 할당된 아래의 실행 결과는 어떻게 될까?function foo() { x = 100;}foo();console.log(x) 자바스크립트 엔진은 x 변수가 어디서 선언되었는지 스코프 체인을 통해 검색을 시작foo 함수 내부에서 x 변수의 선언을 검색하나 없음따라서 foo 함수 컨텍스트의 상위 스코프인 전역 스코프에서 x 변수의 선언을 검색  → 전역 스코프에도 없음어느 곳에서도 x 변수를 찾을 수 없어 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성함이와 같은 상황에서 console.log의 결과 값으로 에러를 예측하기 쉽지만, 자바스크립트는 키워드가 없는 선언문도 암묵적으로 전역 객체의 프로퍼티로써 동적 ..