TIL

< 웹 게임을 만들며 배우는 React> 인강 듣기(https://www.inflearn.com/course/web-game-React 2-3. 웹팩 설치하기 2-4. 모듈 시스템과 웹팩 설정 2-5. 웹팩으로 빌드하기 웹팩은 수많은 자바스크립트 파일

< 웹 게임을 만들며 배우는 React> 인강 듣기(https://www.inflearn.com/course/web-game-React 2-6. 웹팩으로 빌드하기 2-7. @babel/preset-env와 plugins 2-8. 끝말잇기 Class 만

React 토이프로젝트 개발 중...1) 프로젝트 이름 : 알바비를 계산해줘2) 진행 상황 : input값에 넣어주기까지 완료여러가지 input이 필요해서 처음엔 그 수 만큼 함수를 만들어야 되는건가? 싶었는데, 그렇지 않았다! input 속성의 name값을 참조해서

React 토이프로젝트 개발 중...진행 상황1\. 시급 계산 완료2\. class형으로 작성한 코드를 hooks로 바꿨다.form에서 결과 버튼을 눌렀을 때 자꾸 동작을 안 해서 뭐가 문제일까 한참을 검색했다. 분명 폼 제출하는 과정에서 문제같은데 뭘까.. 했더니 문

🧐 님 오늘 뭐했음? >React 토이프로젝트 개발 중... bootstrap을 쓰려고 시도했는데 자꾸 컴파일 실패함 ㅠㅠ reactstrap도 설치하고 그랬는데 뭐가 문제인지.. 자꾸 실패해서 일단 기능 추가 먼저 하려고 한다. '웹 게임을 만들며 배우는 Rea

🧐 님 오늘 뭐했음? > 웹 게임을 만들며 배우는 React 강의 듣기 3-2. 리액트 반복문(map) 3-3. 리액트 반복문(key) 3-4. 컴포넌트 분리와 props 🌱 알게 된 사실 JS에서 반복문을 돌릴 때 map()을 사용한다. props는 부모 컴

🧐 님 오늘 뭐했음? > 웹 게임을 만들며 배우는 React 강의 듣기 3-5. 주석과 메서드 바인딩 3-6. 숫자야구 만들기 🌱 알게 된 사실 JSX에서 주석 다는 법 `{/* jsx에서는 이렇게 주석을 남긴다. */}` 이렇게 블록 주석을 달기 전에 중괄호로

웹 게임을 만들며 배우는 React 강의 듣기3-10. shouldComponentUpdateshouldComponentUpdate - 리액트는 코드에 setState가 있으면 해당 컴포넌트를 다시 렌더링하기 때문에 복잡한 프로젝트일 경우 이러한 상태를 놔두면 성능이

웹 게임을 만들며 배우는 React 강의 듣기3-11. PureComponent와 React.memo프로그래머스 코딩테스트 문제 풀기자연수 뒤집어 배열로 만들기(https://programmers.co.kr/learn/courses/30/lessons/1293

Leetcode 문제 풀기 \- 1480. Running Sum of 1d Array \- 1431. Kids With the Greatest Number of CandiesLeetcode는 프로그래머스처럼 정답 변수가 정해진게 없어서 그냥 내가 마음대로 변수를 선

웹 게임을 만들며 배우는 React 3-12. React.createRef 3-13. props와 state 연결하기 2-9. 웹팩 데브 서버와 핫 리로딩(React-Hot-Loader is expected to be replaced by React Fast Re

웹 게임을 만들며 배우는 React 4-1. 리액트 조건문React Hot Loader -> React Fast Refresh 변경 완료React Hot Loader가 React Fast Refresh로 대체된다. 그래서 React Fast Refresh를 설치해줘야

웹 게임을 만들며 배우는 React4-2. setTimeOut 넣어 반응속도체크4-3. 성능 체크와 Q&A4-4. 반응속도체크 Hooks로 전환하기4-5. return 내부에 for과 if 쓰기class 형태로 코드를 작성할 때는 구조 분해 할당으로 쪼개주는게 편리함이

웹 게임을 만들며 배우는 React 5-1. 리액트 라이프사이클 소개클래스 형태로 코드를 작성할 경우 : class JsxName extends Component하고 리액트 데브 툴로 성능 체크를 했을 때 성능에 문제가 있을 것 같으면 pureComponent로 바꿔

웹 게임을 만들며 배우는 React 5-2. setInterval과 라이프사이클 연동하기 5-3. 가위바위보 게임 만들기 5-4. 고차 함수와 Q&A 백준 2857번: FBI 문제 풀기비동기함수 밖에서 변수를 참조하게 되면 클로저 발생onClick={this

웹 게임을 만들며 배우는 React1-10. ref5-5. Hooks와 useEffect5-6. 클래스와 Hooks 라이프사이클 비교클래스형 컴포넌트에서 사용하는 컴포넌트 라이프사이클 메서드들을 Hooks에서는 쓸 수가 없다. 그래서 useEffect를 사용해야 함.

🧐 님 오늘 뭐함? 🌱 알게 된 사실 ✨ 느낀점은?

웹 게임을 만들며 배우는 React 6-1. 로또 추첨기 컴포넌트 6-2. setTimeout 여러 번 사용하기 6-3. componentDidUpdate 6-4. useEffect로 업데이트 감지하기프로그래머스 2단계: 오픈채팅방 문제 풀기React.memo처

웹 게임을 만들며 배우는 React 6-5. useMemo와 useCallback 6-6. Hooks에 대한 자잘한 팁들useMemo() : 함수의 리턴값을 기억함 (두번째 인자가 바뀌기 전까지)useCallback() : 함수 자체를 기억함 (두번째 인자가 바뀌기

토이프로젝트 '알바비를 계산해줘' \-> 근무 시간, 근무 일수의 음수 값 입력 방지\-> 음수 값이 입력될 경우 alert()로 경고창 띄움 \-> 현재 년도를 Date 객체를 이용해서 출력.gitignore 파일을 생성해서 node_modules 폴더는 push할

리액트 토이프로젝트 '알바비를 계산해줘' 진행 중..\-> 폼 컴포넌트랑 부모 컴포넌트 연결해서 계산하는 부분에서 막힘. 완전히.머리가 아프다..뭐가 문제일까..? 😡부모 컴포넌트에서 state를 이렇게 선언해줬고 Form.jsx에 { fields }를 props로

🧐 님 오늘 뭐함? 리액트 토이 프로젝트 '알바비를 계산해줘' 개발 `AlbaCalc.jsx`에서 `e.target.value값을 가져왔을 때 undefined`가 뜨는 에러 발생함.

🧐 님 오늘 뭐함? 리액트 토이 프로젝트 '알바비를 계산해줘' 개발 -> 그동안

리액트 토이프로젝트 '알바비를 계산해줘' 개발 중 ✔️ 세금 적용해서 결과값에 반영 완료 💻 최저시급 값을 매 해 변경하는건 비효율적이다. 그래서 외부 웹 사이트에서 값을 가져오려고 한다. 혹시 API가 있나 검색해봤는데 특별히 나오는게 없어서.. 일단은 네이버에

리액트 토이프로젝트 '알바비를 계산해줘' 개발 중✔️ 알바비를 계산한 최종 결과값에 세 자리마다 콤마 찍어주기JS에 내장된 함수 중에 toLocaleString()을 이용했다. result에 천 단위마다 콤마가 자동으로 찍히게 했다. 의외로 간단하네.. 복잡할 줄 알았

주휴수당 적용 알고리즘ExtraPay.jsx 파일에 button 2개 생성두 버튼 초기 속성 모두 disabledprops로 전달받은 timeResult 값이 15 이상일 경우, 두 버튼 모두 enable 상태로 변경주휴수당 '포함' 버튼 클릭시 albaCalc.jsx

지금까지 했던 프로젝트 코드 깃허브 페이지에 올리려고 고군분투 중..뭔가 알바비 계산 방법이 잘못된 것 같아서 알아보는 중github branch 바꾸는 법$ git branch 로 현재 브랜치가 뭐뭐 있는지 확인$ git checkout \[changing_branc

깃허브 페이지에 프로젝트 올리려고 하는데 뭐가 문제인건지 되질 않는다. git remote해서 원격으로 올리긴 했는데, 내 사이트 url로 들어가면 gitHub Pages failed to load resource 에러가 뜨고 빈 화면만 보인다. 하 ㅠㅠㅠ 왜 안되는걸

리액트 토이프로젝트 '알바비를 계산해줘' 깃허브 페이지에 업로드 문제 해결 중 🤮 \-> 처음에는 아예 깃헙 페이지에 업로드조차 되질 않음 \-> 예전 개발 버전이 업로드 됨 이 형태는 개발 완전 초창기에 만든건데.. 이 페이지가 왜 뜨는거냐고ㅋㅋ 아ㅋㅋ진짜

리액트 토이프로젝트 '알바비를 계산해줘' input 부분 감싸는 border 레이아웃 추가최저시급 값 크롤링을 위해 패키지 설치를 알아보던 중 request 모듈이 더 이상 사용되지 않는다고 한다. axios, cheerio 설치함.gh-pages 올리는건 당분간 포기

리액트 토이프로젝트 '알바비를 계산해줘'최저시급 값 크롤링1) 네이버에서 현재의 최저시급 값을 가져올 것이다.2) DOM 구조를 보면 input_won 클래스 > input_wrap 클래스 > \_wageInput 클래스의 value 값으로 현재(2020.12.16)

🧐 님 오늘 뭐함? 웹 게임을 만들며 배우는 React 7-1. 틱택토와 useRedcuer 소개 7-2. reducer, action. dispatch의 관계 🌱 새로 알게 된 사실 토이 프로젝트를 진행하면서 엄청 많은 state들을 일일이 써줬는데 u

🧐 님 오늘 뭐함? 웹 게임을 만들며 배우는 React 7-3. action 만들어 dispatch 하기 7-4. 틱택토 구현하기 7-5. 테이블 최적화하기 🌱 새로 알게 된 사실 react에서 state바꿀 때 불변성을 지켜줘야 한다. 그래서 어

웹 게임을 만들며 배우는 React 7-5. 테이블 최적화하기 8-1. Context API 소개와 지뢰찾기불필요한 함수 렌더링을 막기 위해 useCallback을 써주자.context api는 상위 컴포넌트와 멀리 떨어진 하위 컴포넌트에서 state를 바로 쓸 수

🧐 님 오늘 뭐함? 웹 게임을 만들며 배우는 React 8-2. createContext와 Provider 8-3. useContext 사용해 지뢰 칸 렌더링 9-1. React Router 도입하기 🌱 새로 알게 된 사실 ✨ 느낀점? 이상하게 지뢰찾기

🧐 님 오늘 뭐함? 웹 게임을 만들며 배우는 React 9-2. Link와 브라우저라우터(BrowserRouter) 🌱 알게된 점 리액트 라우터 쓸 때 import React를 두 번 하게 되면 Invalid hooks어쩌구 저쩌구.. 오류 생김.

웹에서 최저시급 값을 긁어와서 변수로 사용했는데, CORS 문제 발생함. 그래서 해결방법을 찾고 있는데.. webpack에서 proxy 설정도 해보고(실패ㅠㅠ), 스택오버플로우에서 누가 'Moesif' 라는 크롬 확장프로그램을 써보래서 추가도 해 봄.그랬더니 원래 아래

https://ryulog.tistory.com/138 이 블로그를 참고해서 url을 수정했더니 cors 문제는 해결됐다. 아마도..?해결법은 webpack.config.js 파일에서 프록시를 앞부분 주소로 써주고,위의 상수 url에서 프록시 부분에 해당하는

인프런 강의 - React로 NodeBird SNS 만들기(https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89

인프런 강의 - React로 NodeBird SNS 만들기 0-4. Next.js 실행해보기 0-5. page와 레이아웃 0-6. Link와 eslint 0-7. Q&A아니 그동안 리액트 핫 로더(이젠 리액트 리프레쉬지만), 리액트 라우터 등등의 기능이 Next

🤗 님 오늘 뭐함? 인프런 - React로 NodeBird SNS 만들기 1-1. antd와 styled-components 1-2. _app.js와 Head 1-3. 반응형 그리드 사용하기 1-4. 로그인 폼 만들기 1-5. 리렌더링

인프런 - React로 NodeBird SNS 만들기 1-7. 크롬 확장프로그램과 Q&A 1-8. 프로필 페이지 만들기 1-9. 회원가입 페이지 만들기(커스텀 훅)Next.js에서 폴더 구조에서 pages랑 components가 무슨 차이인가 싶었다. pages에

인프런) React로 NodeBird SNS 만들기 2-1. 리덕스 설치와 필요성 소개 2-2. 리덕스의 원리와 불변성 2-3. 리덕스 실제 구현하기 2-4. 미들웨어와 리덕스 데브툴즈리액트책 chapter 16. 리덕스 라이브러리 이해하기 코테책 chapt

코테책) chapter 03. 그리디인프런) 노드버드 지금까지 적었던 코드 리뷰파이썬의 코드는 정말 당황스러울 정도로 간결하고 세미콜론 안 붙이는거 너무 어색하다. 책의 연습 문제(p.99)를 풀면서 작성했던 코드인데.. 진짜 간단하다;; 물론 문제 자체가 쉬운거긴한데

🤗님 오늘 뭐함? 리액트 토이프로젝트 Runable 개발 중 날씨 데이터는 OpenWeather API로 위치, 온도, 날씨 설명 값을 가져왔다. 미세먼지 또한 간단하게 가져올 수 있을거라 생각했는데.. 아니었다ㅠㅠ 브라우저에서 사용자의 위치 정보를 가져오는데, 미세

목표 : 변환된 TM좌표를 이용해 현재 위치에서 제일 가까운 관측소 정보를 가져오려고 한다.문제점 : 관측소 API를 아무리 호출해봐도 에러가 뜬다.일단 지금까지 두 가지 이유로 삽질을 거하게 했다.첫 번째, 사용하려는 API 활용신청내가 사용하려는 API는 한국환경공

목표 : 날씨 설명(description)에 해당하는 아이콘을 화면에 보여주자 (예: 비오는 날 -> 비 내리는 아이콘)문제점 : module parsed failed 에러가 뜬다. 적당한 loader가 없다면서..검색해보니 이미지(내가 사용하려는 확장자는 svg이다)

문제점 : 미세먼지 api 응답을 받아와서 데이터를 추출할 때, 내 코드에 문제가 있는지 자꾸 TypeError가 뜬다.무엇이 문제인가...며칠간 폭풍 구글링을 했다. 주로 xml, node element, child element에 관해 검색해보았지만 큰 소득은 없었