wazac

1. SMACSS ( Scalable and Modular Architecture for CSS ) : CSS를 [기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme)]5가지를 범주화로 패턴화 하고자 함 = categorization 1. Base.css [= reset.css] body, p, table, form, fieldset, legend, input, button ... { margin: 0; padding: 0; } 2. layout : 주요소(id) + 하위요소(class) 예 : 2개의 레이웃 스타일을 사용할경우 [ 1.유연한레이아웃 2.고정적레이아웃 ] #header { width: 400px; } #aside { width: 30px; ..

리액트로 프로젝트를 시작할 때 보통 무조건 설치하고 시작하는 경우가 있습니다. 이를 미리 정리해 두면 편리할 것 같아 작성해봅니다. 리액트 사용자들은 대부분 아는 내용일 꺼라 생각됩니다만, 혹시 리액트를 이제 막 시작하시는 분들은 도움이 되실꺼라 생각됩니다. 제가 작성하고자 하는 라이브러리들은 다음과 같습니다. Router, Polyfill, Axios, Redux 입니다. 앞으로 리액트에 관련된 정보글을 작성하면서 좀 더 세세하게 다루겠지만, 우선은 어떤 라이브러리인지는 알아야 하니, 기본적인 사용 방법과 설명을 같이 적어 두었습니다. 😊 1. Router 라우터는 주소에 따라 부분 렌더링을 하는 라이브러리입니다. SPA에서 페이지 이동을 구현하면 거의 필수라고 생각하셔도 무방합니다. 옛날 방식 처럼 ..

멋진 홈페이지들을 탐색하던 중 괜찮아 보이는 효과를 발견해서 직접 구현해 보았습니다. 다음과 같은 효과를 구현하기 위한 구조와 방식은 다양하겠지만, 저는 단순하게 구현하였습니다. div 안에 inner_div를 두고 첫번째줄의 inner_div에게는 left -100% 를 두번째 줄의 inner_div에게는 left 100%를 주어, 동시에 left: 0이 될때 다음과 같은 액션이 일어나도록 하였습니다. class하나로 컨트롤 했기 때문에 javascript은 단순히 class만 추가해 주면 됩니다. 1. html Click Me 2. css html,body{ width:100%; height:100%; } * { padding:0; margin:0; } .wrapper{ position: relati..

1. reset.css reset은 보통 가장 많이 사용되는 Eric Meyer's 의 Reset CSS 2.0에서 css를 추가해서 사용한다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,..

* VSCode 자주 사용하는 단축키 1. Tab키 안먹을 때 강아지가 키보드에서 발장구를 쳤더니 VSCode 에디터 화면에서 갑자기 탭키가 먹질 않았다. 탭키 대신 왼쪽 메뉴 부분이 활성화 된다면 Ctrl + M 을 누르면 해제된다. 2. 같은 단어 선택하기 Ctrl + D : Ctrl 누른 상태에서 d 를 누르면 같은 단어를 쉽게 찾을 수 있다. 완전 습관처럼 씀. * React Snippets 라이브러리 1. React Snippets 설정하기 React Snippets 라이브러리를 다운 받는다. - 내가 사용하는 세팅 { "workbench.iconTheme": "material-icon-theme", "workbench.startupEditor": "newUntitledFile", "peacoc..

버튼 클릭시 하단의 내용이 출력되는 탭을 만들어보겠습니다. 디자인요소를 추가하기 위해 활성화된 버튼 부분은 하나의 div로 컨트롤 하여 클릭시 위치를 이동시켜 좀 더 세련(?)되게 디자인 해보았습니다. 1. HTML 공지사항 뉴스 일대일문의 공지사항입니다. 공지사항입니다. 공지사항입니다. 공지사항입니다. 공지사항입니다. News입니다. News입니다. News입니다. News입니다. News입니다. 1:1 문의 입니다. 1:1 문의 입니다. 1:1 문의 입니다. 1:1 문의 입니다. 1:1 문의 입니다. 2. CSS * { padding:0; margin:0; box-sizing:border-box; } body{ background-color:#eee; } .wrap { padding:30px; } ...

달력을 쓸 일이 있어서 React-datepicker 라이브러리를 사용했습니다. 그런데 설명과 예시 소스가 불친절한 느낌을 받았어요. 😥 데모버전을 그대로 사용하면 에러가 빵빵 터지더라구요. * react-datepicker : www.npmjs.com/package/react-datepicker * react-datepicker demo : reactdatepicker.com/#example-custom-header * lodash : www.npmjs.com/package/lodash 1. 라이브러리 설치 yarn add react-datepicker 2. 기본 datepicker 컴포넌트 생성 후 App.js 불러오기 // Calendar.js import React, { useState } fro..

emotion공식 사이트 : emotion.sh/docs/introduction Emotion - Introduction Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and objec emotion.sh 저는 React 개발시 주로 emotion으로 스타일링을 합니다. 스타일만 따로 빼서 관리하기도 편하고 SASS..

- 에러 내용 MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist: https://docs.atlas.mongodb.com/security-whitelist/ at NativeConnection.Connection.openUri (D:\_personal\____study\reactstud..

npm 설치시 npm ERR! Maximum call stack size exceeded 뜨는경우 npm cache clean --force // npm 캐시삭제 npm rebuild // npm 재빌드 rm -rf node_modules npm install 마우스로 node_modules 삭제하고 npm install (재설치) 해도 됨😊