반응형

Development 39

[Web] Meta tag

Meta tag는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미한다. 웹페이지의 컨텐츠에는 아무 영향을 주지 않으며, 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때, 메타 태그의 내용들은 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 되며, 검색엔진 최적화 (SEO) 등을 통하여 검색에 노출되도록 해준다. 활용예시 인코딩 지정 호환성보기 기능 활성화 화면에 보이는 영역으로 너비를 현재 기기의 width로 정하고 이에 맞춰 초기 화면 배율을 1로 지정 Open graph 링크를 입력했을 때 화면에 미리보기 형태로 보여준다.

Development/Web 2023.01.24

[React] React-Bootstrap

스타일이 적용된 부트스트랩 컴포넌트들을 리액트 컴포넌트처럼 사용할 수 있도록 도와주는 라이브러리이다. 설치 npm install react-bootstrap bootstrap 공식문서 React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 만일 Bootstrap Sass 파일을 수정해서 쓰고싶다면 CDN을 쓰는 것보다 vanilla Bootstrap을 설치해서 사용하는 것을 권고한다. 모든 Bootstrap을 include하기 // Custom.scss // Option A: Include all of Bootstrap // Include any default variable over..

Development/React 2023.01.19

[React] React Router

공식문서 Home v6.4.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 설치하기 터미널에 아래의 명령어를 입력해준다. npm install react-router-dom package.json 파일에 "dependencies" 중 "react-router-dom"이 추가되었는지 확인한다. 사용예시 import { BrowserRouter, Rou..

Development/React 2023.01.17

[React] Component

Component 기존의 웹 프레임워크는 MVC방식으로 정보, 화면, 구동코드를 분리하여 관리하는데 이러한 방법은 코드관리를 효율적으로 할 수 있으나 MVC각 요소의 의존성이 높아 재활용이 어렵다. 웹사이트 화면은 각 요소가 비슷하고 반복적으로 사용되는 경우가 많기 때문에, 컴포넌트를 사용하면 MVC의 뷰를 독립적으로 구성해 재사용도 할 수 있고, 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들수도 있다. 구성요소 Property: 상위컴포넌트에서 하위컴포넌트로 전달되는 읽기 전용 데이터 State: 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터 Context: 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 Property 자바스크립트의 자료형을 모두 사용할 수 있으며 수정할 수 없다는..

Development/React 2023.01.12

[React] React와 개발환경 구축

React React는 페이스북에서 개발한 프론트엔드 프레임워크 중 하나이다. Component라는 독립적인 코드블록을 조합해 빠르고 효율적으로 화면을 수정한다. 가상화면 기술(Virtual DOM)을 도입했기 때문에 코드의 복잡성이 줄고, 화면 출력 속도를 증가시켰다. Hot reloading이라는 모듈이 있어 리액트 앱을 구동한 상태에서 파일을 수정하고 저장하면 즉시 화면이 바뀐다. 개발환경 구축 React를 사용해서 웹 개발을 하기 위해서는 NVM, Node.js, yarn, create-react-app이 필요하다. 아래 Node.js 공식 사이트에서 LTS 버전을 설치할 수 있다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..

Development/React 2023.01.06

[Web] HTTP 상태코드

200: OK, 데이터를 요청하는 GET 요청이 정상적으로 이루어졌을 때 201: Created, 데이터를 생성하는 POST 요청이 정상적으로 이루어졌을 때 206: Partial content, 데이터를 일부 수정하는 PATCH 요청이 정상적으로 이루어졌을 때 400: Bad request: 클라이언트가 잘못된 요청을 보냈을 때 401: Unauthorized, 인증이 필요하나 인증관련 내용이 요청에 없을 때 403: Forbidden, 클라이언트가 접근하지 못하도록 막아놓은 곳에 요청이 왔을 때 404: Not found, 클라이언트가 요청을 보낸 곳이 잘못된 url일 때 500: Internal server error, 서버 쪽에서 코드가 잘못되었을 때

Development/Web 2022.12.14

[Android Studio] AVD 실행 오류

Android studio를 설치하고 Virtual device를 실행하려고 했는데 실행이 되지 않는 오류가 발생했다. 여기저기 검색을 하다 보니 각종 환경 설정을 해줘야 하고, 설치를 확인해야 할 것들이 있었다. 먼저 Android studio에서 setting에 들어가 System Settings의 Android SDK를 들어간다. SDK Tools에 다음과 같은 것들이 설치되어 있는지 확인 후 설치되어있지 않다면 설치해준다. Android SDK Build-Tools Android Emulator Android SDK Platform-Tools Intel x86 Emulator Accelerator (HAXM Installer) HAXM의 경우에는 설치가 안된다면 따로 설치를 해주어야 한다. Git..

Development/App 2022.12.11

소프트웨어 개발방법론

Waterfall 전통적인 개발모델로, 모든 단계를 완벽하게 준비한 후 개발을 진행해 모든 기능의 배포를 한번에 끝낸다. 프로젝트 기간동안 SDLC의 주기를 한 사이클만 돈다 개발 전에 완벽하게 계획을 세워야 하므로 중간에 요구사항의 변화가 생겼을 때 유동적인 대처가 어렵다는 단점이 있다. Agile 소프트웨어의 요구사항은 개발 도중에 자주 변경되는데, 변경된 요구사항에 따른 작업량을 예측하기가 힘들고, 계획과 형식에 지나치게 의존할 경우 전체적인 개발의 흐름이 느려진다는 문제가 있어 Agile 방법론이 대두되었다. 무계획으로 개발하는 것과, 계획에 지나치게 많은 투자를 하는 개발 방법 사이에서 타엽점을 찾고자 고안되었으며, 제한된 시간과 비용 안에서 정보는 불완전하고 예측 불가능하다는 것을 기본 전제로..

Development/Project 2022.11.30
반응형