프론트엔드 정복하기

const validate = new RegExp( '파견근무(보라매)', ig) validate.test('(보라매)') 이렇게 하면 괄호를 인식하지 못해서 그런지. 제대로 동작 안했음. 정규식 대신 indexOf 로 대체함

이모션 css로 공통 스타일 작성하는 것 적극 활용하기. 단, 컴포넌트 내에서. 컨트롤 가능한 범위 내에서 사용하는 것이 적절할 것이다. > :not(hr) > :not(:nth-child(${selected+1})) class에서 의존성 기준 TeamStore.status = 'done'; 이런 건 최악이다. TeamStore내에서 해당 데이터에 무슨 일이 일어났는지 알 수가 없다. 차라리 안에서 updateStatus를 선언해주는 게 낫다.

Set 객체로 배열 중복 검사 가능 https://velog.io/@eunjin/JavaScript-%EC%BD%94%EB%93%9C-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-Set-%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%B0%B0%EC%97%B4-%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0

2자리로 나타내고 싶고, 한자리 일 때 앞에 0을 채우고 싶은 경우 위와 같은 스타일을 zero fill 스타일이라고 함. js zero fill 스타일을 검색해 보니 1) String.prototype.padStart() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart 그것 말고도 Intl, toLocaleString 등 number 다루는 함수 알아보기

getFlexAlign함수에서 result 변수를 파라미터로 전달받고 특정 값을 재할당 해서 return 시키고자 했다. function getFlexAlign(result: string, flexAlign: string) { result += flexAlign; return result; } ... let result = ` flex-direction: ${direction}; `; return getFlexAlign( result, ` align-items: ${align[0]}; justify-content: ${align[1]}; `, ); 하지만 eslint error가 발생했는데 에러를 발생시킨 원인 아래와 같은 규칙 때문이다. ESLint - 함수 매개 변수 재 할당 금지 https://ru..

로그아웃 버튼을 2번째(더블클릭 X) 눌렀을 때 성공했다. 로그를 확인하니 1번째 눌렀을 때 OPTIONS 메소드, 두번째 눌렀을 때 OPTIONS, GET 메소드로 요청되었다. OPTIONS란 웹서버에서 지원되는 메소드의 종류를 확인할 경우 사용됐다. 첫번째 클릭 시 get 메소드로 요청하기 전 options 메소드만 실행된 것이다. 로그아웃 버튼을 클릭했을 때 메인페이지로 이동하는 것까지 되었으나 로그아웃 함수가 실행 되지 않는 것이 이상했다. 어떻게 메인페이지로 이동할 수 있었나 확인해봤다. 로그아웃버튼이 a태그로 되어있었고, href 속성으로 인해 이동할 수 있었다. 로그아웃 함수가 실행되기 전에 href 속성때문에 페이지 이동이 발생했다는 것을 캐치했다. button태그로 바꾸니 해결됐다. **..