본문 바로가기
반응형

분류 전체보기

 (104)
2021년 5월 2일 React State & Props 예습(이벤트 핸들링을 통한 정보 전달 + ubuntu npm run test / npm run start (React) 오류 해결) 내일부터 들어가는 React State & Props를 대비하여 미리 sprint를 진행해보았다. 그 중 핵심이라고 생각하는 이벤트 핸들링 부분을 적겠다. 일단 언급할 부분부분의 코드는 아래와 같다. const Tweets = () => { const [name, setName] = useState(''); const [sentence, setSentence] = useState(''); const handleButtonClick = () => { const tweet = {}; tweet.id = data.length + 1; tweet.username = name; tweet.content = sentence; }; const handleChangeUser = (event) => { setName(e..
2021년 5월 1일 React 클론 코딩 #1 movie_app_2021 完 코드스테이츠에서 React를 들어가기전 React를 조금이나마 알기위해 기능구현까지 코딩했던 노마드코더 니꼬센세의 movie_app 강좌를 끝까지 듣고 그 후 Home화면에서 영화를 누르면 나오는 해당 영화의 Detail Component에 약간의 CSS를 추가하였다. 정말 아무것도 없는 無의 상태였기에 너무 꼴보기 싫지않게 약간의 CSS만 넣었다. 아래 웹은 깃헙에 의지하여 퍼블리싱한 나의 movie_app 페이지이다. movie_app_2021 bmaner.github.io 처음 React로 무언가를 만들었다는 점에서 애착이 간다. 하지만 애착이 가는 것과 별개로 너무 못생긴 상태 + 아무런 효과가 없는 상태이기에 이것에 어떻게 효과와 CSS를 더할지 앞으로 공부할 것이고 그를 바탕으로 계속 upda..
2021년 4월 30일 코드스테이츠 DAY-26(Twittler SPA with React에서의 삽질 로그) 2021년 4월 29일 코드스테이츠 DAY-25 (Movie app 제작 ERROR 해결로 얻은(?) 지식과 Twittler with "React"에서 2021년 4월 28일 코드스테이츠 DAY-24 (React 예습 및 Movie app 제작 중 ERROR... feat.니꼬) React 내일부터 React를 들어가기에 니꼬센세의 Movie app 제작 강의를 듣기 시작했고 중요한 지식을 접하게 되었다... bedeveloper.tistory.com 어제에 이어서 오늘도 React로 Twittler를 만드는 과제를 수행했다. 하지만 어제(useState)와는 조금 다른 방식으로 사용자의 클릭에 반응하는 것(보여주는 Component를 바꿔주는)을 구현하였다. 이 반응을 구현하는데에 쓰인 것이 바로 Ro..
2021년 4월 29일 코드스테이츠 DAY-25 (Movie app 제작 ERROR 해결로 얻은(?) 지식과 Twittler with "React"에서 이 지식을 활용) 2021년 4월 28일 코드스테이츠 DAY-24 (React 예습 및 Movie app 제작 중 ERROR... feat.니꼬) React 내일부터 React를 들어가기에 니꼬센세의 Movie app 제작 강의를 듣기 시작했고 중요한 지식을 접하게 되었다. 아래는 두서없지만 가장 중요하다고 생각한 부분을 받아 적어놓은 것이다. Componen bedeveloper.tistory.com Movie app 제작 ERROR 해결로 얻은 지식 : React 기초 결론은 무엇이었냐하면 Movie Component의 매개변수에 { }중괄호가 빠져있었던 것 분명히 니꼬센세의 강의를 들으며 받아적었고 심지어 어제 게시글에 이것에 대한 개념을 받아적었음에도 이 부분을 발견하지 못하여 한참을 헤매었다. 다시한번 상기해 보..
2021년 4월 28일 코드스테이츠 DAY-24 (React 예습 및 Movie app 제작 중 ERROR... feat.니꼬) React 내일부터 React를 들어가기에 니꼬센세의 Movie app 제작 강의를 듣기 시작했고 중요한 지식을 접하게 되었다. 아래는 두서없지만 가장 중요하다고 생각한 부분을 받아 적어놓은 것이다. Component는 HTML을 반환하는 함수이다. React application은 한번에 하나의 component만 rendering할 수 있다. 따라서 우리는 다른 component를 만들어 App.js에 넣어야한다. react는 재사용 가능한 component를 만들 수 있다. 이 말은 즉, component를 반복해서 사용할 수 있다는 것. 란 Food component에 kimchi라는 value로 prop name을 줬다는 것을 의미. JSX = HTML + Javascript react는 자동적..
2021년 4월 27일 코드스테이츠 DAY-23 (DOM, 유효성 검사 : 김정빈님 코드 분석 + 알게된 점) DOM DOM(Document Object Model)이란 그대로 해석하자면 문서 객체 모델을 의미한다. Javascript로 HTML을 조작하기 위하여 HTML을 객체로 정의한 것이라고 이해할 수 있겠다. 유효성 검사 : 김정빈님 코드 분석 Sprint Feedback 시간에 자신이 완료한 sprint(유효성 검사 페이지)를 자원하여 발표하는 시간이 주어졌고 동기 중 제일 먼저 김정빈님이라는 분이 프레젠테이션을 시작하셨다. 시작하자마자 딱 눈에 띄는 깔끔한 CSS가 보였고, 중간중간 예쁜 반응도 있었기에 관심이 절로 갔다. 김정빈님의 발표가 끝나고 정빈님이 코드를 디스코드에 뿌려주셨는데, 이 코드 분석을 주제로 블로깅하면 공부가 많이 될 것 같아서 정빈님의 사전 협조를 구했다. 자 한번 정빈님의 코드를..
2021년 4월 26일 코드스테이츠 DAY-22 (Twittler 목업 modal 실패 사례와 해결 사례 및 버튼 이벤트 추가, ipad 반응형 추가 ) 2021년 4월 25일 코드스테이츠(Twittler 목업 modal update) 미해결 2021년 4월 22일 코드스테이츠 DAY-18(자료형, 스코프, 클로저 + twittler 목업 update) 2021년 4월 21일 코드스테이츠 DAY-17(Twittler 목업 만들기) + CSS 2021년 4월 20일 코드스테이츠 DAY-16(객체 코플릿) +.. bedeveloper.tistory.com 어제 자면서도 이것을 해결하지 못해서 악몽을 꿨다. 주말동안 완결을 못냈다는 뭔가모를 패배감이 있었지만 그래도 해냈다. ㅠㅠㅠㅠㅠ 일단 먼저 결과를 보자. MODAL 모달을 총 3가지 방식으로 도전을 했었는데 첫번째는 document.querySelector('ul')로 화면에 있는 ul을 다 잡을 수 있다..
2021년 4월 25일 코드스테이츠(Twittler 목업 modal update) 미해결 2021년 4월 22일 코드스테이츠 DAY-18(자료형, 스코프, 클로저 + twittler 목업 update) 2021년 4월 21일 코드스테이츠 DAY-17(Twittler 목업 만들기) + CSS 2021년 4월 20일 코드스테이츠 DAY-16(객체 코플릿) + twittler mock-up 계획(wireframe) + figma 사용법 숙지(인 2021년 4월 19일 코드스테이.. bedeveloper.tistory.com 오늘은 지난 4월 22일 이후 업로드하지 못했던 twittler 목업에 모달기능을 추가해 보겠다. 모달을 추가하기 전에 comment-area에 hover하면 cursor : point;로 변경하였으며, 그와 동시에 해당 comment-area를 선택하였음을 알기 쉽도록 com..
반응형

티스토리툴바