just-take-the-first-step의 등록된 링크

 just-take-the-first-step로 등록된 티스토리 포스트 수는 12건입니다.

React ScrollMagic Example [내부링크]

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..

Typescript useRef 여러개 사용하기 [내부링크]

반복문에 마다 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 소메뉴..

Next Eslint / Prettier ( with Typescript ) 설정하기 [내부링크]

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..

Typescript 사용해보자 [내부링크]

여기에 기본적인 자바스크립트 코드가 있습니다. 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) {..

React 상태 관리 라이브러리 [내부링크]

프론트엔드 관점에서 상태 관리는 매우 중요하고 필수적이다. 리액트는 기본적으로 state, props 로 상태를 관리한다. 리액트의 데이터 흐름은 기본적으로 부모 -> 자식 이라는 흐름을 가지는데, 자식에서 부모의 상태를 바꾸려면 props 를 넘겨줘야한다. 이를 반복하다보면 props depth가 증가해 불필요한 리렌더링이 일어나 비효율적이다. 즉 상태관리 라이브러리를 사용하자! Redux * Redux는 store 에 모든 상태를 저장한다. store는 오직 하나만 가질 수 있으며, 외부요소이고 리액트 내부에 접근할 수 없다. 이로써 생기는 강점은 하나의 객체 트리를 가지므로 디버깅이 용이하다. * store 내부 상태는 action 을 통해서만 변경이 가능하다. 모든 상태(state) 들이 하나의 ..

Vue 셀렉트박스 여러개 구현하기 [내부링크]

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 ..

Nuxt Typescript EsLint & Prettier 설정 [내부링크]

기본적인 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: ..

SSR / CSR ( 렌더링 비교 ) [내부링크]

CSR ( 클라이언트사이드 렌더링 ) : 클라이언트에서 모든것을 처리하는 렌더링 방법 * www 요청시 하얀도화지(html) 과 bundle.js 를 요청 및 내려받는다 ( 사용자 PC ) * 사용자에서 처리하므로 사용자들에게 하얀도화지가 나타나는 화이트 스플래쉬 현상 발생 * 페이지 이동시에는 대부분 클라이언트사이드 렌더링으로 작업 SSR ( 서버사이드 렌더링 ) : 서버에서 요청받은 데이터를 그려서 렌더링 하는 방법 * www 요청시 하얀도화지(html) 과 bundle.js 를 요청 및 내려받는다 ( 서버 ) * 서버에서 그려서 내보내주기떄문에 화이트 스플래쉬 현상이 없음 * Nuxt , Next 를 사용할 때 최초 1회 서버사이드 렌더링을 진행하고, 페이지 이동시에는 클라이언트 사이드 렌더링을 진..

[Docker] Nuxt FrameWork 이미지를 생성하기 [내부링크]

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 Javascript 에서의 this 는 우리가 흔히 처음접하게 되는 언어인 Java 의 this 와 사용법이 달라 혼동이 올 때가 있다. Java 와 같은 객체지향 언어에서 this 는 class 로 생성된 인스턴트 자신이며, class 밖에서 사용 할 수 없다. Javascript 의 this는 함수의 현재 실행 컨텍스트를 의미하는데 예제 코드를 통해 어떻게 다른지 살펴보자 1. 일반적인 함수 function defaultFunc() { console.log(this) // window or global } 이 함수의 실행 컨텍스트는 전역 객체이므로, 브라우저 환경에서는 window , Node 환경에서는 global 객체가 될 것이다. 2. strict 모드에서의 함수 ..

개인 GitHub [내부링크]

JinSub-SHIN - Overview Front-end Developer . JinSub-SHIN has 5 repositories available. Follow their code on GitHub. github.com

javascript ES 2022 [내부링크]

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..