문제 푼 방식

1. 매개변수로 받아온 수를 먼저 3진법으로 변환

2. 뒤집는다는 부분에서 배열의 reverse() 메소드를 사용해야겠다고 생각, 문자열을 배열로 만들기 위한 split() 메소드 사용

3. 배열원소 순서를 뒤집기 위한 reverse() 메소드 사용

4. join() 메소드를 사용하여 배열객체를 문자열형태로 변환

5. 최종적으로 Number 타입으로 리턴해야 하기 때문에, String 타입을 Number타입으로 변환시키기 위하여 parseInt()메서드 사용.

사용한 메서드

1. toString() : 3진법으로 변환시 사용

2. split() : 문자열을 배열로 만들기 위해서 사용

3. reverse() : 배열원소 순서를 바꾸기 위하여 사용

4. join() : 배열을 문자열로 변환하기 위해 사용

5. parseInt() : String타입을 Number 타입으로 변환하기 위해 사용

언어는 연산자 평가 순서를 명세한다

• 연산자 우선순위 p. 344 ~ 345

• 결합규칙 ( 좌결합이냐, 우결합이냐 )

• 괄호

피연산자 평가 순서

• 피연산자 유형

1. 변수
2. 상수
3. 괄호에 포함된 식
4. 함수 호출

• 연산자의 모든 피연산자가 부작용을 갖지 않으면, 피연산자의 평가 순서는 무관하다.

함수의 부작용

: 함수가 양방향 매개변수나 전역변수 변경시 발생 p.350

함수의 부작용 문제

• 피연산자 평가 순서에 영향을 미침

해결책

참조 투명성

• 프로그램에서 동일한 값을 갖는 임의 2개 식이 프로그램의 행동에 영향을 미치지 않으면서 프 로그램의 임의 위치에서 서로 대체 가능하면, 프로그램은 참조 투명성의 특징을 갖는다고 말한다.

타입 변환

• 축소 변환 : 원래 타입에 속한 모든 값들의 근사치마저도 저장할 수 없는 타입으로 변환

• 확장 변환 : 적어도 원래 타입의 모든 값들의 근사치를 포함할 수 있는 타입으로 변환

• 혼합형 식 : 한 연산자가 다른 타입을 갖는 피연산자들을 갖는 식이며, 이를 허용하는 언어는 묵시적 피연산자 타입 변환을 허용 (확장 변환으로) => 묵시적 타입 변환은 컴파일러에 의해서 수행되는 타입 강제변환

단축회로 평가 : 식에 포함된 모든 연산자나 피연산자가 평가되지 않고서 식의 값이 결정 p364

여러 규칙들을 쉽게 커스터마이징 할 수도 있습니다.

왜 사용하는지? 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있습니다.

{
  "singleQuote": true,     // 따옴표 고정
  "semi": true,            // 코드 끝에 ; 설정
  "useTabs": false,        // Tap 사용여부
  "tabWidth": 2,           // Tap 크기
  "trailingComma": "all",  // 객체 끝 부분에도 Comma 추가
  "printWidth": 100        // 줄 당 max length
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs", // node.js를 평범하게 사용하고 다양한걸 import하거나 export 할 수 있게 만드는거
    "target": "ES2015", // 어떤 버전의 JavaScript로 컴파일 되고 싶은지 적는거
    "sourceMap": true // 소스맵 처리를 하고 싶은지
  },
  "include": ["index.ts"], // 어떤 파일들이 컴파일 과정에 포함되는지 알려주는것
  "exclude": ["node_modules"] // 제외
}

명령어 tsc - ts파일에 있는 이 코드를 컴파일 해서 index.js랑 index.js.map을 만들어 줌

tsc명령어를 사용하는 대신 yarn start를 사용하기 위해

pakage.json에 추가

"scripts": {
    "start": "node index.js",
    "prestart": "tsc"
  },

Node.js는 TypeScript를 이해하지 못하기 때문에 일반적인 JavaScript 코드로 컴파일하는 작업이 필요하다.

조건 ? true일때 : false일때

함수의 기본 파라미터

ES6 에선 다음과 같이 할 수 있게 되었습니다.

function calculateCircleArea(r = 1) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

훨씬 깔끔하죠?

함수의 기본 파라미터 문법은 화살표 함수에서도 사용 할 수 있습니다.

const calculateCircleArea = (r = 1) => Math.PI * r * r;

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

05. 조건문 더 스마트하게 쓰기

이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다.

특정 값이 여러 값중 하나인지 확인해야 할 때

만약, 여러분이 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다고 해봅시다.

그러면, 이러한 시도를 할 수도 있을 것입니다.

function isAnimal(text) {
  return (
    text === '고양이' || text === '개' || text === '거북이' || text === '너구리'
  );
}

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

비교해야 할 값이 많아질 수록 코드는 길어집니다.

이러한 코드를 간단하게 해결 할 수 있는방법은, 배열을 만들고 배열의 includes 함수를 사용하는 것 입니다.

function isAnimal(name) {
  const animals = ['고양이', '개', '거북이', '너구리'];
  return animals.includes(name);
}

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

어떤가요? 훨씬 깔끔하죠?

원한다면, animals 배열을 선언하는 것도 생략하고, 화살표 함수로 작성할 수도 있습니다.

const isAnimal = name => ['고양이', '개', '거북이', '너구리'].includes(name);

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

물론, 코드가 짧다고 해서 무조건 좋은것은 아닙니다. 단, 코드가 짧으면서도 읽었을 때 어떤 역할을 하는지 잘 이해가 될 수 있어야 비로소 좋은 코드 입니다.

값에 따라 다른 결과물을 반환 해야 할 때

이번에는 주어진 값에 따라 다른 결과물을 반환해야 할 때 사용 할 수 있는 유용한 팁을 알아보겠습니다.

예를 들어서, 동물 이름을 받아오면, 동물의 소리를 반환하는 함수를 만들고 싶다고 가정해보겠습니다.

function getSound(animal) {
  if (animal === '개') return '멍멍!';
  if (animal === '고양이') return '야옹~';
  if (animal === '참새') return '짹짹';
  if (animal === '비둘기') return '구구 구 구';
  return '...?';
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

if 문의 코드 블록이 한줄짜리라면 { } 를 생략 할 수도 있습니다.

만약 여기서 우리가 배운 switch case 문을 사용하여 다음과 같이 구현 할 수도 있습니다.

function getSound(animal) {
  switch (animal) {
    case '개':
      return '멍멍!';
    case '고양이':
      return '야옹~';
    case '참새':
      return '짹짹';
    case '비둘기':
      return '구구 구 구';
    default:
      return '...?';
  }
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

참고로 switch 문에서 return 을 할 때에는 break 를 생략해도 됩니다.

우리가 방금 구현한 코드는 큰 문제는 없지만, 이걸 깔끔하게 해결 할 방법을 알고 나면 좀 맘에 들지 않는 코드의 형태입니다.

이 코드를 더욱 깔끔하게 작성하는 방법을 알려드리겠습니다.

function getSound(animal) {
  const sounds = {
    개: '멍멍!',
    고양이: '야옹~',
    참새: '짹짹',
    비둘기: '구구 구 구'
  };
  return sounds[animal] || '...?';
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

훨씬 더 간략하고 가독성도 좋지요? 이렇게 특정 값에 따라 반환해야 하는 값이 다른 조건이 여러가지 있을 때는 객체를 활용하면 좋습니다.

06. 비구조화 할당 (구조분해) 문법

이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다.

이전에 배웠던것을 복습해보자면, 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수있었죠?

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

그리고, 함수의 파라미터에서도 비구조화 할당을 할 수 있는것도 배웠습니다.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

그런데 여기서 만약 b 값이 주어지지 않았다고 가정해봅시다.

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

두번째 출력에서 undefined가 나타날 것입니다.

비구조화 할당시 기본값 설정

이러한 상황에 b 값에 기본 값을 주고 싶다면 이렇게 해줄 수 있습니다.

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

이는 꼭 함수의 파라미터에서만 할 수 있는 것은 아닙니다.

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

비구조화 할당시 이름 바꾸기

이번에는, 비구조화 할당을 하는 과정에서 선언 할 값의 이름을 바꾸는 방법을 알아보겠습니다.

예를 들어서 다음과 같은 코드가 있다고 가정해봅시다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

위 코드에서는 animal.name 값을 nickname 값에 담고 있는데요, 이름이 같다면 그냥 우리가 이전에 배웠던 대로 비구조화 할당을 쓰면 되는데 지금은 이름이 서로 다릅니다.

이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있습니다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);

위 코드는 'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미입니다.

배열 비구조화 할당

비구조화 할당은 객체에만 할 수 있는 것이 아닙니다. 배열에서 할 수 있어요.

예시 코드를 봅시다.

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용합니다.

객체 비구조화 할당과 마찬가지로, 기본값 지정이 가능합니다.

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법을 알아봅시다.

예를들어서 다음과 같은 객체가 있다고 가정해봅시다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

여기서, name, languages, value 값들을 밖으로 꺼내주고 싶다면 어떻게 해야 할까요? 이럴땐 두가지 해결 방법이 있는데요, 첫번째는 비구조화 할당 문법을 두번 사용하는 것입니다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

그런데 잠깐! 지금 extracted 객체를 선언 할 때 이런식으로 했는데요

const extracted = {
  name,
  languages,
  value
}

이 코드는 다음 코드와 똑같습니다.

const extracted = {
  name: name,
  languages: languages,
  value: value
}

만약에 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법입니다. 이 문법은 ES6 의 object-shorthand 문법이라고 부릅니다. (이름은 굳이 알아둘 필요는 없습니다..!)

다시 본론으로 돌아와서, 아까 deepObject 객체에서 names, languages, value 를 추출하는 과정에서 비구조화 할당을 두번 했었죠?

이번엔 두번째 방법, 한번에 모두 추출하는 방법을 알아보겠습니다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출 할 수 있답니다.

위 이미지에서 주황색으로 나타난 값들이 추출 된 것입니다. 반면, 빨간색으로 나타난 값들은 따로 추출되지 않으니 참고하세요.

이렇게 깊숙한 객체안에 있는 값을 추출하는 방법을 알아보았는데요, 사람들마다 성향이 다르겠지만, 저는 개인적으로 한번에 다 추출하는 것 보다는 여러번에 걸쳐서 추출하는 것이 더욱 코드가 깔끔하다고 생각합니다. 정해진 답은 없으니 여러분이 편한 방식을 택해서 하세요.

07. spread 와 rest

이번에는 ES6 에서 도입된 spread 와 rest 문법에 대해서 알아보겠습니다. 서로 완전히 다른 문법인데요, 은근히 좀 비슷합니다.

spread 일단 spread 문법부터 알아봅시다. spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다.

예를 들어서 다음과 같은 객체들이 있다고 가정해봅시다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  name: '슬라임',
  attribute: 'cute'
};

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

이 코드에서는 먼저 slime 이라는 객체를 선언했습니다. 그리고 cuteSlime 이라는 객체를 만들었는데요, 기존에 선언한 slime 을 건들이지 않고 새로운 객체를 만들어서 slime 이 가지고 있는 값을 그대로 사용하였습니다.

그 다음에는 purpleCuteSlime 이라는 객체를 만들었는데요, 이 객체는 cuteSlime 이 가지고 있는 속성을 그대로 사용하면서 추가적으로 color 가 추가되었습니다.

위 코드에서의 핵심은, 기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것 인데요, 이러한 상황에 사용 할 수 있는 유용한 문법이 spread 입니다.

아까 코드는 spread 문법을 사용하면 다음과 같이 작성 할 수 있습니다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);
여기서 사용한 ... 문자가 바로 spread 연산자입니다.

spread 연산자는 배열에서도 사용 할 수 있습니다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);

기존의 animals 는 건드리지 않으면서, 새로운 anotherAnimals 배열에 animals 가 가지고 있는 내용을 모두 집어넣고, '비둘기' 라는 항목을 추가적으로 넣었습니다.

배열에서 spread 연산자를 여러번 사용 할 수도 있습니다.

const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

rest

rest는 생김새는 spread 랑 비슷한데, 역할이 매우 다릅니다.

rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능합니다.

객체에서의 rest 우선 객체에서의 예시를 알아볼까요?

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...rest } = purpleCuteSlime;
console.log(color);
console.log(rest);

rest 안에 name 값을 제외한 값이 들어있습니다.

rest 는 객체와 배열에서 사용 할 때는 이렇게 비구조화 할당 문법과 함께 사용됩니다. 주로 사용 할때는 위와 같이 rest 라는 키워드를 사용하게 되는데요, 추출한 값의 이름이 꼭 rest 일 필요는 없습니다.

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);

이렇게 해도 무방합니다.

이어서, attribute 까지 없앤 새로운 객체를 만들고 싶다면 이렇게 해주면 되겠죠.

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);

const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);

배열에서의 rest

다음, 배열에서의 사용 예시를 알아봅시다.

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one);
console.log(rest);

배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣었습니다.

반면 이렇게 할 수는 없답니다.

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [..rest, last] = numbers;

함수 파라미터에서의 rest

rest 를 함수파라미터에서 사용 할 수도 있습니다. 예를 들어서 우리가 파라미터로 넣어준 모든 값들을 합해주는 함수를 만들어주고 싶다고 가정해봅시다.

function sum(a, b, c, d, e, f, g) {
  let sum = 0;
  if (a) sum += a;
  if (b) sum += b;
  if (c) sum += c;
  if (d) sum += d;
  if (e) sum += e;
  if (f) sum += f;
  if (g) sum += g;
  return sum;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);

위에서의 sum 함수는 7개의 파라미터를 받아오는데, 아래에서 사용 할때에는 6개만 넣어줬습니다. 그러면, g 값이 undefined 가 되기 때문에 sum 에 더하는 과정에서 += undefined 를 하게 되면 결과는 NaN 이 되버립니다. 그렇기 때문에 함수에서 하나하나 유효한 값인지 확인을 해줬지요.

함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용합니다. 코드를 다음과 같이 수정해보세요.

function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);

result 가 가르키고 있는 것은 함수에서 받아온 파라미터들로 이루어진 배열입니다. 우리가 이제 파라미터들이 들어가있는 배열을 받았으니, 그냥 모두 더해주면 되겠죠?

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // 21

여기서 reduce 함수가 사용 됐는데, reduce 를 잘 모르겠으면 1장 섹션 9를 복습하고 오세요.

함수 인자와 spread

이번에는, 다시 아까 배웠던 spread 로 돌아와서 한가지를 더 가르쳐드리겠습니다. 바로 함수의 인자와 spread 인데요, 만약 프로그래밍을 처음 배우신다면 파라미터와 인자가 좀 헷갈릴 수 있습니다. 이에 대해서 간단하게 설명 드려볼게요.

const myFunction(a) { // 여기서 a 는 파라미터
  console.log(a); // 여기서 a 는 인자
}

myFunction('hello world'); // 여기서 'hello world' 는 인자

함수에서 값을 읽을때, 그 값들은 파라미터라고 부릅니다. 그리고 함수에서 값을 넣어줄 때, 그 값들은 인자라고 부릅니다.

인자가 무엇인지 이해를 하셨다면 이제 함수인자와 spread 문법을 사용하는 것에 대하여 알아볼게요.

우리가 방금 함수파라미터와 rest 를 사용한 것과 비슷한데, 반대의 역할입니다. 예를 들어서, 우리가 배열 안에 있는 원소들을 모두 파라미터로 넣어주고 싶다고 가정해보겠습니다.

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(
  numbers[0],
  numbers[1],
  numbers[2],
  numbers[3],
  numbers[4],
  numbers[5]
);
console.log(result);

굉장히 불편하죠? 만약에 sum함수를 사용 할 때 인자 부분에서 spread 를 사용하면 다음과 같이 표현이 가능합니다.

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers);
console.log(result);

어떤가요? 정말 편하죠?

이렇게, spread 와 rest 를 잘 사용하면 앞으로 보기 깔끔한 코드를 작성하는 것에 큰 도움을 줄 것입니다.

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

Ajax

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

▶ 왜 사용하는가?

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 됩니다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원낭비와 시간낭비를 초래하고 말것입니다. 하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 합니다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다. 요새 웹페이지에서 가장 중요한것은 속도가 아닐까싶습니다. 이 이유하나만으로도 Ajax를 사용해야 하는 이유로써 충분합니다.

▶Ajax의 장단점

Ajax의 장점

1. 웹페이지의 속도향상

2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.

3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.

4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

Ajax 의 단점

1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)

2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.

자바에서 getter, setter는 꼭 필요하지만 코드의 길이를 길어지게 하고 개발자에게 의미없는 노동을 강요하게 됩니다. 이부분이 자바의 단점 중 하나입니다. 그래서 스칼라에서는 케이스 클래스를 통해 컴파일러에서 자동으로 작업을 처리할 수 있게 도와줍니다. 자바에서도 롬복을 이용하여 이부분을 자동으로 생성하게 할 수 있습니다.

출처: https://118k.tistory.com/755 [개발자로 살아남기]

이번에 출판사로부터 일을 하나 받았는데,

영문으로된 글을 한글로 번역하는 일이다.

번역된 글은 출판사에서 적절히 페이지를 나누어 책으로 엮을 것이며,

완성된 책은 출판이 되어 서점에 진열될 것이다.

우리는 방금 컴파일, 빌드, 배포의 모든 과정을 훑어보았다.

1. 영문으로된 글을 한글로 번역하는 것은 컴파일이다.

2. 번역한 글을 책으로 엮는 것은 빌드이다.

3. 완성된 책을 고객들이 읽을 수 있도록 서점에 진열하는 것은 배포이다.

4. 1~2번 과정을 하나로 묶어 '빌드 한다'고 하기도 한다. 벽돌과 시멘트등 여러 재료를 사용해 무엇인가를 짓는(build)것의 결과물이 사람이 살 수 있는 집이 되는 것처럼,

코드와 컴파일러등 여러 도구를 사용해 무엇인가를 만드는(build) 것의 결과물은 동작하는 소프트웨어가 된다고 이해하면 좀 더 쉬우려나?

즉, 순서대로 보자면 컴파일 - 빌드 - 배포 의 순서이지만,

보통 컴파일을 포함한 배포하기 직전까지의 모든 과정을 ‘빌드 한다’ 라고 표현하기도 한다.

사실 용어를 정확하게 정의해두고 사용하는게 좋겠지만,

실제로 회사나 프로젝트 팀마다 용어를 조금씩 다르게 사용하는 경우가 있으니 참고해두자.

심지어는 코드가 완성된 직후, 컴파일부터 배포하는 모든 과정을 ‘빌드 한다’고 표현하는 경우도 봤다.

어쨌든 이를 좀 더 프로그래밍적 관점에서 보자면,

1. 컴파일: 사용자가 작성한 코드를 컴퓨터가 이해할 수 있는 언어로 번역하는 일

2. 빌드: 컴파일된 코드를 실제 실행할 수 있는 상태로 만드는 일

3. 배포: 빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 일

4. 혹은 컴파일을 포함해 war, jar 등의 실행 가능한 파일을 뽑아내기까지의 과정을 빌드한다고도 함.

이클립스에서 JAVA로 코딩을 한다고 생각해보자.

코드를 짜고나서 Run 버튼을 눌러 코드를 실행시킨다 (컴파일 + 실행)

정상적으로 실행되면 이것을 war 파일로 뽑아서(빌드) 웹서버에 올리거나(배포)

JSmooth 등을 사용해 exe, jar 파일로 뽑아(빌드) 사용자에게 주면 된다(배포)

참고로, 웹이 아닌 exe 파일로 배포하는 경우는 보통 ‘deploy’보다는 ‘distribution’ 한다고 표현하는 것 같다.

둘다 똑같은 ‘배포’이긴 하지만, deploy는 일반적으로 웹개발 영역에서 주로 사용되는 용어로 보인다.

개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리

즉 제 3자 라이브러리 .

제작사에서 만든것이 아니라 다른 업체에서 만든 해당 툴 지원 라이브러리

제조사와 사용자 이외 외부의 생산자를 가리키는 뜻으로 쓰인다. - 위키

편하고 효율적인 개발을 위해, 플러그인이나 라이브러리 또는 프레임워크등을 사용하게 된다.

예로 프로그래밍 개발과 개발자 사이에 플러그인,라이브러리,프레임워크를 서드파티로 볼 수 있다.

...

이처럼 제 3자로써 중간다리 역할을 하는 것을 서드파티라고 합니다.