이제 블로그 하단에 글 상세 페이지 형식으로 Modal창으로 띄우는 상세페이지를 만들어 보자!. 페이지가 넘어가거나 하는것도 있는데 그건 강의를 결제해서 봐야함.. 라우터를 설치하고 어쩌고 저쩌고 하던데.. 일단 그지니 무료강의만 기록하자;; Modal UI 디자인을 하자. js파일 line 39~43처럼 modal UI를 만들어주고, css파일 line 7~11과 같이 디자인을 만들자. 그런데 HTML을 만들때에 주의해야 할 것이. 지금 작성하는 곳이 return()의 안이라는 것을 명심하자. return( ) 이거 불가능.. 하고싶으면 세개의 div를 하나의 div로 또 감싸주는 방법 밖에 없다. 이걸 지키기 위해서 modal창을 위에 코드처럼 큰 div안에 만들었다. 그러면 이제 아래처럼 심플한 모..

이어서 아래는 나머지 글 리스트들도 작성하고 글 제목을 state로 바인딩한 것이다. 코드를 짜다가 보면 터미널 부분에 warning 이라는 노란색 글짜들이 뜨는데, 에러는 아니고 eslint가 잡아주는 문법 체크사항이다. 잘못된 코딩 관습을 바로 잡아주는 라이브러리인데, 해당 warning이 보기싫으면 App.js 안에 다음과 같이 작성하면 된다. /* eslint-disable */ 다음으로 할 것은 리스트 안에 좋아요 버튼을 만들고 좋아요를 누르면 카운트가 올라가도록 만들어 보자. line 17에 HTML UI를 만든 상황이고, 따봉충 이모티콘은 크롬 주소창 우클릭 그림 이모티콘을 복붙한거다. 리액트니 중괄호로 onClick 이벤트를 해준다 하지만 중괄호 안에는 수식이 들어갈 수 없고 무조건 함수여..

여기서는 코딩애플의 2강, 3강을 묶은 내용을 작성한다. 우선 해당 프로젝트를 웹으로 실행 시키는 npm start를 터미널에 입력 해 주고 결과를 보자. 에러가 난다면 C:\Users\miwog\Videos\개발자\copy> 해당 명령어를 입력하는 폴더가 제대로 지정되었는지 확인 해야한다. 한번 상위폴더에서 실행 시켜서 에러가 떳었음 ;;.. errno -4058 실행 시키면 기본적으로 코딩되어있는 화면들이 나온다. 해당 화면이 그려져 있는 곳은 App.js 이다. App.js도 일종의 자바스크립트 파일이므로 Js의 문법에 맞춰서 작성해야 한다. 기본적으로 코딩되어있는 내용들을 지워 주도록 한다. 필요없는것을 위의 사진처럼 지워주고 이제 div태그 안에 코딩을 시작하면 된다...!(지우고 다시 실행해보..

무작정 React 문법을 알아보기 위해 유튜버 코딩애플의 영상을 보고 남기는 기록.. 우선 구글에 nodejs 검색 후 첫번째 뜨는 공식페이지의 가장 최신 버전을 다운로드 한다. 뭐 그냥 설치 되는곳에 아무대나 설치하면 된다. ㅇㅇ; 그 다음은 코드를 작성할 에디터 visual studio code를 설치한다. 마찬가지로 구글에 치면 다나온다. 이 후 다운받은 코드 에디터를 실행 시키자 위와 같은 에디터 창이 뜰것이다. 다음으로오오오 우선 작업 코드를 짤 폴더를 생성해 보자. 나는 동영상이라는 곳에 개발자라는 폴더를 만들었다. 그러면 다시 돌아가서 에디터에서 해당 폴더를 오픈해보자. 이제 앞서 만들어둔 폴더를 코드에디터로 열어보자. 좌측 위의 개발자 폴더가 열린걸 확인 할 수 있다. 이 후 아래쪽을 잡아..