현재 내가 운영하는 서비스 꽁술은 앱이지만 앱안에서 웹뷰로 운영된다.

웹뷰의 장점은 너무나도 많다. 하지만 굳이 하나를 고르자면 앱 업데이트를 하지 않아도 언제든지 배포만 하면, 웹에 바로 반영되니,
앱을 사용하는 고객들이 매번 업데이트를 해야하는 불편을 줄일 수 있다. 

그리고 더군다나 스타트업이라면, 실시간으로 변경하고, 추가해야 할 것이 많기에 더욱 웹뷰로 하는 것이 좋다고 생각한다.

React만 할 수 있으면, React Native로 앱의 껍데기를 만들고 React로 만든 웹을 안에다가 띄우면 되기에, 조금 더 쉽게 접근할 수 있다.

하지만 웹뷰에서 느끼는 한계들도 있다. 내가 가장 크게 문제라고 느꼈던 부분은 Back 버튼이 먹히지 않는다는 것이다.
그렇기에 이것을 해결하기 위해 팝업을 띄워주고 그 팝업을 끄는 형태로 진행하였다. => 팝업을 띄움으로써 장점은 따로 클릭할 당시의 높이등을 지정하지 않아도, 팝업을 끄면 바로 그 위치에 가 있다는 것! 

팝업을 띄움으로서 많은 부분 개선할 수 있었지만, 결국 팝업을 끄는 X 버튼을 만들어서 팝업을 꺼주어야 하는 이슈가 있었다....

사람들은 당연스럽게 앱에서 스와이프를 통해서 뒤로 돌아가기를 원하고, 앱안에서 너무 자연스럽게 사용하던 스와이프가 되지 않으니
불편을 겪게 된다. 

하지만 서비스만 좋으면 뭐 그런 불편이야 감수할 수 있지 않을까? 생각했던 내 오만이, 직접 고객을 만나뵙고 처참히 깨지게 되었다.
위쪽으로 돌아가기 위해 스와이프를 하던 고객분을 보고 있자니 얼굴이 붉어질 수 밖에 없었다. 

불편하다!! 사실 나도 불편하다!! 나도 고치고 싶은데... 어떻게 해야할지 모르겠다. ㅠㅠ

그래서 그것을 고친 삽질기를 적어보려고 한다.

먼저 웹뷰에서 왜 뒤로가기가 안 되는지 조사하였다.
아래 글을 보고 알게 된 것은 웹뷰 히스토리가 쌓이지 않는다는 것!

그래서 웹뷰인 경우, POP 이벤트를 잡아서 어떻게든 팝업 close 버튼을 닫아보려고 하였다.
하지만 히스토리가 쌓이지 않아 이벤트가 일어나지 않았다.

useEffect(()=>{
        const preventGoBack = () => {
            // change start
            setClickDetail(false)
            // window.history.forward();
            window.history.pushState(null, '', window.location.href);
            console.log('prevent go back')
        };

        window.history.pushState(null, '', window.location.href);
        window.addEventListener('popstate', preventGoBack);

        return () => window.removeEventListener('popstate', preventGoBack);
    }, [])

(뒤로가기 이벤트를 감지하고 해결하기 위해 삽질했던 코드들...)

결국 여러가지 글들을 찾아보니, 웹과 앱의 통신을 통해 해결하라는 글들이 많았다.
=> 하지만 이것도... 결국 서로 통신간의 간격이 발생하고, 또 앱 업데이트를 해야하기 때문에 패스 

그렇게 그렇게 시간만 흘러가던 중... 알게된 

hammer.js !! 

슬프다... 왜 이걸 이제서야 할게 되었는지

http://hammerjs.github.io/

공식홈페이지에서보면, 클릭이나 스와이프 등등 다양한 이벤트를 웹에서 잡을 수 있도록 해주는 라이브러리다

관련 소개 글은 정말 잘 정리해놓으신 글이 있어서 첨부

결론적으로 꽁술에는 많은 부분 해당 라이브러리를 통해 스와이프 이벤트를 잡고, 팝업을 끄도록 처리해주었다.

조금 주의해줘야했던 부분은 
아래 이미지와 같이 스와이프를 해서 보는 부분 
배너나 메뉴판의 경우 스와이프 이벤트를 잡히지 않도록 해야했다.

이 부분을 해결하기 위해 해당 부분을 제외하고 className들을 일괄적으로 부여

아래 코드를 적용해주었다.

useEffect(()=>{
      const viewerImage = document.getElementsByClassName("detail_swipe")
      if(viewerImage.length !== 0){
        for (let i =0 ; i<viewerImage.length ; i++){
          const hammertime = new Hammer(viewerImage[i])
          hammertime.on('swipe', function(ev) {
            // 상세정보를 꺼준다.
            if (detailPartnerInfo){
              ShowDetailPartner(false)
            }
          });
        }
      }
},[])

Hammer.js를 써주기 위해서는 일단 먼저 적용해줄 부분을 가지고 온 다음에
new Hammer( 해당 부분 ) 을 적용해줘야 한다.

나는 스와이프 했을 때 위로 가기를 적용할 부분들 (배너와 메뉴판 부분을 제외하고) className을 "detail_swipe"로 적용해주었고,
해당 부분을 가지고 와 for문을 돌면서 하나씩 Hammer를 적용해주었다.

휴 해당 부분을 적용해주고 나니 ㅠㅠ 정말 앱처럼 스와이프로 너무 잘 작동한다!!!!

어떤 키워드를 조사해야 할지도 몰라 막막헀는데, 누군가 나처럼 막혀있을 것 같아서 글을 적는다.

# 혹시라도 document.getElement를 가지고 오면 length가 0인 경우 => 랜더링 시점 이슈로
아래와 같이 setTimeOut을 적용해주면 된다.

useEffect(()=>{
      setTimeout(() => {
        const viewerImage = document.getElementsByClassName("detail_swipe")
        if(viewerImage.length !== 0){
          for (let i =0 ; i<viewerImage.length ; i++){
            const hammertime = new Hammer(viewerImage[i])
            hammertime.on('swipe', function(ev) {
              // 뒤로가기
              setBack(true)
            });
          }
        }
      }, 200);
    },[])

아래는 적용된 꽁술 서비스 

웹이기때문에 웹에서 바로 들어가볼 수 있다.

https://app.ggongsul.net/intropage 

JAVASCRIPT datetime validation 하는 방법

# 가장 간단한 방법 (Date.parse 이용)

IsValidDate = Date.parse("2020-05-01")

if (isNAN(IsValidDate)){
    alert("not a date")
}

참고 : [Date.parse() - JavaScript | MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/parse)

참고 : [꿀벌개발일지 :: Date.parse() 가 지원하는 날짜 포맷](https://ohgyun.com/540)

# moment js 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment-with-locales.min.js"></script>

valid_from_date = moment(from_date, "YYYY-MM-DD HH:mm:ss", true).isValid();

참고 : [Moment.js | Docs](https://momentjs.com/docs/#/parsing/string/)

참고 : [momentjs - Is there a way to validate time using Moment JS? - Stack Overflow](https://stackoverflow.com/questions/26040397/is-there-a-way-to-validate-time-using-moment-js)

# datepicker.parseDate 이용

function validateDate(dateField) {
       try{
           $.datepicker.parseDate('mm/y', dateField, null);
       }
       catch(error){
           alert(error);
       }
}

참고 : [datepicker.parseDate - jQuery Forum](https://forum.jquery.com/topic/datepicker-parsedate)

참고 : [validation - How to validate date with format "mm/dd/yyyy" in JavaScript? - Stack Overflow](https://stackoverflow.com/questions/6177975/how-to-validate-date-with-format-mm-dd-yyyy-in-javascript)

# 시간 체크하는 함수 사용

function isDatetime(d) {
    var re = /[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]/;
    //         yyyy -       MM      -       dd           hh     :   mm  :   ss
  return re.test(d);
}


if (!isDatetime("2020-05-01 11:00:00")){
    alert('시간 형태가 잘못되었습니다.')
}

참고 : [[Javascript] 문자로 된 날짜(Datetime) 유효성 검사 (yyyy-mm-dd hh:ii:ss) :: 확장형 뇌 저장소](https://extbrain.tistory.com/33)

대괄호 : [] , 중괄호 : {}  , 소괄호 : () 

대괄호 =>[] 

• list를 나열 할 때

• list의 인덱스를 지정해줄 때 ex) mise[0], mise[1]

중괄호 => {}

• dictionary를 만들 때 {'key': 'value'}

• style tag를 적용해줄 떄 ex) .commet { 적용해줄 것 }

• 특정 function에 대해 정의해줄 때 ex). function openclose() { 실행 할 것 }

• for문의 조건문 뒤에 실행할 것을 적어 줄 때 for (i=0; i<100; i++) { 실행 할 것 }

• if문 뒤에 실행 할 것을 적어 줄 때 if ( a > b ) { 실행 할 것 }

소괄호 => ()

• for문의 특정 조건을 적어줄 때 ex) for (i=0; i<100; i++) 

• if문의 특정 조건을 적어 줄 때 ex) if ( a >b )

• jquery 선택자를 적어줄 때(특정조건) $('#names-q7')

• 함수 이름 바로 뒤에 (매개변수가 들어갈 위치) function openclose() => ()여기에는 특졍 매개변수가 들어갈 수 있다.

위와 같이 정리가 될 수 있겠네요.

위와 같이 적고 보니 어느정도 규칙이 보이는 것 같아요.

일단 기본적으로 list를 만들 때는 대괄호, 그리고 그 list의 특정 인덱스를 뽑아 줄 때도 대괄호를 쓰니

대괄호는 list와 굉장히 밀접하다고 생각하시면 되겠네요.

중괄호와 소괄호는 함께 보면 좋을 것 같은데요.

소괄호는 if문 for문 jquery의 선택자 등 보통 실행할 조건을 적어주는 경우가 많네요. 

그리고 중괄호는 그 소괄호 뒤에 나와서 실행할 조건이 맞으면 실행할 것을 적어주는 위주로 사용하고 있습니다.

저도 익숙해서 그냥 사용을 했는데, 이렇게 정리하고 나니 조금은 큰 규칙이 있는 것 같습니다.

2019.05.18 jquery & ajax를 활용하여 댓글 구현하기입니다.

• 패스트캠퍼스 웹 프로그래밍 스쿨 수업 정리 내용

목표

• 댓글을 달 때 ajax가 작동하여 새롭게 페이지가 리로드 되지 않게 하기
• ajax를 통해 단 댓글을 해당 DB에 저장하고
• 그 댓글만을 가지고와서 댓글창의 가장 상단에 끼워넣기

로직

• 먼저 해당 댓글 입렴 폼의 태그를 확인한다.
• 그리고 그 폼의 submit을 눌렀을 때 해당 변화가 없도록 막고
  • submit의 경우 return false를 활용한다.
• url을 지정하고 serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.
• ajax를 통해 url이 작동하도록 하고 해당 url을 views로 연결하여
• 해당 views.py(댓글 구현 뷰)에서 처리할 수 있도록 한다.
• 해당 뷰에서 처리 이후에 해당 채워넣을 부분의 html을 반환해줄 수 있도록 comment_single.html을 구현한다.
• 그리고 뷰에서 그 html파일을 JsonResponse를 통해 반환해준다.
• 다시 해당 템플릿에서 .done 부분에 prepend(가장 상단에 넣어주기)를 통해 해당 파일을 넣는다.

1. 해당 댓글 입력폼의 태그 확인하기

<form action="{ % url "board:comment" object.id % }" method="POST" id="comment_form">
{ % csrf_token % }
<input type="hidden" name="is_ajax" value="">
    {{comment_form.as_p}}
    <input type="submit" value="Comment" class="btn btn-outline-primary">

</form>

<table class="table table-striped" id="comment_list">
    <tbody>
    { % for comment in comments % }
   <tr>
        <td>{{ comment.text }}</td>
        <td>{{ comment.author.username}}</td>
        <td>{{ comment.created }}</td>
        <td><a href="{ % url 'board:comment_delete' comment.id % }">삭제하기</a></td>
        <td><a href="{ % url 'board:comment_update' comment.id % }">수정하기</a></td>
    </tr>
    { % endfor % }
    </tbody>
</table>

2. 그 폼의 submit을 눌렀을 때 해당 변화가 없도록 막는다.

{ % block extra_script % }
<script type="text/javascript">
    $(function () {
        $('#comment_form').submit(function(e){
            alert('댓글쓰기 완료');
            return false;   //이게 없으면 다시 리로드 되서 다녀온다.
        });
    });

</script>
{ % endblock % }

3. url을 지정하고 serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.

• url의 경우 기존에 연결되어 있는 url을 활용한다.
• serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.

4. views.py 완성하기

def comment(request, document_id):
    is_ajax = request.POST.get('is_ajax')

    document = get_object_or_404(Document, pk=document_id)

    comment_form = CommentForm(request.POST)
    comment_form.instance.author_id = request.user.id
    comment_form.instance.document_id = document_id
    if comment_form.is_valid():
        comment = comment_form.save()

    if is_ajax:
        html = render_to_string('board/comment/comment_single.html',
                                {'comment':comment})
        return JsonResponse({'html':html})

    return redirect(document)

• is_ajax를 POST를 통해 is_ajax를 받는다. html의 jquery가 제대로 작동했다면 1을 가지고 있다.
• 해당 새롭게 생긴 댓글을 넣어주기 위한 간단한 html을 새롭게 제작한다.
  • 만약 is_ajax가 있다면 html은 single.html을 rendering하고 위에 comment와 함께 넘겨줄 수 있도록 한다.
  • JsonResponse를 통해 html을 넘겨준다.

comment/comment_single.html

    <tr class="comment_row">
        <td class="comment_text">{{ comment.text }}</td>
        <td>{{ comment.author.username}}</td>
        <td>{{ comment.created }}</td>
        <td><a href="{ % url 'board:comment_delete' comment.id % }" class="btn_comment_delete">삭제하기</a></td>
        <td><a href="{ % url 'board:comment_update' comment.id % }" class="btn_comment_update">수정하기</a></td>
    </tr>

• 해당 페이지를 통해 가장 위에 끼워 넣을 댓글을 만들어낸다.

5. jquery 완성하기

{ % block extra_script % }
<script type="text/javascript">
    $(function () {
        $('#comment_form').submit(function(e){
            $('input[name="is_ajax"]').val("1")
            // alert('댓글쓰기 완료');
            url = $(this).attr('action'); //원래 다녀와야하는 url
            params = $(this).serialize(); //현재 폼에 담겨있는 값들을 가지고 올 수 있게 해준다.
            $.ajax({
                url:url,
                method : "POST",
                data: params,

            }).done(function(data){
                $('#id_text').val("");
                $('#comment_list tbody').prepend(data.html); //tbody 시작지점에 요소 끼워넣기
                //$('comment_list tbody').append(tr); //tbody 끝 지점에 요소 끼워넣기
                // is_ajax 값 초기화
                $('input[name="is_ajax"]').val("");
            });

            return false;   //이게 없으면 다시 리로드 되서 다녀온다.
        });
</script>
{ % endblock % }

• 해석하기
  • comment_form이라는 id를 가진 곳에서 submit을 누르면 막는다.(e, return false)
  • is_ajax라는 이름에 1의 값을 부여해준다.
  • url은 원래 이동하는 url로 설정한다.
  • params는 serialize()를 통해 현재 폼에 담겨 있는 값들을 가지고 올 수 있게 한다.
  • ajax를 url 요청이 위에 정의해놓은 url로 왔을 때 그리고 method는 POST방식으로 왔을 때 작동한다.
  • data는 params를 받는다.
  • 위의 ajax를 통해 URLConf를 통해 views.py를 다녀오고 JsonResponse를 통해 해당 데이터를 반환 받는다.
  • params도 views.py를 통해 data : params로 넣어서 보내준다.
  • 야는 왜 id_text 값을 어디에서도 설정해주지 않았는데 적었던 데이터가 사라지는 것일까?
    • 폼 형태로 끼워넣으면 알아서 id_text가 설정된다.

댓글달기 전체 과정보기

• submit이 일어나면 is_ajax를 1로 바꾼다.
• url 은 댓글남기기 페이지 주소를 가지고 온다.
• params = serialize를 통해 폼에 있는 데이터들을 하나로 붙인다.
• 리 다이렉션이 안되고 데이터를 추가로 가지고 오고 싶퍼서 is_ajax를 설정한 것이다.
• 뷰에서 is_ajax이 있으면 return Jsonresponse를 하고
• 아니면 redirect를 하도록 한다.

2019.05.17 jquery & ajax 기본 문법

• 패스트캠퍼스 웹 프로그래밍 스쿨 수업 정리 내용

jquery & ajax 기본 문법

<script type = "text/javascript">
    $(function(){
        $('특정 테그').특정모션(function(e){
            e.preventDefault(); //일어날 행동을 일단 막고
            url = $(this).attr('href')
            data = #정의 할 데이터가 있을 때 정의
            $.ajax({
                url : url
                data : data #넘겨줄 데이터가 있을 때 적는다.
            }).done(funtion(data){
                ajax실행 뒤에 일어날 행동 정의(html 단에서)
    });
}};
</script>

• 특정한 테그 혹은 class혹은 id에 어떤 모션이 일어났을 때(click, submit 등)
• 원래 일어나는 행동을 막고
• 이후에 필요로 쓰게될 특정 데이터 혹은 url에 대해 정의 해준 다음에
• ajax를 실행시켜 ajax가 설정된 url을 통해 view를 실행시켜 해당 뷰가 db를 정리 한뒤에 필요한 것은 JsonResponse로 반환해주고 그 반환 값을 ajax에서는 받아와
• .done뒤에 일어날 행동들을 설정해서 html 단에서 일어나는 행동들을 정의시켜준다.

ajax 기본 연습하기 (간단한 데이터 삽입해보기)

python views.py 만들기

• 바꿔 끼울 데이터를 딕셔너리 형태로 입력해준다.
• 일반적인 경우 데이터를 전송하기 위해 json형태로 데이터를 보낸다.
• 따라서 jsonResponse를 활용한다.
• json은 딕셔너리 형태로 데이터를 전송한다.

from django.http import JsonResponse

def get_data_ajax(request):
    data = {
        "name":'jake',
        "age":100,
        "blood":"O",
    }
    return JsonResponse(data)

해당 url을 연결시켜준다.

path('ajax/get_data/', get_data_ajax, name='get_data_ajax')

템플릿에 데이터 들어갈 곳 및 버튼 추가하기

<div class = "data_area">
    데이터 입력될 곳
</div>

<a href="{ % url 'board:get_data_ajax' % }" class="btn_get_data btn btn-primary">데이터 가져오기</a>

템플릿에 jquery 추가하기

1. 먼저 url을 연결해준다.
2. 다음으로 버튼을 눌렀을 때 이동하지 않도록 한다.
3. 다음으로 데이터를 가지고 와야 한다.
4. base.html에 script아래 extra_script를 추가해준다.
   1. jquery 다운로드 사이트에 접속하여 jquery를 가지고 온다.
   3. base.html에 있는 slim jquery를 바꾸어 줘야 한다.
5. script type을 추가해준다.

{ % block extra_script % }
<script type="text/javascript">
    $(function(){
        $('.btn_get_data').click(function (e) {
            e.preventDefault(); //버튼이 클릭하면 이동못하게 기본 기능 취소
            alert('clicked'); //확인을 위해 알림창 띄우기
            url = $(this).attr('href');   //this는 이벤트 대상(btn_get_data)
            $.ajax({
                // ajax 호출시 사용할 매개변수
                url:url
            }).done(function(data){
                // 호출이 끝나면 받은 데이터를 처리하는 부분
                alert(data.name);
                // 새로운 데이터를 추가해주고 싶을 때

                name = data.name;
                age = data.age;
                bloodtype = data.bloodtype;
                html = "<ul><li>"+name+"</li><li>"+age+"</li><li>"+bloodtype+"</li></ul>"
                $('.data_area').html(html)
            });
        });
    });

</script>
{ % endblock % }

• 해당 동작이 일어날 페이지 아래에 위의 내용을 끼워넣는다. block extra_script의 경우 base.html에서 미리 지정해놓는다.
• 해석하기
  • .btn_get_data 클래스가 지정된 것을 찾아 만약에 클릭이 되면
  • 일단 일어날 일을 막고
  • clicked가 된 알람창을 띄어줘라
  • 그리고 이후에 사용하게 될 것들을 지정해주는데
  • url은 그 이벤트가 일어난 것에 연결된 링크를 연결해서 사용한다.
    • 아마 보통 어떤 형태가 일어나기 위해서는 링크가 연결되어야 하기 때문에 대부분 링크가 있을 것이다.
  • ajax를 실행하고
  • ajax가 실행될 때 url은 위에서 설정된 url을 바탕으로 URLSConf를 바탕으로 해당 views.py로 찾아가고
  • views.py에서 넣어놓은 data를 JsonResponse로 넘겨서 받아온다.
  • 그 받아온 데이터를 done(function(data)를 통해 가지고 오고
  • name와 age/ bloodtype에 넣어서 그 값들을 html 태그 속에 넣는다.
  • 그리고 지정된 class="data_area" 위치를 찾아가서 해당 html을 채워넣고 화면에 보여준다.

2019.02.03 javascript 스코프

Scope

Var greeting = “Hello”

Function greetSomeone(){
  var firstName = “josh”;

 return greeting + “ “ + firstName;
 }

greetsomeone();  // —> Hello josh

firstName;  // —> ReferenceError (firstName is not defined ——> 선언된 적이 없다)

Local scope에서 Global scope는 찾을 수 있으나
Global scope에서 Local scope을 찾을 수 없다.

껍질 이라고 생각하자. 안쪽 껍질에서는 바깥 쪽 껍질을
찾을 수 있으나, 바깥 쪽 껍질에서는 안쪽 껍질은 찾을 수 없다.

javascript에서 Scope는 함수가 선언되는 동시에 자신만의 scope를 가진다.

Lexical scope vs Dynamic scope

Scope의 룰

Local Scope(지역 변수) vs Global Scope(전역 변수)

0. Local Scope - 함수 안에서 적용

1. Global Scope는 어디에서든 접근 가능

2. 하위 스코프는 상위 스코프에서 접근 불가

3. 지역변수는 함수 내에서 전역변수보다 높은 우선순위(자바스크립트는 기본적으로 function level의 scoping 규칙을 따름

4. debugger를 통해 디버거 확인 가능

Ex)

var name = “Richard”;



function showName(){
  var name = “jack”;

 console.log(name);
 }

console.log(name); // Richard

showName(); // jack

console.log(name); // Richard

Ex)

Var name = “Richard”;

if(name){
  name = “Jack”;

 console.log(name); // Jack

}
 console.log(name); //Jack

Ex)

for(var I=0; I<5; I ++){
  console.log(I);  // I = 0부터 조건 확인하고 콘솔 배출하고 ++해준다.
 }



for(let I = 0; I<5; I++){
  console.log(I)
 }

Console.log(I) // ReferenceError

var와 let, const keyword

0. let은 블록 단위라서 블록을 벗어나면 접근 불가능

1. let과 const는 var로 정의된 변수를 재정의할 수 없음

2. const는 한번 값을 설정해 놓으면 바꿀 수 없음

3. 실제로는 let과 const가 안정하기 때문에 더 많이 쓰는 추세

전역 변수와 window 객체

(선언 없이 초기화된 변수는 전역 변수)

함수 외부에서 선언된 변수는 모두 전역 변수
전역변수는 모두 window에 연결되어 있다.

키워드 없이 변수 선언을 하면 전부 전역변수에 붙게 된다. 따라서
항상 변수 선언을 해줘야 한다. 가급적 전역 범위의 번수를 많이 설정하지 말자.

Hoisting (var만 해당)

변수 선언은 범위에 따라 선언과 할당으로 분리됨

Javascript 엔진이 내부적으로 변수 선언을 scope의 상단으로 끌어 올린다.

할당은 제 자리에 있음

Ex)

a = 2;

Var a;

console.log(a); //2

함수 선언식은 항상 상단으로 // 통째로

Var fun = function(){}

함수 표현식은 할당된 변수만 상단으로

Function fun(){}

2019.01.29 javascript 콜백함수, 객체 지향

• 생활 코딩을 바탕으로 공부하였습니다.

객체

javascript에서는 함수도 객체다. = 값이다.
함수 자체가 값이 될 수 있다.

Function a(){} === var a = function(){}

값으로서의 함수는 변수안에만 담길 수 있는 것이 아니라
A = { b : function(){} } 처럼 값이기 때문에 객체 안에도 담길 수 있다.

객체에서 b는 key로서 그릇이며 변수와 같은 역할을 한다.
객체 안에서 변수의 역할을 한다는 것을 속성 , property라고 한다.
속성 값으로 담긴 함수를 메소드(method)라고 부른다.

()는 함수를 호출한다는 의미이다.
함수는 값이기 때문에 다른 함수의 인자로도 전달 될 수 있고
리턴값(반환값)으로도 저장될 수 있다.
배열 값으로도 가능하다.
함수는 값이기 때문에 값을 저장하는 컨테이너인 배열에도 저장 될 수 있다.

함수는 값이기 때문에
변수, 매개변수, 리턴 값, 배열 값 등에 쓰일 수 있다.
====> first - class citizen(object, value)

콜백 함수

값으로서의 함수와 밀접하게 연관된다.
어떠한 함수가 수신하는 인자가 함수인 경우 배열도 객체이다.

자바스크립트가 가지고 있으면서 쓰게 되는 메소드는 내장 객체, 메소드
우리가 만든 함수는 우리가 만든 것이기 때문에 사용자 정의 객체라고 한다.

우리가 만든 함수를 통해서 (값으로서 함수를 쓸 수 있기 때문에) 오리지널 함수의 사용방법을 완전히 바꿀 수 있다 ====> 콜백 이것이 가능한 것은 자바스크립트의 함수가 값이기 때문이다.

콜백 함수를 잘 이해해야지 나중에 좀 더 쉬운 코드들을 지속적으로 작성 할 수 있게 된다.

잘 몰라도 누군가가 물어본게 잘 몰라도 된다. 그냥 모르면 모르는대로 이해할려고 노력하면 된다.

비동기 처리 — 이해가 안되었다. ㅠㅠ (나중에 꼭 다시 봐야겠다)
동기적 처리 : 순서대로 쭉 처리 했다
비동기적 처리 : 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일들로 지정 후 처리

클로저

내부함수가 외부함수의 맥랙에 접근할 수 있는 것.
함수 안에 함수를 선언하면 그 함수안에서만 작용하는 함수이므로 안정적이다.
내부함수에서 외부함수의 지역변수에 접근 할 수 있다.—> 이건 항상 쓰던건데??
외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 외부함수의 변수에 접근 할 수 있다.

ex)

function outter(){

    var title = 'coding everybody';  

    return function(){        

        alert(title);

    }

} ——> return 이 나옴으로서 function이 생을 마감했는데 

inner = outter();

inner(); ———> 변수에 접근 가능하게 됨

Private variable 가 왜 필요한가?

소프트웨어가 커지게 되면 많은 사람들이 코드를 작성하게 된다. 미래의 자기자신 과 과거의 자기 자신도 포함.

title을 설정해놓고 set_title을 이용해서 title을 바꾸고 get_title로 title을 가지고 오고 / 따라서 title을 막 수정 못하게 만듬

arguments

배열과 비슷하나 배열은 아니다.

함수에 매개변수를 정의하지 않다고 하더라도, 인자의 수를 마음대로 지정하더라도 문제가 나지 않는다.

arguments안에는 사용자가 전달한 인자가 들어가 있다.

a+=1; => a=a+1

Arguments.length —> 어떤 함수에 들어온 인자가 몇개인지 파악

ex)

function one(arg1){

    console.log(

        'one.length', one.length,    //1

        'arguments', arguments.length  //2

    );

}



one('val1', 'val2');  // one.length 1 arguments 2 

함수의 호출

객체는 속성을 가지고 있고 속성의 값이 저장되어 있다면 property라고 한다.

가장 기본적인 방법 function func();

객체 지향

객체지향 프로그래밍은 크고 견고한 프로그램을 만들기 위한 노력의 산물이다. 객체지향이라는 큰 흐름은 현대적 프로그래밍 언어들을 지배하고 있는 가장 중요한 맥락이라고 할 수 있다. 하지만 자바스크립트의 객체지향은 다른 언어들의 객체지향과 사뭇 다르다. 특히 Java나 C++과 같은 주류 객체지향 언어에 익숙한 독자라면 극심한 혼란을 경험할 수도 있다. 바로 이러한 특성 때문에 웃으면서 들어갔다가 울면서 나오게 된다.

Object Oriented Programming

객체 - 변수와 메소드를 그룹핑한 것 이렇게 그룹핑 하고 나면 다른 사이트에도 또 이용 가능(재활용성에 객체가 기여한 것)

1. 하나의 객체 안에는 그 객체가 가지고 있는 취지에 따라 객체라는 껍질안에 넣어둔 것.

2. 그 사이에서 여러 가지 문제들이 나타나는데 그 문제들을 해결 하기 위한 것이 지금 우리가 마주하고 있는 객체지향의 여러가지 기능들이다.(ex. This. Prototype)

객체 지향 프로그래밍 - 객체를 만들어가는 것

객체 지향 공부 방법

문법 : 객체지향을 편하게 할 수 있도록 언어가 제공하는 기능을 익히는 것.

객체를 만든다는 것은 부품화 시키는 것이다.

메소드를 사용하는 기본 취지는 연관되어 있는 로직들을 결합하여 메소드라는 완제품을 만드는 것.

은닉화 캡슐화 - 제대로 된 부품이라면 어떻게 만들어지는지 몰라도 모르는 사람도 사용 할 수 있도록 하는 것.

내부의 동작 방법을 다양한 케이스 안(객체)으로 숨기고 그 부품의 사용 방법(메소드)만을 알려준다.

인터페이스 - 부품과 부품을 서로 교환 할 수 있도록 한다. 따라서 표준이 필요하다. 그 표준에 맞추어 연결점을 인터페이스 이다. 이질적인 것들을 미리 막을 수 있도록 한다.

설계 : 좋은 객체를 만드는 것 / 현실이 훨씬 복잡하다.

오늘 배운 것 내 스스로 정리해보기

1, 객체 지향의 전체적인 그림

• 객체 지향은 큰 프로그램을 만들기 위한 노력의 산물이다. 객체란 큰 프로그램 내에 연관되어 있는 것들을 묶어서 하나의 틀안에 넣어 놓는 것이고, 객체 지향이란 그런 객체들을 만들어가는 과정들이다. 이런 것들은 코드의 재사용성을 높여주는데 다른 곳에 재사용하면서 여러가지 문제점들이 나타난다. 이러한 문제점들을 해결해 주기 위해 객체에는 여러가지 기능들이 존재한다. 예를 들면 this. prototype 같은 것들은 객체의 재사용 과정에 생기는 문제점들을 해결.

2. function 과 콜백함수

   • function은 하나의 객체이면서 값이다. 따라서 값이기 때문에 매개변수에 들어갈 수도 있고, 인자로도 들어갈 수 있으며, 배열 속에도 오브젝트 속에도 들어갈 수 있다. (오브젝트의 value로 쓰일 때는 메소드라고 부른다.)

   • 콜백함수는 조금 더 정의를 익히기 위해 노력해야겠다. 코드를 통해 명시적으로 호출하는 함수가 아니라 특정시점에 도달하였을 때 시스템에서 호출되는 함수.????.....

2019.01.16 javascript 변수, 조건문, 반복문, 함수, 객체, 배열

자바스크립트 기본 문법들에 대해서 배웠던 것들에 대해 다시 한번 정리하고자 한다.

변수

1. 왜 써야 하나?

컴퓨터 프로그래밍은 컴퓨터에게 어떠한 작업내용(코딩)들을 줘서 실행할 수 있도록 만드는 것이다.(나 스스로 생각...)

그 과정에서 굉장히 긴 단어(예를 들어 ㅠ=3.141592...)들을 반족해서 적어야 하는 과정들이 충분히 생길 수 있다. 심지어는 [2, 3, 4] 이렇게 여러개의 정보들을 입력해야 된다든지 그런 경우들이 충분히 생길 수 있다.

이런 경우 변수를 설정하여 간단하게 해결 할 수 있다. 따라서 변수는 굉장히 중요하다고 갑자기 적는 도중 느껴졌다.

2. 어떻게 쓰냐?

변수를 선언한다는 표현을 쓰던데
var ㅠ = 3.141592... 이라고 ㅠ를 3.141592라고 선언한 것이다.
이제 앞으로 ㅠ를 쓰게 되면 3.141592를 입력하게 된 것이고
ㅠ*10 = 31.41592가 된다. 한번 변수를 선언한 이후에는 굳이 var를 쓰지 않아도
ㅠ = 3.14 이렇게 하여서 바꿀 수 있다.

3. 추가사항

값 없이 변수 설정도 가능하다.(당장 정해지지 않았다면)
var x; 이렇게 하면 undefined로 설정이 된 것이다.
또한 원시타입이라는 것이 있는데
이 부분에 대해서는 좀 더 추가적인 공부가 필요할 것 같다.

var a = 20;

var b = a;

a = 10; 으로 했을 때 b 의 값은?

또한 변수에서는 local scope와 global scope 2가지로 나누어서 생각해야 한다.

local scope에서 적용된 변수는 global scope에서는 적용되지 않는다.

조건문

1.왜 써야 하나?

어떤 상황에서 10보다 크면 이것을 출력하고, 5보다 크면 이것을 출력하고 컴퓨터에게 어떤 작업을 하도록 시킬 때 각 상황에 대한 조건을 줘야 할 때가 많다. 그렇기 떄문에 조건문이 정말 중요하다

2.어떻게 쓰냐?

if(조건1){

조건 1이 성립될 때 실행될 코드

} else if(조건2){

조건 2가 성립될 때 실행될 코드

} else{

위에 조건들이 성립하지 않을 때 실행될 코드

}

3.추가사항

|| (or) - or와 and에서 기본은 true 이다.

&& (and)

!(not)

위에 추가사항들을 활용하여

if(조건 1 || 조건2){

조건 1과 2 중 하나가 성립될 때 실행할 코드

} else if(조건1 && 조건2){

조건 1과 2 2개가 함께 성립될 때 실행할 코드

}

반복문

1.왜 써야 하나?

예를 들면 1부터 100까지 정수들을 더하는 코드를 짠다고 할 때
var a = 1+2+3+4+5+......+100 이런씩으로 지속적으로 어떤 규칙들을 반복해야 할 때가 많다.

이러한 규칙들을 반복문을 통해서 쉽게 해결할 수 있다.

프로그래밍의 가장 큰 장점 중에 한개는 인간이 지속적으로 반복해야 하는 일들을 해결 해줄 수 있다는 측면에서 반복문은 굉장히 중요하다.

2.어떻게 쓰냐?

반복문에는 for와 while 2가지가 있다.
for은 여러가지 조건들을 한번에 담아서 좀 더 쉽게 쓰게 해준다.
위의 식을 for 구문으로 만들어보면

var result = 0

for(i=1; i<=100; i += 1;){

 result = result + i;

}

i는 1부터 시작하고 i가 100이하면 1씩 더한다.
while은 여러가지 조건들을 나열해줘야한다.

var result = 0   
var i = 0   
while(i<=100){

result = result + i
i += 1;

}

3.추가사항

i++ 와 ++i의 차이점( 좀 더 자세히 알 필요 있음)

var result = 0

var i = 0

for(i=1; i<=100; i++){

result = result + i

}


var result = 0

var i = 1

for(i=1; i<=100; ++i){

result = result + i

}

함수

1.왜 써야 하나?

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.??
반복문도 어떤 코드를 한자리에서 연속적으로 반복시켜주지만
함수는 내가 필요한 여기저기 맥락안에서 언제든지 쓸 수 있음.
따라서 좋은 부품을 만드는 것.
이 함수를 사용하는 여러곳에서 처음 기본이 되는 함수를 수정하면 이 함수를 이용하는 모든 곳에서 수정, 개선 할 수 있음(이를 유지보수가 용이하다고 한다)
가독성이 좋아 질 수 있다.

재사용성, 유지보수, 가독성은 굉장히 중요하고 그 부분에서 함수는 굉장히 중요하다

2.어떻게 쓰냐?

function 함수이름(인자, 인자){
    코드

    return 반환값

} 

이렇게 function을 설정해놓으면 함수이름을 통해서 언제든지든지 코드와 return 반환값을 불러올 수 있다.

단, return은 결과값을 불러옴과 동시에 함수를 종료시켜서 return 뒤에 나오는 것은 출력시키지 않는다.

여기서 인자는 input과 관련되며 매개변수 (parameter)라고 하며
다시 수정을 해보면

function 함수이름(매개변수){
    코드

    return 반환 값;

} 

alert(함수이름(인자));

alert해서 함수를 호출할 때 들어가는 수가 인자이고 / 위에 function을 정의하는데 들어가는 것은 매개변수이다.

3.추가사항

함수 정의 방법

numbering = function(){

    코드

    return 반환 값;

}

• 익명 함수(이름이 필요없고 바로 실행할 때)

배열 & 객체

1.왜 써야 하나?

그릇을 담는다

배열 => 순서가 있는 값들의 모임 [a, b, c]

객체 => 각각의 정보에 대한 값들이 있는 것들을 나열 할때 {name :byeonguk, age :29, weight : 80}

배열과 객체의 가시적인 차이점은
배열은 인덱스가 자동 지정되지만 객체는 우리가 인덱스를 설정해서 지정해 줄 수 있음.
배열은 저장된 데이터들이 순서를 가지고 있음. but 객체는 key와 value 만 있음

2.어떻게 쓰냐?

• 배열의 선언

  • var number = [1, 2, 3, 4]

• 특히 배열은 각자의 index 위치가 있음 0부터 시작

  • num[2]; // 3

• 각 위치에 있는 값 바꾸기

  • num[2] = 15;

  • num[]; // [1, 2, 15, 4]

• 길이 확인하기

  • number.length;

• 값 추가하기

  • number,push(28);

  • number[]; // [1, 2, 15, 4. 28]

• 제일 마지막 값 제거하기 ( 배열 원본을 변화시킵니다)

  • number.pop();

• 제일 첫번째 값 제거하기 / 제일 첫번째 값 추가하기 (배열 원본을 변화시킵니다)

  • number.shift(); / number.unshift(8)

객체

• 객체 선언하기(object)

var user = {

    name = "byeonguk"

    age = 29

    weight = 80 

}

name = key

byeonguk = value



var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

배열,객체 값 사용하기/ 추가하기/ 바꾸기

Dot notation (함수에서 쓸 수 없다?)

user.name; // byeonguk

user.age;// 29

Bracket Notation

user['name']; // byeonguk

user['age'];// 29

• 객체 값 추가하기

var user = {

    name = "byeonguk"

    age = 29

    weight = 80 

    height = 181

}

• 객체값 삭제하기

delete obj["age"]

3.추가사항

객체 속성 : object property

• 배열에 저장된 값 불러오기

    function getNthElement(array, n) {

      if(array, n){

        return array[n]; }

객체에 저장된 값 불러오기

1. key 값 불러오기

    for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다

    for(var key in grades){

console.log(key)

객체 안에 함수도 저장 될 수 있다.

2. value 값 불러오기

for(var = key in grades){

console.log(grades(key))

this : 함수가 가르키고 있는 객체

객체지향프로그래밍 : 서로 연관되어 있는 값과 연관되어 있는 처리를 하나의 그릇안에 모아 그룹핑 해놓은 것

배열과 객체 문제는 완전히 다르다.

서로 지정하는 것과 불러오는 것 추가하는 것 모두 다름.

객체에 배열 형식을 쓰면 안된다.