본문 바로가기

Front-end100

[React] date format / moment moment Moment js는 날짜 및 시간에 대한 데이터를 이용할 경우, 가장 많이 사용되는 리액트 라이브러리입니다. 라이브러리 다운로드 $ npm install moment --save // 또는 $ yarn add moment 선언 import moment from 'moment'; //선언하지 않아도, 디바이스 혹은 locale의 시간을 불러온다. import 'moment/locale/ko';//대한민국 Command // format에 맞게 출력된다. const nowTime = moment().format('YYYYMMDD HH:mm:ss'); console.log(nowTime); // 출력 결과: 20210818 09:41:32 실제 사용예제 var nowTime = moment().f.. 2021. 10. 28.
[React] Module not found: Can't resolve '라이브러리명' 리액트에서 만나는 이 오류는 새로운 라이브러리들을 다운로드 받아 사용하려고 할때 종종 나타거나 대부분은 협업시, 다른사람이 라이브러리를 설치했는데 나는 설치를 안하면 나타난다. 해결법은 간단하다. 1. 아래의 파일 및 폴더를 삭제한다. [File] package-lock.json [Directory] node_modules 2.아래의 명령어를 사용하여 모듈들을 재설치해준다. [Command] npm install *명령어를 실행해줄때는 명령어를 실행하는 경로를 항상 유념해주자 ( 올바른위치에서 커맨드를 실행) 만약 위 명령문에 오류가 난다면 npm install --force 포스란? 강제로 한다는 뜻이다. 강제로라도설치해야지 뭐 어떻하겠는가 3.실행 [Command] npm start webpack 다.. 2021. 10. 28.
npm start 시 마주하는 error npm error 1. npm start 시 error code 1을 마주할 때 package-lock.json과 package.json의 webpack을 지운 상태에서 npm install을 다시 한다. npm install시에 “Cannot read property ‘mach’ of undefined 에러가 나오게 되면 다시한번 package-lock.json을 지우고 다시 npm install을 한다. 2. cross-env: command not found 에러가 나온다면 ? npm install cross-env를 입력해주자. 3. Module not found: can’t resolve ‘react-router-dom’ 에러가 나온다면? npm install --save react react-.. 2021. 6. 4.
[글꼴 세팅] 구글 폰트 사용하기 jeju폰트 추천 안녕하세요 꼬바리입니다. 구글 폰트 사용법입니다. jeju폰트 무난하게 사용 하기 좋습니다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 사이트 방문후 crtl + F -> jeju검색 (원하시는거 검색) @import url(https//fonts.googleapis.com/earlyaccess/jejugothic.css); 혹은 @import url('https://fonts.googleapis.com/css2?family=Jua'); 등의 형식 복사 붙여넣기 앞에 https 붙여 주시고! 사용 하시면 됩니다! .. 2021. 5. 7.
[jQuery/AJAX ] Jquery를 이용한 AJAX연결과 예제 #Jquery #AJAX #JAVASCRIPT 지금까지는 javascript를 이용하여 함수를 생성하고 비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다. 이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다. 핵심 코드 $.ajax({ 1. url : 자원 (XX.do, json, xml, jsp, html) 2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text 3. type : 어떤 방식으로 데이터를 가져오느냐? post, get 4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값 5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술 .. 2021. 4. 29.
[jQuery] 제이쿼리 AJAX AJAX가 jQuery 고유의 기능은 아닙니다. 하지만 jQuery는 간단한 문법으로 AJAX를 사용할 수 있게 도와줍니다. AJAX AJAX란 asynchronous Javascript and XML입니다.(요즘은 XML보다 HTML이나 JSON을 더 많이 쓰는 것 같습니다. 그래도 AJAH, AJAJ라고 부르기는 좀 이상하네요 ㅎㅎ) 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다. 뭐 예전에는 거의 모든 웹페이지가 그랬고, 현재도 많은 페이지가 그렇기 때문에 별 불편함은 느끼지 못하실텐데요. Google에서 페이지 깜빡임 없이 웹앱을 구현해서 주목을 받았습니다. 구글 검색을 해보면, 페이지를 .. 2021. 4. 29.
[jQuery] vanilla JS -> JQuery 표현법 funtion f`1 과 funtion f`2 는 같은 코드 이다. 스크립트 문법 만 본다면 제이쿼리 사용하기 위해 head안에 넣어주고 getElementsByClassName 하여 클래스 네임을 가져오는건 바닐라 JS 제이쿼리는 $(" ") 안에 클래스 -> .클래스명 아이디 -> #아이디 2021. 4. 29.
React | Component의 Lifecycle React는 컴포넌트 단위로 화면에 렌더링하는데, 이 때 각각의 컴포넌트는 Lifecycle을 갖는다. 다음은 라이프사이클 다이어그램이다. 이번에는 리액트의 LifeCycle API에 대해 알아보자. Lifecycle 자세한 다이어그램은 이곳에서 볼 수 있다. 다음은 라이프 사이클 API를 컴포넌트가 1) 생성될 때, 2) 업데이트 할 때, 3) 제거 할 때로 나누어서 정리해보았다. will이 붙은 메소드는 특정 작업 전에 실행되는 메소드이고, did가 붙은 메소드는 작업 후 실행되는 메소드라는 것을 기억하자. Mount 1. constructor() 컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다. 이 메소드는 컴포넌트가 마운트 되기 전에 호출 된다. 페이지 로드 되고 컴포넌.. 2021. 4. 29.
React | Component의 State State state란 말 그대로 컴포넌트의 상태 값입니다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌트 내에서 정의하고 사용합니다. 위의 코드를 설명하자면, render() { 이 부분이 실행할 함수가 들어가는 부분이다. } div를 클릭하면 clicked라는 상태를 수정한다. 여기서 setState() 함수는 state를 업데이트한다. {clicked: !this.state.clicked}라는 말은 현재 clicked의 반대로 (toggle처럼) 저장한다는 의미이다. {this.state.clicked ? '좋아요' : '싫어.. 2021. 4. 29.
728x90
반응형

티스토리툴바