리스트는 순서가 중요하다.

 

[리스트]1. 변수명을 지정해주고, 리스트 [] 꺽쇠를 이용해서 리스트명을 차례대로 나열해보았다.

콘솔창에 변수를 입력해주니 리스트들이 나온다.

 <script>
     let a = ['사과','배','수박'];
     console.log(a)
    </script>

 

 

 

 

[리스트]2. 사과를 지정해주고 싶을떄 a[0],a[1].a[2] 처럼 숫자로 지정해서 리스트를 앞에서부터 호출 할수있다.

사과를 고르고싶을때는 첫번째칸은 0번째항으로 인식되므로 그점을 주의한다. [프로그램 언어는 0부터 시작한다는것을 명심해야한다]

     let a = ['사과','배','수박'];
     console.log(a[0])

 

 

{딕셔너리} 1, {key,value} 값으로 이루어진것들이다 예를들어

  let person = {'name':'bob','age':30,'height':180};
        console.log(person);

 

 

그럼 한 사람의 정보가 담긴 딕셔너리안에서 사람의 이름이 밥이고,키가 180이고,나이가 서른살이다.

밥의 정보중에서 키를 찾아보려면 어떻게해야할까?

 

        let person = {'name':'bob','age':30,'height':180};
        console.log(person['height']);

 

 

console.log 안에 person 번호를 호출해서 그 사람의 정보를 찾기가 번거로워서 변수 지정해서 호출하고싶어졌다.

그러면?

 

 

강의를 듣다보니 꺽쇠모양 [,] 과  갈매기 모양{,}이 너무 헷갈렸다. ㅎ

 

리스트는 순서가 있는, 방번호가 있는 자료를 나타냅니다. let 변수지정하기 = [아래의 예시처럼 꺽쇠 모양을 씁니다. ] 




리스트는 변수 명을 입력해줄때 꺽쇠 모양을 넣지않으면 오류가 뜹니다.리스트의 객체는 꺽쇠안에 담겨져야합니다 

그 점 참고해주세요. let aa_list = [b] 처럼 입력을 해줘야 오류가 안뜹니다. 이 예제는 잘못되었지만,
제 실수를 누군가도 할수가 있다고 생각해서 틀린 예제도 같이 올려봅니다.

 

네 정답은 a라고 나옵니다.

 

 

갈매기 괄호는 {} 딕셔너리를 의미합니다.

 

 

갈매기 괄호{ } 안에는 0번째방 ( 첫번째방을 0번방으로 시작하기때문에 그렇게 부릅니다. 라이브러리는 {키: 벨류} 물론 문자는 '' 을 넣어줘야합니다. 상수값 즉 숫자값만 ''을 뺍니다. 값이 담겨있는 방이있습니다.

 

 

콘솔로 호출해주면 추가한 new_names가 names방에 하나 더 추가되어있는것을 확인할수있습니다.

 

프론트엔드 프레임워크는 주로 JavaScript와 관련된 언어를 사용합니다. 하지만 프로젝트와 프레임워크에 따라 추가적으로 HTML, CSS, 그리고 TypeScript 같은 언어도 함께 사용됩니다. 아래에 주요 언어와 그 쓰임새를 정리해 보겠습니다.

프레임워크별 사용하는 언어

프론트엔드 프레임워크는 JavaScript가 기본이며, 프로젝트 규모와 요구사항에 따라 TypeScript 같은 언어가 추가됩니다. HTML과 CSS는 UI를 구성하고 스타일링하는 데 필수적으로 사용됩니다. 프론트엔드 개발자가 되기 위해서는 이 언어들을 잘 다루는 것이 중요합니다. 😊

 

1. React.js

  • 누가 만들었나요? 페이스북(현재 Meta)이 개발했어요.
  • 왜 유명해요? 한 번 만들어 놓은 화면 조각(컴포넌트)을 여러 곳에서 재사용할 수 있어요.
  • 어디서 쓰나요? 페이스북, 인스타그램, 넷플릭스 같은 사이트에서 사용해요.
  • 누구에게 적합해요? 초보도 쉽게 배울 수 있고, 다양한 프로젝트에 사용 가능해요.
  1. Vue.js
    • 누가 만들었나요? 작은 팀에서 시작했는데 지금은 전 세계적으로 유명해요.
    • 왜 좋나요? 배우기 쉽고 간단한 웹사이트를 빠르게 만들 수 있어요.
    • 어디서 쓰나요? 알리바바 같은 쇼핑몰에서 많이 사용돼요.
    • 누구에게 적합해요? 간단하고 빠른 개발을 원하는 사람들에게 추천해요.

  1. Angular
    • 누가 만들었나요? 구글이 만들었어요.
    • 왜 특별해요? 화면을 만드는 데 필요한 모든 기능을 한 번에 제공합니다.
    • 어디서 쓰나요? Gmail, 유튜브 같은 복잡한 웹사이트에 사용해요.
    • 누구에게 적합해요? 큰 회사의 대규모 프로젝트를 개발할 때 적합해요.

  1. Svelte
    • 왜 독특해요? 다른 프레임워크보다 더 빠르고 가벼운 웹사이트를 만들 수 있어요.
    • 어디서 쓰나요? 개인 프로젝트나 빠른 웹사이트에 많이 사용돼요.
    • 누구에게 적합해요? 최신 기술을 써보고 싶은 개발자에게 좋아요.

프레임워크가 왜 필요한가요?

  1. 시간 절약:
    • 처음부터 다 만들 필요 없이, 기본 기능이 이미 준비돼 있어요.
  2. 효율적 작업:
    • 팀원들과 쉽게 나눠서 작업할 수 있어요.
  3. 깔끔한 코드:
    • 복잡한 웹사이트도 잘 정리된 코드로 만들 수 있어요.

어떤 프레임워크를 선택해야 하나요?

  • 간단한 웹사이트Vue.js
  • 대규모 프로젝트Angular
  • 모든 상황에 적합React.js
  • 최신 기술과 빠른 성능Svelte
  • 검색엔진(SEO)이 중요Next.js / Nuxt.js

+ Recent posts