allblack의 개발 새발

잡담 이게 정말 궁금한데 알려주는 데가 없읍어... 그래서 내가 써야징 See the Pen WNQZBRm by famous(유명환) (@famous0811) on CodePen. 이거임ㅎㅎ

잡설 어... 오늘은 바로 시작하겠습니다! 확장자를 변경해 봅시다!! react의 원래 확장자는 js가 아니라 jsx입니다. ?? 실행할 때 에러가 안 나잖아요!! 뭐 오류는 안 나지만 다음과 같은 장점들이 있다고 합니다!!(저도 잘 모르겠어요,,,) JSX는 컴파일링 되면서 최적화되므로, 빠르다 Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것, 즉 예측 불가능한 결과를 나타내지 않는 것 [출처: jerrypop 블로그]) 하며 컴파일링 과정에서 에러를 감지할 수 있다.(js는 안 해줌..) HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성할 수 있다. 뭐 그러한 이유로 이후 추가할 컴포넌트들은. jsx입니다 그리고 App.js를. jsx로 바꿔 주세요!! 구..

확장 프로그램에 가셔서 이 프로그램을 추가하시면 됩니다, 확장자 종류 rcc => class 컴포넌트 생성 rrc =>class 컴포넌트 + react-redux추가 rccp =>class 컴포넌트 생성+ propTypes추가 rsf =>function 컴포넌트 생성 rsfp =>function 컴포넌트 생성 + propTypes추가 등등 엄청나게 많다!!

잡담 css와 scss와 styled-componets의 차이점을 정리해 봤습니다!! 순서 1.css? 2.scss? 3.styled-components? 1. css가 정확하게 뭐더라?? css의 뜻은 Cascading Style Sheet로 우리말로는 "계단식 스타일 시트?"라고 할 수 있겠다. 왜 만들어짐?? html이 만들어지고 난 뒤에 html에 디자인 요소를 포함시키기 위해 온갖 짓을 다한 결과 html 본연의 목적과 전혀 동떨어진 결과가 나왔고 그와 동시에 html 파일을 이해하는 데 어려움이 생겼다. ※도대체 어떻게 html 만으로 style을 구현했지??라는 궁금증을 가진 분들에게 한 가지 예시를 보여 드리겠다. See the Pen dyYRaVq by famous(유명환) (@famou..

잡설 오랜만에 글을 쓴다... 요즘에 좀 나태해져서... 쩝... 주제는 한 10개 가까이 생각해 놨는데... 어쨌든 한 1주 정도를 놀았기 때문에 다시 초심으로 돌아가 보고자(는 훼이크 그냥 복습 용도??)는 마음으로 todolist를 만들어 보겠습니다. 우리가 만들 todolist입니다. ※추신 create-react-app부터 차근차근 만들기를 시작했습니다. 기본 세팅 완료하기! 시작하기 전에 아직도 node.js를 설치하지 않으셨다면 node.js를 설치하세요!! cmd를 여신 다음에 원하는 폴더로 들어가신 다음에 react파일을 만들어 주세요! create-react-app todos 혹시 cmd사용법을 모르신다면?! cd: 파일을 이동 md: 폴더생성 start 프로그램명: 프로그램 실행 di..

ctrl + shift + P키를 입력한다. View: Toggle Integrated Terminal 을 입력하시면 됩니다. 단축키 `+ctrl `는 따옴표가 아닙니다!!! 키보드에서 1키 ㅇ왼쪽에 있는 "~"키 입니다!!

잡담 제목을 간결하게 만들기 힘들어서 그냥 이렇게 적었다 ㅎㅎ 어.. 간단히 말하면 뭐 한글파일,ppt등 버튼? 제목등 누르면 다운로드 되는 거랑... 화면 캡처하는 방법??? 등등 시작전 유희사항 이건 노드모듈이 필요해서 node.js를 반드시 설치하고 오세요!! 저는 리액트로 만들었습니다.(반드시 리액트일 필요는 없고.. 모듈을 import할수만 있으면 될껍니다..) 만들기 npm i html2canvas yarn add html2canvas 모듈을 설치한 다음에 import Htmlcanvas from 'html2canvas';//필수 function printDiv(id){ Htmlcanvas(id).then((canvas) => {//id부분 캡처 let myImg=canvas.toDataURL..

잡설 (앞으로는 항상 맨 위에는 잡설로 시작해야징ㅎㅎ) 어.. 글을 왜 분리해 놓았냐면은요 여기는 만들 때 도움이 될 수도 있는 내용들을 적었습니당.. 혹시 이전 글을 보고 오지 않았다면 2020/04/07 - [웹] - 크롬확장 프로그램 만들기1 크롬확장 프로그램 만들기1 잡설 어 요즘 너무 일을 잘 안 해서... 어떻게 하면 효과적으로 동기부여를 할 수 있을까를 고민하다가. 크롬 확장프로그램에다가 동기부여 영상들을 넣어놓고 틀면 어떻까 해서... 뭐 동기가 뭐가 중요하겠냐만.. allblack0811.tistory.com 여기서 보고 와 주세요. 팁? 어 일단 확장 프로그램은 인라인 스크립트가 안됩니다. 일단 인라인 스크립트가 뭐지 하시면.... Q. 그럼 왜 안돼요? A. 보안상에 이유라나 뭐라나...

잡설 어 요즘 너무 일을 잘 안 해서... 어떻게 하면 효과적으로 동기부여를 할 수 있을까를 고민하다가. 크롬 확장프로그램에다가 동기부여 영상들을 넣어놓고 틀면 어떻까 해서... 뭐 동기가 뭐가 중요하겠냐만은 그래서 크롬 확장 프로그램을 만들어 보았다. 프로그램을 만들려고 여기저기 찾아보니까. 생활코딩님의 강의가 잘 되어있어서 참고했습니다. 만들기 처음에는 확장 프로그램명으로 폴더를 만든 뒤에 manifest.json파일을 추가해주세요. { "name": "MotivationVideo",//확장프로그램명 "version": "1.0",//버전 "description": "Improve your will.",//간단한 설명 "manifest_version": 2,//?? "browser_action":{ ..

리덕스의 탄생 배경은?? 이제 리액트로만 개발하다 보면 이런 문제가 생길 수도 있습니다. 이런 문제가 생기기도 하고 또 이제 코드가 복잡해지는 것을 방지하기 위해서... 뭐 이러한 이유로 react를 보조할 수 있는 javascript오픈소스 라이브러리가 생겼습니다. ※Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 간단하게 말했지만 리덕스의 탄생 배경이 궁금하다면.. ※물론 꼭 redux 스만 react를 보조할 수 있는 것은 아니다. modex 등 다양한 것들이 있지만 저는 아직 redux만 공부했습니다... modex 등도 공부하면 올리겠습니다... 리덕스의 구성요소 를 알아보기 전에 리덕스의 구조부터 알아보겠습니다. reducer store action dispatch sub..