희락코딩

return의 용도

Hello JoyCoding — Sat, 12 Feb 2022 03:01:47 +0900

return용도

함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환합니다. 이때 값을 명시하지 않으면 undefined를 반환합니다. 아래와 같은 명령문은 모두 함수 실행을 중단합니다.

return;
return true;
return false;
return a+b /3;
return x;

return;만 있는 경우는 아래 예시처럼 사용 할 수 있습니다. if문의 조건이 충족하는 경우 해당 함수를 실행을 중단하고 함수 자체에서 빠져나가는 것을 의미합니다.

function () {
    if(num === 0){
        return;  // 위의 조건을 만족하면 해당 함수를 중단
    }
    //...샬라샬라~
}

Parsing error : Cannot find module 'next/babel'

Hello JoyCoding — Tue, 1 Feb 2022 01:48:51 +0900

Parsing error : Cannot find module 'next/babel'

next.js를 처음 접한 사람이라면 누구나 공감하는 에러인 것 같다. 코드를 작성하다 갑자기 vs코드 파일창이 빨간색으로 오류가 있는것마냥 표시가 되어 있을 것이다... 하지만 브라우저에서는 아무 문제 없이 잘 된다... 그래도 보기 싫어서 찾아 보았다

해결방법은 간단하다. .eslintrc 파일에 가서 아래 코드를 추가 하였다.

{
  "extends": ["next/babel","next/core-web-vitals"]
}

참고 자료

npm ERR! code ERESOLVE

Hello JoyCoding — Tue, 1 Feb 2022 01:43:42 +0900

npm ERR! code ERESOLVE

라이브러리 설치 도중 unable to resolve dependency tree 문구와 함께 에러가 발생했따.. 원인은 버전 문제였고 간단히 해결 할 수 있는 문제였다.
설치시 npm install --force or npm install --legacy-peer-deps 둘중 하나를 뒤에 붙이면 된다. 문제는 해결 했지만 이 명령어가 무엇인지 궁금해져서 찾아 보았따.

--force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가할수 있다.
--legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다.

결론은 force를 통해 우회적으로 해보고 안되면 legacy를 사용해서 진행하면 될 것 같다!

참고1
참고2
참고3

자바스크립트로 Momentum app 만들기!

Hello JoyCoding — Mon, 24 Jan 2022 05:18:28 +0900

Momentum-App

데모 사이트

프로젝트 목표

순수 자바스크립트만 활용하여 간단한 웹 어플리케이션 만들기, 또 한 dom조작 및 api를 활용하여 위치 기반 서비스 구현 해보기!

기능 구현 및 시연 영상

기능 구현 리스트

새로 고침시 랜덤 배경화면 출력
실시간 시계 기능
위치 기반 날씨 및 기상 정보
todolist
localstorege 리셋 기능
랜덤 명언 출력

시연 영상

회고...

자바스크립트의 힘을 다시 한번 느낀다!!! 뿌듯하다... 뭔가 만드는게 너무 재미있다...!!! 다음엔 무엇을 만들어 볼까나~@

form 태그 reload 현상

Hello JoyCoding — Sun, 16 Jan 2022 21:57:24 +0900

버튼 클릭시 reload되는 현상

문제 원인 - 우선 button이 form 태그 안에 있을 경우 발생합니다. 그이유는 form태그안에 있는 버튼은 기본적으로 type이 submit 으로 설정되어 있어서 어떠한 이벤트를 주었을 때 버튼 클릭을 하면 reload가 되는 현상이 나타 납니다. 일반 버튼일 경우 상관 없지만 form 태그 안에 버튼이 있는 경우에는 따로 type을 설정하지 않으면 reload현상이 나타납니다.

해결볍 1

html에서 button 태그 type을 button으로 설정합니다.

//문제 코드
<form>
<button className="user_update_btn" onClick={updateUser}>수정</button>
</form>

// 해결 코드
<form>
<button type="button" className="user_update_btn" onClick={updateUser}>수정</button>
</form>

해결법 2

자바스크립트에서 event.preventDefault()로 제어 해줍니다. preventDefault()는 브라우저의 기본 동작을 제어 해주는 역할을 합니다.

function joycoding(event) {
    event.preventDefault();
    //...
}

그외 참고 사항

참고 레퍼런스1
참고 레퍼런스2
참고 레퍼런스3

react_up down 간단한 웹 게임 만들기!

Hello JoyCoding — Mon, 3 Jan 2022 14:08:27 +0900

up_and_down_game

게임즐기기!!

미니 프로젝트 목표

React에서 useState와 input값에 대한 이해를 향상 시키고 렌덤함수와 setTimeout를 응용해서 간단한 웹 게임 구현하기!

미니 프로젝트 내용

리엑트를 활용한 up down 간단한 웹 게임 입니다.

사용 스택

react, html, css

기능 및 시연 영상

1부터 30까지의 임의 수를 맞추는 게임 입니다.
정답을 맞추면 셋타임아웃을 통해 새로운 렌덤 숫자가 생성됩니다.

코드

import React,{useState} from 'react'
import './App.css';

function App() {
const [status, setStatus] = useState('1~30 사이의 숫자를 맞춰보세요!');
const [answer, setAnswer] = useState(0);
const [righyAnswer, setRightAnser] = useState(Math.ceil(Math.random()*30));


function returnFunc(e){

  e.preventDefault();
  if(+answer === righyAnswer){
    console.log(answer)
    setStatus("정답!!!")
    setTimeout(function(){
      resetFunc();
    }, 2000)

  }else if(answer < righyAnswer){
    setStatus("업 ▲")
  }else{
    setStatus("다운 ▼")
  }
}

// 게임 리셋 후 또 다른 렌덤 숫자 생성, 
// 텍스트 상태 변경
// 현재 input 초기값 설정
function resetFunc(){
  setRightAnser(Math.ceil(Math.random()*30))
  setStatus("한번더! 1~30 사이의 숫자를 맞춰보세요!")
  setAnswer(0);
}


// input 값을 가져올수 있는 함수
function changeAnswer(e){
  setAnswer(e.target.value);
}


  return (
    <div class="background-card">
       <form onSubmit={returnFunc}>
      <h1>Up and Down</h1>
      <p>{status}</p>
      <input 
      type="number"  max="30" min="1"
      value={answer} onChange={changeAnswer} />
      <button>확인</button>
      </form>
    </div>
  );
}

export default App;

자바스크립트의 기본적 지식만 있다면 리엑트로 충분히 간단한 게임을 만들수 있습니다!

Vue로 웹 사이트 만들기!

Hello JoyCoding — Fri, 24 Dec 2021 00:27:25 +0900

애플코딩 짱짱

애플코딩 완강 후 vue로 개인 프로젝트를 진행하였다. 배울땐 쉬웠는데 막상 직접 해보려고 하니 막히는 경우가 많아서 애먹었다... 그래도 한달 공부하고 결과물을 만들어 낸 것에 대해 만족한다!!! 그리고 공부한 걸 직접 활용해서 프로젝트를 진행해보니 내가 놓쳐던 부분이나 애매하게 알게 된 내용들을 알수 있어서 좋았따!!! 다음 미니 프로젝트를 기약하며 !!!

Art_Shop_ground_vue

데모 사이트

https://art-ground-shop-github-io.vercel.app/

윈도우는 깨지는... 맥용으로 만들었음...

프로젝트 목표

Vue에 쓰여지는 다양한 메서드와 더미 api를 활용하여 데이터 바인딩을 하고 vue에 대한 전반적인 지식을 습득하기 위한 연습용 프로젝트 입니다.

프로젝트 내용

미술 작품을 쇼핑하고 본인이 좋아하는 예술 작품을 다이어리에 공유하는 간단한 웹 사이트 입니다.

사용 스택

Vue, axios, bootstrap, vue-router, css, vuex

기능 구현 및 시연 영상

shop page shop page 전체

정렬 기능

api 호출(더보기 기능)

상세페이지(유효성 검사)

diary page diary page 전체

이미지 업로드 및 글 발행 기능

좋아요 기능

마무리...

이번 개인 프젝을 통해 뷰에 대한 전반적인 학습을 할 수 있어서 좋았다!!! 뭔가 뿌듯하다!!! 하지만 아쉬운 점이 한두가지가 아니다. 이번 프로젝트를 통해 아쉬운 점에 대해 적어 보려고 한다.

기능적인 측면

검색기능이 없어서 아쉽다.
- 검색기능을 도전 하다 잠시 보류하다 결국 검색기능을 놓쳤다... 이부분은 좀 더 공부하고 보완 해야 될 것 같다. 좀만 생각하면 충분히 해결 할 수 있을 것 같다.
좋아요 기능
- 좋아요 기능을 구현 하였지만 좋아요 버튼을 누를때 다른 좋아요 데이터도 클릭이 되는 현상이 나타난다... 이 것 또한 해결 해야 할 숙제 중 하나다. 애초에 store에서 데이터를 관리해서 시작했으면 꼬일 일이 없을 것 같다. 처음에 그냥 더미 데이터를 만들어서 시작해서 애매했다.. 분명 다른 방법이 있을 것 같다.
글 수정 및 삭제 기능
- 글 쓰기는 가능 하지만 수정 및 삭제 기능이 없는게 아쉽다. 리엑트랑 비슷해서 충분히 할 수 있는 숙제 인 것 같다. 나중에 여유 있을 때 다시 도전 해보자!!!

코드적인 측면

더보기 기능에서 api 호출 할 때 이게 맞을까? 하는 의구심이 들 정도이다. 시간적인 측면에서도 그렇고 콜백지옥을 연상케 하는 코드 이다. 분명 리펙토링이 필요하고 좀 더 간결하고 효율적으로 코드를 작성 할 방법이 있을 것 같다.. 좀 더 생각해보고 연구해보자.

 methods: {
         more(){
            axios.get('https://run.mocky.io/v3/b5a2228a-deaf-405f-af77-85b4a955b6d9%27')
             .then((a)=>{
                 // console.log(a)
                 // console.log(a.data)
                 this.artData.push(a.data)
                 axios.get('https://run.mocky.io/v3/c1d882fc-08e4-46e9-acf4-a3ae2e14636a%27')
                 .then((b)=>{
                     // console.log(b)
                     this.artData.push(b.data)
                     axios.get('https://run.mocky.io/v3/2834c58c-0530-4a8e-8762-dd330745db8c%27')
                     .then((c)=>{
                         this.artData.push(c.data)
                     }).catch((err)=>{
                         console.log(err)
                     })
                 })
             })
         },

마무리

전반적으로 많이 부족하고 고쳐야 할 점이 한 두가지가 아니지만 한 달 동안 공부해서 이정도로 만들수 있는 것에 대해 자신감을 얻게 된 계기가 되었고 부족한 부분은 좀 더 공부해서 보완하는 방향으로 가야 할 것 같다. 코딩 공부 너무 재밌다!!! 끝@!

#18. Vue_vuex

Hello JoyCoding — Thu, 23 Dec 2021 19:35:20 +0900

vuex 사용법

vuex는 props와 custom event로 데이터 주고받는게 힘들때 사용합니다. vuex를 설치하면 js 파일하나에다 모든 데이터를 저장 할 수있습니다. 그럼 모든 컴포넌트를 그 데이터를 직접 꺼내고 수정할 수 있어 프롭스 필요없이 모든 컴포넌트가 데이터에 직접 접근이 가능합니다. 그리고 vue파일과 데이터, 규모가 클 때 사용합니다. 리엑트에서 리덕스 개념으로 생각하면 편합니다.

vuex 셋팅

우선 터미널에서 vuex를 설치합니다.

npm i vuex@next --save

그리고 js파일을 만들어 아래와 같이 기본 셋팅을 합니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {

        }
    },
})

export default store

그다음 store.js 파일을 main.js에 등록하면 됩니다. (꼭 등록해야합니다.)

import store from './store.js'
app.use(store).mount('#app')

그럼 store.js에 저장한 데이터들을 모든 컴포넌트가 가져다 쓸 수 있습니다. 데이터 저장은 store.js에 저장하면 되고 출력하려면 vue파일에서 {{$store.state.데이터명}}해서 사용하면 됩니다.

vuex mutations

mutatuons는 데이터 수정방법을 정의합니다. 오브젝트 항목을 만든 다음에 거기다 state 수정 방법을 함수로 만들어 정의합니다. 예를 들어 vue파일에 어떤 버튼을 누루면 age라는 state를 1더해주는 기능을 만들고 싶을때 아래 예시와 같습니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {
            name : 'Lee',
            age : 20,
        }
    },
    mutations :{
        plusAge(state){
            state.age++
        }
    },
})

plusAge()함수에 파라미터 state는 위에 있는 age상태 입니다. 그다음에 vue파일에서 버튼 누를때 age + 1을 해주고 싶을때 위에 함수를 통해 vue파일에서 부탁할 수있습니다.

<!-- app.vue -->
<button @click="$store.commit('plusAge')">버튼</button>

vue파일은 $store.commit(함수명) 이런 형식에 맞춰 부탁 할 수 있습니다. 이게 vuex에 있는 state수정 방법입니다.

vuex action

vuex에서 상태를 수정할때 mutations함수를 활용해 수정합니다. 하지만 서버에서 데이터를 가져와서 데이터를 수정하고 싶을때가 있습니다. 이때 mutation이 아닌 actions라는 항목에 작성해서 사용하면 됩니다.

actions step 1

우선 데이터를 보관함을 만들어 줍니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {
            more : {},
        }
    },
})

actions step 2

state를 수정하는 함수는 mutations에다 작성하고 ajax요청은 넣지 않습니다. actions에서 다해주기 때문입니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {
            name : 'Lee',
            age : 20,
        }
    },
      mutations:{
        setMore(state , data){
            state.more = data
        },
})

actions step3

mutations함수를 사용할 땐 예외없이 commit()라고 써야합니다. 그리고 그걸 쓰기 위해선 함수에 context라는 파라미터를 추가해주면 됩니다. context 대신 작명 가능하며 $store 변수 같은거라고 생각하면 됩니다.

// store.js
const store = createStore({
    state(){
        return {
            more : {},
        }
    },
    mutations:{
        setMore(state , data){
            state.more = data
        },
    },
    actions : {
        getData(context){
            axios.get(`요청코드`)
            .then((a)=>{
                //성공시 실행할 코드
                console.log(a.data) 
                context.commit('setMore', a.data)
            })
        },
    },
})

actions step 4

actions 항목을 다만들었으면 $store.dispatch('action함수이름') 를 사용해서 데이터를 가져옵니다.

<!-- app.vue -->
<p>{{$store.state.more}}</p>
<button @click="$store.dispatch('getData')">더보기버튼</button>

vuex mapstate

state를 vue파일에서 꺼내 쓸 때 $store.state.변경할거 이런식으로 꺼내 썼는데 이게 너무 길고 줄이고 싶으면 mapState라는 함수를 사용할 수 있습니다. 그전에 computed라는 항목을 알고 넘어가야 합니다.

computed

함수를 만들때 methods:{}안에 만들수 있는데 실은 computed:{}안에도 만들수 있습니다. 다만 차이점은 methods는 함수를 부를때마다 안의 코드가 실행되고 computed는 함수를 불러도 실행이 안됩니다. 즉 일종의 계산결과 저장공간이라고 생각하면 됩니다. 트위터 기입 날짜, 인스타 그램 기입 날을 입력할 떄 좋습니다.

mapState 사용법

사용할때 무조건 import를 해서 사용할수 있습니다. 그리고 꺼내야할 상태가 100개가 있다고 가정했을 때 mapState를 쓰면 알아서 computed에다가 state를 등록해 줍니다.

//사용법 1
import {mapState} from 'vuex'

computed : {
    ...mapState(['state1','state2'])
}

그리고 객체 자료형을 넣으면 이름 변경도 가능합니다.

//사용법 2
import {mapState} from 'vuex'

computed : {
    ...mapState({작명,'state이름1'})
}

또 한 mutations 함수도 쉽게 가져다 쓸 수 있습니다. 그래서 $store.commit('함수1') 가아닌 함수1()로 쓸수있어서 코드를 줄일수 있는 장점이 있습니다!

//사용법 3
import {mapState} from 'vuex'

computed : {
    ...mapState({작명,'state이름1'})
    ...mapMutations(['함수1','함수2'])
}

#16. Vue_mitt

Hello JoyCoding — Thu, 23 Dec 2021 19:33:08 +0900

mitt

mitt은 상위-상위 컴포넌트나 아니면 동떨어진 컴포넌트에 데이터를 전송 할 때 사용하면 매우 유용합니다. 사용법도 간단합니다. 우선 설치부터 하기!

npm i mitt

설치가 끝나면 main.js파일에 가서 mitt 환경 셋팅을 합니다.

import { createApp } from 'vue'
import App from './App.vue'

// mitt 라이브 셋팅
import mitt from 'mitt'
let emitter = mitt();
let app = createApp(App);

// 글로벌한 변수 보관함
app.config.globalProperties.emitter = emitter;

app.mount('#app')

사용법

데이터 보내고 싶은 곳에 아래와 같이 작성합니다. this.emitter.emit하면 전송이 가능합니다.

methods :{
        hello(){
            this.emitter.emit('작명','데이터')
        }
    },

그리고 데이터 수신하고 싶은 곳에서 아래와 같이 작성하면 됩니다.

//...생략
 mounted(){
    this.emitter.on('작명',(a)=>{
        // 데이터 수신시 실행할 코드
        // a는 데이터
      console.log(a)
    })
  },

보통 수신하는 코드는 mounted()안에 적습니다. 이러면 위에 했던 내용을 수신 받을수 있습니다.

#17. Vue_slot

Hello JoyCoding — Sat, 18 Dec 2021 01:38:40 +0900

slot문법

자식이 부모데이터를 사용하고 싶을때 사용합니다. 다만 프롭스는 src, style속성에서도 사용가능하지만 slot은 html태그이기 떄문에 html태그처럼만 사용이 가능합니다.

1. 자식 컴포넌트

태그를 이용해서 데이터를 표시할 곳을 정합니다.

<div :class="filterData + ' filter-item'" :style="`background-image:url(${upLoadUrl})`">
      <slot></slot>
</div>

2. 부모 컴포넌트

부모는 <자식컴포넌트>데이터</자식컴포넌트> 이렇게 자식컴포넌트 사이에 데이터를 작성해서 보냅니다.

<FilterBox :filterData= "filterData[i]" :upLoadUrl= "upLoadUrl" v-for="(a,i) in filterData" :key="i">
      {{filterData[i]}}
</FilterBox>