티스토리

allblack의 개발 새발

검색하기

블로그 홈

allblack의 개발 새발

tistory.allblack.dev/m

고졸 신입 개발자의 개발일지

구독자: 1

방명록 방문하기

주요 글 목록

functional component , class component +(react.FC) what is the component? 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 (단위)모듈을 뜻한다. functional components 함수 컴퍼넌트의 정의 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다. -react 공식 사이트- 특징 UI에 집중되어있는 방식 함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메.. 공감수 0 댓글수 0 2021. 8. 2.
react typescript hooks mobx6 사용하기!(useContext없이) mobx란? MobX는 전역 상태 라이브러리중 하나입니다! 특징 React에 종속적인 라이브러리가 아님(vue, anglur등에서도 사용가능) redux와 다르게 store에 제한이 없음 observable을 기본적으로 사용하고 있음 Mobx는 절대적으로 필요한 경우에만 state 변경 (어떤 뜻인지를 모르겠음) Typescript를 기반으로 만들어짐 개념 observable: 추적 가능한 state 정의 action: state를 변경하는 메소드 computed: state와 캐시로부터 새로운 결과를 반환 observable Observable State를 만듬 state의 변화는 reaction과 computations를 일으킴 관찰할 수 있는 변화가 일어나면 탐지함 시간에 따라 변할 수 있는 값들을.. 공감수 1 댓글수 0 2021. 7. 31.
CRA없이 react typescript환경 구성하기 리액트는 UI 기능만 제공하는 라이브러리라서 개발자가 직접 설정해야 하는 것들이 많이 있습니다. 그런데 이렇게 개발자 마음대로 설정할 수 있는 점 때문에 처음 시작하는데 많은 어려움이 있습니다. 그래서 react에서 CRA를 만들었습니다. CRA란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 툴입니다. CRA의 장점 초보자가 react에 접근하기 쉽다. webpack, babel등 세부 설정을 자동으로 해줍니다. ES6+문법, CSS 후처리같은 개발환경 자동으로 설정해줍니다. cra 단점 webpack,babel설정을 변경하기 어렵다. 작은 프로젝트를 진행할때에는 너무 파일이 무겁다 (물론 react-app-rewired나 eject를 이용해서 webpack설정을 수정할 수 있습니다.).. 공감수 0 댓글수 0 2021. 7. 25.
hooks-2 (useCallback,useMemo,useRef) 이중 useState,Effect다음으로 많이 사용하는 3개의 hooks를 알아봅시다! -useCallblack- -설명 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 우리가 컴퍼넌트를 호출하면 안에있는 모든 함수,변수들이 재선언 됩니다. 이럴경우에 컴퓨터 memory나 cpu에 많은 부하가 걸릴수 있습니다. (물론 작은 프로젝트는 상관이 크게없음) 위에 말을 해석하면 호출,재선언이 있을때마다 함수를 만들지 않고 한번 만든 다음에 계속 재사용한다고 생각하시면 됩니다! -사용법 import React,{useCallback} from "react"; const App=()=>{ const test=useCallback(()=>{ alert("test"); },[]); /* 만약 참조하는 값이.. 공감수 0 댓글수 0 2021. 5. 14.
hooks-1 (useSate, useEffect) Hooks? 아주 간단히 말씀드리자면 class없이 class의 기능(state,life cycle)을 사용하기 위해서(hook)하기위해서 만들어졌습니다! useState import React,{useState} from "react"; const [test,settest]=useState("10"); test는 10에 값을 가지고 있고 settest를 통해 test값을 변경가능하다. useState에 넣을수있는 값은 제한은 없다.(arry,string,undifend)등등 하위 컴퍼넌트에 settest를 넘긴다음에 하위 컴퍼넌트에서 변경해도 test값을 변경 가능하다! useEffect import React,{useEffect} from "react"; useEffect(() => { alert(".. 공감수 0 댓글수 0 2021. 5. 13.
그그그 팝업 비슷한거 있는데 이름이 뭐지?(모달 페이지) modal? 팝업창 이랑 뭐가 다른 거지? modal란? 모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법입니다. 특징 꼭 이목을 끌어야하는 화면에서 이용함 배경이 어둡게 되면서 원래 패이지와 분리되어있다는 느낌을 준다 popup이란? 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것이다. 특징 별도의 창에서 열림 팝업창은 재활용,이동이 자유롭다.(모달은 iframe을 이용한다) 브라우저 설정에서 팝업을 나오지 않게 막을수 있다. modal이 왜 필요한가? 창을 띄운다는 것은 특정 내용을 사용자에게 어필하고 싶다는 뜻이다. 프로모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야할 때. 또는 강조해야할 때 사용해야 한다. modal wi.. 공감수 0 댓글수 0 2021. 2. 22.
나도 만들 수 있다 todolist (외전) 잡담 아... 원래 이거 쓰고 있었는데 한번 날아 가서... 다시 작성합니다. ㅠㅠ 저번까지 했던 파일: https://github.com/famous0811/Todos famous0811/Todos 블로그 자료. Contribute to famous0811/Todos development by creating an account on GitHub. github.com 폴더 분할 이렇게 만들 예정입니다. 참고로 재가 다만든게 아니구여 밑에 있는 출처에서 많이 참고(?) 했습니다. install yarn add @reduxjs/toolkit//새로운 redux관리 프로그램 yarn add react-redux//connect사용하기위해서 이 두가지를 추가로 install 해주세요!! Store and re.. 공감수 0 댓글수 0 2020. 5. 18.
나도 만들어 보자 toodolist (3) 잡설 너무 힘들다 2개를 하루 안에 쓰니... 바로 ㄱㄱ Fotter 기능 구현하기 기능을 설명하자면 all //모든 일정을 보이게 함 clear //클리어한 일정만 보이게 함 active //클리어하지 않은 일정만 보이게 함 clear //completed 모든 일정 제거 cntrolList.jsx ... useEffect(()=>{ showListSet("all"); //시작하자마자 적용 시키기 위해 },[]);//이렇게 사용하면 처음 랜더링 될때만 실행됨 var length=0;//리스트길이 저장 이유는 밑에서 설명 const [nowstate,setnowstate]=useState("all"); list=ListDatas.map((info)=>{if(info.show)++length; return.. 공감수 0 댓글수 0 2020. 5. 10.
나도 만들어 보자! todolist (2) 잡설 어... 오늘은 바로 시작하겠습니다! 확장자를 변경해 봅시다!! react의 원래 확장자는 js가 아니라 jsx입니다. ?? 실행할 때 에러가 안 나잖아요!! 뭐 오류는 안 나지만 다음과 같은 장점들이 있다고 합니다!!(저도 잘 모르겠어요,,,) JSX는 컴파일링 되면서 최적화되므로, 빠르다 Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것, 즉 예측 불가능한 결과를 나타내지 않는 것 [출처: jerrypop 블로그]) 하며 컴파일링 과정에서 에러를 감지할 수 있다.(js는 안 해줌..) HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성할 수 있다. 뭐 그러한 이유로 이후 추가할 컴포넌트들은. jsx입니다 그리고 App.js를. jsx로 바꿔 주세요!! 구.. 공감수 1 댓글수 0 2020. 5. 2.
나도 만들어 보자! todolist (기본세팅) 잡설 오랜만에 글을 쓴다... 요즘에 좀 나태해져서... 쩝... 주제는 한 10개 가까이 생각해 놨는데... 어쨌든 한 1주 정도를 놀았기 때문에 다시 초심으로 돌아가 보고자(는 훼이크 그냥 복습 용도??)는 마음으로 todolist를 만들어 보겠습니다. 우리가 만들 todolist입니다. ※추신 create-react-app부터 차근차근 만들기를 시작했습니다. 기본 세팅 완료하기! 시작하기 전에 아직도 node.js를 설치하지 않으셨다면 node.js를 설치하세요!! cmd를 여신 다음에 원하는 폴더로 들어가신 다음에 react파일을 만들어 주세요! create-react-app todos 혹시 cmd사용법을 모르신다면?! cd: 파일을 이동 md: 폴더생성 start 프로그램명: 프로그램 실행 di.. 공감수 0 댓글수 0 2020. 4. 28.
리덕스는 뭐지?? 리덕스의 탄생 배경은?? 이제 리액트로만 개발하다 보면 이런 문제가 생길 수도 있습니다. 이런 문제가 생기기도 하고 또 이제 코드가 복잡해지는 것을 방지하기 위해서... 뭐 이러한 이유로 react를 보조할 수 있는 javascript오픈소스 라이브러리가 생겼습니다. ※Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 간단하게 말했지만 리덕스의 탄생 배경이 궁금하다면.. ※물론 꼭 redux 스만 react를 보조할 수 있는 것은 아니다. modex 등 다양한 것들이 있지만 저는 아직 redux만 공부했습니다... modex 등도 공부하면 올리겠습니다... 리덕스의 구성요소 를 알아보기 전에 리덕스의 구조부터 알아보겠습니다. reducer store action dispatch sub.. 공감수 0 댓글수 0 2020. 4. 5.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.