12월 셋째 주를 보내며 업그레이드된 투두 리스트를 다시 만들어본 한 주.. 그 사이 눈도 많이 오고 날씨가 어마 무시하게 추워졌다. 이럴 때일수록 건강관리에 유의해서 페이스를 잃지 말자!.. 차주 목요일부터는 프로젝트 시작이다. 😇 힘내보자!.. 👀 Fact 리덕스를 이용한 투두 리스트를 완성하고 리팩토링까지 해보았다. 투두 리스트 CRUD 기능을 모두 만들었다. 숙련 주차 몇몇 키워드들을 디깅 했다. 알고리즘 문제를 매일 꾸준히 풀었다. 🙂 Feeling 수정 기능까지 완성하게 되어 뿌듯했다. 팀에 지각금 적립을 도입했다!.. 왠지 경각심이 든다. 🔍 Finding styled-components의 props 활용과 전역 CSS 설정 Query String과 Path variable 비트 연산자 | ..

Today, What I learned? 전체적인 과제 리뷰를 듣고, 랜덤 하게 뽑힌 다른 분들의 결과물과 코드를 보다 보니 내 코드에서 고치고 싶은 부분들이 생겼다! 안 그래도 제출하고 뭔가... 부족한 이 느낌..🤔 같은 생각이 들었는데 역시 갈길이 멀다!.. 일단 우선적으로 리팩토링한 부분들을 정리해본다. TodoList에 뿌려주는 불필요한 props 제거 왜 생각하지 못했을까 싶은 부분!.. 어차피 리덕스로 상태관리를 하고 있고 리듀서로부터 todos 라는 동일한 데이터를 가져와서 뿌려주는데, 굳이 props로 넘겨줄 필요가 없었다. TodoList 컴포넌트로 useSelector 훅을 옮겨서 바로 데이터를 렌더링 할 수 있도록 변경했다. 반복되는 label, input 컴포넌트화 투두 입력 부분..

두 번째 투두 리스트 react-router-dom, styled-components와 redux에 대해 좀 더 공부한 후에 기초 투두 리스트를 업그레이드해서 다시 한번 만들어보는 시간을 가졌다. 투두 리스트를 만들며 UI/UX 적으로나, 기술적으로 고민했던 부분들과 깨달은 점.. 같은 것들을 회고해보려 한다. 완성된 투두리스트를 배포한 링크는 아래! https://todolist-redux-theta.vercel.app/ React App todolist-redux-theta.vercel.app UI/UX 지난번에 만들 때는 꽤 자유분방하게 만들어봤으니 이번에는 요구되는 틀을 유지하되 사용자의 편의를 생각해서 레이아웃을 짜보았다. 투두 하단부의 버튼은 우선순위를 따졌을 때, 유저 입장에서는 '완료'가 ..

들어가며 웹에서 데이터를 보내고 받기 위해서는 어떤 식으로 전송하고 어떤 경로(End-point)에 전달할지를 중요하게 본다. 데이터를 전송하고 받는 방식으로는 GET, POST 등의 HTTP 메서드가 있고, 관련해서 REST API라는 개념이 있다. 그보다 이번 글에서는 경로에 대해서, 그 중에서도 Query Parameter와 Path Variable에 대해서 정리해보려 한다. Query Parameter (Query String) 위 이미지는 우리가 흔하게 보는 URL의 구조이다. 여기서 ? 이후부터 시작되는 Parameters라는 부분이 바로 Query Parameter이다. 흔히 Query String, 쿼리 스트링이라고 부르기도 한다. 쿼리 파라미터와 쿼리 스트링은 같은 표현! Query St..

Today, What I learned? redux와 styled-components, react-router-dom을 이용해서 좀 더 업그레이드된 투두 리스트를 만드는 중!.. 이전보다 컴포넌트를 좀 더 세분화 하다보니 버튼 컴포넌트도 분리하게 되었다. 문제는 버튼 컴포넌트에 전달되는 여러 함수들을 어떻게 실행시킬 것이냐!.. 였는데... 리액트에서 onClick 이벤트에 매개변수가 있는 함수를 어떻게 넘겨줄 것인지를 알게 된 과정을 정리해본다. 기존의 코드 type에 따라서 props로 받아온 다른 함수들을 실행시키도록 하고 싶었다. 저기까진 좋았는데, 기능이 추가됨에 따라 타입이 추가되다 보니 삼항 연산자로는 버거운 상황이 발생.. 계속 이렇게? 줄줄이 소세지처럼? 간다고? 이렇게 쓰는 것은 삼항 ..

문제 덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해주세요. 입출력 예 quiz result ["3 - 4 = -3", "5 + 6 = 11"] ["X", "O"] ["19 - 6 = 13", "5 + 66 = 71", "5 - 15 = 63", "3 - 1 = 2"] ["O", "O", "X", "O"] 풀이 =을 기준으로 왼쪽의 연산이 오른쪽의 수와 일치하는지를 따져 O, X로 결과를 반환하는 문제다. quiz 배열의 각 요소를 공백을 기준으로 split 해야겠다는 생각이 먼저 들었다. function solution(quiz..

12월 둘째 주를 보내며 리액트 학습에 바쁜 한 주였다. 매주 똑같이 쓰는 것 같긴 한데 정말 한 주가 어떻게 지나가는지 모르겠다. 눈 깜짝하면 새해가 될 듯하다.. 😂 그럼에도 몇 달 전과 비교해서 꾸준히 성장하고 있는 나.. 칭찬해! 👍 👀 Fact 리액트 기초적인 투두 리스트를 완성했다. styled-components가 생각보다 더 좋은 라이브러리임을 알게 되었다. redux에 대해 복습했다. 패키지 관리 툴인 yarn을 처음 사용해보았다. 알고리즘 문제를 매일 꾸준히 풀었다. 🙂 Feeling 요구사항을 잘 확인해야 함을 다시 한번 느꼈다. 꼼꼼하게 읽고 체크하자! 과제를 잘 끝내서 다행이다! 알고리즘 문제를 풀며 잘 몰랐던 자바스크립트 문법을 익힐 수 있는 것 같아서 좋다. 🔍 Finding ..

문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요. 입출력 예시 d budget resu..

React에서의 CSS 리액트에서 CSS를 적용하는 방법은 여러 가지가 있다. CSS 파일을 import 하거나 module로 사용할 수도 있고, SASS 같은 전처리기나 tailwind 등의 프레임워크를 이용할 수도 있다. 그중에서 오늘은 Styled-components에 대해서 정리해보려 한다. Styled-components에 대해서 몰랐던 부분이 많았고, 무엇보다 사용해보니 생각보다 더 편한 라이브러리라는 것을 알게 되었기 때문이다! Styled-components Styled-components는 자바스크립트 안에 CSS를 작성하는 CSS-in-JS 방식이다. 자바스크립트를 이용해서 CSS 코드를 만들어내서 컴포넌트를 꾸밀 수 있다. 이런 CSS-in-JS 방식의 패키지가 Styled-compo..

리액트의 state와 props에 대해서 가볍게 정리해보려 한다..! 현재 내용은 추후 덧붙여지거나 수정될 수 있다. 😇 ((잘못된 부분에 대한 첨언은 언제나 환영입니다..)) State 컴포넌트 내부에서 바뀔 수 있는 값. useState 훅을 통해 리액트에 state의 변화를 알려서 컴포넌트가 재평가될 수 있도록 한다. 이후 JSX가 다시 평가되며 변화된 부분을 화면에 렌더링한다. const [state, setState] = useState(''); state에 바로 변경하면 안 될까? useState가 const로 작성된 이유는?? 🤔 우선 state는 setState 함수를 통해서만 변경이 가능하다. state를 바로 쓰면 안 되나? 싶을 수 있는데, 이렇게 state가 직접 수정될 위험을 방지..