<html>

<head>
  <meta charset="UTF-8">
  <title>출력결과</title>
</head>

<!-- 연필 1다스는 12자루 N명의 학생수를 입력하면,
  몇 다스가 필요한지 (반드시 모든 학생이 받아야함)  -->
<body>
  <script>
    function solution(n) {
      return Math.ceil(n / 12);
    }

    console.log(solution(25));
  </script>
</body>

</html>

A,B,C 세 개의 막대 길이가 주어지면 이 세 막대로 삼각형을 만들 수 있으면 YES

만들 수 없으면 NO를 출력하기

 

<html>

<head>
  <meta charset="UTF-8">
  <title>삼각형 판별하기</title>
</head>


<!-- 삼각형을 만들기 위해서는 다음의 조건을 만족해야 합니다:
세 변의 길이는 양의 실수여야 합니다.
세 변의 길이 중 가장 긴 변의 길이는 나머지 두 변의 길이의 합보다 작아야 합니다. -->
<body>
  <script>
    //별도의 함수를 사용하지 않고 해결하기
    function solution(a, b, c) {
      let max;
      let sum = a + b + c;
      if (a > b) max = a;
      else max = b;
      if (c > max) max = c;
      if ((sum - max) <= max) return 'NO'

      return 'YES'
    }
    console.log('solution :', solution(13, 33, 17));

    //Math.max 사용한 로직
    function solution2(a, b, c) {
      let sum = a + b + c;
      let max = Math.max(a, b, c);
      if ((sum - max) <= max) return 'NO'

      return 'YES'
    }

    console.log('solution2 :', solution2(13, 33, 17));
  </script>
</body>

</html>
<!-- 자연수 A, B, C 를 입력받아 세 수 중 가장 작은 값을 출력하는 프로그램을 작성하세요. -->
<!-- 정렬 사용 금지 -->
<body>
    
    <script>
        function findSmallest(a, b, c) {
            let min = a;
            if(a > b) min = b;
            if(min > c) min = c;
            return min;
        }
        console.log(findSmallest(3, 4, 5));
    </script>
</body>

 

npm init이란?

package.json을 만드는 명령어 입니다.

 

괄호가 있다면 앤터키 입력시 그 값으로 지정됩니다.  생략도 가능합니다.

 

package name : (현재 폴더이름) 패키지의 이름

 

version : (1.0.0) // 이 패키지의 버전에 대해서

 

description : 프로젝트의 설명을 적는곳입니다.

 

entry point : (index.js) 진입점을 의미합니다. 외부에 공개하지 않는다면 생략 가능합니다.

 

test command: 프로젝트 생성후 테스트로 입력할 값 입니다.

 

git repository: git 저장소가 연결되어있다면 자동으로 연결됩니다. /사용하지 않는다면 생략가능

 

keywords: 프로젝트에 대한 키워드

 

author:  해당 프로젝트의 작성자

 

license: (ISC)  저작권에 대한 정보, 기본값은 ISC 입니다. 

여기까지 전부 기입하면 package.json 파일이 생성됩니다.

...

npm init으로 생성한 package.json

 

나는 기본값으로 package.json 을 사용하겠다!   npm init -y 를 사용하면 됩니다.

기본값과 생략으로 이루어진 package.json이 만들어집니다.

 

npm init -y 로 생성한 package.json

 

npm install

npm install은 패키지를 설치하는 명령어 입니다.

 

npm install 패키지이름@버전  : 해당 버전의 패키지를 설치합니다.

npm install 주소  : 특정 저장소의 패키지를 설치합니다.

 

npm install --save-dev 

또는

npm install -D  :  --save-dev 와 동일합니다. (대문자만 가능)

 

--save  (-S) : dependencies에 추가합니다 .  

--save-dev : devdependencies에 추가됩니다.

-g : 글로벌 패키지에 추가됩니다. 글로벌 패키지에 추가하면 다른 프로젝트에서도 해당 패키지를 사용할 수 있습니다.

 

 

package.json과 package-lock.json

 

dependencies

- 외부의 다른 개발자가 만든 패키지에 의존하고 있다라는걸 알려줍니다. (일반 의존성)

devdependencies

- 위와 동일하며, 개발에서만 해당 패키지를 사용하고  웹사이트에는 영향이 가지 않는 패키지들 입니다.. (개발 의존성)

 

npm install parcel -D  를 설치했다고 가정하겠습니다.

node_modules 에 parcel이 추가가 됩니다.

사진은 parcel 폴더의 package.json 입니다.

parcel 번들러는 dependencies에 있는 다른 패키지에 또 의존하고있는 형태이며 이것들이 설치된 곳이 node_modules입니다

 

package-lock.json은 위의 패키지들의 관계를 정보가 있는 파일입니다.

 

node_modules 의 경우 package.json만 있다면 npm install 만으로 다시 생성이 됩니다.  (깃허브 저장소에 업로드 할 필요가 없다.)

 

그렇기 때문에 .gitignore 에 node_modules가 들어있습니다. (.gitignore에 파일이 등록되면 저장소에 업로드 되지 않습니다.)

 

개발용과 배포용 패키지는 구분지어 설치해야합니다.

 

parcel

웹사이트에서 동작할 내용들을 묶어주는 번들러입니다

 

 

'개발공부 > 기타' 카테고리의 다른 글

왜 리엑트를 사용하는가  (0) 2024.01.18
프로그래밍 표기법  (0) 2023.03.10
상대 경로와 절대경로  (0) 2023.03.02
  1. dash-case(kebab-case)
    1. 단어와 단어 사이에 - 기호를 사용하는 케이스
    2. ex ) the-quick-brown-fox-jumps-over-the-lazy-dog
    3. html , css에 사용
  2. snake_case
    1. _를 사용하는 케이스
    2. the_quick_brown_fox_jumps_over_the_lazy_dog
    3. html, css에서 사용
  3. camelCase
    1. 맨 앞을 제외한 단어마다 대문자로 시작
    2. theQuickBrownFoxJumpsOverTheLazyDog
    3. Javascript에서 사용
  4. PascalCase
    1. camel Case와 비슷하며 맨 앞도 대문자로 시작한다.
    2. TheQuickBrownFoxJumpsOverTheLazyDog
    3. Javascript에서 사용

 

Zero-base Numbering

0 기반으로 번호를 매기기, 특수한 경우를 제외하고 0부터 숫자를 시작합니다.

 

 

'개발공부 > 기타' 카테고리의 다른 글

왜 리엑트를 사용하는가  (0) 2024.01.18
npm 과 package.json  (0) 2023.03.31
상대 경로와 절대경로  (0) 2023.03.02

상대경로

  • ./ :'주변에서 찾는다' 같은 위치라고 생각하면 편합니다.
  • ../ : '상위 폴더에서 찾는다' 라고 생각하면 편합니다.

절대경로

  • http/https : 원격의 다른 사이트를 의미합니다.
  • / (//) : '/' 하나만 있는경우는 최상위 경로(루트)를 의미합니다.

 

루트경로

  • / (root) 에는 index.html, images폴더, css폴더가 있습니다.

상대경로

  1. index.html에서 test.png 파일을 사용하고자 한다면?
    index.html과 images폴더는 같은 위치에 있기 때문에 './' or (생략가능) ' / ' 후 images폴더 속 파일이름
    ./images/test.png  ,  images/test.png 

  2. main.css 에서 test.png 파일을 사용하고자 한다면?
    main.css의 입장에서 생각을 하면 된다. main.css는 css폴더의 하위에있습니다
    ../를 사용해서 밖으로 나온다고 생각을 하면된다. images폴더로 들어가서 test.png를 찾는다고 생각하면됩니다.
    ../images/test.png

 

절대경로

각각의 파일의 위치에 상관없이 같은 경로를 이용하기 때문에 절대적인 경로다 라고 생각하면 편합니다.

  1. index.html에서 test.png 를사용하고자 한다면?
    / 는 루트경로 즉 project 폴더를 의미합니다. 이 루트경로에는 images, css index.html 파일이 있습니다.
    /images/test.png
  2. main.css 에서 test.png 를 사용하고자 한다면?
    동일하다 절대경로이기 때문에  /images/test.png 
  3. index.html 에서 제 블로그에 있는 test.png를 이용하고자 한다면?
    https://j-plum.tistory.com/images/test.png

'개발공부 > 기타' 카테고리의 다른 글

왜 리엑트를 사용하는가  (0) 2024.01.18
npm 과 package.json  (0) 2023.03.31
프로그래밍 표기법  (0) 2023.03.10

<meta> 태그는 <Link>, <style>, <script> , <title> 등의 태그로 나타낼 수 없는 나머지 모든 정보를 표시할 때 사용합니다

 

meta는 정보를 의미

 

<meta name="author" content="J-plum" />

  • name : 정보의 종류
  • content : 정보의 값

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

  • 모바일에서 웹 페이지의 width를 모바일 환경의 width와 일치 시키거나, 웹 사이트가 처음 출력될 떄
    확대/축소 여부 정도 등 몇 가지 정보를 meta 태그로 명시하는 개념이 name="viewport"입니다.
  • 데스크톱의 width와 device(모바일)의 width를 일치시킨다는 의미입니다.
  • initial=sacle : 1.0배수로 보여주겠다는 의미입니다.(확대/축소의 여부)

비트맵(Bitmap)과 벡터(Vector)

비트맵(Bitmap)

  • 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지 라고도 부름.
  • 정교하고 다양한 색상을 자연스럽게 표현.
  • 확대/축소 시 계단현상, 품질 저하.

1. JPG(JPEG)

  • 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용
  • 손실 압축을 사용 (반복 저장시 손실이 일어남)
  • 표현 색상도 (24비트, 약 1600만 색상) 이 뛰어남
  • 이미지의 품질과 용량을 쉽게 조절 가능
  • 가장 널리 쓰이는 이미지 포맷

2. PNG

  • Gif의 대체 포멧으로 개발됨
  • 비손실 압축
  • 8비트 (256 색상) / 24비트(약 1600만 색상) 이미지 처리
  • Alpha Channel 지원(투명)
  • W3C권장 포맷

3. GIF

  • 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
  • 8비트 색상만 지원 (다양한 색상 표현에는 적합하지 않음)

4. WEBP

  • JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
  • 완벽한 손실/비손실 압축 지원
  • GIF같은 애니메이션 지원
  • Alpha Channel 지원(손실, 비손실 모두)
  • IE 지원 불가😕

벡터(Vector)

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지.

확대/축소에서 자유로움, 용량 변화가 없음.

정교한 이미지(인물, 풍경)사진 을 표현하기 어려움

+ Recent posts