본문 바로가기

전체 글53

React Props 그리고 vue에는 없는 신기한 함수 프로퍼티 (Properties)란? 상위 컴포넌트에서 하위 컴포넌트에게 값을 전달할 때 사용. 프로퍼티는 단방향이라는 특징이 있음. 읽기 전용 데이터 이기 때문에 수정이 불가함. ** 사용 방법 ! 버튼 함수 컴포넌트를 만들어서 재활용해보자. function Btn(props){ return( {props.btnName} ) } function App(){ return ( ) } Btn 함수 컴포넌트에 btnName이라는 인자를 전달하여 버튼 이름을 변경하는 코드이다. 이때, Btn 함수 컴포넌트에 전달하는 인자가 몇 개이던, 받을 땐 매개 변수 하나로 받는다. 예시. function Btn(props){ return( {props.btnName} : {props.newMessage} ) } functi.. 2022. 11. 1.
[네트워크] OSI Model, TCP/IP Original & Updated OSI (Open Systems Interconnection Reference Model) 모델 탄생 배경 초기 여러 정보 통신 업체 장비들은 자신의 업체 장비들끼리만 연결하면 되어 호환의 필요성이 없었음. but, 여러대의 컴퓨터를 연결해야 할일이 생기기 시작. 그래서 모든 시스템들의 상호 연결에 있어 문제가 없도록 표준을 정함. = OSI 7계층 OSI 모델 vs TCP/IP 모델 현대의 인터넷은 OSI 모델이 아니라 TCP/IP 모델을 따르고 있음. TCP/IP 모델도 OSI 모델과 마찬가지로 네트워크 시스템 모델임. 현대의 인터넷이 TCP/IP 모델을 따르는 이유는 OSI 모델이 TCP/IP 모델과의 시장 점유 싸움에서 졌기 때문. * 오늘날에는 TCP/IP Updated 모델이 많이 사용되고 있.. 2022. 10. 31.
React State vanilla.js Total Clicks : 0 Click Me 버튼을 클릭할때마다 counter가 증가하는데, 이 count를 react.js state를 이용해 리렌더링 되게 만들어보자. state 사용 전. const root = document.getElementById("root"); let counter = 0; function countUp(){ counter = counter + 1; ReactDOM.render(, root); } const container = () => ( Total Clicks : {counter} Click Me ); ReactDOM.render(, root); *순서. reactDom에 container componet를 렌더링. html에 해당 componen.. 2022. 10. 26.
JSX 문법 JSX란? 자바스크립트의 확장 문법 자바스크립트의 공식적 문법이라고는 할 수 없음 브라우저 실행 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨 예시) 변환 전 function App(){ return ( react practice ) } 변환 후 function App(){ return React.createElement("div", null, "react", React.createElement("span", null, "practice")) } JSX 문법 규칙 및 사용 방법 1. 컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소가 감싸는 형태여야 한다. function App(){ return ( 자식 자식 ) } : 리액트가 사용하는 Virtual DOM.. 2022. 10. 19.
vanilla.js vs react.js 1. vanilla vs react : 버튼을 클릭하면 숫자가 증가되는 간단한 이벤트 구현 (1) vanilla Total Clicks : 0 Click Me *이벤트 등록하기 위한 과정 : 4단계 - 태그 작성 - 태그 아이디 부여 - script로 아이디 불러와 변수에 저장 - 변수에 이벤트 리스너 추가 (2) react *이벤트 등록하기 위한 과정 - react.js로 엘리먼트 생성 후 태그 명, 이벤트 (각종 props 정의 가능), innerText입력 - react dom으로 html 업데이트 => vanilla.js와 비교했을 때 코드가 굉장히 간결해지고 가독성이 높아짐. (3) 차이점 vanilla는 HTML를 먼저 만들고 그걸 Javascript로 가져와서 HTML을 업데이트. react.. 2022. 10. 19.
소프트웨어 비용 산정 기법 ✍️ 소프트웨어 비용 산정 - 개발에 소요되는 인원, 자원, 기간 등으로 소프트웨어의 규모를 확인하여 개발 계획 수립에 필요한 비용을 산정하는 것. - 소프트웨어 비용을 너무 높게 산정할 경우 예산 낭비와 일의 효율성 저하를 초래할 수 있고, 너무 낮게 산정한 경우 개발자의 부담이 가중되고 품질 문제가 발생할 수 있음. ✍️ 소프트웨어 비용 결정 요소 방법 내용 프로젝트 요소 제품 복잡도, 시스템 크기, 요구되는 신뢰도 자원 요소 인적 자원, 하드웨어 자원, 소프트웨어 자원 생산성 요소 개발자 능력, 개발 기간 ✍️ 비용 산정 기법 1.하향식 비용 산정 기법 - 전문가 감정 기법, 델파이 기법 2.상향식 비용 산정 기법 - LOC 기법, 개발 단계별 인월수 기법, 수학적 산정 기법 1. 하향식 비용 산정.. 2022. 7. 6.

티스토리툴바