![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdPuhh6%2FbtrrWzH5tjw%2FSY1utA8KGZilQo23jxKgQK%2Fimg.jpg)
[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의 사용 개수가..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDwxoJ%2FbtrrRdM0Ohz%2F82qPwjxgu780Zn5wq10zOK%2Fimg.jpg)
[공부] 노마드 코더 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값을 넘겨주지 않게된다. 결과적으..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZZNfC%2Fbtrpyjnrhip%2Fs322zceYwV158ot1Z9RG4K%2Fimg.png)
[1人 프로젝트] 미니게임 웹사이트 1회차
2022. 1. 2. 01:58
프로 젝트/미니게임 웹사이트
👩💻 이 프로젝트로 정한 이유 JavaScript에 대해 공부를 했지만, 숙달되지 않아서 적용 및 응용시키기가 어려웠다. 그리고 JavaScript를 적극적으로 활용한 웹사이트가 없었다. 그래서 JavaScript에 대해 공부도 할 겸, 웹사이트에 JavaScript를 적용시키는 것을 익숙해지려고 프로젝트로 정했다. 🎉 성과 완성한 부분 로또 번호 추첨기 완성한 이유 코드캠프에서 실습으로 배운 내용이라 빠르게 작업이 가능하다 판단해서 진행시켜 완성시켰다. 💢 힘들었던 점, 아쉬운 점 여전히 파이썬과 혼동됨 파이썬에서는 배열안에 특정 단어를 확인하려면 in 연산자를 사용하지만, JavaScript는 .includes() 를 사용한다. 그리고 JavaScript에도 in 연산자가 있는데 파이썬과 다르게 인..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1ohI4%2FbtrodR0wd5D%2Fi8kqKvRyv3JgBNVn0qmP70%2Fimg.png)
[1人 프로젝트] 포트폴리오 1회차
2021. 12. 18. 23:54
프로 젝트/포트폴리오
👩💻 이 프로젝트로 정한 이유 HTML을 독학으로 공부한 지 한 달이라는 기간 동안, 나의 개발 능력을 어필할 프로젝트와 나를 소개할 포트폴리오가 없어서 포트폴리오용 웹사이트를 제작하기로 정했다. 🎉 성과 완성한 부분 포트폴리오의 Intro 부분에 클릭하면 해당위치로 이동하는 메뉴바, 시간에 따른 바뀌는 해(달), 배경색상을 골랐다. 완성한 이유 어느 웹사이트에 들어가도 메뉴바가 존재한다. 조금 따뜻한 분위기로 포트폴리오를 봤으면 좋겠어서 분홍색을 골랐다. 타 웹사이트와 차별점을 주고싶어, 배운 자바스크립트를 이용해 시간에 따른 해와 달의 변화를 주기로 했다. ✨ 느낀 점 💢 힘들었던 점 내 생애 첫 개발 작품(클론코딩 제외) 내 생애 첫 번째 개발 작품이어서인지 무엇부터 작성하는지 몰라 틀만 잡는데도..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9Pfqa%2Fbtrn229OwjG%2Fk2IcMXyqfiuXdya4ZDxhE0%2Fimg.png)
[1人 프로젝트] 키즈가오 클론코딩 1회차
2021. 12. 16. 23:21
프로 젝트/키즈가오
모두의 HTML5 & CSS3 - YES24 웹 개발은 1도 몰랐던 광고 기획자가 광고 회사를 그만두고 독학으로 만든 웹 사이트, 나도 만들어 볼까?컴퓨터 관련 전공자나 전문가만이 웹 사이트를 개발하던 시대는 지났다. 이제는 누구나 www.yes24.com 👩💻 이 프로젝트로 정한 이유 이론 내용은 이해가 되었으나, 실제로 코딩할때는 실제로 웹 사이트를 만들어보지 못한 탓인지 내게는 너무 어려웠다. 그래서, 개발경험을 쌓기위한 클론코딩 웹사이트로 선택 🎉 성과 완성한 부분 애니메이션 효과를 제외한 HTML, CSS로 웹사이트 제작 완료 완성한 이유 HTML과 CSS도 익숙하지 않아 어렵게 작업했는데, 애니메이션 부분은 더 어렵기 때문에 애니메이션 효과 넣기 전까지 완료했다. ✨ 느낀점 💢 힘들었던 점 ..