개발공부 임고미

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 간격주기 1. css custom 간격을 주기위해선 slick slide의 css를 수정해줭하는 수밖에 없습니다. [기본] //오른쪽으로 20px만큼 간격주기 .slick-list { marign-right: -..

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 3. 드래그중 클릭 막기 슬라이드 세팅 1. 패키지 로드 리엑트에서 slick을 세팅하기위에선 몇가지 패키지를 다운로드 해야합니다. //react slick npm install react-slick --save npm install slick-carousel -..

React만 사용해 봤었는데.. 회사에서 Next.js를 사용해서 새로 공부를 하게 되었다. 먼저 React와 Next의 가장큰 차이점은 SEO와 첫랜더링 속도 차이 인것같다. 정리하자면 React.js Next.js CSR SSR 첫 랜더링은 느리지만 이후엔 빠름 서버에서 뷰를 그려오기떄문에 상대적으로 느림 SEO가 걸리기 힘들다. 첫 html에있는 정보만 알고 바뀌는 페이지의 meta를 읽지 못함 SEO유리하다. 서버에서 그려오기때문에 바뀌는 정보들로 받아온다. 그러면, React와 Next중 Next를 선택해서 사용하는 이유는 뭘까? 가장 큰 이유는 SEO라고 생각한다. 그렇다면 SEO란 무엇일까? SEO = 검색엔진 최적화 로서, 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 ..

결론 : //X const CustomButtom = styled(CommonButton) ``; //O const CustomButtom = styled(props => ) ``; 평소에는 위와 같은 방식으로 하면 잘 작동되는데 안되는경우가 잇다. CustomButton이 CommonButton보다 먼저 생성되는경우이다. 위의 경우에는 styled components component cannot create styled-component for component: undefined. 라는 문구가 뜬다. 이때 위와 같은 방법으로 props을 받았을떄로 컴포넌트를 생성해주면 위의 에러를 맞이하지 않고 잘 해결할 수 있다.

기본 1. import 안한경우 2. import 하고 component 만들어줬는데, 잘못만들어준경우 //x const styledComponent = styled.div``; //o const StyledComponent = styled.div``; 이 또한 컴포넌트를 만드는것이므로, 대문자로 시작해줘야합니다. 3. 컴포넌트에 styled를 적용하고 싶은데 잘못한 경우 //x const StyledComponent = styled.Component``; //o const StyledComponent = styled(Component)``; 컴포넌트는, 일반 태그들과 달리 () 괄호로 묶어줘야합니다. 4. 위와같이 잘했는데도 안되는경우 이 상황을 겪고 이 포스팅을 하게 되었는데 해결은 하였지만 모든 원..

1. 몽고디비 접속 mongo 라는 명령어를 치면 몽고디비로 접속 할 수 있는데 접속이 안됐다. 해결 계정으로 접속하기 몽고디비에 admin계정과 user게정을 세팅했다는걸 전제로 mongo -port 포트번호 -u 계정 포트번호와 계정을 입력해주면 됩니다. 저는 주로 admin계정으로 접속을 합니다. 이유는 가장 권한이 커서! 올바른 계정을 적었다면 비밀 번호를 적으라는 문구가 나옵니다. 비밀번호를 치고나면 접속 완료!!!

문자열 자르기! substr, substring 먼저 각자의 반환 값을 알아보면, substring( start, end ) : start인덱스부터 end인덱스 전까지 출력 substr( start, end ) : start인덱스부터 end개의 문자 출력 (end가 어울리는 이름은 아니지만... 비교하려고 굳이 end로 적었습니다) 1) substring (0,3) : 0부터 3전까지니까 인덱스 2번인 N까지 출력되는걸 확인할 수 있습니다. 2) substr(0,3) : 0부터 3개 출력할꺼니까, N까지 출력되는걸 확인할 수 있다. 3) 원본 문자열은 바뀌지 않는다. ! end를 적지 않는경우엔? 끝까지로 인식 제가 더 많이 쓰는건 ? substring을 더 많이 쓰는것같습니다, 찾고자하는 문자가 몇글자..

들어가며! 처음에 csv파일과 xlsx의 차이를 잘 몰라 어떤것을 선택해 엑셀로 변환시킬까 고민하다가 두 타입의 차이점을 알아보았다. csv 1. MS-Excel, Google Sheet등 과 같은 다양한 스프레시트에서 사용할 수 있습니다. 2. xlsx에 비해 쉽고 빠르게 읽을 수 있다. 3. 단순 읽고 쓰는 정도라면 csv추천 xlsx 1. 기능이 많다. 2. csv에비해 무겁다. 참고 : https://wisenrich.com/%EC%97%91%EC%85%80xls%ED%8C%8C%EC%9D%BC%EA%B3%BC-csv-%EC%9A%A9%EB%8F%84-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80/ ------- 둘 중 필요한거..