0hyeon

1.this 다른 객체 지향 언어에서는 아래와 같이 객체를 "선언", "정의" 해두고, 해당하는 객체의 인스턴스('개체')를 만들어 사용 미래에 해당 객체의 개체가 될 아이들, 즉 "상황에 따라 그때 그때 달라질 뭔가를 가르키기 위해서 사용하고 있다. 자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 함께 결정 실행 컨텍스트는 함수를 호출 할 때 생성되므로, this는 함수를 "호출" 할 때 결정된다고 할 수 있다. 2.콜백함수 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하며, 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수 말이 어렵다. 함수안에 인자로 함수를 전달하는 함수 2-1.콜백함수 사용은 추상화에 특화 함수형 프로그래밍방법 // functions.. fun..

1.데이터타입 1-1.변수와 상수 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 특)변하는값 let user = 'John'; let age = 25; let message = 'Hello'; 상수는 const로 선언한 변수를 '상수(constant)'라고 부릅니다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생합니다. const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // error, can't reassign the constant! 1-2.바람직한 변수명 userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하기 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄..

1.자바스크립트 기본 1-1. Hello World 스크립트 후 HTML4에선 스크립트에 type을 명시하는 것이 필수였습니다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 외부스크립트 더보기 주의: HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점 존재 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와..

문제점 객체에 내멋대로 값을 복사하여 카테고리 값을 바꿔줬는데 복사를 당한 객체와, 복사된 객체가 값이 다바뀌어버렸다. 시도해본것들 복사당한 객체를 다시 바꿔줬다. 그랬더니 복사한 객체도 건들지 않았음에도 바뀌는것이 아닌가 해결 객체는 참조형 데이터로 특징이 가변성이 특징정이기 때문에 복사시 복사하려는 데이터묶음이 가르키는 주솟값을 복사하기 때문에 다바뀐다고 한다... 구글링을 통해 방법을 몇가지 찾았다 방법1. for문을 통한 복사 방법2 Object.assign( {} , 객체의변수명 ) 방법3. 스프레드 연산자를 통한 복사 let 복사하려는새로운객체 = {...복사당하는객체} 방법1,2,3번을 알아보며 깊은 복사와 얕은 복사의 개념도 알았다. 위 1,2,3번은 얕은복사를 한것이고 객체내에 또 객체..

1. draft.js npm install draft-js react react-dom # 또는 교대로 원사 추가 초안 js 반응 react-dom 2. slate.js yarn add slate slate-react (You'll also need to be sure to install Slate's peer dependencies:) yarn add react react-dom 3.tiptab $ npm install --save react-draft-wysiwyg draft-js

가장먼저 Page폴더에서 App 폴더 영역으로 작업 디렉토리가 변경되었다 현재는 12와 13 버전 혼용사용이 가능하며 App 폴더에서 테스트로 작업을 희망하면, next.confing.js 에서 const nextConfig = { reactStrictMode: true, swcMinify: true, experimental:{appDir: true} } 다음과 같이 세팅을 해줘야 한다.

$ npm install -g n $ npm cache clean -f sudo n stable installed 와 active 경로가 다를경우 $ sudo n lts (나의 경우 권한을 요청하길래 sudo로 진행) installed된 노드 위치와 active된 노드의 위치가 다르기 때문에 symbolic link를 변경해주어야한다 아래의 명령어를 이용해 installed와 active의 symbolic link를 일치 시켜줘야 한다

프로젝트 배포를 하기에 앞서 PlanetScale에서 db공간을 빌려 저장을 했었다. 이미 로컬에서 작업을 할때부터 배포가 되어있는 상황이지만, 배포후 일반적으로 db를 빌려주는 플랫폼의 과금방식은 쿼리의 row를 많이읽을수록 과금을 많이하기 때문에 일종의 스키마 리팩토링을 진행하고자한다. (planetScale에서는 찾고자하는 where값을 외부키로 받아들이지 않기 때문에 @@index를 통하여 column에 automatic index가 없다고함) 이는 유저가 등록한 상품을 찾을때 등록된 상품 전체를 찾을때까지 읽는 방식의 느리고 많은비용의 방식과 비교하여 등록된 상품이 천개 , 만개 넘어가면서 비효율적이게 되는데, Prisma의 @@index 인수를 사용하여 해당 검색하고자하는 필드에 인덱스를 정의..

페이지를 렌더링할수있는 첫번째 방법은 (axios fetch react-query useSWR 등등..) Next.js가 제공하는 기본기능컴포넌트 페이지 -> HTML로 변환 -> 리액트가 데이터(글,이미지) 데이터를 불러오기 csr useSWR 클라이언트에서 데이터를 불러옴 장점 : 유저입장에서 페이지를 접속할때 조금이나마 페이지 정보를 볼수있다, 페이지의 정보의 일부를 즉시볼수있다. 단점 : ssr에 비해 로딩이 다소 느리고, seo시 구글,네이버 등등 로봇이 제대로 페이지를 읽을수 없어 마케팅시 불리함 두번째방법은 getServersideprops함수를 이용하는방법ssr로 서버단에서 데이터를 불러오는 방법 export async function getServerSideProps() { console..

명령팔레트 setting.json에서 아래와같이 추가해주면 보인다 ! "editor.quickSuggestions": { "strings": true }, "css.validate": false, "editor.inlineSuggest.enabled": true 출처 : https://javascript.plainenglish.io/how-to-fix-tailwind-css-intellisense-in-visual-studio-code-3dede794df21