모델 정의 스키마 정의라고 생각함 게시물을 생성한다고 했을때, 게시물에 필요한 데이터가 어떤것이 필요한지를 정의해주기 위해서 게시물의 모델을 만들어줘야한다. 예를들면 ID, 이름, 설명 등등.. board.model.ts를 생성한다. 모델 정의할 때 다음 두가지로 정의해 줄 수 있다. interface정의 : 변수의 타입만을 정의한다. classes정의 : 변수의 타입도 체크하고 인스턴스 또한 생성할 수 있다. 다음은 interface로 정의하는 예시임 /board/board.modal.ts enum은 타입스크립트 열거형 방식으로 PUBLIC과 PRIVATE 둘중 하나만 오게끔 하기위해서 사용해줬다. 이렇게 정의된 모델은 boards.service.ts 파일에서 사용이 가능하다 컨트롤러에 있는 코드에도 Board모델 타입을 정의해 줄 수 있다. 모델 정의 모델 정의할 때

Providers란? 프로바이더는 Nest의 기본개념이다. 대부분의 기본 Nest 클래스는 서비스(Service), 레파지토리, 팩토리, 헬퍼등의 프로바이더로 취급될 수 있다. 프로바이더의 주요 아이디어는 할 수 있다는 점이다. 즉 객체는 서로 다양한 관계를 만들 수 있다는 것을 의미한다. 객체의 인스턴스를 연결하는 기능은 대부분 Nest 런타임 시스템에 위임될 수 있다. 여기까지가 Nest의 공식 문서에 나와있는 내용이다. 즉, 사진속 컨트롤A안에 모든걸 구현할 수 없으니(코드양이 많아지니깐) 서비스A,서비스B,서비스C로 나누고 컨트롤러 A에 넣는 을 사용한다. 여기선 서비스를 예시로 두었지만, 레포지토리, 팩토리, 헬퍼 등도 취급될 수 있다. Service란? 서비스는 소프트웨어 개발내의 공통 개념이며, NestJS, Javascript에서만 쓰이는 개념이 아님 데코레이터로 감싸져서 모듈에 제공되며, 이 서비스 인스턴스는 애플리케이션 전체에서 사용 될 수 있다. 서비스…

Controller란? 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 로직을 뜻한다. 컨트롤러는 데코레이터로 클래스를 데코레이션 하여 정의한다. Handler란? 핸들러는 @Get, @Post, @Delete 등과 같은 데코레이터로 장식 된 컨트롤러 클래스 내의 단순한 메서드를 칭한다. Board Controller 생성하기 *부분은 컨트롤러의 이름을 명시해준것 —no-spec는 test파일을 생성하지 않는것을 명시해준것인데, 원래는 생성을해준다. 위의 명령어를 입력하면 자동으로 Board Module에 컨트롤러를 연결시켜준다 CLI로 명령어 입력시 순서 즉 CLI로(nest g …) 입력시 다음과 같은 순서로 만들어진다. cli는 먼저 boards라는 폴더를 찾는다. boards폴더 안에 controller파일을 생성한다. boards폴더 안에 modules 파일을 찾는다. modules 파일 안에 controller을 등록해준다. Controller란? …

Nest란? 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기위한 프레임 워크라고한다. 자바스크립트를 사용하고, 타입스크립트로 빌드되고 완벽하게 지원하기까지 한다. express를 토대로 만들어졌다. 확장성이 좋다. 시작 NestJS를 이용해서 프로젝트를 시작할 때 Nest CLI를 이용하면 간단하게 프로젝트를 시작할 수 있다고한다. 아래의 명령어를 입력하면, 새 플젝 디렉터리가 생성되고 초기 핵심 Nest 파일 및 지원 모듈로 디렉터리가 채워져 프로젝트의 기본 구조가 생성이된다. Nest란? 시작

Nest JS 모듈이란? NestJS에서 모듈이란, 어플리케이션을 구성하는 빌딩 블록을 뜻하며, 각각의 모듈을 모아 어플리케이션을 실행하고, Controller, Service등을 묶어 하나의 단위로 구성하여 애플리케이션의 구조를 모듈화한다. 모듈은 @Module() 데코레이터가 달린 클래스이다. @Module() 데코레이터는 NestJS가 애플리케이션 구조를 구성하는데 사용하는 를 제공해주는 역할을 해주고, 각 응용 프로그램엔 하나 이상의 모듈(루트 모듈)이 있다. (루트 모듈은 Nest가 사용하는 시작점임) 모듈은.. 모듈은 밀접하게 관련된 기능 집합으로 구성 요소를 구성하는 효과적인 방법이다. 같은 기능에 해당하는 것들은 하나의 모듈 폴더에 넣어서 사용한다. (예를들면, UserService,UserEntity 다 같은 기능이라 UserModule안에 넣음) 모듈은 기본적으로 싱글 톤이므로 여러 모듈간에 쉽게 공급자의 동일한 인스턴스를 공유 할 수 있다. 모듈 생…

개념 EC2란 Elastic Compute Cloud의 약자다. 클라우드라는 공간에서 크기가 유연하게 변경되는 공간을 제공해준다. 다양한 지불 방법 On-demand : 시간 단위로 가격이 고정되어 있다. 오랜시간동안 선불을 내지 않고 최소한의 비용을 지불하여 EC2인스턴스를 사용하고 싶을때 앱/프로그램 개발시 최초로 EC2인스턴스에 deploy할 때 유용하다. 개발시작과 끝을 알 수 없는 경우에 사용한다. 단기간에 끝낼 수 있는 부분에서 주로 사용이 된다. Reserved : 한정된 EC2 용량 사용 가능, 1-3년동안 시간별로 할인 적용 받을 수 있다. 개발시작과 끝을 알 수 있는 경우에 사용한다. 선불로 인한 컴퓨터 비용 대폭 감소 개발 요구 사항이 자주 바뀌지않고, 안정적이고 개발 시간이 예측가능하다면 추천함 크기를 늘이고 줄이는 기능이 없다. Spot : 입찰 가격 적용. 가장 큰 할인률을 적용받으며 특히 인스턴스의 시작과 끝기간이 전혀 중요하지 않을때 유용함 단순…

개념 개발환경 (Staging or Develop)에서 실제환경 (Production)으로 빌드하기전 IAM 정책이 잘 작동되는지 테스트하기 위해서 사용한다. IAM과 관련된 문제들을 디버깅하기에 최적화된 툴이다. (이미 실제로 유저에 부여된 다양한 정책들도 테스트 가능함) 즉, 특정 서비스를 사용하는데 제약이 있는지, 회사에서 설정한 가이드라인에 잘 맞춰져있는지, 알맞은 정책을 특정 개발자들에게 올바른 정의가 내려져있는지 확인하는 디버깅 툴이고, 이렇게 생겼다.. 개념

IAM이란? 참고로, IAM은 지역 설정이 필요없다. dentity and ccess anagement의 약자로, 유저를 관리하고 접근 레벨 및 권한에 대한 관리를 가능하게 해준다. 기능 접근키(Access Key), 비밀키(Secret Access Key) 매우 세밀한 접근 권한 부여 가능(Granular Permission) 비밀번호를 수시로 변경 가능케 해줌 한달 또는 분기별로 모든 aws계정들의 비밀번호를 강제로 변경하게함 Multi-Factor Authentication(다중 인증) 가능 다른 Account를 사용해 보안이 더 두터워지게 만듦(ex:페이스북,구글) 용어 설명 그룹 (Group): 하나의 그룹은 하나 혹은 다수의 User가 존재할 수 있다. 유저 (User) 역할 (Role): 하나 혹은 다수의 정책을 지정해줄 수 있다. 유저마다 다양한 정책을 부여할 수 있다. 정책 (Policy): JSON형태로 되어있는 Document를 가르키며, 세밀한 접근 권한을 일…

AWS 간단히 알아보기 As You Pay Go 서비스 Free-tier 서비스 루트(Root) 사용자 As You Pay Go 서비스? AWS는, 우리가 서비스를 사용하는 만큼 해당하는 비용을 지불한다. Free-tire 서비스 무료 서비스가 있다. 학습하는용도로 적당함 루트(Root) 사용자 처음 계정을 만들면 루트유저가 된다. 그 계정안에서 다른 유저를 생성하고,지울 수 있고, 적절한 권한부여 및 기타 기능이 있다. As You Pay Go 서비스? Free-tire 서비스 루트(Root) 사용자

1 Supabase 회원가입 및 프로젝트 생성 Supabase에서 회원가입후 프로젝트를 생성한다. 위의 사진처럼 데이터베이스 패스워드를 작성후, Region은 한국 서울로해주자 이후 프로젝트가 생성되면 project setting 탭에서 URI를 복사해서 아래에서 prisma세팅할 때 붙여넣어주자. 2 prisma init 및 supabase url연결 여기까지 하면 prisma/schema.prisma 파일이 생성되고, .env 파일에 자동으로 이 추가된다. 초기에 생성된 .env파일의 DATABASE_URL은 prisma에서 임의로 설정해준것이기 때문에, 이 경로를 위의 에서 카피한 Supabase의 URI를 넣어주고 부분엔 에서 설정했던 데이터베이스 패스워드를 넣어주자 를 해서 localhost:5555에서 화면이 잘나오면 세팅은 잘 끝난거다. 에러가 나오는 이유는 아직 데이터베이스 모델링을 안해줬기 때문인데 잘된거임 3 prisma schema 생성 및 …

Prisma를 구성하는 대표적인 요소들 Prisma Client: Node.js & TypeScript용 쿼리 작성 클라이언트이다. Prisma Migrate: 마이그레이션 시스템을 사용가능 Prisma Studio: 데이터베이스의 데이터를 보고 편집하는 GUI 툴 제공함 Prisma 장점 개발자가 직접 SQL문을 작성하지 않아도, 데이터베이스와 상호작용할 수 있는 ORM 타 ORM과는 달리, 자체적인 스키마 문법을 제공하여 직접 DB마이그레이션, 클라이언트 코드 생성 등의 작업이 가능하다. CLI,Prisma Studio등 편리한 GUI도구를 제공하여 생산성 향상 즉 개발자 입장에서 DB작성을위한 코드작성을 줄일 수 있고 스키마 파일 하나만 잘 관리하면 되기 때문에 유지보수가 수월하다. Prisma 기능 Prisma Client: 데이터베이스와 상호 작용하기 위한 자바스크립트 코드를 자동으로 생성해주는 도구. 스키마 정의: 데이터베이스 스키마를 정의하고 관리해줌. DB 마이그레이…

Nextjs Script컴포넌트란? 서버 및 클라이언트 모두에서 JavaScript 코드를 실행하고 데이터를 초기화하는데 사용되는 컴포넌트다. (SSR, CSR 모두 적용 가능함) 서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라이언트 측에서 라우팅 또는 페이지 진입시 특정 작업을 수행 할 수 있음 : 페이지가 서버에서 처음 렌더링 될 때 데이터 초기화하는데 사용한다. : 페이지가 클라이언트에서 로딩될 때 특정 작업 수행하도록 설정 할 수 있다. 사용예시 이러면 저 script는 Dashboard라는 페이지 진입시 로드됨 주요 속성 정리 src : 로드할 스크립트 파일 경로 지정 strategy : 스크립트의 로드 전략 설정 (언제 로드/실행 하는지) onLoad : 스크립트가 로드되면 실행할 함수 지정 onReady : 스크립트가 준비되면 실행할 함수 지정 onError : 스크립트 로드 중에 오류가 발생할 때 실행할 함수 지정 Script: str…

Next.js 13 이전버전임 getStaticProps 을 위한 데이터 가져오기 함수다. 런타임이 아닌, 빌드(build)타임에서만 실행이 되므로, 변동이 거의 없는 데이터 대상으로만 적용하는게 좋다. Ex) FAQ 글 목록리스트 등등.. getStaticPaths 를 위한 정적 경로 생성 함수다. 동적으로 생성되는 페이지를 사전 렌더링할 때 사용한다. Ex) 하나의 FAQ 데이터(id:1)가 존재하면, faqs/1 라는 경로를 빌드 타임에 미리 사전 렌더링 할 수 있다. getServerSideProps 서버 사이드 렌더링을 위한 데이터 가져오기 함수 매 요청마다 데이터를 서버에서 가져온다 자주 업데이트 되는 posts 데이터들을 외부 API로부터 fetch해서 사전 렌더링 하고 싶을 때 사용함 페이지 라우팅 페이지 경로 설정은 pages 디렉토리 내에서 자동으로 처리된다. pages/about.js는 ‘/about’ 경로와 연결됨 useRouter 페이지 내에서 라우팅을 조작…

CSR 클라이언트 사이드 렌더링 (CSR): 클라이언트 측에서 페이지 렌더링을 수행하는 방식이다. 사용자의 브라우저에서 Javascript를 사용해 페이지를 동적으로 생성해준다. 서버는 빈 HTML 페이지만 제공하고 이후 데이터와 페이지를 렌더링하는 역할은 클라이언트가 수행한다. 작동방식 사용자가 새로운 사이트를 요청하면, 서버에서 빈 HTML 파일을 제공해주고, 브라우저가 JS파일을 다운로드한다. 이후 브라우저가 JS실행을 함 SSR 서버 사이드 렌더링(SSR): 서버에서 페이지를 미리 생성한뒤, 사용자에게 페이지를 렌더링 하는 방식 사용자가 페이지에 접속할 때 서버에서 미리 HTML을 생성하고 클라이언트로 보낸다. 사용자에게 초기 내용을 빠르게 표시하고 검색 엔진 최적화(SEO)를 개선하는데 도움을 준다. 작동방식 사용자가 새로운 사이트를 요청한다. 서버에서 미리 생성된 HTML 파일을 제공함 브라우저가 JS파일을 다운로드하면 브라우저가 JS를 실행한다. SSG 정적 사이트 생…

Tailwind 재사용하기 이렇게 키워드를 이용해서 설정후 이렇게 사용해줄 수 있다. Adding Custom Styles 파일을 통해서 사용자 정의 스타일 및 커스텀 클래스를 추가 할 수 있다. 이제 bg-blue를 사용해주면 기존 tailwind 색상이아닌,색상으로 나오게된다. Functions & Directives Tailwind의 함수와 디렉티브 사용으로 Tailwind를 더욱 확장성있게 사용할 수 있고, 커스텀마이징 할 수있다. Functions theme(): 테마 값을 동적으로 읽음 screen(): 미디어쿼리를 동적으로 생성할 수 있음 Directives 디렉티브를 사용해서 조건에 따라 요소의 스타일을 조절할 수 있다. @tailwind: HTML 요소에 Tailwind CSS클래스를 동적으로 추가 가능하다. @layer: CSS 규칙을 레이어별로 구성할 수 있게 해준다. @apply: CSS클래스를 동적으로 적용할 수 있다. @config: Tailwind…

Prisma 데이터 베이스 쿼리 및 ORM (Object-Relational-Mapping) 작업을 단순화 하고개발 생산성을 높이는데 도움을 주는 ORM 프레임워크다. 데이터 모델링, ORM 기능, 타입 안전성, 데이터베이스 마이그레이션, 쿼리 생성 등을 지원한다. 개발 생산성 향상, 타입 안전성, 다양한 데이터 베이스를 지원한다. SQL 쿼리를 직접 작성하는 대신 자바스크립트 코드로 쿼리를 작성할 수 있게 해준다. 특징 타입 세이프 쿼리: 쿼리를 자바스크립트 코드로 작성하므로 타입 에러를 사전에 방지함 자동 마이그레이션: 데이터베이스 스키마 변경을 감지하고 자동으로 마이그레이션을 처리하여 스키마 관리를 간소화함 강력한 문법: 복잡한 쿼리 및 데이터베이스 관계를 다루기 위한 강력한 문법을 제공함 Supabase 오픈소스 서버리스 백엔드 플랫폼으로, 데이터베이스, 인증(사용자 등록, 로그인, 비밀번호 재설정 기타 등등), 스토리지(파일 및 미디어 저장 관리)등을 통합적으로 제공한다.…

Next.js 개념 & 장점 서버사이드 렌더링(SSR)을 제공하는 라우팅 시스템을 내장하고 있고, SEO에도 우수하다 SSR 뿐만 아니라, 정적 사이트 생성 (SSG)를 지원하여 사전에 페이지를 _미리 렌더링과 캐싱이 가능하다. _(각 페이지들을 사전에 미리 HTML 문서로 생성해서 갖고 있음) 성능 최적화: SSR 및 SSG를 사용하여 초기 로딩속도 개선 및 성능 최적화에 용이함 SEO 최적화: SSR로 검색엔진 최적화 용이, 페이지 제목, 메타 태그 설정 용이함 확장성: 기존 라이트 앱을 쉽게 마이그레이션 가능하고, 다양한 데이터 fetching 및 라이브러리 통합이 가능함 거대한 커뮤니티: 큰 커뮤니티와 다양한 플러그인 및 라이브러리 지원 보안: CSRF 및 XSS 공격을 보호하는 내장된 보안 기능 Next.js 기능 서버사이드 렌더링(SSR): 페이지를 서버에서 생성하고 클라이언트에 전송하여 초기 속도를 개선. SEO에도 유리하다. 정적 사이트 생성 (SSG): 빌드 시…

Memoization useMemo와 useCallback은 메모제이션된 값 혹은 함수를 반환하기 때문에 메모제이션 개념을 먼저 알고가자. 메모제이션이란 하는 프로그래밍 기법이다. 다음과 같은 장점이있다. 중복 연산을 피할 수 있다. 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. useMemo 메모제이션된 을 반환하는 함수다. 불필요한 연산을 방지해준다. 값이 변하면 ()=>fn 함수를 실행하고, 그 함수의 반환값을 반환 해준다. deps dependency의 약자로, 의존성을 뜻한다. useMemo가 이 deps 의존하고 있다는것을 뜻한다. useCallback 메모제이션된 를 반환해준다. 자식 컴포넌트에 props로 함수를 전달할 때 사용된다. 외부에서 값을 가져오는 api를 호출할 때 사용된다. 자식 컴포넌트에 props로 함수를 전달할 때 사용하는 경우 위의 코드를 useCallback를 사용해서 onSave라는 함수를 재사용하는 것으로 자식 컴…

어떤 방식인가? 1번은 유저 document에 팔로잉/팔로워를 배열로 두고 그 안에 다른 사용자의 id를 넣는 구조이다. 단점 그런데 이렇게하면 앱이 커지면 관리에 어려움이있고, 확장하기엔 어려운 데이터 구조라고 한다. 솔루션 그래서 2번 방식처럼 한다. 2번 방식은 팔로잉/팔로워 목록을 별도의 컬렉션에 저장하는 방식이다. 유저1이 유저2를 팔로우한 경우 팔로잉이란 컬렉션이 생성되고, 마찬가지로 팔로워 컬렉션이 생성되고, 팔로우 당한 유저2가 주체가되고, 그 안에 유저2를 팔로우한 유저가 들어가는 방식이다.

화살표 함수의 특징 화살표 함수에는 ‘this’가 없다. 화살표 함수는 this를 내부가 아닌, 외부에서 가져온다. 그렇기 때문에 다음과 같은 코드를 작성할 수 있다. 화살표 함수는 new와 함께 실행할 수 없다. 가 없기때문에, 화살표함수는 생성자 함수로 사용할 수 없다는 제약이 있다. arguments가 없다. arguments란? 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체를 arguments라고 한다. 참조 모던 자바스크립트 화살표 함수에는 ‘this’가 없다. 화살표 함수는 new와 함께 실행할 수 없다. arguments가 없다. 참조

계속 사용법 까먹어서 쓰는 글 Vue에서 하위컴포넌트에서 상위컴포넌트로 이벤트를 전파 할 수 있는데, 이것을 대충 커스텀 이벤트라고한다. 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전파 대충 하위컴포넌트라고 생각 대충 상위컴포넌트 이렇게 해주면 상위컴포넌트의 데이터의 에 값이 저장된다. 로 상위컴포넌트에 전달할 이벤트명을 보내주면된다. 사용은 상위컴포넌트에서 이런식으로 @작명한이벤트명으로 연결해주면 된다. 출처 코딩애플 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전파

출처 코딩애플 개념 특정 URL로 접속할 때 코드를 실행하고 싶은 경우 사용한다. 예를들면 로그인 유무에따른 페이지를 보여줘야할 때 를 사용하면 된다. 리액트로 따지면 hook같은거라고 생각하자. 사용법 파라미터는 두세개 작명 가능하다. 첫 파라미터는 목적지 페이지, 둘째 파라미터는 출발 페이지다. 라는 변수랑 똑같이 이용이 가능하다. 예를들면 하면 전체 경로를 알려주고,하면 id파라미터를 알려준다. return false는 라우팅을 중단시킨다. return이 없으면 원래의 route인 /hello로 이동시켜준다. 여러개의 route에 navigation guard를 추가하고 싶으면? 혹은 를 사용하자. 라우팅 하고나서 뭔가 실행하고 싶으면 를 사용하면 된다. Vue 컴포넌트 안에서도 navigation guard사용가능 리액트로 치면 useEffect()같다. created(), mounted() 이런거랑 비슷하게 활용이 가능하다. 위의 두 코드를 쓰는 위치에다가 쓰면 된다.…

출처 코딩애플 vue에서 애니메이션 주는 방법이 두가지가 있다고 한다. css로 애니메이션 만들기 첫번째 방법으로는, 애니메이션 시작 전 class를 디자인하고, 애니메이션 동작 후 class를 디자인한다. 원할 때 애니메이션 동작 후 class를 부착하면된다. 코드로 예시를 들면 이렇다. div태그에 class명을 start로 붙여놓고, 클릭했을때 end class를 붙이고, 떼는건데 vue에서는 조건문으로 이런식으로 코드를 작성한다. 데이터 바인딩과 비슷하게, 클래스 바인딩을 할 수있다. 모달창열렸니 이 부분이 true라면 class명에 end가 부착이된다. 더 간단하게 이용하기 두번째 방법으로 vue에서 제공하는 태그를 이용하면 된다. 태그의 name이름은 아무렇게나 작명가능한데, 위의예시 코드에서는 fade로 이름을 주었다. 그러면 css코드로 fade-어쩌구-to 이런식으로 지어주면된다. css로 애니메이션 만들기 더 간단하게 이용하기

프로그래머스 FE채용과제로 배우는 자바스크립트 강의중, 테스트를 다시 보면서 공부하던중 제가 직접 구현한 코드입니다. 구현 과제 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만드는거였다. 나는 여기서 추가로 로컬스토리지를 추가하여, 처음 사용자가 웹에 접속하면 OS기반으로 다크모드를 적용시켜주고, 사용자가 토글버튼을 눌러서 다크모드의 활성화 여부를 로컬스토리지에 적용시켜, 다음 접속시 사용자가 설정한 값으로 적용이되게끔 사용자 편의성 측면에서 문제를 접근하여 추가로 구현을 해주었다. 구현 코드 사용자가 현재 웹 사이트에서 설정한 테마, 현재 사용자의 os테마 각각의 변수를 설정후 값을 대입 시켜주고, 그 값들을 조건문을 사용하여 값을 변경해주었다. 전체 코드 구현 과제 구현 코드 전체 코드

옛 블로그입니다. 24.3.1..현재기준으로 블로그 옮기는중입니다.

부분만이라도 읽어보세요! 클로저 핵심 요약 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미한다. 자바스크립트에선 모든 함수가 자연스럽게 클로저가 된다. (예외가 있긴함) 클로저의 개념 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공하는 개념이다. 자바스크립트에서 클로저는 함수 생성 시 - 그렇기 때문에 다음은 mdn에서 긁어온 코드이다. 어휘적 범위 지정(렉시컬 스코프)환경을 고려해서 살펴보면.. 위의코드를 간단하게 풀어보자면, 중첩함수인 내부엔 자신만의 지역변수가 없지만 내부 함수에서 외부 함수에 접근할 수 있기 때문에 함수에 선언된 지역 변수인 name에 접근할 수 있는 것 이다. 이렇게 내부에서 외부에 접근할 수 있는것. 이것을 의 개념이다. 조금 더 깊숙히 속담에 호랑이를 잡기 위해선 호랑이 굴로 들어가야한다고 한다. 클로저라는 호랑이를 잡기위해 호랑이 굴로 들어가보자. 왜 그런걸까? 이러한 결과값에 대해서 mdn에서는 자바스크…

12월 4일 팀 프로젝트 작업과 모던 자바스크립트를 공부했다. 제품 상세페이지 캐러셀을 mui에 내장되어있는거를 사용하지않고, Swiper 라이브러리를 사용하기로 해서 적용시켜줬다. 금방 적용시킬줄 알았는데 생각보다 시간을 잡아먹었다. 이제 프로그래스바를 만들면되는데 내장되어있는거를 사용하여 구현은 했으나, 디자인과는 좀 레이아웃이 달라서 이 부분을 수정하는데에 또 시간이 들것같다. 모던 자바스크립트 파트를 공부했다. 스프레드 문법으로 배열을 복사하게되면, 참조하는 값이 달라진다.(포인터가 달라짐) 12월 5일 모던자바스크립트 변수의 유효범위와 클로저와 함수의 렉시컬환경및변수와 [[Environment]]의 연관성 학습 및 정리 12월 6일 모던 자바스크립트 파트 공부 팀 프로젝트에서 새롭게 쓰이는 스토리북 공부…(애먹는중) 스토리북의 개념은 알게되었다. 공통컴포넌트들을 스토리북과 연동시키게되면 좀 더 나은 범용성이높은 컴포넌트로 리팩토링되는것 같다는걸 알게됬다. 카테고리 컴포…

이 게시글은 이곳을 참고하여 요약하여 작성하였습니다. MUI MUI는 리액트 라이브러리 중 하나로 MUI는 구글의 디자인 철학인 을 구현한 자바스크립트 라이브러리입니다. 실은 materialUI라고 불리던 MUI는 5버전으로 리뉴얼 되면서 기존의 materialUI라는 이름을 버리고 MUI라는 이름으로 바뀌었다고 합니다. mui의 sx와 inline style의 차이점 원문 게시글을 요약하는 게시글이기 때문에 여기부턴 편하게 글을 작성하겠습니다. inline style html을 반환하는 jsx 문법은 react가 변환할 때 모든 속성이 props 객체의 일부가 된다. 따라서 랜더링때마다 style 객체가 계산되어 성능과 재사용 부분에서 추천하지 않는다. Mui sx sx의 사용예시는 inline style과 비슷하다. styled-component화 되어 적용된다. mui의 theme를 기반으로 css를 적용할 수 있다. (다크모드,미디어 쿼리,css단축약어 적용 등..) 재사…

11월 22일 팀 프로젝트 작업 새롭게 디자인된 제품 상세페이지 css 작업 로딩때 스켈레톤 이미지 보여주는 작업 11월 23일 ~ 11월 24일 팀 프로젝트 작업 새롭게 디자인된 제품 상세페이지 css 작업을 했다. (1200px 사이즈로 리디자인됨) 리뷰 컴포넌트 css 작업 제품 상세페이지에 들어가는 리뷰 컴포넌트가 있는데, 고민을 좀 많이했다. 메인 페이지에 있는 리뷰와 제품 상세페이지 리뷰 UI가 겹쳐서 공통컴포넌트로 만들까 고민을했었는데 프론트 리더분께서 공통 컴포넌트 기준은 데이터 기준으로 하는게 나을거라고하셔서 그 말을 따랐다. 그럼 여기서 다시 고민이 되는게, 기존 작업자가 해놓은 리뷰 UI를 그대로 가져다 쓰느냐, 아니면 내가 다시 작업해서 쓰느냐인데 많은 고민끝에 후자로 결정했다. 11월 25일 휴식 11월 26일 팀 프로젝트 작업 팀 프로젝트에서 사용하는 Flex-box 컴포넌트를 리팩토링 했다. 기존에 사용하던 스타일 컴포넌트인 flex-box는 인라인…

11월7일 팀 프로젝트 - 제품 상세페이지 css 작업 완료 프론트엔드 개발자 회의 각자 해야할 파트 상세하게 적기 (노션) 모던 자바스크립트 공부(객체: 기본 파트 공부완료) 가비지 컬렉션 : 눈에 보이지 않는 메모리 관리 수행 this: 화살표함수의 this와 메서드의 this는 동작방식이 다름 옵셔널 체이닝 ’?’: ?. 앞의 대상이 undefined나 null이면 평가를 멈추고 undefined을 반환한다. 모던 자바스크립트 공부(자료구조와 자료형 파트중에서 다음의 섹션들 공부) 원시값의 메서드 : 원시값의 종류는 string,number,bigint,boolean,symbol,null,undefined 등 총 일곱가지다. 숫자형 문자열 배열 : 배열의 끝부터 요소를 추가하고, 빼내는 push,pop 메서드와, 배열의 맨 앞에서부터 요소를 추가하고 빼내는 shift,unshift메서드가있다. 일반적으로 맨 끝에서부터 요소를 추가하고 뺴내주는 메서드가 더 빠르다. 11월7일…

23.11.01 모던 자바스크립트 공부/코드 품질 파트 완독 코드 품질 파트에서 섹션이 인상 깊었다. 변수명 혹은 함수명을 어떤식으로 작명하면 안되는지를 유머러스하게 설명하는데 재밌었다. 팀 프로젝트 개발 카테고리 공통 컴포넌트 개발 팀 프로젝트에서 내가 맡은 분야는 제품 리스트 페이지와, 제품 상세 페이지인데 제품 리스트 페이지에 들어가는 카테고리와 메인 페이지에 들어가는 카테고리가 겹치는것 같아서 카테고리 컴포넌트를 따로 만들어서 공통적으로 사용할 수 있게끔 해주었다. 제품 상세 페이지 UI 및 css 작업 오늘 작업한 페이지! 사진 코드 구조를 생각하면서 하다보니까 뭔가 작업속도가 더딘것 같다.. 23.11.02 팀 프로젝트 제품 상세페이지 UI 및 css 작업 향수의 특징을 react-apexcharts 라이브러리를 사용해 레이더 차트로 표시해주었다. 사용자가 좀 더 정확하게 향수의 특징을 볼 수 있도록 materialUI의 아코디언 메뉴를 사용해서 향수의 특징을 막대…

폴리-필(Polyfill) 이란? 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드를 의미한다. 즉,를 의미함. 바벨(babel) 트랜스파일러(transpiler)다. 모던 자바스크립트를 구 표준을 준수하는 코드로 변환. 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌. 주요역할 트랜스파일러: 코드를 재작성함 폴리필(core js, polyfill.io) 바벨과 폴리필의 차이 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없다. 이것을 매꾸기 위해 polyfill 을 사용한다. (Map, Promise, Set 등을 사용가능한 객체로 만들어준다) babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 de…

웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어 자바스크립트로 작성한 프로그램을 script 라고 불림 script는 웹페이지의 HTML 안에 작성 가능한데, 웹페이지를 불러올 때 script가 자동으로 실행 됨 자바스크립트 동작 환경 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행 할 수 있다. 이 외에도 자바스크립트 엔진이라 불리는 특별한 프로그램이 있는 모든 디바이스에서도 동작한다. 의 종류는 다양하다. ex) V8(Chrome과 Opera에서 사용), SpiderMonkey(Firefox에서 사용), IE 기타 등등.. 엔진은 어떻게 동작할까? 엔진의 기본 원리는 다음과 같다. 파싱: 엔진이 스크립트를 읽는 단계 컴파일: 읽어 들인 스크립트를 기계어로 전환하는 단계 실행: 기계어로 전환된 코드가 실행되는 단계, 기계어로 전환되었기에 실행 속도 빠름 자바스크립트의 강점 HTML/CSS와 완전히 통합할 수 있음 간단한 일은 간단하게 처리할 수 있게 해줌 모든 …

Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다. 기존에는 이렇게 사용했다면.. 기존에는 methods함수 안에 뭔가를 적고 사용하고 이런식의 방식이였다. 이런 방식, 기존방식을 Options API라고칭한다. Composition API created hook 임 setup setup(){}을 사용해주면 된다. 컴포넌트를 생성하기전에, 이 코드가 먼저 실행된다. 이곳에 데이터 생성 및 조작과 methods를 만들 수 있고, hook도 걸 수 있다. 거의 모든 기능개발을 setup 한 곳에서 가능하다. setup()안에서 데이터 생성 ref(데이터) setup()안에서 데이터 생성은 ref()를 사용하면 되고, return{}으로 그걸 리턴해주면된다. ref()에 데이터를 넣는 이유는, vue에서 데이터가 바뀌면 실시간으로 랜더링이 일어날 수 있는 이유는 바로 데이터 타입이 reference data type이기 때문인데, 이 타입을 감지해서 랜…

Vuex 데이터들을 한곳에 몰아넣고 사용함. 리액트로따지면 리덕스,리코일 등등 같음 단점으로는 코드가 길어질 수 있고, 간단한 수정기능을 만드는데도 코드가 되게 길어짐 그래서 데이터 관리를 많이 안하는 웹이면 를 사용하고, 간단한 웹은 를 사용하자! 사용 src/store.js (store라고 작명하는게 보통 관습임) src/main.js 참고로 전 게시글 mitt사용법의 main.js와 연동되어있다. 달라진점은 import store와, 밖에없다. 여기까지 세팅해주면 모든 컴포넌트에서 데이터(state)를 사용할 수 있다. 완전 리액트 리덕스같다. state를 이런식으로 바로 변경도 가능하다 근데 Vuex법칙중 하나가, 데이터를 직접 수정하면 안된다고한다. 데이터 추적이 어렵기때문에(리덕스도 그랬음) State 수정하는 법 Vuex의 데이터를 수정하려면 다음과 같은 방법을 따르면된다. store.js에 state수정 방법을 정의하고(mutations사용), store.j…

npm i mitt 라이브러리니깐 터미널로 설치해주자. Vuex의 개념까지 알고 다시와봤는데, mitt는 리액트로따지면 contextAPI같은거라고 생각함 사용 main.js 는 글로벌한 변수 보관함이라고 생각하자. 모든 컴포넌트에서 자주 사용하는 라이브러리가있다면 등록해서 사용할 수있다. 예를들면 이렇게 해주면 import axios 해 올 필요 없이 this.axios로 사용이 가능해진다. mitt라이브러리로 데이터를 전송할 때 다음과 같이 두가지만 기억하면된다. this.emitter.emit()로 전송하고, this.emitter.on()으로 수신한다. 이제 본격적으로 mitt라이브러리를 사용해서 컴포넌트간 데이터를 전송해보자. 이런식으로 데이터를 쏴주고, 으로 데이터를 수신해주면 된다. 중요한건 항상 mounted(){}안에서 사용해줘야한다. 그리고 개인적인 생각인데 이거 말고 이렇게 사용해주는 이유는.. 크게 상관은없지만 자바스크립트의 this때문이 아닌가 싶…

actions Vuex.. ajax하는 곳 혹은 오래걸리는 작업들에 사용 사용예시 핵심 키워드 안에서 store의 state를 가져다 쓰려면 를 사용해서 불러오자. mutations안의 함수를 사용할땐 이렇게! state를 수정할땐 를 사용하자! 그런데요 mutations에 사용해도되지않을까요? 예를들어 위와 같이 사용하면 안된다. 왜냐하면, 코딩애플은 예시를들어서 name과 age를 수정하는 ajax요청이 각각 필요한데 만약 3초이상 걸리는 코드들이라면 age가 먼저 바뀔수도있는등 나중에 의도치않은 버그가 생길 수 있다고하는데.. 이거야 어떻게든 해결할 수 있겠지만, 그 해결하기위해선 코드가 길어질수밖에 없는데 이 길어지는 코드때문인것 같다. 그래서 state를 수정하는 mutations 함수는 ajax코드를 넣지말고, 순수하게 state 변경만 하는 함수로 만들어두자. ajax코드는 안에 넣어주자. 출처: 코딩애플 actions 핵심 키워드 그런데요 mutation…

vue에는 computed()와, methods()가 존재한다. 어떤 차이점이있을까? computed 함수는 사용해도 실행되지않는다. 처음 실행하고 값을 간직한다.(캐싱같은거같음,줄로 계산결과 저장용 함수로 사용함) computed함수는 이름만 사용해서 불러와야한다. 소괄호() 사용을하면 안된다. 예를들면 이렇게 methods함수는 사용할 때마다 실행된다. mapState state 꺼내쓰는 코드가 짧아진다! computed:{}안에 작성하는게 일반적이다! 예를들면 이렇게.. 중요한점은, computed함수는 꼭 을 적어줘야한다. 축약 또한 가능하다. 출처: 코딩애플 vue에는 computed()와, methods()가 존재한다. 어떤 차이점이있을까? mapState