꾸준한프로그래밍

0. 패스트캠퍼스 챌린지 마지막이자 최종 후기. 시작할 때는 뭐 쉽겠지라고 생각했는데, 매일 최소 강의를 하나 이상 듣고 블로그에 글을 작성하는게 여간 쉬운 일이 아니었다. 회사에서 야근을 하거나 혹은 과제까지 폭탄인 날에는 정말 패스트캠퍼스 챌린지를 포기해야하나를 고민했던 것은 사실이다... 심지어 마지막주에는 시험기간이 다가오면서, (아 지금은 시험기간이다ㅠㅠㅠ) 미친듯이 살았던 것 같다. 눈뜨면 출근하고, 퇴근하면 과제하고, 중간에 패스트캠퍼스 챌린지 글 작성하고... 그래도 이왕 시작한 거 끝을 보자 라는 생각으로 공부하여, 드디어 마지막 최종 후기를 작성하게 되었다.😄 그래서 내가 이 챌린지를 통해서 무엇을 얻었냐면,,,, 1. 혼자서 30일 계획을 하라고 했으면 절대 못했을 것을 패캠 챌린지를..

0. 공부 인증 공부 시작 19 : 12 공부 종료 20 : 28 드디어 마지막 날이다~~!!! 마지막 강의인 만큼, 그래도 시작한 프로젝트는 끝내야할 것 같아서, 학교 과제보다 먼저 시작했다.... 여튼 패캠챌린지 기간에 작은 리액트 플젝까지 끝낼 수 있어서 기쁘다. 제발 30일의 노력이 문제없이 통과되어 환불까지 이어졌으면 좋겠다. 1. 퀴즈 컴포넌트 만들기 리액트 라우터의 기능을 사용하지 않고, 단순히 리덕스의 값을 불러와서 분기 처리를 해주는 것임. 그래서 조건부 렌더링을 해주어야 함. {page === 0 && ~~ } {page > 0 && ~~ } components/Quiz.js import React from "react" import { useSelecter, useDispatch } ..

0. 공부 인증 공부 시작 22 : 29 공부 종료 23 : 04 강의를 하나만 듣는다고 하더라도, 실습이 많아서 항상 시간이 좀 오래걸린다....살려줘 1. CSS 가상 선택자 ::before ::after -> 엘레멘트 전에 가상 엘레멘트 생성 const Header = styled.h1` &::before{ content : "앞" }, &::after{ content : "뒤" } ` 결과 페이지 보통 after 와 before의 특징 사용의 목적 :: div처럼 보통 사용하고, 스타일을 다듬기 위해서 사용함. content의 값이 있어야 함. -> content 값이 비어 있으면 가상 선택자도 의미가 없어짐. & -> 현재 요소를 가르킴. position : absolute를 통해서 다른 div..

0. 공부 인증 공부 시작 23: 21 공부 종료 23 : 45 악 누가 컴퓨터 구조 같은 과목을 들으라고 했을까... 너무 빡세다, 여전히 알고 있는 것이 없다. 1. 버튼 컴포넌트 만들기 -> 리액트 생성하고, 필요없는 파일 전부 삭제하기(테스트 파일 등) -> 리액트 디벨로퍼 툴을 활용하자! - 구글 크롬 확장 프로그램 (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) -> 컴포넌트를 확인할 수 있음. components > PinkButton.js 파일을 생성 import React from 'react' import styled from 'styled-components..

0. 공부 인증 공부 시작 21 : 37 공부 종료 22 :37 주말이다! 근데 과제는 쌓여있다! 아오!ㅋㅋㅋ 1. 사이트 UI 디자인 및 상태 생각해보기 -> 인트로 페이지 -> 퀴즈 페이지 -> 결과 페이지 + 기타 컴포넌트 2. 필수 모듈 설치하기 npm install redux react-redux node-sass styled-components -> 디렉토리 구조 만들기 (components, store 폴더 만들기) 3. 리덕스를 사용해 상태 설계하기, 설계한 코드로 구현하기 store -> index.js import {combineReducers} from "redux" export default combineReducers({ // 서브 리듀서 ... }) store -> module ..

0. 공부 인증 공부 시작 23 : 14 공부 종료 23 : 45 그럼 20000... 학교 과제하러 다시...갑니다😰😰 1. useEffect의 마운트와 언마운트 useEffcect의 공식 문서 https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org componentDidMount, componentDidUpdate의 기능을 하는 것임. 자동으로 시간에 따라서 카운트 되는 코드 const [second, setSecond] = useState(0); setInterval(() => { setSecond(sec..

0. 공부 인증 공부 시작 23 : 28 공부 종료 23: 46 오늘도 진짜 미쳤다. 학교 과제모바일 프로그래밍 이거 안끝난다. 얼른 패캠하고,,, 테트리스 짜러 가야지.... 1. 인풋을 관리하는 방법 const onChange = (e) => { const inputText = e.target.value setText(inputText) } 보통 onClick 에서 인자 값을 전달할때, onClick={onChange} 로 하는데, 이것은 onClick={e => onChange(e)} 와 동일함. 왜냐하면, 상단의 방법으로 하면 인자가 바로 전달이 되기 때문에.. 또한 e로 전달되는 값은 보통은 전반적인 내용은 필요없고, target 값만 살펴보면 됨. 또한 다중 인풋을 받을 경우에는, 변수 혹은 ..

0. 공부 인증 공부 시작 23 : 36 공부 종료 23 : 54 오늘도 학과 과제...... 모바일프로그래밍을 하다가 패캠으로 켰다. 여튼 이거 회사+학교+패캠 쉽지않다. 1. 빌드 환경 설정 변경하기 웹팩과 바벨의 환경설정을 커스텀하기 위해서는, yarn eject 를 실행시켜야 함. (돌이킬 수가 없음 - package.json이 미친듯이 늘어남) 해당 명령어를 실행하면, 환경 설정을 직접하겠다는 뜻. script, config 폴더가 생성되는데 사실상 그냥 해석하기 어려움....😂 - 일반적으로 수정할 필요는 없어 👍 바벨과 JSX, 웹팩을 잘 알고 있어야해... 2. 컴포넌트 만들고 가져오기 컴포넌트 파일을 활용하기 위한 일반적인 폴더 구조 src/components 컴포넌트의 이름은 항상 Pa..

0. 공부 인증 공부 시작 22 : 33 공부 종료 22 : 58 과제 지옥이다... 너무 시간이 없다 1. Create-react-app npx를 통해서 설치하면 로컬에 다운로드 하지 않고, 바로 설치할 수 있음. yarn 또한 npm 처럼 사용할 수 있음. 관련 실행 명령어는 package.json 에서 설정할 수 있음. localhost 3000번이 기본 설정임. 리액트를 구성하나느 파일들은, 우선 가장 중요한 것은 최상위 폴더에 있는 App.js 임 JSX를 통해서 화면을 렌더링 함. index.js에서 리액트가 시작됨. App.js 또한 여기서 호출이 됨 (React JSX 를 활용하는 것) 돔을 호출해서 직접 수정함. JavaScript 파일이 JSX 를 활용하는 것. ReactDOM.rend..

0. 공부 인증 공부 시작 22 : 53 공부 종료 23 : 30 오늘부터는 하루에 한강만 수강할 예정이다. 패스트 캠퍼스 챌린지도 중요하지만..... 학과 과제도 쌓여있기 때문에, 적절하게 시간 분배를 해야할 것 같다. 시험기간에도 패캠 챌린지를 할 수는 없으니... 1. 바벨과 JSX 앞선 강의에서 처럼 CDN을 통해서 리액트를 제작하는 것은 끔찍함. 그래서, 이런 불편한 것들을 해결하고자 새롭게 나온 것이 JSX 임! JSX에 대해서 설명된 리액트 문서 https://ko.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper JSX 소개 – React A JavaScript library for building user interfaces ko.r..