BaseButton Component는 기본적으로 모든 버튼 형식을 받고 기본적인 CSS 를 적용해준다. 그래서 부모 컴포넌트에서 CSS를 적용했을 경우 만약 size: 55px 로 지정하고 BaseButton 에서 60px로 지정을 해둔 상태면 BaseButton 의 CSS가 적용이 되었다. 부모컴포넌트의 CSS가 우선 적용이 되는것이 아닌가 라고 생각했는데 그것이 아니였다. 스타일 적용 순위 1. 인라인 스타일 2. 내부 스타일 3. 외부 스타일 4. 브라우저 기본값 위와 같은 순서로 스타일이 적용이 된다. 만약 같은 등급이라면 가장 최종적으로 적용되는 것이 우선시 된다. 만약 강제로 우선 순위를 적용하고 싶다면 !important를 사용하면 된다. (개별 속성에 적용되고 IE6 이전 버전은 인식되지..

css transfrom 요소에 적용할 변형을 지정한다. 나는 transform: translateX translateY 를 사용하여 이미지의 위치를 조정해 주었다. 처음엔 float을 사용하였는데 받는 이미지가 여러가지였다. 그냥 image도 있고 icon 이나 썸네일 등이 있었는데 썸네일의 경우 기본적으로 마진을 받기 때문에 float을 사용할 경우 위치가 살짝 어극 나게 되었다. 그래서 position: absolute; 를 해주고 transform을 사용하여 위치를 고정 시켜 주었다. 아래 처럼 사용하여 이미지를 중앙으로 정렬 시켜 주었다. position: absolite transfrom: translate( -50%, -50%) top: 50% left: 50% 참고 블로그: https://..

회원가입 form 일원화 하는 작업을 계속 진행하였다. 컴포넌트를 다 나누었다고 생각했는데 좀 더 나누어야 되는 부분이 있어 진행을 하였다. 그리고 css 를 작성하는데 sass에 대해서 아직 좀 적응이 안 되어서 많이 헤멘것 같다. 그리고 기존에 작성된 css를 TS로 바꾼 버튼의 css에 적용하려고 하니 차이가 나거나 적용이 안되는 부분들이 있었다. 내일은 css 작업을 마무리 해보려고 한다.

회원가입 form을 통일하는 작업을 진행하였다. 회원가입 form은 2가지가 있었고 이것을 통일시키는 작업이였다. 경로또한 통일 시켜야했다. 전환을 하면서 JS파일을 TS로 바꾸고 class 컴포넌트를 function component로 바꾸면서 hook을 적용하였다. form을 통일 시키고 컴포넌트화 하는 작업은 완료했다. 다음주 부턴 적용한 함수들이 잘 돌아가는지 살피고 css를 적용해야한다. 주말 동안 sass 에 대한 공부와 회원가입을 하는 로직을 살펴 보아야 할것 같다.

next.js 의 pushRoute 에 대해서 알아 보았다. route, params, option을 매개변수로 받을 수 있다. 이 매개변수들의 설명은 아래와 같다. API: Router.pushRoute(route) Router.pushRoute(route, params) Router.pushRoute(route, params, options) Arguments: route - Route name or URL to match (일치하는 경로 이름 또는 URL) params - Optional parameters for named routes (명명 된 경로에 대한 선택적 매개 변수) options - Passed to Next.js (Next.js에 전달) Double Exclamation Marks ..

optional chaining typescript 3.7 버전 부터 제공 하는 문법이다. @babel/plugin-proposal-optional-chaining 바벨 문법을 통해서 사용이 가능하다. if , 삼항연산자 또는 && 을 사용해야할 때 optional chaining을 사용하면 코드의 길이가 줄어든다. lodash 다양한 메소드를 지원 한다. 복잡한 연산도 간단하게 해결할 수 있게 해준다. https://lodash.com/ react static react static method 로 static 키워드는 클래스의 정적 메소드를 정의합니다. 정적 메소드는 클래스의 인스턴스에서 호출되지 않습니다. 대신, 그들은 수업 자체에 부름을 받았습니다. 이들은 종종 객체를 생성하거나 복제하는 기능과 ..