오늘의 학습 내용 공통 버튼, 모달, 커스텀 인풋, 커스텀 셀렉트박스 만들기 리팩토링 useState 정리 새로운 배움 useRef 사용 지양 Array.prototype.map(), ****Array.prototype.forEach() in React Component 문제 상황과 시도, 해결 공통 버튼과 모달, 커스텀 인풋을 만들었던 프로젝트를 다시 다른 방법으로 만들어 보는 것을 시도해보았다. 처음에 만든 방법과 다른 방법으로 시도를 해보았는데 모달 팝업이 오픈될 경우 외부영역 클릭시 팝업 닫힘을 구현하고자 하였다. 이전에는 구글링하면 나오는 useRef를 사용한 방법을 통해 구현하였다. useRef는 돔요소를 직접 선택하기 때문에 사용을 지양한다는 말을 듣고 다른 방법으로 구현을 시도했다. // ..

오늘의 학습 내용 리액트 숙련 강의 수강 새로운 배움 리액트 useState 비동기 진행 (함수형) 리액트 자주 사용하는 훅에 대한 정리 (useState, useEffect, useRef ) 리액트 전역 관리 방법 1 (contextApi) 리액트 최적화 방법 1 (React.memo, useCallback, useMemo) 리액트 라이프 사이클 문제 상황과 시도, 해결 함수형 컴포넌트에서 useState를 통해서 여러 state를 관리하고 있었다. 하나의 state가 업데이트 되고 난 다음 다음 순차적으로 다른 동작을 구현했어야 했다. 자꾸 값이 일정하게 반영되지 않아서 확인해보니 리액트의 훅들은 배치로 처리 된다고 하였다. (비동기처리) 처음에는 이 문제를 해결하기 위해서 리액트 useEffect를..

Today I Learned 오늘의 학습 내용 리액트 숙련 강의 수강 리액트 TODO 프로젝트 리팩토링 1 새로운 배움 Css in JS 리액트를 리액트답게 사용하기 실제돔 접근 vs 가상돔 접근 문제 상황과 시도, 해결 리액트 숙련 주차 첫시간에 CSS in JS에 대해 배웠다. CSS를 javascript 코드로 작성하는 것을 도와주는 라이브러리들로 대표적인 styledComponent의 기본적인 사용법도 익혔다. 기술매니저님 코드 리뷰를 통해 리액트 프로젝트 코드를 리뷰 받았다. 말씀해주신 수정사항들을 코드에 반영하였다. 처음 작성했을때 보다 코드가 깔끔해졌다. 처음엔 state를 많이 관리하고 있었는데 중복되는 state들을 줄여보는게 좋을것 같다고 말씀해주셔서 시도하고있었다. 객체를 담은 배열자..

오늘의 학습 내용 리액트 입문 강의 수강 리액트 관련 개념 공부 간단한 로그인 페이지 실습 리액트로 간단한 TODO 서비스 구현 새로운 배움 리액트 개념 (jsx, props, state) JSX 문법 hook은 비동기로 동작한다! 협업을 위한 확장자 .jsx 문제 상황과 시도, 해결 실제로 배운 개념과 내용들을 바탕으로 우선 로그인 페이지를 실습하였다. Input 태그를 두개 만들고 하나는 타입을 text, 하나는 password로 두었다. 또 label 태그를 두어서 input 태그의 아이디와 for 속성으로 연결하였다.이렇게 코드를 작성하니 총 두개의 오류가 발생했다. 코드는 정상적으로 실행되는데 브라우저 콘솔에 에러가 발생했다. 에러의 내용이 찝찝해서 검색하니 하나는 password로 인풋 태그의..

오늘의 학습 내용 리액트 입문 강의 수강 리액트 관련 개념 공부 새로운 배움 리액트 기초 개념 (CRA, JSX, 컴포넌트) JSX 문법 문제 상황과 시도, 해결 리액트 입문 강의에서 간단한 실습을 하는데 리액트를 하나도 몰라서 조금 해맸다. 입문 강의에서는 리액트에 대한 개념도 다루지만 실습을 하고 난 다음에 다루기 때문에 실습 과정에서 우여곡절을 겪었다. 기초적인 부분들이라 다루는 강의도 없어서 리액트 책을 정독하면서 찾았다. 멀티라인 return 리턴을 할때 어떤 예제 케이스는 소괄호가 없고 어떤 경우는 소괄호 안에서 리턴을 하고 있었다. 알고보니 멀티라인의 경우 소괄호가 필수였다. JSX 문서 부모태그 필수 간단한 실습과제를 혼자 하면서 처음으로 JSX문서를 다루었다. 일단 HTML이랑 비슷해서 ..

오늘의 학습 내용 알고리즘 마라톤 알고리즘 테스트 새로운 배움 이차원 배열에 대한 이해 1. 이차원 배열 활용 관련 작성글 지뢰찾기 상황 2차원 배열 알고리즘 문제를 풀게 됨 시도 1차원 배열로 변경해서 풀이 시도, 처음에는 1차원 배열의 끝값을 처리하지 못해서 못 풀었다. 해결 결과적으로 양끝의 인덱스 값은 범위를 다르게 주는 것으로 풀어내었다. 문제는 풀어내고 테스트는 통과했지만 2차원 배열을 생각하지 못해서 너무 아쉽다. 자바스크립트는 2차원 배열이 없다라고 생각했기 때문에 1차원으로 변경해야한다고만 생각했다. 사실 자바스크립트는 엄밀한 의미의 2차원 배열이 없는 것은 맞지만 문제에서 주어진 배열과 답안으로 내야하는 배열의 형태를 보면 해당 문제를 이중배열을 통해 2차원 배열과 유사하게 풀었을 수 ..