JavaScript | 댓글 추가 삭제 기능

엄문주·2021년 1월 18일
26

JavaScript

목록 보기
5/8

Intro 🌼

  • React 만 하다가 JavaScript를 다시 공부하고 있습니다. 근데, JavaScript 를 하면 할 수록 React를 잘하려면 JavaScript 를 잘해야겠구나 하는 생각이 듭니다. JavaScript에서 배웠던 개념들이 React에 안걸리는게 없는 것 같아요. 우리 모두 JavaScript공부를 열심히 합시다. JavaScript 에서 event를 공부할 때, 가장 먼져 공부하게 되는 기능이 댓글 추가 삭제 기능 이에요. 근데, 처음에는 정말 어렵게 느껴지죠. 그래서 다시 정리를 해보려고 합니다.

  • 미리 HTML 만들어 두었어요. 크게 꾸민것은 없고 아이콘은 넣어주었어요. 먼져 내가 어떤 기능을 넣을지에 대한 설계가 필요해요. 그래야... 실수가 없어요.

    1. 댓글 추가기능.
      1-1. input 창에 댓글을 입력하고 button을 클릭하거나, enter를 치면 댓글이 입력.
      1-2. 댓글을 입력한 뒤, input창의 값의 초기화.
      1-3. 포커스가 input창에 올 수 있도록 할 것.
    2. 댓글 삭제기능.

  • 먼져 input 창에 접근을 했어요. 뭔가를 써야 하니깐요, 그리고 button을 클릭하면 ul태그 안에 댓글이 생길 수 있도록 버튼과 태그에 접근을 했답니다. querySelector를 이용해서요...
    그리고 저는 함수 를 만들거에요. 그리고 button을 실행시키면 그 함수가 실행 될 수 있도록 할거에요. 그래서 먼져 console로 값이 찍히는지 확인을 해보았답니다.

  • input창에 이제 진짜로 접근을 해야해요 위에서의 접근은 JavaScriptHTML태그와 연결이 된 것을 의미하구요. 여기서 말하는 진짜 접근은 React에서는 target.value로 많이들 알고 있는, value 값에 접근을 할거에요. input창에 아무 값이 입력을 하면 콘솔에 찍히는 걸 확인 할 수 있을 거에요.

  • 그러면 이제부터 onAdd 함수 안에 로직을 만들어 볼 거에요.

  • createElement 를 이용해서 우리가 필요한 li(댓글과 삭제버튼이 공존하는 곳), span(댓글이 생성되는 곳), 댓글 삭제 버튼 만들어 주었어요. 만들어주기만 하고 넣어주지를 않으면 화면에 안나타나기 때문에, appendChild를 이용해서 만들어 놓은 것들을 차례대로 넣어주었답니다. 그리고 innerHTML은 우리가 변경하고자 하는 값 또는 계속 있어야하는 것들 즉, text아이콘을 넣어주었어요. 이 둘을 안넣어주면, input창에 아무리 글을 써도, 아무것도 안나타날거에요.
    이렇게 까지 하면, 이제 댓글 추가 기능을 어느정도 한거에요.

  • 댓글 삭제 기능 은 여기에 removeChild만 추가해주면 된답니다. 이러면 댓글 추가 삭제 기능 을 완성한 거랍니다.

  • 그러면 이제부터 조금 디테일한 작업을 진행해 보도록 할게요. keypresskeyboardEvent 랍니다. 키를 입력하면 어떠한 이벤트가 발생하는 것을 도와주는 event 에요. console.log(event)를 입력하고 Enter키를 눌러주면 console창에 key=Enter라는 걸 확인할 수 있을거에요.

  • 이제 댓글 창이 초기화가 될 수 있도록 해보도록 하겠습니다.input.value=''를 마지막에 넣어주면 된답니다. 그러면 코드가 실행되다가 마지막에 초기화가 되는거죠. 그리고 input.focus() 를 해주면 input 창에 focus가 된답니다.

  • 마지막으로 input창에 값이 없으면 입력이 안되도록 설정을 해볼게요. 값이 없으면, 입력이 안될 뿐만 아니라 focus가 되도록 설정해두었어요.

  • 끝으로 모두 합쳐진 코드입니다.

후기 😁

  • 댓글 추가 삭제 기능은 처음 접하면 많이들 힘들어하는 기능이에요. 처음 자바스크립트 공부를 하시는 분들께 조금이나마 도움이 되었으면 합니다.
profile
세상과 소통을 꿈꾸는 개발자

8개의 댓글

comment-user-thumbnail
2021년 1월 23일

위코드 신입생인데 정말 도움이 많이 되는 글이네요 추천합니다!!

1개의 답글
comment-user-thumbnail
2021년 1월 25일

감사합니다. 많은 도움 얻고 갑니다~

1개의 답글
comment-user-thumbnail
2021년 8월 12일

정말 감사드립니다! 많은 도움 되었습니다

1개의 답글
comment-user-thumbnail
2023년 2월 10일

내용도 정말 좋지만 설명을 정말 잘하세요 도움 정말 많이 되었습니다 감사합니다.

1개의 답글