전체 글11 1. Update, FixedUpdate, LateUpdate, deltaTime [Unity 공부] 안녕하세요! 개발자 zeroiron0입니다! 평소에 게임 개발쪽에 관심이 있어서 유니티 공부를 가끔씩 시도했었는데 이런 저런 일정에 치여 막상 제대로 시작한 적이 없었습니다. 그러다 지금에 이르러서 공부할 시간이 매우 많아졌기때문에 블로그에 포스트하면서 본격적으로 공부해보려고 합니다! 1. Update & deltaTime Unity에서 새로운 C# 스크립트를 생성하고 편집할 때 Update 함수에 다음과 같은 주석이 달려있습니다. Update is called once per frame (Update는 프레임마다 한번씩 불린다.) 여기에서 알 수 있는 것은 Unity는 각 프레임마다 Update를 수행한다는 것입니다. 우리는 여기서 프레임마다 필요한 캐릭터 움직임, 공격과 같은 행동이나 길찾기 알고리즘.. 2022. 12. 23. 10. AWS, gunicorn, nginx를 이용한 백엔드 배포 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 목차 1. 도메인 네임서버란? 2. Route 53 호스팅 영역 생성 & 네임 서버 연결 3. EC2 인스턴스 생성 4. ACM을 통한 인증서 발급 5. 로드밸런서 & 타겟 그룹 6. RDS 인스턴스 생성 7. EC2 Django 프로젝트 설치 8. gunicorn 9. nginx 10. Django 설정 11. 마무리 이번 포스트가 개인 홈페이지 만들기 프로젝트의 마지막으로 구매한 도메인을 AWS와 연결하고 AWS 서비스를 이용해 HTTPS 백엔드 서버를 배포하는 이야기를 해드리겠습니다! 1. 도메인 네임서버란? 네임서버란 도메인을 등록된 IP로 바꿔주고 IP를 등록된 도메인으로 바꿔주는 서버입니다. 예를 들어 example.com 이라는 사이트가 있고 네임서버에 ex.. 2022. 11. 20. 9. 원 페이지 스크롤 구현 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 많은 홈페이지에서 사용하고 있는 원 페이지 스크롤을 직접 구현해보려고 합니다. 원 페이지 스크롤의 구현은 gtbowurrs님이 올린 게시글 https://codingbroker.tistory.com/128를 참고해서 진행했습니다. 목차 1. useRef 2. Wheel & Resize Event Handler 3. One Page Scroll 4. 모달창이 열려있을 때 이벤트 방지 5. 마무리 1. useRef useRef는 React에서 제공해주는 기본 훅 중 하나로 컴포넌트를 선언할 때 ref를 같이 사용하면 해당 컴포넌트의 속성을 참조, 수정할 수 있게 합니다. 이때 컴포넌트의 리렌더링은 일어나지 일으키지 않습니다. 다만 사용 순서를 주의해야하는데.. 2022. 11. 20. 8. 프로젝트 기능 프론트엔드 구현 [MyHomepage: 개인홈페이지 만들기] 안녕하세요. 개발자 최영철입니다. 이번 포스트에서는 react-slick에 대해 공부하고 이를 적용해서 프론트엔드에서 최종적으로 프로젝트 목록을 보여주고 삭제하는 기능을 구현하게 된 이야기를 해드리려고 합니다. 목차 1. Carousel & react-slick 2. Input Type & project_upload.js 3. 링크 여부에 따른 버튼 배치 4. 마무리 1. Carousel & react-slick 처음 제가 진행한 프로젝트를 설명하기 위해 개인 홈페이지에서 어떻게 표시할까 고민했습니다. 단순히 배열만 한다면 아래로 스크롤이 길어지고 직관적이지 않을 것 같았습니다. 그래서 넷플릭스처럼 목록이 있고 양 옆으로 슬라이드해서 컨텐츠를 소개한다면 좋을 것 같았습니다. 구글에서 검색해본 결과 해당 .. 2022. 11. 19. 7. 프로젝트 기능 백엔드 구현 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요. 개발자 최영철입니다. 이번 포스트에서는 홈페이지에서 프로젝트 목록을 불러오고, 삭제, 추가할 수 있게 만드는 기능을 구현하기 위해 백엔드를 구현하는 이야기를 하려고 합니다. 목차 1. MySQL Escape Sequence 2. ProjectSerializer 구현 3. Project APIView 4. Content-Type, request.FILES & POST 5. Django ManyToManyField 6. 마무리 1. MySQL Escape Sequence 이전 포스트에서 작성한 방명록을 직접 테스트 하던 도중, 한 줄이 아닌 여러 줄로 작성해서 내용을 보냈는데 개행 문자인 \n이 공백으로 교체되는 현상을 목격했다. 보낸 내용 1\n2\n3\n4\n5 (줄바꿈이 자동으로 \n으로 .. 2022. 11. 18. 6. 방명록 프론트엔드 구현 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 방명록의 프론트엔드를 전부 구현해 결과적으로 아래의 사진과 같이 만들어보겠습니다! 목차 1. guest.js 2. guest_sender.js 3. guest_anon_pw.js 4. 최종 guest.js 5. 마무리 1. guest.js 방명록과 관련된 기능들을 여러 컴포넌트로 쪼개서 붙여넣기 위해 모든 컴포넌트를 관리할 방명록 최상위 컴포넌트가 필요합니다. 저는 이 컴포넌트를 GuestBook 컴포넌트라고 선언하고 이를 guest.js로 저장했습니다. 아래 그림은 방명록 컴포넌트를 구현할 때 어떤식으로 구현할지 대략적으로 나타낸 그림입니다. 사람마다 원하는 배치가 다르고 디자인이 다르기 때문에 CSS에 대한 설명은 패스하도록 하겠습니다. 혹시 해당 .. 2022. 11. 17. 5. React Hook과 방명록 백엔드 구현 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 React의 Hook에 대해 학습한 내용을 설명하고 Custom Hook과 Django에서 방명록과 관련된 모든 기능을 구현하는 이야기를 하려합니다. 목차 1. React Hook & useState 2. useEffect & Custom Hook 3. useFetch (custom hook) 4. Django GuestBook 모델 & API 구현 5. GET Method 6. POST & DELETE Method 7. 마무리 1. React Hook & useState 저번 포스트에서 useState를 통해 모달창을 구현할 수 있다는 사실을 알았습니다. 그렇다면 useState는 무엇일까요?useState는 상태 유지 값과 그 값을 갱신하는 함수를 .. 2022. 11. 16. 4. React 모달창 구현 + Styled Components [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 모달창의 구현에 대해 이야기하려고 합니다. 목차 1. 모달창 2. stopPropagation() 3. props.children 4. { foo && ( 컴포넌트 ) } 5. Styled-components 6. 구현 코드 7. 마무리 1. 모달창 모달창은 다음 그림과 같이 팝업창 뒤에 있는 요소를 비활성화 하고 팝업창에 집중하도록 만드는 창입니다. 모달창을 통해 유저 플로우를 제어하고 원하는 방향으로 이끌 수 있습니다. 처음 방명록 구현을 진행할 때 방명록은 프로필, 프로젝트를 설명하는 페이지에 나타내는게 아니라 모달창을 통해 나타내고 싶었습니다. 따라서 모달창을 구현하는 방법을 검색했고 다음과 같은 정보를 알게 됐습니다. 1. 백그라운드와 상호작용.. 2022. 11. 15. 3. User모델과 OAuth 2.0 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 이전 포스트에서 못다했던 User와 GuestBook 중 User 모델을 디자인하고 이에 대한 API를 구현한 이야기를 하려고 합니다. 목차 1. User 모델 구현 2. OAuth 2.0 3. 마무리 1. User 모델 구현 Django는 기본적으로 제공하는 User 모델이 있습니다. django.contrib.auth.models.User 위 모델은 다음과 같이 이루어져 있습니다: class AbstractUser(AbstractBaseUser, PermissionsMixin): username_validator: UnicodeUsernameValidator = ... username = models.CharField(max_length=150) f.. 2022. 11. 15. 2. 홈페이지 기획, AWS S3, Project 모델 구성 [MyHomepage: 개인 홈페이지 만들기] 안녕하세요! 개발자 최영철입니다. 이번 포스트에서는 어떻게 홈페이지를 만들 것인지 기획하고 DB를 구성하는 이야기를 하려고 합니다. 먼저 홈페이지에 무엇이 있으면 좋을까 생각했습니다. 지금 만드는 홈페이지는 학습과 동시에 개인 포토폴리오 사이트로 활용할 예정이었기 때문에 본인의 프로필, 사용 가능한 기술 스택, 프로젝트를 나타내는 화면은 반드시 필요했습니다. 그런데 이것만 표시한다면 프론트엔드에 모든 내용을 넣으면 되고 백엔드가 필요가 없었습니다. 백엔드를 활용할 수 있는 방안을 생각하던 중 프로젝트 내용을 DB에 넣고 프론트엔드가 백엔드를 통해 목록을 가져오도록 하면 좋겠다는 생각이 들었습니다. Django에서 Project 모델을 만들기 위해 프론트엔드에서 표시할 내용을 정하기 시작했습니다. 먼저 프.. 2022. 11. 15. 이전 1 2 다음
