Frontend176 [ 타입스크립트(TypeScript) ] query문의 value값에 key값과 동일한 값이 들어가있을 때 📍 query문의 value값에 key값과 동일한 값이 들어가있을 때 본인인증 기능을 구현하던 중 query에 key1=value1&key2=value2값이 추가된 상태로 다른 페이지를 방문하고 마지막에 query문을 변수로 사용하려고 할 때 겪었던 일이다. 당시 URL은 http://localhost:3001/foo/bar?returnUrl=returnUrl=/foo&id=baz와 같았는데 query문을 분석하면 returnUrl=returnUrl=/foo가 한 묶음 id=baz가 한 묶음인 총 2개의 query가 나왔다. 두번째 query값은 별 이상이 없었으나, 첫번째 query가 이상했는데, 바로 첫번째 query의 key값인 returnUrl이 value값에도 들어가있다는 점이었다. 당시 va.. 2022. 7. 12. [ 타입스크립트(TypeScript) ] 이중 반복문에서 반복문 순회 후 타입 강제하기 📍 이중 반복문에서 반복문 순회 후 타입 강제하기 언뜻 제목만 봐서는 이해하기 힘들 수 있지만, 쉽게 말해 타입이 2개 이상인 data에서 find를 통해 나온 값에 원하는 property만 추출하고 싶을 때 해당 타입을 assertion 방법이다. 이미 data에 타입이 정해져 있는 경우라면 굳이 type assertion 해야되나?라고 생각할 수 있지만, API요청을 통해 받은 값(data)의 타입이 2개 혹은 2개 이상으로 설정되어있고, 내가 사용하고 싶은 property가 각각의 타입에 공통으로 들어있지 않은 property인데, 한쪽 타입의 property만 추출하면 컴파일 에러가 나는 경우 해결방법에 대해 글을 작성했다. 한 가지 예시를 통해 살펴보자. API를 통해 받은 값 data 값이 있.. 2022. 7. 3. [ 타입스크립트(TypeScript) ] 비구조할당문법에 type 선언하기 📍 비구조 할당 문법에 type 선언하기 코드의 가독성을 높이기 위해 객체나 배열로 된 변수에 비구조화 할당 문법(destructuring assignment)을 사용할 때가 자주 있다. typescript로 비구조화할당 문법을 사용하면 변수로 꺼낸 값에 타입을 정해주는 경우를 마주하는데 object형은 가끔 타입을 어떻게 정해야 하는지 헷갈리곤 한다. 이번 글은 거창한 글보단 미세먼지처럼 작은 팁이지만 종종 헷갈릴 때 도움이 되므로 가벼운 마음으로 읽어보자. 하단 코드블록에 나와있듯이 user를 구조분해할당 이후 타입을 잘못 선언하는 경우는 AS-IS처럼 사용한다. 하지만, 저 문법은 타입을 정해주는 문법이 아니라, 객체의 원래 속성명을 다른 이름으로 할당하는 문법이다. 여기선 string으로 바꾼다는.. 2022. 6. 21. [ 자바스크립트(JavaScript) ] npm install 후 package-lock.json의 diff가 많고 npm run dev가 안될 때 📍npm install 후 package-lock.json의 diff가 많고 npm run dev가 안될 때 내가 담당한 repository를 본격적으로 작업하기 전에, 터미널에 npm install으로 해당 project를 실행하기 위해 필요한 패키지를 설치하는 도중 VSCode의 Source Control - Changes에서 main 브랜치의 package-lock.json의 코드와 다르게 diff가 엄청 많이 생기면서 npm run dev를 실행하면 오류가 뜨면서 정상적으로 local 환경 실행이 안 되는 경우가 있었다. main 브랜치의 package-lock.json과 다른것도 없는데 갑자기 diff가 많이 생겨서 당황했지만, 침착을 유지하며 구글링을 한 결과 원인은 npm이 항상 packag.. 2022. 6. 13. [ CSS ] 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기 📍 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기 CSS를 만지다 보면 항상 내 뜻대로 안 될 때가 많다. 그럴 때마다 직접 손으로 움직여주고 싶지만 우리는 프로그래머니까 코드로 움직이는 방법을 사용하도록 하자. 여러가지 Card를 모아놓은 Cards 컴포넌트가 있다고 가정하자. 이 Cards 컴포넌트를 중앙 정렬하고 싶다고 했을 때 어떻게 할 것인가? 여러 가지 방법을 떠올릴 수 있겠지만 처음에 나는 피그마에 명시되어있는 margin값을 고정하여 Cards를 중앙에 위치시켰다. 그런데 반응형이미지를 고려하는 환경에서 이러한 방법은 적절하지 못한 선택이었다. 왜냐하면 viewport가 고정되어있을 때는 괜찮지만, viewport가 바뀔때마다 margin값을 하나로 고정해놨기 때문에 CSS가 원하는 .. 2022. 6. 10. 이전 1 ··· 5 6 7 8 9 10 11 ··· 36 다음
