본문 바로가기

Programming 개발은 구글로187

[Web] React의 LifeCycle API 알아보자 React LifeCycle 관련 API : 브라우저에서 보이고 사라지는 등 업데이트 및 호출되는 컴포넌트 API입니다. 1. 컴포넌트 생성 : 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들입니다. 1.1 constructor : 컴포넌트 생성자 API로 컴포넌트가 새로이 만들어질 때마다 호출됩니다. constructor(props) { super(props); } 1.2 componentWillMount : 컴포넌트가 화면에 디스플레이가 되기 전에 호출되는 API입니다. React v16.3부터 해당 API가 deprecated가 되었으며, v16.3 이후부터는 UNSAFE_componentWillMount()로 사용됩니다. 기존에 담당하던 부분은 1.3 componentDidMount에서.. 2022. 6. 28.
[Web] React state & setState 개념 이해 React state & setState 개념 이해 : 동적인 데이터 처리할 때 state를 사용한다. import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 } increase = () => { this.setState({ number: this.state.number + 1 }); } decrease = () => { this.setState({ number: this.state.number - 1 }); } render() { return ( 카운터 값: {this.state.number} + - ); } } export default Counter; 여기서 increase() 함수와.. 2022. 6. 27.
[Web] React props & defaultProps 개념이해 React props & defaultProps 1. props : props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값입니다. import React, { Component } from "react"; class MyJob extends Component { render() { return ( 제 직업은 {this.props.job} 개발자입니다. ); } } export default MyJob; 자신이 받아온 props 값은 this. 키워드를 통하여 조회할 수 있습니다. job = "Web"으로 props 값을 설정하였습니다. import { Component } from 'react'; import MyJob from './MyJob'; // import MyJob class App ext.. 2022. 6. 27.
[Web] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 에러 발생 npm 에러 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 1. npm이 설치되어 있지 않은 경우 "npm download"를 검색하거나 아래 사이트에 접속하셔서 LTS 버전으로 설치하시면 됩니다. https://nodejs.org/ko/download/ 관련 글: Node 개요와 설치방법 2022.06.26 - [Programming 개발은 구글로/Web[프론트엔드&백엔드]] - [Web] Node.js 개요와 설치방법 2. VSCode 터미널 설정이 잘못된 경우 VScode의 기본 터미널 설정이 "Powershell"로 되어 있다면 .. 2022. 6. 26.
[Web] Node.js 개요와 설치방법 Node.js 1. 개요 : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js 는 Ruby의 Event Machine이나 Python의 Twisted 같은 시스템과 설계상 유사하고 영향을 받았습니다. Node.js 는 좀 더 발전된 이벤트 모델을 선택해서 라이브러리가 아닌 런타임 생성자로 이벤트 루프를 제공합니다. 비동기 이벤트 주도 JavaScript 런타임으로써 Node.js 는 확장성 있는 네트워크 애플리케이션을 만들 수 있는 소프트웨어 플랫폼입니다. const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer.. 2022. 6. 26.
[Web] React 컴포넌트 JSX React 컴포넌트 JSX 1. 컴포넌트 만들기 기존에 만들어두었던 react-study 프로젝트를 열어보면, 아래처럼 프로젝트가 구성됩니다. React를 사용하면 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성, 프로젝트의 유지보수성을 올려줍니다. App.js 파일에서 컴포넌트 코드를 확인할 수 있습니다. import React, { Component } from 'react'; // React와 내부의 Component import import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } e.. 2022. 6. 25.
[안드로이드] View Binding View Binding 현재 진행중인 App 개발에서는 ButterKnife.bind로 처리를 하고 있으나 ButterKnife 개발자가 공식적으로 deprecated를 선언하고 구글에서 권고하는 View Binding을 사용하기 위해 정리하였습니다. 1. build.gradle 수정 android { ... buildFeatures { viewBinding = true } } build.gradle에서 뷰 바인딩을 설정하면 안드로이드 스튜디오에서 자동으로 xml 파일과 연동되는 바인딩 클래스가 생성이 됩니다. ※ 뷰 바인딩 클래스 이름은 연동되어 있는 해당 Activity의 이름을 반전시킨 이름으로 생성이 됩니다. ex) MainActivity 클래스 → ActivityMainBinding ​2. 뷰 .. 2022. 6. 25.
[Web] 함수 표현식과 IIFE(즉시 실행 함수 표현식) 개념 함수 표현식과 IIFE(즉시 실행 함수 표현) 개념 정리 1. 함수 표현식(Function Expression) : 함수 문법으로 생성한 함수 객체를 변수에 할당하는 방식 let date = function selectYear(x) { const year = new Date().getFullYear(); return '당신이 선택한 년도는 ${year + x}입니다.' } console.log(date(1)); // 당신이 선택한 년도는 2023년 입니다. console.log(selectYear(4)); // error - Date is not defined 함수 리터널의 함수 이름(selectYear)은 아래처럼 생략이 가능하다. 이러한 함수를 익명 함수라고 한다. let date = function.. 2022. 6. 24.
[Web] 프론트엔드 React 개념 프론트엔드 React 라이브러리 🟦 React 개념 웹사이트를 만들기 위해서는 사실 프론트엔드 라이브러리의 도움 없이도 만들어낼 수 있습니다. 단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들면 됩니다. 거기에 자바스크립트를 더해주면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수 있습니다. 하지만, 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션입니다. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있죠. sample.html Counter 0 + 위의 Html 코드에서 버튼을 눌러서 숫자 값("0")을 변경하려면 각 DOM(Document Object Model(문서 객체 모델) sample.html) 앨리먼트에 대한 레.. 2022. 6. 23.
[Web] 프론트엔드, 벡엔드 차이점 및 전망 웹 개발 네이버와 같은 웹 사이트를 개발하는 직업을 웹 프로그래머 혹은 웹 개발자고 합니다. 담당하는 작업 영역에 따라서 직업의 명칭이 달라집니다. 우선 웹 개발자에 대한 직무는 프론트엔드와 백엔드, 퍼블리셔로 나눠집니다. 여기선 프론트엔드와 백엔드를 중점으로 다루도록 하겠습니다. 1. 프론트엔드 : 네이버를 사용할 때 시각적으로 보이는 모든 화면들인 사용자 인터페이스를 개발합니다. 프론트엔드 개발자는 시각적으로 보이는 영역뿐만 아니라 웹 사이트에서 로그인을 하거나 포스팅을 발행 등 특정 기능을 실행하였을 때 필요한 API를 불러오고 데이터를 입력하는 영역에 대해서 개발을 진행합니다. ※ 필요한 지식: HTML, CSS, JS(JavaScript), React, Vue, Angular 등 2. 백엔드 :.. 2022. 6. 23.
[안드로이드] Glide 캐시 Glide 캐시 Glide는 이미지에 대한 새 요청을 시작하기 전 여러 캐시 계층을 확인합니다. 1. 활성 리소스(Active Resource) - 사용하려는 이미지가 현재 다른 View에서 사용중인지 확인 2. 메모리 캐시(Memory Cache) - 메모리 캐시가 최근에 로드가 되었고, 아직 메모리에 남아있는지 확인 3. 리소스(Resource) - 사용하려는 이미지가 이전에 디코딩, 변환 및 디스크 캐시에 기록된 적이 있는지 확인 4. 데이터(Data) - 사용하려는 이미지를 가져온 데이터가 이전에 디스크 캐시에 기록이 되어있는지 확인 처음 2 단계(활성 리소스, 메모리 캐시)에서는 리소스가 메모리 내에 있는지 확인하고 있는 경우 이미지를 즉시 반환합니다. 두 번째 2 단계(리소스, 데이터)에서는 .. 2022. 6. 22.
[Git] 형상관리 개념과 용어 형상관리(Configuration Management) : 소프트웨어에서 형상 관리는 개발 중 발생하는 모든 산출물들이 변경됨으로써 점차 변해가는 소프트웨어 형상을 체계적으로 관리하고 유지하는 기법입니다. 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것으로, 형상 관리는 일반적인 단순 버전 관리 기반의 소프트웨어 운용을 좀 더 포괄적인 학술 분야의 형태로 넓히는 근간을 이야기한다. 출처: 위키피디아 소프트웨어 개발 생명주기 전반에 걸쳐 생성되는 모든 산출물의 종합 및 변경 과정을 체계적으로 관리하고 유지하는 일련의 개발 관리 활동으로, 소프트웨어 가시성과 추적 가능성을 부여하여 제품의 품질과 안전성을 높입니다. 형상관리 툴에는 유료와 오픈소스가 있습니다. 상용(유료) 1) IBM Rational .. 2022. 6. 22.
728x90

티스토리툴바