corin

리액트에서 api를 다루면서 2가지를 많이 사용한다. 1. suspense 2. errorBoundary 간단하게 promise에 대해 이야기를 하자면 1. api 등을 사용하기 위해 fetch를 사용한다. 2. fetch의 결과는 프로미스로 전달된다. 3. 결과는 3가지 상태가 있는데, 1) 팬딩-진행중- 2) 실패 3) 성공이 있다. 이는 더 찾아보면 좋다. 4. 이 상태를 관리하기 위해 위 두 가지를 사용한다. 1) 서스펜스 - 팬딩상태라면 스켈레톤을 그려준다. 2) 에러 바운더리 - 에러바운더리로 감싼 컴포넌트 안에서 에러가 발생하면 이를 캐치해서 대체 컴포넌트를 그려준다. > 나는 api를 사용한 컴포넌트 밖에 놓고, api가 실패한 경우 그 자리에서 throw new Error를 던져서 사용했..

처음 짰던 코드는 대충 다음과 같다. 1. hi 2. hello 3. bye 4. good bye ul:first-child { color: blue; } 그럼 어떻게 될까? 물론 되지 않는다..! 왜일까?? ul: last-child라고 작성하는 것은 자기 자신한테 거는 것이다. 근데 우리는 ul 안에 있는 마지막 li에 css를 걸고 싶은 것이니 ul > *:first-child { color: blue; } ul > *:last-child { color: red; } 이렇게 하면 이렇게 된다!

svg를 컴포넌트로 만들어서 화면에 그려내야 했다. 이런식으로 svg를 불러와서 로고를 그려내고 싶었다. 위 코드대로라면 첫번째 줄에 하나로고/우리로고 두번째 줄에 롯데로고/롯데로고가 나와야했다. 하지만 역시나 잘 되지 않는다.. (리액트를 시작하고 되는일이 하나도 없어) 따란..! 이렇게 하나은행이 4개가 나왔다. 이게 순서를 바꿔도 하나은행이 나오냐? 아니다. 무조건 첫번째 있는 놈에 따라 뒤에 것들이 모두 바뀌어버렸다.. 결과적으로는 무엇이 문제냐 이건 하나은행 로고 svg이다. 이건 우리은행 로고 svg이다. 두 코드에서 중요하게 봐야하는 것은 pattern의 id이다. 두 id가 같다. 이 아이디가 같으면 같은 이미지를 보여준다-다른 크루의 도움을 받았다-고 한다. 그래서 얼른 바꾸어보았다. 단..

이미지 파일을 svg로 사용하면 좋다. 대충 이유는 1. 코드로 되어 있기 때문에 수정이 쉽다. > 만약 색상을 바꾸거나 크기를 변경하고 싶다면 코드를 변경하면 된다. 2. 렌더링에 좋다. > 코드로 들어가기 때문에..? 렌더링이 될 때 깜박이지 않는다. 3. 깨지지 않는다. > svg는 백터타입이라 깨지지않는다. (구체적인 이유는 검색해보세요) 그렇다면 어떻게 사용하는가? 이렇게 된 svg가 들어간 버튼을 만들고 싶다면? 1. 그냥 코드에 넣어버린다. export default function PlusButton() { return ( ); } 이런 방식으로 넣으면 된다. 근데 이렇게 하면 간단한 svg는 괜찮으나 여러개의 svg가 필요하거나 한다면 코드가 번잡스러워진다. 2. 따로 파일에 분리해서 i..

리액트를 잘 모르면 발생하는 문제가 여럿있다. 그중 한 가지를 가지고 왔다. const [count, setCount] = useState(0); function plus() { setCount(count+1); setCount(count+1); setCount(count+1); } plus(); 이 상황에서 count는 몇일까? 3? 정답은 1이다. 그 이유는 저 plus가 실행되는 당시 안 count는 0이다. setCount 속 count는 0이니 결국 그 안에는 주구장창 1만 들어가게 된다. 그럼 나는 한 함수 안에서 setCount를 어러번 하고 싶은데 어떻게 해야하지? const [count, setCount] = useState(0); function plus() { setCount((cou..

key - value 를 이용한 데이터 저장 방법은 두 가지가 있다. - map - object 이 두 가지가 같은 것이라고 생각했다. 그러던 중 두 개념이 다른 것임을 깨닫고 어떻게 다른지 찾아보았다. 더불어 데이터를 저장하고 사용하는 과정에서 벌어질 수 있는 다양한 상황을 실험해보았다. 이렇게 다른데 왜 같은 거라고 생각했을까? 실제로는 map을 잘 안써서 그런가 - 기본 개념 / 문법 Map Object 생성 방법 const map = new Map([ ["a", "문자형 key"], [1, "숫자 key"], [[1, 2, 3], "직접 array key"], [arr, "참조 array key"], ]); const object = { a: "문자형 key", 1: "숫자 key", "[1, 2..

기존에 유저의 입력을 받는 것은 input tag를 js에 가지고 와서 value값을 확인했다. 이번에 이런 부분이 비효율적임을 느꼈고 문제가 있던 부분 2가지를 고쳤다. 1 수정전: 기본값을 value로 설정하고 클릭하면 삭제하고 초기화하면 다시 생성하는 것으로 처리 수정후: input 속성 중 placeholder을 사용할 수 있다. > 사실 이건 제시된 화면에서 이렇게 처리하고 해서 처리한 부분이었다. > 찾아보니 placeholder를 지양하자는 블로그도 있었다. (https://ibrahimovic.tistory.com/30) > 그 근거 중 내가 느낀 제일 큰 문제점은 리더기에 읽히지 않는다는 점이었는데, 만약 이 말이 사실이라면 충분히 지양될 이유라고 생각된다. > 다만 해당 문제는 상위에 ..

만약 당신이 같은 함수를 인수만 다르게 해서 테스트하고 싶다면 test.each를 사용해볼 수 있다. 기본 문법은 다음과 같다. test.each([[test_인수], [test_인수], [test_인수]])( "test 제목 %#", //%# = 테스트 번호(index) (testCase) => { const result = testFunction(testCase); expect(result).toEqual(result); } ); 예시로 인수 두 개를 받아 이를 합하는 함수를 만들어 테스트하고자 한다. //testCase_1 = 1 + 2 = 3 function plus(one, two){ return one + two ; } test.each([[[1,2]]])( "더하는 함수 테스트 %#", (t..

만약 하나의 태그에 여러 class를 부여하고 싶다? P 이렇게 띄어쓰기로 구분하면 된다. 이걸 이렇게 했다가 하고싶은 작업을 못했다..;;

1. test를 연습하기 위해 jest를 한 파일에 설치했다. 2. test.js 라는 파일을 만들고 연습을 했다. 3. 새로운 test를 하기 위해 valTest.js 파일을 만들었다. 4. npm test valTest.js를 하자 파일을 못찾는다. No tests found, exiting with code 1 Run with `--passWithNoTests` to exit with code 0 (생략) 영문을 모른채로 몇 가지를 시도했다. npm test -- valTest.js (실패) mv valTest.js val_test.js [파일명을 "val_test.js"으로 변경] > npm test val_test.js (실패) 그럼에도 안되던 와중 발견한 블로그.. 3. Test 파일 작성 규..