꾸준한프로그래밍

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. 공부 인증 공부 시작 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. 공부인증 공부 시작 12 : 29 회사 일 + 집 내려가는 시간 13: 30 ~ 22 : 50 공부 종료 21 : 47(살다 살다 기차에서 공부 포스팅을 할줄은 몰랐습니다......😂) 회사에서 리덕스를 사용하게 되어 기존 강의 순서를 살짝 무시하고, 리덕스 관련 강의를 먼저 듣게되었다. 그래서 이번 리덕스를 공부하고 부터는 다시 본 순서대로 글을 작성할 예정이다. 0. 리덕스가 리액트의 꽃이라고 한다. 그만큼 중요하지만 그만큼 어렵기도 하다. 계속 리덕스를 실제 플젝에 적용하려고 해도 그냥 더 쉬지만 복잡한 방법을 주로 선택했었는데... 이제는 리덕스를 꼭 끝내야겠다라는 생각이 들어서 글을 작성하게 되었다. 1. 리덕스를 왜 사용해야하는가 회원 인증 관리같은 경우에는 useState로 관리하기에 ..

0. 공부기록 인증샷 오늘은 회사 미팅이 늦게 끝나서 공부 시작이 좀 늦었다... ch05의 경우에도 마찬가지로 이미 한번이상 봤기 때문에 그냥 눈으로 보면서, 그리고 이미 알고 있는 내용은 기록하지 않을 예정이다! 혹은 알고 있지만 그래도 기록이 필요하다 생각하면 정리할 것이다😀 공부 시간 : 2200 ~ 23:40 1. API 세팅과 테스트 - 프로젝트 목표는 블로그 만들기 HTTPie 로 테스트를 진행할 수 있음. 근데 그냥 POST man 사용하는게 편할듯. 또한 Express 과 같은 라이브러리를 사용하는 것이 아니라서, url -> req.url (url 값 읽기) 분기처리시에 스위치를 사용하거나 해야함. 분기처리시 URL에 따라서 분기처리를 할 수도 있음. 자바스크립트에서는 정규식을 사용하는..

0. 시작하기 전 / 후 인증샷 10시경에 시작해서 약 두시간 동안... ch04내용을 들었다🥳 1. 자바스크립트의 최근 변화 자바스크립트는 저작권의 문제때문에 ECMAScript 라는 이름을 가짐. https://github.com/tc39 Ecma TC39 Ecma International, Technical Committee 39 - ECMAScript - Ecma TC39 github.com 위 링크에서 ECMA의 새로운 버전을 정함. https://node.green/ 에서 사용가능한 기능을 확인할 수 있음. 2. 자바스크립트의 나름 최신 동향 - let과 const hoisting(선언의 최상단에서 그리고 초기화는 그 위치에서) 규칙이 없고, block 스코핑을 지원함. var와 달리 let은..