전체 글71 CSS 이미지 스프라이트 (Image Sprite) 1. 개념 이미지 스프라이트(Image Sprite)란? background-image로 사용될 여러 개의 이미지들을 한 개의 이미지로 묶은 후, 각 이미지가 필요한 곳에서는 해당 이미지만을 보여주도록 background-position을 조정해주는 기법입니다. 왜 사용해야 하는가? 페이지 접속 시 서버에게 전송하는 요청(Request)의 개수를 최소화하기 위함입니다. 이미지 스프라이트 비교표 스프라이트는 수직 정렬(Vertical) 타입과 바둑판(Tile) 타입 중 필요한 것을 선택하여 사용합니다. 수직 정렬 타입의 스프라이트는 이미지 개수가 늘어남에 따라 공간 또한 늘어나서 용량 이슈가 발생하므로, 모바일 환경에서는 바둑판 타입의 스프라이트를 사용하도록 합니다. (위 비교표 참조) 각 스프라이트 집합.. Jira 쓰는 개발자의 Git 사용방법 Git 사용 원칙 Git은 개발 시 효율적인 협업을 가능하게 만드는 핵심적인 도구입니다. 또한 테스트 환경을 손쉽게 구축할 수 있고 테스트 및 배포를 자동화하고 관리하는 것도 매우 편리하게 할 수 있습니다. 여기서는 Git이 어떤 방식으로 사용하는지 설명합니다. Git의 기본 개념 및 동작 원리는 여기서 설명하지 않습니다. 혹시 Git의 동작 원리가 궁금하신 분은 여기를 참조 바랍니다. 브랜치 종류 master : 실서버 브랜치입니다. stage : 테스트 서버 브랜치입니다. (이슈 발생 시 develop 브랜치로부터 재생성 가능합니다.) develop : 개발 진행을 위해 feature 또는 hotfix 브랜치를 생성할 때의 source 브랜치입니다. feature : 정식(원래 하기로 예정되어 있던).. React 주요 개념 Lifecycle of Component react에서는 생성, 업데이트, 제거될 때 자동으로 트리거 되는 lifecycle API를 가지고 있습니다. 컴포넌트 생성 시 자주 사용하던 render메소도 역시 react 컴포넌트의 lifecycle 메소드중 하나입니다. 컴포넌트가 생성될때 실행되는 메소드 render() 클래스 React.Component의 하위 class에서 반드시 정의해야 하는 메서드, 이 메서드가 호출되면 this.props, this.state의 값을 이용해 아래 목록 중 1가지를 반환해야 합니다. - React 엘리먼트, 일반적으로 JSX를 사용해서 생성됩니다. - Portal, 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 합니다. - Boolean 또는 nulll, 아무것도 렌더링 하지 않습니다. - 배열과 Fra.. React 주요 개념 State State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 제어됩니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } } ReactDOM.render( , document.getElementById('root') ); 위 코드를 props에서 state로 변경해 보겠습니다. class Clock extends React.Component { constructor(props) { // 초기 this.state를 지정하게 해주는 클래스 super(props); this.state = {date: new Date()}; } rende.. React 주요 개념 Components and props 컴포넌트는 하나의 조각이라고 생각하시면 됩니다. 그리고 각각의 컴포넌트는 개별적으로 컨트롤이 가능합니다. 개념적으로 컴포넌트는 javascript 함수와 유사하고 "props"라는 임의의 값을 입력받은 후 화면에 react 엘리먼트를 반환합니다. 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있습니다. 이 페이지에서는 두 가지 모두 다뤄보겠습니다. function Welcome(props) { // 함수 컴포넌트 return hello, {props,name}; } class Welcome extends React.Component { // 클래스 컴포넌트 render() { return Hello, {this.props.name}; } } react의 관점에서 볼 때 두가지 유형의 컴포넌트는 동일하지만 .. React 주요 개념 엘리먼트 렌더링 엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다.. // 시작 태그 // 종료 태그 // 빈 태그 a tag // 엘리먼트 // 엘리먼트 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) , 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. DOM에 엘리먼트 렌더링 보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다.. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. .. React 주요 개념 JSX JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다. JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요. JSX // JSX Style 홈 마이페이지 로그아웃 React.createElement() // React.createElement() Style React.createElement( "header", {id: "intro"}, React.createElement( "ul", {className: "nav"}, React.createElement( "li", "홈" ), React.createElement( "li", .. JavaScript 타입별 정리 Undefined 전역 undefined 속성은 undefined 원시타입을 나타내며 전역 스코프 변수입니다. 값을 할당하지 않은 변수는 undefiend 자료형이되며 메서드와 변수 선언도 변수값이 지정되어 있지 않은 경우 호출시 undefiend를 반환합니다. 함수는 값을 명시적으로 반환하지 않으면 undefined를 반환합니다. var x; if (x === undefined) { // true } var x; if (typeof x === 'undefined') { // true } // y를 선언한 적 없음 if (typeof y === 'undefined') { // 오류 없이 true로 평가 } if(y === undefined) { // ReferenceError } Javascript 변수(Variables) Javascript에서 새로운 변수를 선언할 때 var, let, const 키워드가 사용 가능합니다. 변수는 애플리케이션에서 한번 쓰고 버리는 값이 아닌 일정 기간 유지할 필요가 있는 값에 사용하며 변수를 사용하면 값의 의미가 명확해져 코드 가독성 증가에 도움이 됩니다. 변수명을 지정할때 변수의 존재 목적에 알맞은 변수명을 지정해야 이후 유지보수 시 도움이 됩니다. var abc = '2025-01-22'; // bad case var today = '2025-01-22'; // good case 변수명은 식별자(identifier)로 불리기도 하며 명명 규칙이 존재한다. 반드시 영문자(특수문자 제외), underscore ( _ ), 또는 달러 기호($)로 시작하여야 한다. 이어지는 문자에는 숫자(0.. 이전 1 ··· 4 5 6 7 8 다음
