바닥코딩

소프트웨어 개발방법론 소프트웨어 개발방법론이란 소프트웨어를 개발하는 방법에 대한 이론으로서 소프트웨어 개발과정, 절차, 방법, 산출물, 기법 도구들을 체계적으로 정리하고 표준화시킨 것을 의미합니다. 산업화가 진행되고 IT 산업이 육성이 활발하게 진행이 되면서, 소프트웨어 개발의 역사는 어느덧 1960년대를 시작으로해 현재 2020년대까지 현재진행형으로 발전하고 있습니다. 역사적으로 어떤 방법론이 유행을 했는지 그 배경이 무엇인지를 알아보기에는 학문적으로 깊이 파고들어야할 주제이기 때문에 해당 포스트 에서는 소프트웨어 개발 방법론의 종류를 알아보고 다음 포스트 부터는 현재 많은 기업들에서 채택하고 있는 개발모형인 폭포수와 애자일에 대해 다뤄보려고 합니다. 소프트웨어 개발방법론의 종류 개발 방법론의 종류는 ..

라이프사이클 메서드 리액트에는 총 9가지의 라이프사이클 메서드가 존재합니다. 또한 이는 크게 3가지, 마운트 / 업데이트 / 언마운트 카테고리로 나뉩니다 . 첫번째 마운트(Mount) 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 메서드는 다음과 같습니다. 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드(생성자 함수) getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 먼저 코드를 통해 마운트 과정에서 호출되는 메서드를 알..

웹 개발에서의 event는 웹 브라우저에서 DOM 요소들과 상호 작용하는것을 의미합니다. 다른 포스팅 에서 button클릭이라던가, 키보드 입력, 마우스 커서 이동 등등 많은 이벤트 요소들이 있습니다. 이번 포스트에서는 과연 리액트에서는 이러한 이벤트 핸들링을 어떻게 처리하는지에 대해 다뤄보겠습니다. 리액트에서의 이벤트 핸들링 일반적으로 웹개발을 해보신 분이라면 HTML에 기본 이벤트 인터페이스들에 익숙할 것입니다 리액트에서는 해당 이벤트 핸들링 방법이 HTML과 동일하기 때문에 문법을 숙지하는 것은 어렵지 않으나 주의해야할 사항들이 몇가지 존재합니다. 이벤트 이름은 카멜 표기법으로 작성한다 ex) onclick ->onClick , onkeydown-> onKeyDown 이벤트에 실행할 자바스크립트 코..

state state 는 리액트 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 props는 이전 포스팅에서 자세히 다루어 봤는데, 이는 사용되는 과정에서 부모 컴포넌트에서 설정하는 값이 지정이 되며 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. 즉 props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 합니다. 하지만 state는 컴포넌트 내부에서 직접 값을 변경하는 것이 가능합니다. state의 종류로는 클래스형 컴포넌트의 state와 함수형 컴포넌트의 useState() 라는 함수가 있습니다 예제를 통해 이 두 가지에 대해 알아보겠습니다. 클래스형 컴포넌트의 state import React, { Component } from 'react'; import PropTypes from ..

모듈 생성 및 import/export 먼저 컴포넌트를 생성해 이를 내보내고(export), 불러오는(import) 작업을 수행해 보겠습니다. 저는 일단 기본 리액트 프로젝트 src 폴더에 > MyComponent라는 폴더를 생성했습니다 그리고 그 내부 동일 명칭의 js 파일을 생성해보았습니다. const style = { color : 'red', } const MyComponent = () => { return new component } export default MyComponent; 해당 JS 의 내용은 위와 같은데 위 내용에서는 가장 아래 줄 export default MyComponent를 유의깊게 확인해 보아야 합니다. 이 코든는 해당 파일을 다른 코드에서 import 할 때 MyCompo..

컴포넌트? 컴포넌트라는 용어는 독립적인 기능을 수행하는 단위 모듈을 의미합니다. 리액트를 사용하는 개발자들에게 있어 애플리케이션을 설계할 때 사용자가 볼 수 있는 여러가지 컴포넌트들을 제공하는데 , 이는 애플리케이션 개발에서 재사용성을 높이고 유지보수를 용이하게 하기 위한 기술입니다. 함수형/클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두가지로 나누어지 집니다. 하나는 함수형 컴포넌트, 하나는 클래스형 컴포넌트 입니다. 이전 포스팅에서 다루었던 내용중 코드 하나를 인용하자면 function App() { const v_react = "React"; return ( {v_react} Test ); } 바로 위와 같은 App 함수 같은 경우가 함수형 컴포넌트 입니다 두번째로는 클래스형 컴포넌트가 있는데 위 ..

JSX란 리액트 프로젝트 생성과 node/npm 설치 과정은 생략하겠습니다. JSX는 자바스크립트의 확장 문법이며 XML 과 굉장히 유사합니다. 먼저 JSX 코드 순서부터 확인해 보면 import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ import './App.css'; function App() { return ( React Test ); } export default App; 이렇게 생긴 JSX 형태를 띄고 있습니다. 이러한 코드는 실제로는 다음과 같이 변화 되어 사용 됩니다 function App(){ return React.createElement("div", null, ' React Test'); } 만약 새로 렌더링을 할 때마다 위 코드..

React JS의 인기 프론트앤드 개발자라면 아니, 모든 웹 개발 관련 종사자들은 최근 자바스크립트에 대한 열광과 React JS, Vue, Angular에 대한 뜨거운 관심에 대해 알고 있을 것입니다. 자바스크립트는 단순한 스크립트 언어에 불과했으나 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 수행하며, 이에대한 자세한 내용은 https://dkkim2318.tistory.com/64?category=915842 자바 스크립트 자바 스크립트? 자바스크립트를 한마디로 정의하자면 브라우저 내에서 동작하는 언어라고 할 수 있습니다. 웹 개발자들에게는 브라우저에서 동작하는 언어기 때문에 완벽하게는 아니여도 필 dkkim2318.tistory.com 해당 포스트를 통해 확인 할 수 있습니다. 이러한 자바스크..