'웹 개발'에 해당되는 글 45건

  1. 2021.06.02 React img 태그 src={require()}
  2. 2021.04.28 윈도우에서 chmod 등 리눅스 명령어가 필요할 때
  3. 2021.04.28 문자열 안에 html 태그가 있고 그걸 적용 시키기
  4. 2021.03.25 React 기초 연습
  5. 2021.03.21 객체 지향 설계의 다섯가지 원칙
  6. 2021.03.21 var let const
  7. 2021.03.20 타일 깔기
  8. 2021.03.19 Git 사용하기

React img 태그 src={require()}

웹 개발/Problems 2021. 6. 2. 20:08
<img
src={require(경로).default}
/>

require()함수 호출 후 .default 속성으로 불러 와야 이미지가 불러와진다.

구글링해서 검색해보면 사람들은 .default를 추가 안했던데 어떻게 한건진 모르겠다... 

:

윈도우에서 chmod 등 리눅스 명령어가 필요할 때

웹 개발/Problems 2021. 4. 28. 23:49

git bash를 사용하면 된다.

.ps git bash에서 paste기능은 키보드 insert키를 누르면 된다.

:

문자열 안에 html 태그가 있고 그걸 적용 시키기

웹 개발/Problems 2021. 4. 28. 22:43
let str = "안녕하세요 <br> 반갑습니다"

return (<div dangerouslySetInnerHTML={{ __html: str }}></div>)

리액트에서 지원하는 dangerouslySetInnerHTML props를 사용하되, {__html: 문자열} 이라는 객체 형태로 넣어 주면 된다.

:

React 기초 연습

웹 개발/Study 2021. 3. 25. 17:02

App.js:

import './App.css';
import ReactDOM from 'react-dom';
let tweet = <div>{Tweet({ writer: '이호준' })}</div>;
let tweet2 = (
	<div>
		{(function () {
			return '리액트';
		})()}
	</div>
);
let nowLearning = false;

let tweet3 = (
	<Tweet writer="김코딩">
		{(function () {
			if (nowLearning) {
				return '리액트';
			} else {
				return '배틀그라운드';
			}
		})() + '는 늘 짜릿하네요'}
	</Tweet>
);
function Tweet4(){
	let langs = ["javascript", 'HTML', 'Python']
	// eslint-disable-next-line
	return (
		<div>
			{langs.map(it=><div>{it}</div>)}
		</div>
	)
}
function Tweet({ writer, children }) {
	return (
		<div>
			{writer}
			{children}
		</div>
	);
}
function clock() {
	ReactDOM.render(
		<div>{new Date().toLocaleTimeString()}</div>,
		document.getElementById('clock'),
	);
}
setInterval(clock, 1000);
function App() {
	return (
		<div className="App">
			<header className="App-header" id="App-header">
				<h1>Hello World!</h1>
				<h2>Start editing to see some magic happen!</h2>
				{tweet}
				{tweet2}
				{tweet3}
				<Tweet4 />
				<div id="clock">{new Date().toLocaleTimeString()}</div>
			</header>
		</div>
	);
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

'웹 개발 > Study' 카테고리의 다른 글

let, var, const 차이점  (0) 2022.03.01
웹팩 dependencies 설정  (0) 2021.08.20
객체 지향 설계의 다섯가지 원칙  (0) 2021.03.21
var let const  (0) 2021.03.21
Git 사용하기  (0) 2021.03.19
:

객체 지향 설계의 다섯가지 원칙

웹 개발/Study 2021. 3. 21. 17:08

컴퓨터 프로그래밍에서 SOLID란 로버트 마틴이 2000년대 초반에 명명한 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것이다. 프로그래머가 시간이 지나도 유지보수와 확장이 쉬운 시스템을 만드록자 할 때 이 원칙들을 함께 적용 할 수 있다. SOLID원칙들은 소프트웨어 작업에서 프로그래머가 소스코드가 읽기 쉽고 확장하기 쉽게 될 때까지 소프트웨어 소스코드를 리팩터링하여 코드냄새를 제거하기 위해 적용할 수 있는 지침이다. 이 원칙들은 애자일 소프트웨어 개발과 적응적 소프트웨어 개발의 전반적 전략의 일부다. 

두문자약어개념SOLID

두문자 약어 개념
S SRP 단일 책임 원칙 (Single responsibility principle) 클래스는 하나의 책임만 가져야 한다.
O OCP 개방-폐쇄 원칙 (Open/closed principle)“소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.”
L LSP 리스코프 치환 원칙 (Liskov substitution principle)“프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.” 계약에 의한 설계를 참고하라.
I ISP 인터페이스 분리 원칙 (Interface segregation principle)“특정 클라이언트를 위한 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.”[4]
D DIP 의존관계 역전 원칙 (Dependency inversion principle)프로그래머는 “추상화에 의존해야지, 구체화에 의존하면 안된다.”[4] 의존성 주입은 이 원칙을 따르는 방법 중 하나다.

 

'웹 개발 > Study' 카테고리의 다른 글

웹팩 dependencies 설정  (0) 2021.08.20
React 기초 연습  (0) 2021.03.25
var let const  (0) 2021.03.21
Git 사용하기  (0) 2021.03.19
Node 명령어  (0) 2021.03.19
:

var let const

웹 개발/Study 2021. 3. 21. 17:03

var, let, const의 차이점

1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.

2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.

3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.

4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.

5. var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

함수레벨 스코프란?

// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

 

'웹 개발 > Study' 카테고리의 다른 글

React 기초 연습  (0) 2021.03.25
객체 지향 설계의 다섯가지 원칙  (0) 2021.03.21
Git 사용하기  (0) 2021.03.19
Node 명령어  (0) 2021.03.19
HTTP 상태 코드/ 요청 메서드  (0) 2021.03.19
:

타일 깔기

웹 개발/Algorithm 2021. 3. 20. 16:38
더보기

문제

세로 길이 2, 가로 길이 n인 2 x n 보드가 있습니다. 2 x 1 크기의 타일을 가지고 이 보드를 채우는 모든 경우의 수를 리턴해야 합니다.

입력

인자 1 : n

  • number 타입의 1 이상의 자연수

출력

  • number 타입을 리턴해야 합니다.

주의사항

  • 타일을 가로, 세로 어느 방향으로 놓아도 상관없습니다. (입출력 예시 참고)

입출력 예시

let output = tiling(2);
console.log(output); // --> 2

output = tiling(4);
console.log(output); // --> 5
/* 
2 x 4 보드에 타일을 놓는 방법은 5가지
각 타일을 a, b, c, d로 구분

2 | a b c d
1 | a b c d 
------------

2 | a a c c
1 | b b d d 
------------

2 | a b c c
1 | a b d d 
------------

2 | a a c d
1 | b b c d 
------------

2 | a b b d
1 | a c c d 
------------
*/

Advanced

  • 타일링 문제를 해결하는 효율적인 알고리즘(O(N))이 존재합니다. 반드시 직접 문제를 해결하시면서 입력의 크기에 따라 어떻게 달라지는지 혹은 어떻게 반복되는지 관찰하시기 바랍니다.

 

답안1(시간복잡도 계산 x, 무식하게 하나씩 둬보기!):

더보기
let tiling = function (n) {
	// TODO: 여기에 코드를 작성합니다.
	let count = 0;
	let ground = [];
	for (let i = 0; i < 2; i++) {
		//세로길이 2
		ground.push(new Array(n).fill(0));
	}
	//[0, 0, 0, 0, 0]
	//[0, 0, 0, 0, 0]
	//{1: [[0,0],[1,0]]} 1번 타일
	//{2: [[0,1],[1,1]]} or {2: [[0,1],[0,2]]} 2번 타일
	let find0 = function (changedField) {
		for (let i = 0; i < changedField.length; i++) {
			for (let j = 0; j < changedField[i].length; j++) {
				if (changedField[i][j] === 0) {
					return [i, j];
				}
			}
			//다 채워지면
		}
		return null;
	};
	//startIndex = find0(field)
	let putTile = function (field) {
		//가로로 넣어보기 --> x축에 +1
		if (find0(field) === null) {//필드가 다 채워지면			
			count++;
		} else {
			let [y, x] = find0(field);
			//세로로 넣어보기
			if (field[y + 1] !== undefined) {
				if (field[y + 1][x] === 0) {
					//세로로 놓아지는지 확인
					//let copyfield = field.slice();
					let copyfield = [];
					for (let row of field) {//2차원 배열을 복사할땐 이렇게 해야한다!!
						copyfield.push(row.slice());
					}
					copyfield[y][x] = 1;
					copyfield[y + 1][x] = 1;					
					putTile(copyfield);				
				}
			}
			if (field[y][x + 1] === 0) {
				//가로로 놓아지는지 확인
				let copyfield = [];
				for (let row of field) {
					copyfield.push(row.slice());
				}
				copyfield[y][x] = 1;
				copyfield[y][x + 1] = 1;
				putTile(copyfield); // 다음 타일 놓기
			}

			//넣고 재귀 돌리기
			//다 채워지면 count++
		}
	};
	putTile(ground);
	return count;
};

 

답안2(시간복잡도 계산. O(n)):

더보기
// naive solution: O(2^N)
// 2 x 4 보드에 타일을 놓는 방법은 5가지다.
// 각 타일을 a, b, c, d로 구분한다.
// 아직 타일이 놓이지 않는 부분은 -로 표기한다.
// 타일을 놓는 방법은 가장 왼쪽부터 세로로 놓거나 가로로 놓는 것으로 시작한다.
// 1) 세로로 놓는 법
//   2 | a - - -
//   1 | a - - -
//   ------------
// 2) 가로로 놓는 법
// 타일을 가로로 놓게 되면, 그 바로 아래에는 가로로 놓을 수 밖에 없다.
//   2 | a a - -
//   1 | b b - -
//   ------------
// 이때, 타일이 아직 놓이지 않은 부분은 사실 크기만 다를뿐 같은 종류의 문제라는 것을 알 수 있다.
// 즉, 2 x 4 보드에 타일을 놓는 방법은 아래 두 가지 방법을 더한 결과와 같다.
//  1) 2 x 3 보드에 타일을 놓는 방법
//  2) 2 x 2 보드에 타일을 놓는 방법
// 따라서 2 x n 타일 문제는 아래와 같이 재귀적으로 정의할 수 있다.
// 주의: 재귀적 정의에는 항상 기초(base), 즉 더 이상 재귀적으로 정의할 수 없는(쪼갤 수 없는) 문제를 별도로 정의해야 한다.
// let tiling = function (n) {
//   if (n <= 2) return n;
//   return tiling(n - 1) + tiling(n - 2);
// };

// dynamic with memoization: O(N)
let tiling = function (n) {
  // 인덱스를 직관적으로 관리하기 위해
  // 앞 부분을 의미없는 데이터(dummy)로 채운다.
  const memo = [0, 1, 2];

  // 재귀를 위한 보조 함수(auxiliary function)을 선언)
  const aux = (size) => {
    // 이미 해결한 문제는 풀지 않는다.
    if (memo[size] !== undefined) return memo[size];
    if (size <= 2) return memo[n];
    memo[size] = aux(size - 1) + aux(size - 2);
    return memo[size];
  };
  return aux(n);
};

// dynamic with tabulation: O(N)
// tabulation은 데이터를 테이블에 정리하면서 bottom-up 방식으로 해결하는 기법을 말합니다.
// let tiling = function (n) {
//   const memo = [0, 1, 2];
//   if (n <= 2) return memo[n];
//   for (let size = 3; size <= n; size++) {
//     memo[size] = memo[size - 1] + memo[size - 2];
//   }
//   return memo[n];
// };

// dynamic with slicing window: O(N)
// slicing window은 필요한 최소한의 데이터만을 활용하는 것을 말합니다.
// 크기 n의 문제에 대한 해결을 위해 필요한 데이터는 오직 2개뿐이라는 사실을 이용합니다.
// let tiling = function (n) {
//   let fst = 1,
//     snd = 2;
//   if (n <= 2) return n;
//   for (let size = 3; size <= n; size++) {
//     // 앞의 두 수를 더해 다음 수를 구할 수 있다.
//     const next = fst + snd;
//     // 다음 문제로 넘어가기 위해 필요한 2개의 데이터의 순서를 정리한다.
//     fst = snd;
//     snd = next;
//   }
//   return snd;
// };

'웹 개발 > Algorithm' 카테고리의 다른 글

효율적인 피보나치  (0) 2021.03.15
집밥이 그리워  (0) 2021.03.11
빼빼로 데이(최대공약수)  (0) 2021.03.11
발표 순서  (0) 2021.03.11
금고를 털어라  (0) 2021.03.11
:

Git 사용하기

웹 개발/Study 2021. 3. 19. 18:45

git remote add pair <Repo URL for pairs fork>

git remote -v

페어의 레버지토리 연결

 

git add<change file>

git commit -m “memo”

git push origin master ( or other branch name)

push는 자신의 레포지토리에다가 해야함

 

git pull pair master ( or other branch name)

pull은 항상 페어의 레포지토리에서 해야함

페어의 레포지토리에서 변경사항 가져오기

 

git add <change file>

git commit -m “change”

 

git pull pair master

 

 

git config credential.helper store

인증을 캐시에 저장하여 일정시간동안 입력하지 않는다.

 

git config –global credential.hgelper ‘cache –timeout 7200’

timeout뒤의 숫자는 초(second)이다. 여기서는 7200만큼(2시간)의 만료시간을 추가했다.

1day – 86400

7days – 604800

30days – 2592000

 

git checkout

branch 이동

 

git checkout -b 기능1

현재 작업공간을 베이스로 브랜치 생성

기능1 branch 생성 + 기능1 branch로 작업공간 이동

 

git branch

branch확인, q로 나가기

 

'웹 개발 > Study' 카테고리의 다른 글

객체 지향 설계의 다섯가지 원칙  (0) 2021.03.21
var let const  (0) 2021.03.21
Node 명령어  (0) 2021.03.19
HTTP 상태 코드/ 요청 메서드  (0) 2021.03.19
Promise 정리  (0) 2021.03.19
: