'Front-End'에 해당되는 글 53건

  1. 2020.12.13 A javascript error occurred in the main process 해결 15
  2. 2020.11.11 null 체크 함수 (공통함수) 8
  3. 2020.07.03 React 시작하기 - 1
  4. 2020.06.01 React 프로젝트 실행
  5. 2020.05.28 create react app 설치
  6. 2020.04.27 Vue-js 기본적인 사용법-1
  7. 2020.03.27 Vue-js로 list 사용해보기
  8. 2020.03.27 Vue-js 기본

A javascript error occurred in the main process 해결

Front-End/Problem 2020. 12. 13. 20:52

 

아래와 같은 에러가 간혹 발생하신분들이 계실겁니다.

 

 

 

 

이 에러는 javascript와 타 프로그램이 충돌했기때문에 발생하는 에러이구요.

 

해결방법은 간단합니다.

 

 

1. 작업관리자 창 열기 (ctrl + alt + del) 키를 눌러서 프로세스쪽에 실행되고 있는 디스코드 종료 

 

 

 

 

2.  컴퓨터 부팅시 자동으로 디스코드가 실행되게 되어있으면 이것도 off로 바꿉니다.

 

 

 

3. 윈도우 + R 키를 누르고 "%AppData%" 를 검색 한 후에 디스코드 폴더를 찾아서 삭제

 

 

 

 

4. 다시 윈도우 + R 키를 누르고 이번에는 "%LocalAppData%" 를 검색 한 후에 디스코드 폴더를 찾아서 삭제

 

 

 

 

5. 마지막으로 재부팅까지 하시면 됩니다.

 

 

 

출처

http://blog.naver.com/ppclub86/221770321763

 

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시
:

null 체크 함수 (공통함수)

Front-End/javascript 2020. 11. 11. 14:00
// Null 체크, 정확히는 값이 들어있는지 체크함, 값이 들어있지 않다면 true를 반환하고, 값이 들어있으면 false를 반환함.
//typeof()함수는 값이 데이터타입을 반환하고, trim()함수는 양끝의 공백을 제거한 문자열을 반환
 
function isEmpty( val ){
if(val == null || typeof(val) == "undefined" || $.trim(val) == "") {
return true;
}
return false;
}
 
 
//아래 위의 함수와는 반대로 값이 들어있으면 true를 반환하고, 값이 들어있지 않으면 false를 반환,
function isNotEmpty( val ){
return !isEmpty(val);
}
 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 함수와 콜백  (0) 2019.06.12
javascript - 유효범위 (전역변수, 지역변수)  (0) 2019.06.11
javascript - 정규표현식  (0) 2019.06.11
javascript - UI와 API  (0) 2019.06.10
javascript - 라이브러리 (jQuery)  (0) 2019.06.09
:

React 시작하기 - 1

Front-End/React 2020. 7. 3. 14:21
  • C드라이브에 React Project Tutorial이라는 폴더 생성




  • cmd창에서 React Project Tutorial폴더 경로로 이동

ㄴcd C:\React Project Tutorial



  • create-react-app패키지를 설치

ㄴnpm install -g create-react-app 

(-g옵션은 글로벌패키지라는 의미로, 이 프로젝트 뿐만아니라 다른 프로젝트에도 해당 패키지를 적용할 수 있다는 특징이 있습니다.)



  • react 프로젝트를 생성 (각종 라이브러를 포함한 프로젝트를 만들어줍니다.)

ㄴcreate-react-app-management (프로젝트 이름)




  • 생성한 react 프로젝트인 management 폴더로 이동


  • yarn start를 입력하면 react 프로젝트가 실행됩니다.





서버를 종료시킬때는 Ctrl + c 버튼으로 종료시킬 수 있습니다.



출처

https://www.youtube.com/watch?v=_yEH9mczm3g&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=8


저작자표시

'Front-End > React' 카테고리의 다른 글

React 프로젝트 실행  (0) 2020.06.01
create react app 설치  (0) 2020.05.28
:

React 프로젝트 실행

Front-End/React 2020. 6. 1. 15:14

1. 프로젝트 생성


cmd 창에서 명령어 입력


create-react-app hello-react (hello-react란 이름의 React 프로젝트를 생성)



아래와 같이 메시지가 출력되면 프로젝트가 생성된 것





  

  yarn이란?


  npm과 비슷하지만, npm은 모든 패키지들을 다 가지고 있어서 무겁지만, yarn에는 핵심 패키지들만 있어서 속도가 좀 더 빠르다는 장점이 있다.




2. 프로젝트 실행


cd hello-react (만든 프로젝트로 이동)


yarn start (yarn 자바스크립트 패키지 매니저 실행)



아래처럼 프로젝트가 실행되서 서버가 돌아가면 된다.





출처


https://velopert.com/3621


저작자표시

'Front-End > React' 카테고리의 다른 글

React 시작하기 - 1  (0) 2020.07.03
create react app 설치  (0) 2020.05.28
:

create react app 설치

Front-End/React 2020. 5. 28. 11:15

1. cmd창 실행




2. npm 설치 되어있는지 확인


아래와 같이 npm -v라고 명령어를 입력해서 숫자가 나온다면 npm이 설치되어 있는것.





3. react app를 설치하기 위해 명령어를 입력


npm install -g create-react-app@2.1.8 (@뒤에 있는 숫자는 버전명임, 입력하지 않을시에는 최신버전으로 설치됨)


아래와 같은 메시지가 출력된다면 설치가 된 것.



또한 create-react-app 명령어를 입력해서 설치가 되었는지 확인할 수 있다.








저작자표시

'Front-End > React' 카테고리의 다른 글

React 시작하기 - 1  (0) 2020.07.03
React 프로젝트 실행  (0) 2020.06.01
:

Vue-js 기본적인 사용법-1

Front-End/Vue-js 2020. 4. 27. 14:00
Vue-js 기본적인 사용법

1. JavaScript에서 new를 사용해 Vue라는 생성자를 만들고, data나 methods등을 정의한다.

2. jsp쪽에서 JavaScript단에서 정의한 컴포넌트를 가져와서 사용한다.

ㄴ 2-1. if문은 v-if, else문은 v-else, v-model은 data의 키값으로 values를 가져와서 출력할 수 있음, 

ㄴ 2-2. data에서 정의한 키에 해당하는 값을 가져올 때에는 {{msg}} 같이 키값에 중괄호를 두번쳐서 가져올 수 있다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<title>Vuejs</title>
</head>
<body>
    <!-- 태그 값 id는 한곳에서만 사용가능하고, class는 여러곳에 사용이 가능하다.-->
    <!-- 데이터 바인딩이 쉽고, 데이터가 변경되었을때 바로 알 수 있다. -->

<!--버튼을 클릭하면 Hide와 Show로 번갈아가면서 변경되면서 문자가 출력되고, 사라지는것을 반복한다. -->
    <div id="vue-app">
        <div>
            <input type = "text" v-model = "msg">
            <!-- 버튼을 클릭하면 Vue 인스턴스의 button_handler 메소드로 매핑이 되어서, msg_active값이 true면 false로, false면 true로 변경되게 된다. -->
            <button @click="button_handler">
                <span v-if = "msg_active">Hide</span>
                <span v-else>Show</span>
            </button>
        </div>
        <div v-if="msg_active">
<!-- 중괄호 안에 다시 중괄호를 쓰고, 아래 생성자에 있는 데이터의 키값을 쓰면 그 안에 있는 값이 담겨서 나온다. -->
            {{msg}}
        </div>
    </div>
 
 
    <!-- cndjs홈페이지에서 vuejs를 연결시킴 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        //vue라는 생성자를 만들고 어느영역에 있는 컴포넌트를 사용할 것인지를 정한다.
        new Vue({
 
            'el' : '#vue-app',
            'data' : {
                'msg' : 'vue.js',
                'msg_active' : true
            },
            methods:{
                button_handler: function(){
                    //바인딩을 할때 this를 앞에 써주어야 매핑된다.                    
                    this.msg_active=!this.msg_active;
                }
            
            }
        });
    </script>
</body>
</html>
cs




실행결과 (Hide & Show)








출처


https://www.youtube.com/watch?v=fgHG0fCnhow

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js로 list 사용해보기  (0) 2020.03.27
Vue-js 기본  (0) 2020.03.27
:

Vue-js로 list 사용해보기

Front-End/Vue-js 2020. 3. 27. 14:49



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang = "ko">
<head...>
<title>Insert title here</title>
 
<body>
<div id="app">
    <!-- 반복문을 사용할때는 v-for이라는 태그를 써서 사용한다. -->
    <ul style = "list-style: none;">
<!-- Vue인스턴스에 있는 data인 items배열을 받아서 item에 넣고 반복하면서 출력한다. -->
 
<!-- 이미지를 삽입할때는 <img src="{{item.image}}"> 이런식으로 작성하면 값이 들어가지 않기 때문에 
<img :src="item.image">이런식으로 attribute앞에 콜론(:)을 작성해야 인식이된다. -->
        <template v-for="item in items">
        <li>
            <img :src="item.image">    
        </li>
        <li>
            {{item.title}}
        </li>
        </template>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script>
 
/* 뷰 인스턴스를 변수에 담으면 변수 안에 접근할 수 있습니다, 바람직한 방법은 아님 */
아래처럼 app변수에 접근해서 값을 담아줄수 있습니다.
ex) app.items.push({id: 4, image : 'https://picsum.photos/210/118/?image=350', title: '추가아이템'});

 
    let app = new Vue({
        el: '#app',
        data() {
            return {
                items:[
                    {
                        id: 1,
                        image: 'https://picsum.photos/210/118/?image=1',
                        title: 'computer'
                    },
                    {
                        id: 2,
                        image : 'https://picsum.photos/210/118/?image=100',
                        title: 'beach'
                    },
                    {
                        id: 3,
                        image : 'https://picsum.photos/210/118/?image=160',
                        title: 'handphone'
                    },
                    {
                        id: 4,
                        image : 'https://picsum.photos/210/118/?image=200',
                        title: 'cow'
                    }
                ]    
            
            }
            
        }
        
    })
 
    
</script>
 
</body>
</html>
cs



실행화면


코드상에는 4번까지만 있지만 push로 2줄을 더 추가해주었다.


우측 개발자화면에서 Vue 인스턴스에 접근해서 push로 값을 넣어주면 좌측 화면에 표시된다.







출처


https://www.youtube.com/watch?v=zLoEUKEA7Hw&list=PLwawSyI26pfuGsEzp7AzP_TJVhSdwFuwh&index=3

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js 기본적인 사용법-1  (0) 2020.04.27
Vue-js 기본  (0) 2020.03.27
:

Vue-js 기본

Front-End/Vue-js 2020. 3. 27. 11:15

 Vue js는 new Vue로 인스턴스를 만들어 사용하고,


외부에서 사용할 데이터는 데이터메소드에 정의해서 사용,


사용자 입력값을 받는 태그에는 v-model이라는 attribute를 사용해서 Vue 인스턴스의 데이터와 연결해서 사용할 수 있습니다.


Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됩니다.


ex) {{userId}}, {{userPassword}}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang = "ko">
<head...>
<title>Insert title here</title>
 
<body>
<div id="app">
<!-- vuejs에서 제공하는 v-model이라는 attribute로 변수명을 지정해주면 자동으로 input 태그의 v-model값과 input태그의 값이 동기화 됩니다.-->    
 
//태그에 v-model을 사용해서 Vue 인스턴스의 data()와 연결해서 사용
    <input type = "text" id = "user_id" v-model="userId" onchange="userIdChanged(this)">
    <input type = "password" id = "user_password" v-model="userPassword">
    <button type = "button">login</button>
    <br />

//Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됨.
    id : <span id="user_id_text">{{userId}}</span>
    <br />
    password : {{userPassword}}
</div>
 
//Vue 라이브러리 사용
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script>

//Vue 인스턴스를 생성
    new Vue({
        el: '#app',
        data() {
            return {
                userId:'',
                userPassword:''
            }
            
        }
        
    })
    
    //var과 let의 다른점은 let은 변수의 재선언이 불가하고, 재할당은 가능하다.
    
    //function에서 아이디와 비밀번호를 받아서 출력하는 대신 위쪽에 있는 Vue에서 data()로 값을 받아서 출력할 수도 있다.
    
    function userIdChanged(obj){
        
         document.getElementById('user_id_text').innerText = obj.value;    
 
    }
    
</script>
 
</body>
</html>
cs




출처


https://www.youtube.com/watch?v=kYo6FXCVjAI&list=PLwawSyI26pfuGsEzp7AzP_TJVhSdwFuwh&index=2

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js 기본적인 사용법-1  (0) 2020.04.27
Vue-js로 list 사용해보기  (0) 2020.03.27
:
◀ PREV : [1] : [2] : [3] : [4] : [···] : [7] : NEXT ▶

티스토리툴바