💖 221105 Today I Learned 💖

프로젝트를 하며 찾아본 것들

만들어진 게 별로 없는 상태라 에러보다는 프론트 쪽을 많이 손 본 것 같다.

keyframe과 cubic-bezier를 찾아본 계기… (잠담임)

---

• 잡담 : 원래 다른 데서 애니메이션이 들어간 페이지를 따왔는데, 우리 페이지에서 맞춰서 사용하지 않는 css도 지워야 하고 추가로 필요한 코드를 작성하니 애니메이션에 따라 늦게 뜨는 프로필창과 달리 밑에 게 타이밍이 안 맞게 먼저 뜨고, 이것저것 모르는 상태에서 만지니 이상하게 꼬여서 다 망가지더라.. 근데 애니메이션 적용된 화면이 너무 맘에 들어서 차마 포기하지 못하고 싹 다 지운 뒤에 애니메이션 만드는 데 사용된 거 같아 보이는 Keyframe과 cubic-bezier를 배워서 똑같이 다시 만들엇다. 줸장… 다음엔 그냥 필요한 거 싹 다 구현되어 있는 템플릿 찾아서 수정 안 하고 바로 갖다 쓸 거다.

CSS : keyframes

---

💡 참고 : https://webclub.tistory.com/m/621

✨ animation의 단일 속성 ✨

1. animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름 정의. 중간 상태는 @keyframe 규칙을 이용해 기술한다.
   • name은 @keyframe 속성에서 설정한 이름으로, 이름을 설정해야 애니메이션을 재생(호출) 할 수 있다.
   • 문자열은 당연하고 언더바나 하이픈으로 시작하는 이름은 유효하지만, 숫자나 특수 문자로 시작하는 이름은 유효하지 않다. 애니메이션 이름을 none으로 설정하면 none이란 이름의 키프레임이 있어도 애니메이션을 재생하지 않는다.
2. animation-duration : 애니메이션 싸이클의 지속 시간. 즉, 한 번 재생하는 데 걸리는 시간 설정. 0이나 음수로 설정 시 애니메이션이 재생되지 않는다.
3. animation-delay : 애니메이션 로드 후 지연 시간
   • 0 : 시작하자마자 애니메이션 재생 (Default)
   • now : 0이나 마찬가지
4. animation-direction : 애니메이션 종료 후 재시작이나 역방향 진행을 지정한다.
5. animation-iteration-count : 애니메이션 반복 횟수 지정.
6. animation-play-state : 애니메이션 정지나 재시작 등
7. animation-timing-function : 중간 상태 전환의 시간 간격 지정
8. animation-fill-mode : 애니메이션 시작 전이나 종료 후 어떤 값이 적용될지 지정한다.

✨ css 작성시 속기형 작성법 ✨

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];

CSS : cubic-bezier

---

💡 참고 : https://kutar37.tistory.com/entry/CSS-cubic-bezier란

1. transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는 데 쓰인다.
2. cubic-bezier() 안에 들어가는 4개의 parameter는 각각 아래 Cubic-bezier curve의 p0, p1, p2, p3을 의미한다.

1. 실제 작성 코드
   • 2.7초동안 기다렸다가 0.5초동안 제어해서 좌측 상단에서 우측 하단 방향으로 넓어지는 효과를 주었다.

   animation: material 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
   

2. 매번 일일이 값을 설정하는 게 어렵기 때문에 기본적으로 선언돼있는 5가지 값이 있다. 사용시 fuction 대신 키워드만 넣으면 된다.
3. 작성 코드
   • ease는 기본값으로, (0.25, 0.1, 0.25, 1.0)의 값을 가지며, 중간 과정을 빨리 진행한다.

   -webkit-animation: moveIn 1s 3.1s ease forwards;
   animation: moveIn 1s 3.1s ease forwards;
   

 

django image optimization

---

💡 참고한 문서 → https://pypi.org/project/django-image-optimizer/

💡 Pillow 모듈이 설치된 상태에서 진행

1. pip install django-image-optimizer
2. ‘image_optimizer’, : settings.py의 INSTALLED_APPS에 추가
3. OPTIMIZED_IMAGE_METHOD = ‘pillow’ : 마찬가지로 settings.py에 추가. tinypng라는 것도 있나 보다. 근데 앞서 언급했듯 이미 Pillow가 깔려있기 때문에 pillow로 진행했다.
4. 테이블 모델링

   from django.db import models
   
   from image_optimizer.fields import OptimizedImageField
   
   
   class MyModel(models.Model):
       ...
       image = OptimizedImageField()
   
   
   class MyModel2(models.Model):
       image = OptimizedImageField(
           upload_to="uploads/%Y/%m/%d",
           optimized_image_output_size=(400, 300),
           optimized_image_resize_method="cover"  #  "crop", "cover", "contain", "width", "height", "thumbnail" or None
       )

• PIllow의 경우 MyModel2와 같이 경로나 optimized_image_output_size, optimized_image_resize_method같은 것들을 추가적으로 설정할 수 있대서 밑의 코드를 사용했다. 실제로 경로도 날짜에 따라 저장되는 것을 확인했다.

• from image_optimizer.utils import image_optimizer
  
  def post_image(request):
      image_data = request.FILES.get('image')
      image_data = image_optimizer(image_data=image_data,
                                   output_size=(400, 300),
                                   resize_method='cover')
      ....
  

  • 위와 같이 바로 함수로 적용할 수도 있다고 한다.
  → 사실 이미지 경로도 올바르고(주소창에 복붙하면 사진이 잘 뜬다) db에 저장도 잘 되고 있는데 화면에는 뜨지 않아 답답하다. 주말이라 튜터님한테도 못 물어보고 이것저것 찾아보다가 사진 용량이 너무 크면 그럴 수 있대서 최적화까지 해봤는데도 여전히 사진이 뜨지 않는다. 하지만 여튼 새로운 거 하나 알았으니 조아조아