분류 전체보기

이번 과제는 일부러 props-drilling → context api → redux 순으로 점차 리팩토링을 해나가는 과제였다. 전역 상태 라이브러리로 Zustand만 써보았기 때문에 리팩토링을 하면서 context api나 redux 사용법을 익혀나갈 수 있었다, 특히나 컴포넌트나 파일 구조를 더 깔끔하게 짜고 싶어 이리저리 많이 찾아보았는데 그렇게 썩 만족스러운 로직이 구현된 것 같지 않다. 그래도 처음 과제를 받고 어떻게 이걸 구현하지 싶어 열심히 노력한 부분도, 과제가 끝나고 보면 아쉬움이 남는 걸 보니 프로젝트를 통해 어느 정도 보는 시야가 넓어진 것 같은 느낌이다! 이번 주차는 10일동안 useEffect, useCallback, useMemo 같은 hook 뿐만 아니라 router v6에 r..

내배캠 챌린지반 과제로 데스크톱 메모앱을 보고 만든 프로젝트를 최대한 똑같이 만들어보는 걸 내주셨다.메모 앱의 기능 구현 자체는 어떻게 동작할지 보자마자 감은 왔는데, 처음 써보는 redux와 함께하니 어떤 방식으로 상태를 넘겨받고 사용할지 조금 헤맸다. 그래도 이번 프로젝트 덕분에 막막했던 리덕스 사용법을 어느 정도 익힐 수 있어서 다행이다. 전에 Zustand를 써본 경험이 있어서 그런지, 상태관리 하나하는데 만들어야 할 기본 보일러 플레이트 구조가 더욱 복잡하게 느껴졌고 '이래서 개발자들이 다른 전역상태 라이브러리를 따로 만들었겠구나란 생각이 절도 들었다. Styled-components도 제대로 써본 경험은 많지 않은데 이번 기회를 통해 많이~많이 써보았다. 태그에 ID를 쓸지, Class를 쓸지..

리액트 숙련주차 강의를 열심히 듣고, 과제에 열심히 적용한 날. 전체적인 UI를 구성했기 때문에 특별한 트러블 슈팅도 별로 없었다.  ※ 테두리, 사이즈 재조절, 클릭시 border 없애는 방법 // css 내 적용 border: none; resize: none; outline: none;  ※ Context API가 있음에도 Redux로 Global state를 관리하면 좋은 이유(강의 내용)1.성능 최적화 => Context Api는 Provider 하위의 모든 컴포넌트를 리렌더링 하게 할 수 있습니다. 상태가 변경될 때마다 관련된 모든 컴포넌트가 불필요하게 업데이트 되는 것을 막기 위해 복잡한 최적화가 필요합니다. 반면, Redux는 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트할 ..

키워드가 없이 변수에 값이 할당된 아래의 실행 결과는 어떻게 될까?function foo() { x = 100;}foo();console.log(x) 자바스크립트 엔진은 x 변수가 어디서 선언되었는지 스코프 체인을 통해 검색을 시작foo 함수 내부에서 x 변수의 선언을 검색하나 없음따라서 foo 함수 컨텍스트의 상위 스코프인 전역 스코프에서 x 변수의 선언을 검색  → 전역 스코프에도 없음어느 곳에서도 x 변수를 찾을 수 없어 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성함이와 같은 상황에서 console.log의 결과 값으로 에러를 예측하기 쉽지만, 자바스크립트는 키워드가 없는 선언문도 암묵적으로 전역 객체의 프로퍼티로써 동적 ..

개인 과제 중 아래와 같이 글이 길이가 설정한 범위의 영역보다 길어질 경우 나머지 부분을 ... 처리하는 과정에서 튜터님의 도움을 받아 처음 보는 방법으로 해결하여 기록하려 한다.  여러 방법을 시도해보았지만 제대로 작동하는 것이 없었고, 튜터님이 제안해 주신 방법만 적용되어 그 코드가 왜 작동되는지 한 번 알아보았다. ※ overflow: hidden →  가로/세로 영역에서 범위를 초과한 컨텐츠들을 보이지 않게 처리해 준다.※  display: -webkit-box→  웹킷 기반 브라우저에서 요소를 블록 컨테이너인 flexbox로 설정한다.※   -webkit-line-clamp: 1 → 줄 수를 1줄로 제한하며, 텍스트가 한 줄을 넘기면 잘라낸다.※  -webkit-box-orient: vertic..

프로젝트를 하던 중 아래와 같은 경고 문구를 만났다. 코드가 작동은 원활하게 잘 되는데, 경고 문구가 떠있는 건 뭔가 찜찜해서 해결해보고자 하였다.※ 에러 발생명확한 오류 지점이 있으면 디버깅을 해보겠는데, 딸랑 경고문구 하나라 문제를 찾기 어려워 튜터님께 도움을 구했다.※ 해결 방법 문제는 background가 알수 없는 props라고 하는 점이었는데, React 내부적으로 background라는 임의의 키워드를 사용하고 있어 중복되는 문제였다. 때문에 DOM에 접근하는 게 아닌 스타일 시트에만 사용하는 키워드이기 때문에 background 앞에 $을 명시적으로 붙여 사용하니 경고 문구가 사라졌다!(해결해 주신 튜터님께 무한 감사를...) => Transient Props?이 방법을 Transient ..

매일 알고리즘 문제 풀던 알고리즘 코드 카타가 수준반 분별 수업으로 바뀌었다. 때문에 실시간 수업이 하나 더 늘어서, 월요일에는 실시간 수업만 2개라 뭔가 더 바빠진 느낌이다. ※ Array 내부 동작 구현(자료구조)심화반에서는 자료구조 위주로 실시간 수업을 진행하는데 첫 번째 과제로 클래스 문법으로 배열의 내부 동작을 구현하는 걸 내주셨다.class FixedArray { #arrayLength; #array; // 필요한 변수 추가 가능 #arrayIndex; // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined // 배열 생성시 올바른 0이상의 숫자 ..

useEffect를 사용할 때 비동기로 api를 받아오는 과정 때문에, 화면에 0.5초 정도 늦게 보이는 현상을 종종 볼 수 있었는데 react-router-dom v6버전의 loader를 사용하면 이를 해결할 수 있다.※ Loader란?페이지가 완전히 그려지기 전 단계에서 할 작업(값이 아니라 작업임)렌더링 전에 로더를 호출하고 그 응답까지 받아옴react-router-dom의 useLoaderData()를 호출해서 loader에서 작업된 값을 가져옴 위의 사진의 경우 loader에 직접적으로 async 함수를 호출하여 값을 받아왔지만, 코드의 가독성 측면에서 아래와 같이 코드를 분리할 수 있다.// postListPage.loader.jsexport default async function postL..