[공부] 노마드 코더 React hooks 3회차(useTitle, useClick)
2022. 1. 19. 23:27
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 querySelector를 사용해 html의 title을 가져와 title을 5초 후에 바뀌게 만들었다. const htmlTitle = document.querySelector("title"); 가져온 title을 htmlTitle이라는 변수에 넣고, 변수에 setTimeout을 활용해 내가 원하는 글자를 입력하면 제목을 바꿀 수 있다. useRef()를 활용해 클릭 이벤트 넣기 const element = useRef(); useRef()의 값을 받은 element는 바닐라JS에서 사용되는 querySelector나 getElementById 처럼 활용할 수있다. 활용하는 방법은 element.current로 쓰면 된다. element.current.addEventList..
[잡담] 개발자 이력서 작성하는 법
2022. 1. 19. 23:14
수근수근
❓ 상황 자기 전 유튜브를 보다가 유튜브의 알고리즘을 통해 해당 영상을 접하게 되었다. 보다 보니 해당 영상이 재미있고, 개발자가 되는데 도움이 되어서 작성하게 되었다. 👍 알게 된 점 자소서를 어떻게 작성해야 하는지 어렴풋이 알게 되었다. 가장 기억에 남았던 것은, 기술 스택을 작성할 때 자신의 기술 스택 실력이 어느 정도인지 스스로 알아야 한다는 점이다. 면접관분께서 예시를 들어줬는데, 지원자가 어떤 기술 스택을 '상'으로 적어놔서 면접 때 질문했는데 대답을 잘 못해서 탈락시켰다고 한다. 왜냐하면 자신의 실력을 잘 모르면 신뢰가 안된다고 한다. 그래서 나는 기술 스택의 역량을 파악하여 포트폴리오나 자소서에 이를 참고하여 작성해야겠다고 생각했다. 면접관들이 원하는 인재상을 약간이나마 알게 되었다. 면접..
[1人 프로젝트] 트위터 클론코딩 1회차
2022. 1. 19. 22:51
프로 젝트/트위터
All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 👩💻 이 프로젝트로 정한 이유 React를 학습하면서 React에 대한 실력을 향상하고자 시작하게 되었다. 🎉 성과 완성한 부분 firebase의 Sign-in method 설정 완료 인증 웹페이지 골격 개발 input태그와 form태그, button태그로 기본 골격을 만들었고, copyright와 현재 년도는 밑의 코드로 작성하였다. © {new Date().getFullYear()} twitter ✨ 느낀점 👍 알게 된 점 코드 단축하기 -1- input 태그에 사용되는 value값을 단축코드로 완성했다. 단축코드를 사용하지 않으면 input의 사용 개수가..
[공부] 노마드 코더 React hooks 2회차(useTab)
2022. 1. 18. 23:13
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 버튼을 클릭하면 내용이 바뀐다. 버튼을 클릭하면 changeItem함수가 실행된다. 나는 changeItem을 setCurrentIndex함수로 정의했으므로 content.map함수로 인해 생성된 index값을 currentIndex에 넣는다. useState함수가 실행됨으로써 리 렌더링이 진행되어, return 해주는 currentItem의 값이 변경된다. allTabs [0] -> allTabs [1]으로 바뀐다. 그래서 태그에 currentItem의 content이 바뀌게 됨으로써, 결과적으로 화면에 내용이 바뀌게 나타난다. 배열 안에 객체로 데이터 받기 이용할 데이터는 다음과 같이 정의해 사용한다. const data = [{id:1, content:'i am supe..
[공부] 노마드 코더 React hooks 1회차(useInput)
2022. 1. 17. 22:48
공부/프론트엔드
Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 이용해 트위터를 클론코딩하기 전에 hooks에 대해 사전학습이 필요하다는 얘기로 hooks를 공부하기 시작했다. ✨ 느낀점 👍 알게 된 점 특정 조건이 걸린 useInput만들기 const {value} = event.target;은 onChange될때 해당 이벤트가 발생한 태그의 value값을 받는겠다는 의미이다. 유효성 검사 함수를 통해 willUpdate의 값이 true냐 false로 바뀐다. willUpdate가 true일때는 setValue함수로 value값을 넘겨주어 input값이 입력이 되지만, willUpdate가 false가 되면 input에 value값을 넘겨주지 않게된다. 결과적으..