포트폴리오

val()은 선택한 제이쿼리에서 메서드중 하나로 선택한 요소의 값을 가져오는 역할을 합니다.

이번에도 똑같이 

영화페이지에서 영화 이미지주소와 제목 별점을 입력하면 이미지가 출력되는 스크립트를 짜봅니다. 위와 같습니다.

우리는 태극기휘날리며 라는 이미지 주소를 가지고있고, input창에 입력후에 검색버튼을 누르면 카드가 출력이 될것입니다.

주의사항은 우리는 html의 input 안에 id값을 넣어주어야 합니다. 그래야 input값을 아이디값으로 해야 스크립트에서

변수명에 담을수있기 때문이죠.

함수로 호출하면서 제이쿼리 메서드 $('#인풋값').val()선택한 요소의 값을 변수명을 지정해줍니다.

그리고 html창을 출력하고 싶어 temp_html함수명을 입력해주고 백스탭을 눌러 html에 있는 부트스트랩코드 일부를 가져옵니다.

마지막에 append 앞으로 가져오기를 눌러 적절한 아이디명을 넣어서 추가해줍니다.

라고 되어있는곳에 id값을 넣어줍니다. card라고 

$('#card').append(temp_html) 를 추가해줍니다. 

공부를 더 해봐야겠지만, 제이쿼리의 일부를 배웠지만 제이쿼리 메서드 val() 함수를 배운것이 너무재밌었다. 

선택한 요소를 가져오는것,

반이상은 배운기분이였다.  

자바스크립트(JavaScript)란?

자바스크립트는 웹 개발의 핵심 프로그래밍 언어로, 동적인 웹페이지를 만들기 위해 사용됩니다. 웹 브라우저에서 실행되며, 서버와 클라이언트 모두에서 활용 가능한 다목적 언어입니다.

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

자바스크립트만의 강점

자바스크립트엔 다양한 장점이 있지만 여기선 세 가지만 언급해 보도록 하겠습니다.

장점을 기술해주세요.

1. 빠른 렌더링:
   • 가상 DOM 덕분에 변경된 부분만 업데이트하여 효율적입니다.
2. 재사용성:
   • 컴포넌트를 만들어 여러 곳에서 재활용 가능, 유지보수에 용이.
3. 풍부한 생태계:
   • 다양한 라이브러리(Redux, React Router)와 함께 사용 가능.
4. SEO 지원:
   • Next.js와 함께 사용하면 SEO 최적화 가능.
5. 대규모 커뮤니티:
   • 문제가 발생했을 때 학습 자료와 해결 방법을 쉽게 찾을 수 있음.

단점을 기술해주세요.

1. 복잡한 초기 설정:
   • 추가 라이브러리와 도구 설정이 필요하여 초보자에게 어려울 수 있음.
2. JSX 학습 필요:
   • HTML과 JavaScript를 결합한 JSX 문법에 익숙해져야 함.
3. 빠른 기술 변화:
   • 최신 버전을 따라가야 하는 부담이 큼.

2. Vue

Vue의 특징은 무엇인가요?

• Vue는 가볍고 배우기 쉬운 프론트엔드 프레임워크입니다.
• 양방향 데이터 바인딩을 제공하여 데이터와 화면이 동기화됩니다.
• 템플릿 기반으로 HTML과 유사한 직관적인 문법을 제공합니다.
• 필요한 기능만 선택적으로 사용할 수 있는 점진적 프레임워크입니다.

장점을 기술해주세요.

1. 쉬운 학습 곡선:
   • HTML, CSS, JavaScript 기본만 알면 바로 시작 가능.
   • 템플릿 문법이 직관적이어서 초보자도 쉽게 이해할 수 있음.
2. 양방향 데이터 바인딩:
   • 데이터가 UI와 자동으로 연결되어 코드를 적게 작성할 수 있음.
   • 예: 입력 필드가 업데이트되면 데이터도 바로 반영됨.
3. 경량성과 속도:
   • 프레임워크 크기가 작아 로딩이 빠르고, 실행 속도가 우수함.
4. 점진적 프레임워크:
   • 기존 프로젝트에 쉽게 통합할 수 있음.
   • 필요할 때만 기능을 추가하여 사용하는 방식.
5. 강력한 도구 지원:
   • Vue CLI: 빠른 프로젝트 설정.
   • Vuex: 상태 관리 도구.
   • Vue Router: 라우팅 기능 제공.

단점을 기술해주세요.

1. 작은 생태계:
   • React나 Angular에 비해 플러그인과 라이브러리 선택지가 적음.
2. 대규모 프로젝트 관리:
   • Vue는 소규모나 중규모 프로젝트에 적합하며, 대규모 프로젝트에는 관리 기능이 부족할 수 있음.
3. 기업 채택률 낮음:
   • React나 Angular에 비해 대기업에서의 사용 비율이 낮아 관련 채용 기회가 상대적으로 적을 수 있음.

3. Next.js

Next.js란 무엇인가요?

• Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다.
• React 프로젝트의 구조를 단순화하고, SEO를 강화하기 위해 사용됩니다.

왜 React와 함께 사용하나요?

• React는 클라이언트에서만 작동하지만, Next.js는 서버사이드 렌더링을 통해 더 빠른 초기 로딩과 검색 엔진 최적화를 제공합니다.
• 프로젝트의 라우팅과 빌드 설정을 자동화해 React의 단점을 보완합니다.

Next.js를 사용했을 때 어떤 장점이 있나요?

1. SEO 최적화:
   • 서버에서 페이지를 렌더링하므로 검색 엔진에 더 잘 노출됨.
2. 빠른 초기 로딩:
   • 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 덕분에 사용자 경험이 향상.
3. 간편한 라우팅:
   • 폴더 구조만으로 라우팅을 설정할 수 있음.
   • 예: /pages/about.js → /about.
4. 정적 사이트 생성(SSG):
   • 블로그나 마케팅 페이지처럼 고정된 콘텐츠를 빠르게 생성 가능.
5. 완벽한 React 통합:
   • React와 완벽히 호환되며, 기존 프로젝트에도 쉽게 적용 가능.

요약

• React: 컴포넌트 기반 UI 라이브러리로, 유연성과 성능이 뛰어나지만 설정이 복잡할 수 있음.
• React : 배우기 쉬운 템플릿 기반 프레임워크로, 초보자에게 적합하며, 빠르고 직관적임.
• Next.js: React를 기반으로 SEO와 초기 로딩 속도를 최적화하는 고급 프레임워크.
• -------------------------------------------------------------------------------------------------------------------------------------

• React는 컴포넌트 기반 UI 라이브러리로, 빠른 렌더링과 재사용성이 장점이지만, 설정과 학습이 복잡할 수 있습니다.
• Vue는 쉬운 학습과 양방향 데이터 바인딩으로 초보자에게 적합하며, 소규모 프로젝트에 유리하지만 대규모 프로젝트에서는 부족할 수 있습니다.
• Next.js는 React 기반 프레임워크로, SEO 최적화와 빠른 초기 로딩을 지원하며, 서버사이드 렌더링(SSR)을 통해 성능을 강화합니다.
• React는 생태계가 풍부하고 유연하며, Vue는 간단하고 빠르며 직관적, Next.js는 구조화와 최적화에 강점이 있습니다.
• 프로젝트의 규모와 요구 사항에 따라 React, Vue, Next.js를 선택해 적합하게 활용할 수 있습니다. 😊

버튼을 클릭해서 title명을 바꿔주는것을 할것이다.

일단 function 함수명() 을 입력해줄것인데,

버튼에다가 onclick='함수명()' 을 넣어준다.

html 에서 id값을 입력해준다. 나는 h1에 있는 킹덤에 id값을 title로 지정을 해주었다.

바로 script 있는곳으로 들어가서 제이쿼리 함수를 입력해줍니다.

h1에 있는 아이디명 title에서 텍스트를 쥬라기월드로 입력합니다.

를 호출할수있다. 그러면 

텍스트가 바뀐것을 확인할 수 있다.

------------

함수 호출하기 제이쿼리 명으로 함수를 호출할수있다.

버튼에 onclick='함수명'을 입력해줍니다. 

그리고 스크립에서 함수 function을 불러와서 리스트를 만들어 감이라는 글자를 꺼내볼게요.

< script>

function checkResult(){

 let a = ['사과','배','감','귤']

$('#q2').text(a[2]);

}

</script>

웹 화면에서는 결과확인하기 버튼눌러서 리스트에 감이라는 글자가 뜹니다.

딕셔너리로 철수불러오기, 리스트처럼 0번째항으로 되어있지만 {key:value,key:value} 값으로 되어진 딕셔너리는 0번째 항으로 인식이 되어진다. 마치 리스트에 글자나, 숫자의 하나의 항처럼 부르듯이말이다. 

딕셔너리는 묶음을 하나로 통칭해서 부르기때문에 묶여진거라고 보면된다,

 ex) {'name':'영수','age':30} 이 하나의 항이라고 보면된다. 

철수 불러오기 성공!!

<style></style> 밑에

<script></script> 추가하기

a ,b에 변수명을 지정해주고, 콘솔로 확인할수있다.

변수는 값을 담아서 한방에 관리하는 함수이다.

1.부트스트랩 스크립트

부트스트랩(html 틀을 복사해서 가져올수있는 링크명이다> 

타이틀 제목명 밑에다가 복사해준다.

https://getbootstrap.com/docs/5.3/components/buttons/ 부트스트랩 사이트.

2. 제이쿼리 스트립트

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

우리는 보통 중앙정렬을 할때 div값을 주고 전체를 감싼다음에 css에다가 width 값을 준다음에 margin: auto 0 auto 0 이런식으로 주는 경우가 많다.

하지만 width 값을 주지않고 내용물을 변경하는 방법이있다고 한다.

딱 4가지만 외우면된다.

display:flex;

flex-direction:column;( 세로정렬을 시켜주기 위해서) 

align-items:center;

justify-content:center;

을 하면 내용물들이

가운데로 모이게된다.

 만약 flex-direction:row; 로 하게 되면 가로로 정렬이 되버리게 된다.

-----------------------------------------------------------------------------------------------------------------------------------

백그라운드에 이미지 추가까지 하는방법을 알려드리겠습니다.

백그라운드의 클래스를 입혔던 .mytitle 에다가

background:url();

background-size:cover;

background-position:center; 을 입히게 되면. 

백그라운드에 추출된 이미지들이 나오게됩니다. 너무재밌지않나요?

콘솔로 호출해주면 됩니다. console.log(sum(1,3)) 변수값을 입력해주면됩니다.

그럼 출력이 되는것을 확인할수있습니다.