ScrollMagic 설치 npm install scrollmagic src/components/ScrollMagic.tsx import Magic from 'scrollmagic' import styled from 'styled-components' import { useEffect } from 'react' import classes from './ScrollMagic.module.css' const ScrollMagic = () => { const controller = new Magic.Controller() useEffect(() => { new Magic.Scene({ triggerElement: `.${classes.redBox}`, }) .setClassToggle(`.${classes.r..
반복문에 마다 ref 를 주고 싶을 때 어떻게 작업을 해야 할까? ( 오류코드 ) import { useRef } from 'react' import classes from './TopNavigator.module.css' const TopNavigator = () => { const menuRef = useRef(null) return ( {[0, 0, 0].map((_, index) => ( (menuRef.current[index] = e)} > 대메뉴{index + 1} 중메뉴1 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴2 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴3 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴4 소메뉴1 소메뉴2 소메뉴3 소메뉴4 소메뉴5 중메뉴5 소메뉴..
1. Next 프로젝트 생성 npx create-next-app@latest * 기본적인 프로젝트 명 , lint 사용 여부 등을 고른 후에 프로젝트를 만들어주자. 2. Eslint 와 Prettier 를 함께 사용하기 위해 다음을 설치합니다. npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier 3. 프로젝트 생성될 때 생긴 .eslintrc.json / js 를 작성합니다. module.exports = { env: { // 전역 변수 사용을 정의합니다. 추가하지 않으면 ESLint 규칙에 걸리게 됩니다. browser: true, es6: true, node: true, }, extends: [ 'eslint:re..
여기에 기본적인 자바스크립트 코드가 있습니다. function sayHello(message) { return "Hello" + message } let message = "something" sayHello(message) 타입스크립트는 Type 을 제공합니다. function sayHello(message: string) { return "Hello" + message } let message = "something" sayHello(message) 해당 코드가 이렇게 바뀌었습니다! 위의 코드를 좀 더 바꾸어보겠습니다. ( interface ) interface Message { title: string detail: string } function sayHello(message: Message) {..
프론트엔드 관점에서 상태 관리는 매우 중요하고 필수적이다. 리액트는 기본적으로 state, props 로 상태를 관리한다. 리액트의 데이터 흐름은 기본적으로 부모 -> 자식 이라는 흐름을 가지는데, 자식에서 부모의 상태를 바꾸려면 props 를 넘겨줘야한다. 이를 반복하다보면 props depth가 증가해 불필요한 리렌더링이 일어나 비효율적이다. 즉 상태관리 라이브러리를 사용하자! Redux * Redux는 store 에 모든 상태를 저장한다. store는 오직 하나만 가질 수 있으며, 외부요소이고 리액트 내부에 접근할 수 없다. 이로써 생기는 강점은 하나의 객체 트리를 가지므로 디버깅이 용이하다. * store 내부 상태는 action 을 통해서만 변경이 가능하다. 모든 상태(state) 들이 하나의 ..
Vue 에서는 v-model 이라는 v-on 과 v-bind 가 결합된 형태를 지원한다. 이를 이용해서 셀렉트박스 여러개를 만들어보고자 한다. 아래는 평범한 v-model 로 만든 1개의 셀렉트 박스이다. {{ boards.sub }} data() { return { partSelectModel: "0", board: [ { sub: "선택", value: "0" }, { sub: "1", value: "1" }, { sub: "2", value: "2" }, { sub: "3", value: "3" } ] } } 기본 바인딩 된 데이터를 보여줄때는 우리가 흔히 사용했던 html selected 는 v-model 을 사용해서 만든다면 정상 작동하지 않는다. v-model 에 바인딩 된 값과 option ..
기본적인 EsLint npm 디펜던시를 추가한다. * javascript 사용시 babel-eslint 를 추가 install npm install --save-dev eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier Typescript EsLint npm 디펜던시를 추가한다. npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser 프로젝트 루트파일에 .eslintrc.js 혹은 .eslintrc.json 파일을 작성한다 ( 필자는 .js 로 작성함 ) module.exports = { root: ..
CSR ( 클라이언트사이드 렌더링 ) : 클라이언트에서 모든것을 처리하는 렌더링 방법 * www 요청시 하얀도화지(html) 과 bundle.js 를 요청 및 내려받는다 ( 사용자 PC ) * 사용자에서 처리하므로 사용자들에게 하얀도화지가 나타나는 화이트 스플래쉬 현상 발생 * 페이지 이동시에는 대부분 클라이언트사이드 렌더링으로 작업 SSR ( 서버사이드 렌더링 ) : 서버에서 요청받은 데이터를 그려서 렌더링 하는 방법 * www 요청시 하얀도화지(html) 과 bundle.js 를 요청 및 내려받는다 ( 서버 ) * 서버에서 그려서 내보내주기떄문에 화이트 스플래쉬 현상이 없음 * Nuxt , Next 를 사용할 때 최초 1회 서버사이드 렌더링을 진행하고, 페이지 이동시에는 클라이언트 사이드 렌더링을 진..
1. 프로젝트 생성 npx create-nuxt-app nuxt-app 2. 생성된 프로젝트 루트에 Dockerfile 생성 및 작성 # 사용할 노드 버전 FROM node:16 # 앱 디렉터리 생성 WORKDIR /app ADD . /app/ # 앱 의존성 설치 RUN npm install RUN npm run build # IP 와 PORT 를 오픈 ENV HOST=0.0.0.0 EXPOSE 3000 # 시작 커맨드 CMD ["npm" , "start"] 3. 이미지 생성에 들어가지 않도록 .dockerignore 파일 작성 node_modules/ dist/ * 여기까지 진행하였다면 에디터에 표시되는 프로젝트 구조는 다음과 같을 것 입니다. 4. Docker 이미지 생성 # docker build ..
Javascript의 this Javascript 에서의 this 는 우리가 흔히 처음접하게 되는 언어인 Java 의 this 와 사용법이 달라 혼동이 올 때가 있다. Java 와 같은 객체지향 언어에서 this 는 class 로 생성된 인스턴트 자신이며, class 밖에서 사용 할 수 없다. Javascript 의 this는 함수의 현재 실행 컨텍스트를 의미하는데 예제 코드를 통해 어떻게 다른지 살펴보자 1. 일반적인 함수 function defaultFunc() { console.log(this) // window or global } 이 함수의 실행 컨텍스트는 전역 객체이므로, 브라우저 환경에서는 window , Node 환경에서는 global 객체가 될 것이다. 2. strict 모드에서의 함수 ..
JinSub-SHIN - Overview Front-end Developer . JinSub-SHIN has 5 repositories available. Follow their code on GitHub. github.com
Javascript ES 2022 추가된 4가지 사항 1. new Error 메시지에 이유를 추가로 작성가능 axios.post.then(res => { //something.. }.catch(err => { // someErr.. const causemessage = new Error("접근 권한이 없음" , { cause : err } ) console.log(causemessage.message) // "접근 권한이 없음" console.log(causemessage.cause) // err } 2. Array.at() 메소드 // array.at("음수값") array 끝에서부터 탐색 const arr = [1,2,3,4] arr.at(-2) // 3 arr[arr.length-2] 과 동일 co..