인생은 반복문

회사에서 라우팅 관련 모듈을 구현하는 중에 팀장님께 리뷰를 받았다. "context도 모듈 내에 두세요, 왜 context는 밖에서 정의했나요?" 라우팅 모듈을 전역적으로 리액트 컴포넌트들에 전파시키기 위해 context api를 모듈 바깥에서 선언한 부분에 대해 리뷰 받은 내용이다. 모듈은 모듈 관련 코드만 두어야한다는 일차원적인 생각이었는데 context도 결국은 '라우팅'이라는 도메인이 엮이는 순간 같은 곳에 묶여도 되는 것이다. 오히려 react에서 사용하려는 의도를 가지고 만든 모듈인만큼 context 정도는 내부에서 구현해놓아도 되는 것이었다. 생각의 틀이 한계를 벗어나 조금 더 확장되는 경험이었다.

평소에 배열 관련 메소드로 map, filter, ...(rest) 정도만 활용했던 거 같아 환기시킬 겸 다시 정리해본다. 이로 인해 더욱 깔끔한 코드를 작성할 수 있게 되기를... reduce: 배열의 각 요소에 오른쪽으로 나아가며 리듀서 함수를 수행하고 하나의 결과값으로 반환한다. reduceRight: 배열의 각 요소에 대해 오른쪽에서 왼쪽으로 나아가며 리듀서 함수를 수행하고 하나의 결과값으로 반환한다. forEach: undefined를 반환한다. find: 조건을 만족하는 첫 번째 아이템 반환(조건에 만족하는 아이템이 없다면 undefined 반환) every, some: 전부(하나라도) 만족하면 true findIndex: 조건을 만족하는 첫번째 요소의 인덱스를 반환(없으면 -1 반환) ind..

형 변환: Boolean의 인자에 숫자 0, 빈 문자열, undefined, null, NaN를 전달 시 false 반환, 그외엔 true 반환 단항 마이너스 연산자: -1은 1을 음수로 변환해준다(마이너스 연산자는 피연산자의 갯수에 따라 다르게 동작) 할당 연산자: 다른 연산자와 마찬가지로 평가된 후 그 값을 반환한다(다른 코드를 이해할 때 도움이 되는 수준으로 알고 있기, 코드 작성 시엔 가독성 좋지 않은 방식) 쉼표 연산자: 여러 평가식을 쉼표로 구분하여 나열하면 마지막 평가식이 반환된다. 할당 연산자와 마찬가지로 코드 해석용으로만 알고 있자. 동등 연산자: ==는 피연산자에 대해 숫자형으로의 형변환을 진행한 후 값을 비교한다.(null, undefined는 예외적으로 동작) 삼항 연산자: 코드를 ..

리액트로 개발을 할 때 아래 에러를 자주 만나게 됩니다. --- list의 child에 key를 넣으라는 내용입니다. 저 빨간 경고문이 거슬려서 일단 map에서 제공해주는 index 값을 key에 전달해서 해결해 오긴 했는데... *아래 코드는 보통 해결하고 넘어갈 때의 코드 모습 const fruits = ['apple', 'banana', 'melon']; {fruits.map((fruit, index) => {fruit} )} 왜 key를 넣어주어야하는 것인지, index를 넣어주어도 괜찮은건지 궁금해서 공식 문서를 뒤져봤습니다. 결과적으로 index를 key로 전달하지 않으면 리액트가 알아서 index를 key에 넣어준다는 것과, index를 key로 넣어줘도 상관이 없다는 것이 제가 알아낸 사실..

쭉 읽어보니 평소에 useEffect를 사용할 때 놓쳤던 부분들을 많이 발견할 수 있었습니다. 친절하게도 마지막에 다시 한 번 wrap 해주는 부분이 있어서 원문으로 가져왔습니다. 아래에 원문을 의역해서 다시 정리해보았습니다. 원문 Unlike events, effects are caused by rendering itself rather than a particular interaction. Effects let you synchronize a component with some external system (third-party API, network, etc). By default, effects run after every render (including the initial one). React..

*fact 기반이 아닌 개인적인 생각 정리 글입니다. 이 점 참고해주세요. 1. Relay를 활용하면 Suspense를 사용할 수 있게 됩니다. 즉, 컴포넌트 내부에서는 data fetch에 대한 비동기 상황은 고려하지 않고 코드를 짤 수 있게 된다는 것이죠. 외부에 비동기 상황에서의 대처를 위임할 수 있게 되니까요. 2. Suspense는 React-Query, SWR 등에서도 사용 가능합니다. 그렇다면 Suspense 이외에서 Relay의 장점은 무엇일까요? 바로 선언적인 data fetching이 가능하다는 것입니다. Relay를 통해 데이터 fetching을 하려면 컴포넌트 내부에서 query를 적어야합니다. 이때 이 query 내용에 해당 컴포넌트가 필요한 데이터를 '명시'하는 방식입니다. 정리..

*해당 포스팅의 내용은 문서에 기반한 fact가 아닌, 개인의 생각 정리를 위한 글이므로 이 글을 읽으시는 분들은 이 점 유의해주세요. 다룰 내용 정리: 리액트를 사용하는 이유 1. VS 바닐라 JS 2. VS 다른 프레임워크 1. VS 바닐라 JS 바닐라 JS에서 화면을 수정하려면 1. 관련 데이터 수정하기, 2. 관련 DOM 수정하기 를 해줘야 합니다. 반면 리액트는 화면을 수정하려면 화면과 관련된 데이터(state)만 갱신해주면 됩니다. (화면 갱신은 React가 알아서 해줌) 바닐라 JS의 경우 DOM을 수정하는 작업까지도 절차적으로 직접 해줘야 하는 영역이었는데 반면 리액트에서는 View와 연관된 데이터만 바꾸면 그 데이터가 끼어있는 영역의 View가 알아서 알아서 바뀐다는 점에서 선언적인 느낌..

HTML 요소에 box shadow를 적용하고 그것을 container로 감쌌을 때 크기 변화가 있는지와 잘리는지 확인하기 정리: box-shadow는 자식에 적용되도 부모에서 잘리지 않는다.(ScrollContainer 같은 경우는 특수 케이스) 부모에 height을 지정해도 안잘린다. 부모가 여러 겹이어도 안잘린다. 자식이 absolute인데 flex-container 부모가 위치 조정 가능한지 테스트 (ex: 자식 스스로 align-self 가능한지 테스트) ⇒ 가능, 형제들과의 관계에서 위치 계산 안됨, 부모 크기 내에서 flex 명령어 적용됨 정리: 부모가 flex-container이고 자식이 absolute라도 flex 명령어가 동작한다! 형제들 크기 무시..!,(but alignSelf는 동..