younguna
    • Create new note
    • Create a note from template
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Write
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
    • Invite by email
      Invitee

      This note has no invitees

    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Note Insights New
    • Engagement control
    • Make a copy
    • Transfer ownership
    • Delete this note
    • Save as template
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Note Insights Versions and GitHub Sync Sharing URL Create Help
Create Create new note Create a note from template
Menu
Options
Engagement control Make a copy Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
  • Invite by email
    Invitee

    This note has no invitees

  • Publish Note

    Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

    Your note will be visible on your profile and discoverable by anyone.
    Your note is now live.
    This note is visible on your profile and discoverable online.
    Everyone on the web can find and read all notes of this public team.
    See published notes
    Unpublish note
    Please check the box to agree to the Community Guidelines.
    View profile
    Engagement control
    Commenting
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Suggest edit
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    Emoji Reply
    Enable
    Import from Dropbox Google Drive Gist Clipboard
       Owned this note    Owned this note      
    Published Linked with GitHub
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    # 강남_R_Day05 리뷰 레포트 ### 참석자 - 김도현, 나영균, 임문수, 한수인 ## 1. 코드 동작 이해 - this를 바인딩하는 방식이 여러가지다. 그중 몇가지를 알아보자면 - callback함수를 arrow function으로 설정해서 다단계방식으로 받아오는 법. - 함수 선언식 / 표현식을 사용해서 bind() 메소드를 이용해서 this값을 가져오는 법. - 미리 상위 스코프의 변수에 this를 넣어놨다가 사용하는 법 - Promise then 패턴에 대해서 비동기 작업이 정상적으로 작동한 경우 resolve()로 값을 전달하고 비동기 도중 문제가 발생한 경우 reject()로 값을 반환한다. 후속조치를 then()과 catch() 잡는다. - Generator는 지연평가를 시행하므로 next()를 이용해 평가할 수 있다. yield가 될 경우 데이터와 제어권을 호출자에게 넘기고 호출자는 그 데이터를 처리하여 다시 generator쪽으로 next()를 통하여 넘겨주면 멈춘 시점에서 다시 시행한다.이를 통해서 이터러블을 쉽게 만들 수 있을뿐만 아니라 제어권의 통제를 통해서 비동기적 처리를 관리할 수 있게 된다. #### 코드작동순서 - b.js에서 a, c, d 모듈 객체를 가져 온 후에 runner()를 실행시킨다. - runner가 run 제네레이터의 yield가 넘긴 Promise를 iterable 객체에서 next()로 value로 가져와 다시 run으로 넘기기위해 next()에 인자로 넘긴다. - run 제네레이터의 내부에서는 checker 인스턴스의 프로퍼티와 msg, source, ourStudents인자를 이용해서 Promise객체를 iterable 형태로 만들어 yield로 호출자에게 넘긴다. - 두번째 next()로 넘어온 Promise객체를 then으로 가져와 데이터를 assert로 처리하고 통과하면 console.log로 출력한다. - 에러가 발생하면 catch로 잡아 그에 맞는 log를 출력한다. ## 2. 코드 동작 개선 #### 스스로 확인할 사항 - 김도현 - VScode 디버깅에서 breakingpoint를 통해 프로그램이 어떤식으로 진행되는지 확인함. - breakpoint로 각 함수 및 변수가 갖는 값을 확인하며, 디버깅을 진행함. - 비동기에 대한 전반적인 지식이 부족해 그 쪽을 집중적으로 공부해야함. - 자바스크립트 this에 관해 공부해야함. - 나영균 - git의 branch - 개발을 하다보면 전체 코드를 독립적으로 바꾸었다가 다시 돌리거나 바뀐 부분만 다시 원본코드에 합치기를 하는 등의 작업을 한다. 이를 쉽게 가능하게 하는 것이 git의 브랜치 이다. - 크게 다르다고 손꼽히는 특징은 branching을 사용할때 매우 가볍게 순식간에 만들 수 있고 브랜치를 옮겨다닐 수 있기 때문이다. 그 이유는 실제로 git의 branch는 한 커밋을 가리키는 41바이트의 SHA-1 체크섬 파일에 불과하다. - master 브랜치에서 원하는 이름의 branch 명으로 파생한다. `git branch 브랜치명`. - 그러면 그 브랜치로 checkout된 상태이며 그 상태로 개발을 하면 그 브랜치의 코드를 바꾸는 것이며 commit을 하면 그 브랜치에 commit을 하는 것이다. - 작업이 완료되지 않은 상태에서 다른 브랜치를 가야한다면 `git checkout 브랜치명`으로 다른 브랜치로 이동할 수 있다. - 작업이 완료되고 해당 브랜치의 코드를 master로 merge하여 해당 branch의 작업내용을 master로 바꿀 수 있다. `git checkout master -> git merge 브랜치명` - 임문수 - breackingpoint를 사용하면서 실행이 해당 부분을 수행하는지 확인하면서 디버깅이 가능하다. 또한 실행하면서 확인하고 싶은 부분만 확인하면서 넘어갈 수 있다. - git branch는 독립적인 작업을 하기위한 기능으로 각각의 브랜치는 서로의 영향을 받지 않기때문에 여러작업을 동시에 실행할 수 있다. - 한수인 - 디버깅에서 breakpoint를 사용하면 에러가 안나도 내가 원하는 부분에 대해서 조사가 가능하다. - git branch를 통해서 버전관리를 한다. branch를 통해서 특정 분기를 만드는 것이다. 이는 어찌보면 commit의 더 큰 단위라고도 생각이 된다. commit은 branch라는 큰 틀안에서 자신의 작업에 관한 개인기록분기를 만드는 것이라 생각한다. - Promise에 대해서 공부하자. ## 3. Consideration #### 다같이 확인할 사항 - 각자 어떤 디버깅 방법을 사용해보았는가? 이 부분을 모두 이야기하고 적어보자. - 디버깅 모드를 사용해 console을 빠르게 확인함. - breakingpoint를 사용해, 변수 및 함수 내의 값을 확인하고 Step over / Step into/ Step out를 이용해 원하는 곳을 디버깅함. - call stack을 확인하여 프로그램 진행을 확인하며 디버깅함. - watch에 원하는 값을 넣어 디버깅함. - **breakpoints**: debugging시 자세히 Call Stack, 지역변수, 전역변수, 클로저변수, watch 등을 자세히 들여다 보고 싶은 지점을 의미한다. - **watch**: 코드를 계속해서 돌면서 유심히 따로 지켜보고싶은 것들을 지정하여 놓으면 watch에서쉽게 볼 수 있다. - **call stack**: JS에서 처음 실행된 함수에서 다른 함수를 호출 하고 또 그 함수에서 다른 함수를 호출하고 하며 처음 호출된 함수부터 나중에 호출된 함수부터 쌓이게 된다. 이를 stack으로 불리우는 이유는 나중에 호출된 함수가 처리되면서 쌓였던 stack도 처리되며 JavaScript가 실행되기 때문이다. - **Step over**: Step over는 코드 라인을 한 스탭을 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수를 실행하는데 함수 안으로 진입하지는 않습니다. - **Step into**: Step into는 Step over와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있습니다. - **Step out**: Step into로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아갑니다. - 프로젝트에서 npm 명령어를 활용해 추가로 외부 모듈을 설치했을때 package.json에 어떤 변화가 생기는지 설명하자. - 프로젝트 폴더 안에는 node_modules폴더가 생성되고 그 안에는 외부모듈이 설치된 것을 확인할 수 있다. 그리고 다시 package.json을 열어보면 devDependencies에 외부모듈이 추가된다. - node_modules 디렉토리는 어떤 역할을 하는 디렉토리 인가 설명해보자. - npm 에는 지역과 전역이라는 두가지 설치모드가 존재한다. 지역 설치는 해당 폴더에 node_modules 라는 폴더가 생기며 이곳에 외부 모듈이 설치 되며 시스템 전체에 영향을 주지 않고, 해당 프로젝트에서 필요로 하는 특정 모듈만을 받아서 사용할 수 있다. 전역설치에서도 node_modules 디렉토리가 생기지만 지정된 전역 폴더 안에 설치가 된다. - exports, require 동작방식 - module.exports VS exports - exports는 단순히 module.exports를 참조하며 두 방법 모두 마지막에 module.exports를 리턴하는 것임 - exports는 moduel.exports라는 객체를 참조하고 있는 것이므로 만약 exports에 새로운 키를 추가하고 값을 넣는 방법이 아닌 할당을 해버린다면 exports는 더이상 module.exports를 바라보지 않기 때문에 제대로 작동하지 않음 - Node.js는 모듈 시스템의 사실상 표준인 CommonJS를 채택하였고 현재는 독자적으로 CommonJS와 완전히 동일하지는 않지만 대부분 같은 방식을 사용하고 있다. - Node.js는 module 단위로 각 기능을 분할할 수 있다. module은 파일과 1대1의 대응 관계를 가지며 하나의 모듈은 자신만의 독립적인 실행 영역(Scope)를 가지게 되어 클라이언트 사이드 JS와는 다르게 전역변수의 중복 문제가 발생하지 않는다. - 모듈은 module.exports 객체 혹은 그 객체를 바라보는 exports를 통해 정의하고 외부로 공개한다. - 공개된 모듈은 require 함수를 사용하여 임포트한다. - 사용방법 ```js /* * func.js * module.exports에는 하나의 값만 할당 할 수 있으므로 여러개를 export할때 객쳏 형태로 export하면 유용하다. * */ const myfunc = () => {.....} const myfunc2 = () => {.....} module.exports.myfunc = myfunc moduel.exports.myfunc2 = myfunc /* * main.js * * */ const funcs = require("./func.js"); const myfunc = funcs.myfunc; const myfunc2 = funcs.myfunc2; myfunc(); myfunc2(); /* * 혹은 funcs.myfunc() funcs.myfunc2()로 사용할 수 있다. * */ ```

    Import from clipboard

    Paste your markdown or webpage here...

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lose their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template has been removed or transferred.
    Upgrade
    All
    • All
    • Team
    No template.

    Create a template

    Upgrade

    Delete template

    Do you really want to delete this template?
    Turn this template into a regular note and keep its content, versions, and comments.

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
    Wallet ( )
    Connect another wallet

    New to HackMD? Sign up

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Help & Tutorial

    How to use Book mode

    Slide Example

    API Docs

    Edit in VSCode

    Install browser extension

    Contacts

    Feedback

    Discord

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions and GitHub Sync
    Get Full History Access

    • Edit version name
    • Delete

    revision author avatar     named on  

    More Less

    Note content is identical to the latest version.
    Compare
      Choose a version
      No search result
      Version not found
    Sign in to link this note to GitHub
    Learn more
    This note is not linked with GitHub
     

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub
        • Please sign in to GitHub and install the HackMD app on your GitHub repo.
        • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
        Learn more  Sign in to GitHub

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Include title and tags
        Available push count

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully