개발공부 임고미

목차 0. 들어가며 1. 알 고쓰자 TypeScript : 왜 타스인가 ? 2. 타입의 종류 1. 원시타입 string, number, BigInt, boolean, null, undefined, symbol 1 ) string let str: string; str = '123'; str = 123; // Error 2) number let num: number; num = 123; num = 123.456; num = '123'; // Error 3) BigInt 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. const theBiggestInt = 9007199254740991n; const alsoHuge = BigInt(90071992..

특정 element위치로 이동시킬경우 element의 위치를 구해서 scrollTo를 사용해주고 있었다. 그러나 더 쉬운 방법을 찾아 공유해보고자 한다.. 키워드는 scrollIntoView 1 2 3 4 item1 item2 item3 item4 해당 엘리먼드 위치로 바로 이동한다,.. 위의 테스트 코드는 버튼을 클릭하면 해당 아이템 시작점으로 스크롤해준다. 그런데 만약,, 맨위에 찰삭 붙게하고 싶은게 아니라 위에 여백을 남기고 싶은 경우에는 어떻게 해야할까 ? 이 경우에는 scrollIntoView 만으로는 해결할 수가 없다. 1. scrollIntoView 를 이용하는 방법 target.scrollIntoView(); window.scrollBy(0, -margin); 2단계로 해당 기능을 구현할 ..

위 코드 넣어주기!

결론, path를 바꾸는방법으로history를 쌓을수도 있지만 쿼리를 바꿔줌으로써 스텍을 쌓을 수 있다. 일반적으로 경로를 바꿔가며 페이지가 전환되는경우에는 push나 replace를 이용해서 히스토리를 쌓을지 말지를 결정할 수가 있습니다. push history stack o ( = 뒤로가기했을때 해당페이지를 보여줄 수 있게함) replace history stack x ( = 뒤로가기 했을때 replace로 설정해줬던 페이지는 건너뛰게됨) 그런데, 경로를 바꾸지 않고 sate를 이용해서 컴포넌트를 렌더링하고 있을경우에 브라우저 이벤트인 뒤로가기를 할 경우에는 어떻게 컨트롤해야할까요 ? 문제 상황 홈 > 약관동의 페이지 > 약관상세 모달 > 브라우저 뒤로가기 이벤트 텍스트만 보고 유추하기로는, 약관동의..

🙋🏻‍♀️ 인풋 클리어버튼 커스텀하려는데 어떻게하면 될까요! input의 타입에는 text, number. tel 등 다양한 속성이 있습니다. 그 중 Search타입에서는 인풋의 값을 reset해주는 버튼을 생성해주게 됩니다. 이 클리어 버튼은 브라우저 내에서 생성하기 떄문에 저 자체를 커스텀 할 수는 없고, 이 버튼을 가려주고 디자인을 변경해주는 방식으로 커스텀 해야합니다. 커스텀 JS를 사용하지 않고 CSS만을 이용해 search의 고유기능을 사용하는 방법을 이용하려합니다. 1. 현재 스타일 가리기 /* IE의 경우 */ input::-ms-clear, input::-ms-reveal{ opacity: 0; position: absolute; right: 0; } /* 크롬의 경우 */ input::..

목차 0. 들어가며 1. 알 고쓰자 TypeScript : 왜 타스인가 ? 2. 타입의 종류 결론부터 얘기하자면, 다음과 같다. 왜! TypeScript? 1 강력한 객체지향 프로그래밍이 가능하다. 2 모듈성 있는 코드 개발하기에 좋다. (재사용 가능) 3 기존코드 문제해결이 쉽다. 유지보수하기 수월하다. 4 타입을 정해주므로써 문서화효과를 기대할 수 있다. (가독성이 높다) 5 정적 타입언어로써 개발 단계(컴파일 단계)에서 이슈를 잡아낼 수 있다. 6 모든 브라우저에서 호환 가능하도록 만들 수 있다. 1 강력한 객체지향 프로그래밍이 가능하다. JS도 class를 이용해 객체지향 프로그래밍이 가능하긴하지만, TS를 이용하게되면 interface, Class등을 이용해서 좀 더 객체지향적 프로그래밍이 가능..

목차 0. 들어가며 1. 알 고쓰자 TypeScript : 왜 타스인가 ? 2. 타입의 종류 시간을 내어 처음부터 다시 훑어보는.. 타스 뽀개기!를 시작해보겠다.( 제발 뽀개져라!! ) 다시 공부하게 된 계기는 여러 가지가 있겠지만 몇 가지를 얘기해보겠다 실무에서 타입스크립트를 사용 중이지만, '좀 더 잘 쓸 수 있을 것 같은데~!'라는 생각을 매번 하고 있었다. 왜냐면 타입을 거의다 interface로 생성하고 있어서 말이다 ^^.. 또 다른 한 가지는 최근 지인과 이런 대화를 나눈 적이 있었다. 🙋🏻‍♀️ : 타입스크립트,, 왜 쓰는 거야? 자바스크립트가 훨씬 편하고 더 좋은 것 같아. 굳이 필요한가 싶어 🐵 : 타스를 사용하게 되면 런타임이 아닌 개발단계에서 에러를 쉽게 잡아낼 수 있어! 🙋🏻‍♀..

목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 드래그중 클릭 막기 1. slick APi이용 상태값을 이용해 드레그 중인것을 캐치하고 그 동안 클릭을 막는 방법을 이용합니다. const [dragging, setDragging] = useState(false) const handleBeforeChange = useCallback(() => { setDragging(true); }, []); const handleAfterChange = useCallback((i: number) => { setDragging(false); }, []); const settings = { ..., beforeChange: handleBeforeChange, afterChange:..