개발 일지111 [ 스파르타 / TIL ] 내일배움캠프 #35 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 Todo list 리덕스로 만들기 오늘의 배움 react-router-dom의 Link를 styled-components로 꾸미기 아래의 코드처럼 styled(Link)`` 를 해주면 Link의 모든 속성을 inherit 하면서 새로운 속성을 더해줄 수 있다. style.js import styled from "styled-components"; import { Link } from "react-router-dom"; export const DetailsButton = styled(Link)` text-decoration: none; color: blue; font-size: 14px; &:hover { color: black; } `; TodoItem... 2022. 12. 16. [ 스파르타 / TIL ] 내일배움캠프 #34 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 soup란? 인접한 요소들을 로 감싸게 되는데, 불필요한 div요소가 중첩되어 soup이 발생한다. soup에 빠지지 않기 위한 방법 아래와 같이 는 빈 wrapper 컴포넌트다. HTML 테그가 DOM에 렌더링 되지 않으면서 코드가 실행된다. return ( Hello World! This works👍 }; 만약 아래와 같이 Import Fragment를 했다면 React를 붙이지 않아도 태그만으로도 사용이 가능해진다. import {Fragment} from 'react'; return ( Hello World! This works👍 }; 아래와 같이 사용할 수도 있지만 버전에 따라 사용할 수 없을 수도 있다. 하지만 위의 는 모든 버전에.. 2022. 12. 15. [ 스파르타 / TIL ] 내일배움캠프 #33 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 JSX 제한 사항 요소가 1개여야 한다. 2,3,4개의 인접한 요소들이면 안된다. 예제 아래의 코드는 에러가 난다. return ( Hello World! This does not work👎 }; 아래의 코드는 정상적으로 실행이 된다. return ( Hello World! This works👍 }; 위의 이유는 자바스크립트 또한 둘 이상을 반환할 수가 없다. return ( React.createElement('h1', {}, 'Hellow World!'); React.createElement('p', {}, 'This does not work👎'); ); 2022. 12. 15. [ 스파르타 / TIL ] 내일배움캠프 #32 오늘 한 것 알고리즘 문제 풀기 Redux 강의 보기 Todo list 코드 리뷰 받기 오늘 깨달은 것 최원장 튜터님께 저번에 리액트로 만든 Todo list 코드 리뷰를 부탁드렸는데 리뷰받기를 정말 잘한 것 같다. 덕분에 아래와 같은 사항들을 새롭게 알게 되었다! 리액트에서 .js 파일은 .jsx로 쓰자. index.js 파일만 제외하고 나머지 App.js와 내가 만든 js파일들은 모두 .jsx로 써주자. index.js를 변경하지 않는 이유는 이 파일은 자바스크립트 코드이므로 js로 유지되어야 한다. 버튼에는 cursor: pointer;을 설정해주자. 사용자들에게 버튼이라는 것을 인지하게 클릭이 가능하다는 것을 인지하게 하기 위해서는 항상 설정해주도록 하자. 입력창의 값이 둘 중에 하나라도 비어있다.. 2022. 12. 13. [ 스파르타 / TIL ] 내일배움캠프 #31 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 리덕스 시작하는 방법 npm init -y npm install redux import redux const redux = requier(‘redux’); store 만들기 데이터를 관리해준다. 관리하는 데이터는 리듀서 함수에 의해 결정된다. 리듀서 함수가 새로운 상태 스냅샷을 생성하기 때문이다. 리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어낸다. 위의 코드를 실행하면 초기 상태를 출력해낸다. const store = redux.createStore(); 리듀서 함수 state(현재 상태)와 action을 기본값으로 받는다. 리덕스는 궁극적으로 리덕스 라이브러리에 의해 실행된다. 그리고 새로운 상태를 return 한다. 기존의 상태.. 2022. 12. 12. [ WIL ] 내일배움캠프 6주차 Facts 리액트 강의 수강. 앞전 팀원 분들과 시작한 알로리즘 스터디에서 함께 매일 알고리즘 문제 풀기. 주말에는 평일에 풀었던 문제 다시 복습했다. 개인 과제인 Todo list 만들기. 스파르타 리액트 강의 수강. Feelings 스파르타에서 Todo list를 구현하라는 과제를 줬을 때는 정말 못해 낼 것 같았다. 이제 강의를 제대로 듣기 시작한 지 2,3일 밖에 되지 않았고 이제야 component와 props가 잡히기 시작했다. 하지만 하루 종일 에러들을 하나씩 해결하고 출력해보면서 내가 원하는 기능들을 끝내 구현해냈다. 뿌듯했다! Findings 코드를 섰다면 주석을 달자. Future 유데미에서 수강 중인 리액트 강의 계속 수강 하기 스파르타 리액트 강의 수강 하기 알고리즘 스터디 팀원들과.. 2022. 12. 11. [ 스파르타 / TIL ] 내일배움캠프 #30 [기본값 설정해주는 방법] 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 노트 정리 [ 프로그래머스 / Javascript ] 콜라츠 추측 https://school.programmers.co.kr/learn/courses/30/lessons/12943 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com Redux Redux에는 데이터를 저장하는 store이 있다. 그리고 그 안에 reducer이 포함되어 있는 상태이다. store은 상태를 저장하는 장소이다. 이때 store에서 어떤 action을 일으킨다는 것은 dispatch라고 한다. reducer는 우리가 action을 일으키면 자동으로 실행된.. 2022. 12. 9. [ 스파르타 / TIL ] 내일배움캠프 #29 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 노트 정리 [ 프로그래머스 / Javascript ] 문자열 내 p와 y의 개수 https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com useState 쓰는 방법 각각의 함수는 onChange가 일어나면 실행이 된다. 하지만 이 3개는 항상 한 번에 다 실행이 되기 때문에 한 번에 묶어줄 수도 있다. const ExpenseForm = () => { const [enteredTitle, setEnteredTitle] = .. 2022. 12. 8. [ 스파르타 / TIL ] 내일배움캠프 #28 [Todo list 만들기 (React)] 오늘 한 것 알고리즘 문제 풀기 Todo list Vercel에 배포하기 튜터님의 Todo list 리뷰 노트 정리 [ 프로그래머스 / Javascript ] 하샤드 수 https://school.programmers.co.kr/learn/courses/30/lessons/12947 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com Todo list 회고 Todo list 만든 결과물이다. Todo list를 만들면서 가장 어려웠던 부분은 Working에서 완료를 눌렀을 경우, Done으로 Todo가 이동을 하는 것이다. 하지만 true로 변경이 된 상태에서 map으로 todo.. 2022. 12. 7. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 728x90
