[TIL 2023.05.17] CSS와 jQuery에 대한 이해와 .env…?

💻오늘 배운 내용

• jQuery
• CSS trasition
• .env?

---

📖 jQuery

길고 복잡한 자바스크립트 문법을 손쉽게 코딩하도록 간소화한 자바스크립트 라이브러리.

여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해

HTML 문서 탐색과 조작

이벤트 처리

애니메이션

Ajax

등을 훨씬 더 간단하게 만들어준다.

jQuery 써서 html 변경하려면

<p class="hello">안녕</p>

<script>
  $('.hello').html('바보');
</script>

이렇게 코드 양이 절반으로 줄어들어서 쓰는 것이다.

$ 이건 querySelector와 동일하게 사용하면 된다.

jQuery 써서 스타일 변경하려면

<p class="hello">안녕</p>

<script>
  $('.hello').css('color', 'red');
</script>

이러면 css 스타일 변경이 가능하다.

(주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고

jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘 된다.

$('어쩌구').innerHTML 이건 안된다는 소리

jQuery 써서 class 탈부착하려면

<p class="hello">안녕</p>

<script>
  $('.hello').addClass('클래스명');
  $('.hello').removeClass('클래스명');
  $('.hello').toggleClass('클래스명');
</script>

이러면 됩니다. toggleClass는 왔다갔다 토글해준다.

html 여러개를 바꾸려면

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  document.querySelectorAll('.hello')[0].innerHTML = '바보';
  document.querySelectorAll('.hello')[1].innerHTML = '바보';
  document.querySelectorAll('.hello')[2].innerHTML = '바보';
</script>

<p> 태그 3개 내용을 일괄적으로 '바보'로 바꾸려면

그냥 자바스크립트는 저렇게 3줄을 쓰지만

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  $('.hello').html('바보');
</script>

$() 셀렉터는 그냥 querySelectorAll처럼 여러개가 있으면 전부 찾아준다.

거기에 [0] 이런 식으로 순서지정해줄 필요없이 냅다 .html() 붙이면

셀렉터로 찾은 모든 요소를 한 번에 조작하고 변경해줄 수 있다.

이벤트리스너는

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    어쩌구~
  });
</script>

addEventListener 대신 on 쓰면 똑같다.

on은 $() 이걸로 찾은 것들에만 붙일 수 있다.

UI 애니메이션은

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut();
  });
</script>

.hide() 는 사라지게

.fadeOut() 은 서서히 사라지게

.slideUp() 은 줄어들며 사라지게 만들어준다.

간단한 애니메이션은 이런 식으로 쉽게 사용가능.

애니메이션을 반대로 주고 싶으면 show() fadeIn() slideDown() 이런게 있다.

아니면 fadeToggle() 이런 것도 있음.

---

📖 CSS trasition

전날 뼈저리게 느낀 나의 css지식 부족.. 좀더 개념정리를 해봤다.

• transition 
• div { width: 100px; height: 100px; background: red; /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */ transition: all 2s; } div:hover { border-radius: 50%; background: blue; }
• 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 **일정 시간(duration)**에 걸쳐 일어나도록 하는 것이다. 애니메이션 효과가 생기는것!

이런식으로 하면 빨간 네모에서 마우스를 올리면 파란 동그라미로 변화한다.

 

transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.

대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.

 

transition-timing-function 프로퍼티값으로 미리 정해둔 5개의 키워드가 제공된다.

기본값은 ease이다.

linear 시작부터 종료까지 등속 운동을 한다.

ease-in 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.

ease-out 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.

ease-in-out ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

---

📖 .env?

• 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다.
• 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용 할 수 있다.
• .env 파일은 프로젝트의 최상위 루트에 파일을 만든다.
• 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문.

 

❓발생한 이슈/고민

팀프로젝트 3일차..

다른 팀원분이 만든 서버와 연결을 시도했다.

친절하게 ‘이렇게 하세요~’하는 가이드 문서까지 만들어 놓으신 것을 보고 감탄을 금치 못했다.

협업은 저렇게 하는 것이군…

설치 순서까지 있다…므찌다 머쪄~ ㅠㅠ

그러나 2번 소스 가져오는 것부터 에러가 나고 마는데…

 

bash: syntax error near unexpected token `('

이런 메세지가 뜨는것이다 😨

구글 검색해봤더니 아주 쉽게 해결할 수 있는 문제였다

괄호부분 옆에 “ 쌍따옴표를 이용해 해결가능

source ./venv/Scripts/activate “(or)” source ./venv/bin/activate

난 항상 문제가 안될 문제를 만나서 헤메는 듯 하다.. 이 무지함을 어찌할고..

 

OSError: [WinError 10038] 소켓 이외의 개체에 작업을 시도했습니다

이놈의 10038 에러….괴롭다. 맨날 만나는 친구다.

 

이 오류는 일반적으로 동일한 포트 번호(예: 5050)를 여러 번 사용하여 Flask 애플리케이션을 실행하려고 시도할 때 발생

1. 이미 실행 중인 Flask 애플리케이션 인스턴스를 종료합니다. 이를 위해 터미널 또는 명령 프롬프트에서 해당 프로세스를 중지하는 방법을 찾아서 종료합니다.
2. Flask 애플리케이션을 다시 실행합니다. 애플리케이션을 실행하기 전에 app.run('0.0.0.0', port=5050, debug=True) 부분을 확인하여 포트 번호가 이미 사용 중인 다른 애플리케이션과 충돌하지 않도록 합니다.
3. 문제가 지속되면 다른 포트 번호를 시도해 보십시오. 예를 들어, **app.run('0.0.0.0', port=5051, debug=True)**와 같이 포트 번호를 변경하여 실행해 보세요.

라는 설명을 기억하도록 하자…

이번에는 팀원분이 localhost:5050으로 설정해둔 것을 수업에서 맨날 듣던 방식대로 localhost:5000

해버리는 바람에 계속 ‘사이트에 연결할 수 없음’ 이라고 뜬 것 이었다. 이런 ㅠ

 

📋레퍼런스

https://codingapple.com/unit/js-6-jquery-basic/ jQuery

https://poiemaweb.com/css3-transition CSS transition

https://velog.io/@hoho_0815/env-파일에-대하여 .env