allblack의 개발 새발

SPA와 MPA를 알아보기전에 정적 사이트와 동적 사이트의 차이를 알아보자! static website(정적 웹) vs Dynamic website(동적 웹) 정적 웹 서버에 저장된 html파일이 그대로 브라우저에 보이는 것을 말한다. 개츠비가 가장 대표적인 정적 페이지라고 할 수 있다. HTML안에 모든 데이터가 들어 있는 사이트 동적 웹 정적인 웹사이트의 반대말로 동적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 그려지는 것이 아닌 동적으로 html파일이 만들어 지는 것! SPA vs MPA? SPA(Single Page Application) 한 개(Single)의 Page로 구성된 Application이다. SPA는 CSR(Client Side Rendering) 방식으로 ..

webpack이 뭐죠? webpack은 모듈 번들러입니다. 번들?, 번들러? 번들링(bundling) 모듈 번들링은 (html에 들어가는) 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식입니다 번들러(bundler) Browserify, Webpack, Rollup등과 같은 하나에 파일로 통합해주는 것입니다. 번들(bundle) 모든 의존성이 묶여있는 파일(js)입니다. 위에 내용을 정리하면 webpack은 많은 자바스크립트 파일을 하나로 만들어주는 방식(도구)입니다. 구지 번들링을 이용해서 js파일을 모아줄 필요가 있나요? 물론 직접 html에서 script tag를 이용해서 불러도 됩니다. 그러나 요즘 트렌드는 react, vue같이 하나에 html 파일에 모든 걸 때려 넣는(?) S..

vue.js cli 설정 하는 방법을 알아보겠습니다. npm install -g @vue/cli // cli3 버전 npm install vue-cli //cli2 버전 cli툴을 설치해주세요! vue create {project명} //3.x vue init {탬플릿} {파일 경로} //2.x 프로젝트 생성 //3.x npm run serve yarn serve //2.x npm run dev yarn dev 로컬 실행 방법 cli2 vs cli3 cli2는 기본 세팅이 없음, 탬플릿 선택해야됨, webpack이 밖에 들어나 있음, node module이 자동설치 안됨 cl3는 기본 설정 있음,탬플릿 따로 없음,내장 webpack, node module자동 설치됨 (자세한건 제가 참고한 블로그를 봐주세..

이중 useState,Effect다음으로 많이 사용하는 3개의 hooks를 알아봅시다! -useCallblack- -설명 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 우리가 컴퍼넌트를 호출하면 안에있는 모든 함수,변수들이 재선언 됩니다. 이럴경우에 컴퓨터 memory나 cpu에 많은 부하가 걸릴수 있습니다. (물론 작은 프로젝트는 상관이 크게없음) 위에 말을 해석하면 호출,재선언이 있을때마다 함수를 만들지 않고 한번 만든 다음에 계속 재사용한다고 생각하시면 됩니다! -사용법 import React,{useCallback} from "react"; const App=()=>{ const test=useCallback(()=>{ alert("test"); },[]); /* 만약 참조하는 값이..

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("..

modal? 팝업창 이랑 뭐가 다른 거지? modal란? 모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법입니다. 특징 꼭 이목을 끌어야하는 화면에서 이용함 배경이 어둡게 되면서 원래 패이지와 분리되어있다는 느낌을 준다 popup이란? 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것이다. 특징 별도의 창에서 열림 팝업창은 재활용,이동이 자유롭다.(모달은 iframe을 이용한다) 브라우저 설정에서 팝업을 나오지 않게 막을수 있다. modal이 왜 필요한가? 창을 띄운다는 것은 특정 내용을 사용자에게 어필하고 싶다는 뜻이다. 프로모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야할 때. 또는 강조해야할 때 사용해야 한다. modal wi..

잡설 예전에 작성했었던 scss 관련 글이 인기가 많이서 추가적인 내용을 써볼까 한다. scss와 styled-components의 차의 점? 일단은 둘 다 사용 방법은 비슷하다 #box{ &>div{ } &::before{ } } 이렇게 태그 안에 내용을 넣을 수 있다는 점은 동일하다. 가장 큰 차의 점은 스타일 변경 과정에 차이가 있다. 만약 당신이 버튼을 불렀을 때 css를 변경해야 한다고 해보자 styled-components import React,{useState} from 'react'; import styled from "styled-components"; function App() { const [click,setclick]=useState(false); return ( setclick(..

잡설 오랜만에 글을 써본다 ㅎㅎ 요즘 암것도 하기 싫어서 놀고 있었는데 이제 다시 쓰기 시작 해야지ㅎㅎ 본론 요즘에서야 display에도 여러 속성들이 있다는 것을 알게 되었다. 요즘에 알게된 여러가지중에 table에 대해 먼저 알아보자 뭐 긴말이 필요하겠는가? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87..

잡담 아... 원래 이거 쓰고 있었는데 한번 날아 가서... 다시 작성합니다. ㅠㅠ 저번까지 했던 파일: 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..

잡설 너무 힘들다 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..