스파르타 코딩클럽
내일배움캠프 AI 웹개발자양성과정 2회차
2022.04.29. 10일차- TIL
1. 인스타 클론 코딩
09:00-12:00
오전에는 어제에 이이서 인스타그램 클론 코딩을 이어갔다. 오늘 개발한 부분은 메인 포스트 부분에 스토리 레이어 부분이다. 오전에는 각각 스토리 이미지에 외곽선을 만드는데 시간을 보낸 것 같다. 인스타그램 스토리는 단순히 border나 outline을 만드는것에 그치는 것이 아니라 스토리 이미지 밖에 흰색 외곽선이 있고 그 밖에 그라데이션으로 인스타그램 메인컬러가 외곽선이 그려져 있었다.
때문에 먼저 알아본 것은 border에 그라데이션을 넣는 방법. 생각보다 어렵진 않았는데 색깔을 인스타그램과 최대한 비슷하게 하는 작업에 시간을 많이 썼다. 아무래도 단순히 보고 배껴야하는 작업이라 오래걸린 듯하다.
이후에는 외곽선을 2개 그려야 하는 것에 고민을 해보았다. 흰색선과 그라데이션된 선 두개를 어떻게 동시에 그릴까하다가 좋은 생각이 났다. 이미지 뒤에 div를 설정해서 그 구역에 그라데이션을 입히고 그 위에 이미지를 올리면 마치 외곽선으로 보일 것이라고 생각했다.
뭐 결과적으로는 꽤 그럴듯하게 만들 수 있었지만 중간에 한가지 떠오른 것은 애초에 외곽선과 흰바탕을 이미지로 받아서 스토리이미지 뒤에 깔았으면 고생할 필요없었겠구나 싶었다. 그래도 그라데이션 효과에 대해 배울 수 있어서 좋았다.
그리고 양 옆으로 슬라이드할 수 있도록 버튼을 만드는데도 꽤 시간이 오래걸렸다. 입체적인 느낌을 주기위해 shadow 효과를 주는 방법에 대해 알 수 있었다.
2. 기능 구현이 빠질 수 없지!
12:00-13:00 점심시간
13:00-15:00 스토리 슬라이드 기능
사실 오전에는 어제와 마찬가지로 레이아웃을 그대로 베끼는 작업이라 그렇게 재밌지 않아서 힘들었었다. 하지만 스토리 부분을 굳이 구현한 이유는 그 기능 때문이다. 바로 옆으로 슬라이드 되는 것!
사실 슬라이드 기능은 부트스트랩을 이용하면 아주 간단하게 구현할 수 있지만 내가 직접 만들어보고 싶었다. 검색을 해보니 슬라이드를 하는 방법은 생각보다 간단했다. 슬라이드할 때마다 margin-left값을 변경해서 옆으로 밀거나 당기는 것. 이제 javascript로 구현만 하면 되는 것이다!
그런데 한가지 고민이 되었던 것은 바로 jquery를 이용해 css 속성값을 가져오는 방법이었다. 이전 검색창 기능에서도 그렇듯 css 속성을 가져오는 방법으로
let margin = $('#stories').css('margin-left')와 같이 했는데 문제는 여기서 margin이 "100px"와 같이 텍스트 값라는 것이다. 때문에 바로 인트값으로 가져올 수 있는 방법은 없을까 찾아보았는데
const inners = document.querySelectorAll('.inner');
innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`; 이러한 문법을 보고 나도 똑같이
const margin = document.querySelector('#stories');같은 방법을 사용해보았는데도 marginLeft값도 text였다. 따라서 찝찝하지만 기존방법을 사용하되 문자열을 숫자로 바꿔주는 작업 추가로 진행하기로 했다.
3. 팀장 회의
15:00-16:00
3시부터는 한시간 동안 매니저님, 다른 조들의 팀장과 회의를 가졌다. 각 팀별로 현재 커리큘럼의 대한 의견이나 건의사항을 나눴는데 생각보다 다양한 의견들이 나와서 뜻밖이었다.
사실 그전까지는 다른 팀들도 우리팀과 비슷하겠지 싶었는데 정말 다른 생각들을 가진 팀들이 많았고 요구사항도 제각각이었다. 다만 개발을 처음 진행하는 인원들을 위한 거북이반과 튜터님과 직접 코딩을 할 수 있었던 쪽지시험에 대한 의견은 모두 긍정적이었다.
때문에 라이브코딩이나 실시간 코드리뷰와 같이 실시간으로 같이 코드에 대해 생각해볼 수 있는 시간이 있었으면 좋겠다고 의견을 제시했다. 또한 거북이반처럼 평소에도 질문을 부담없이 주고받을 수 있는 분위기가 만들어졌으면 좋겠다고 했다.
진영 송희 -> 상대적으로 입문자 - 거북이반
송희 동우 -> 전공자
희정
1. 미니프로젝트와 파이썬 게임과제를 통해 프론트엔드, 백엔드
전체적인 흐름을 좀더 깊이있게 공부하고, 전문지식들을 튜터님께
배울 수 있어서 좋았습니다. 튜터님의 설명과 함께 쪽지시험을 보니
좀더 이해가 잘되어서 좋았습니다!
거북이반에서 스스럼없이 자유롭게 질문할 수 있는 시간이
정말 좋았습니다!
송희
1. 난이도는 적절했던 것 같습니다!
2. 쪽지 시험이 좋았습니다. 코딩테스트 같은 건 따로 준비해야할 것
같아 부담이 컸는데 나중에 난이도가 올라가서 코딩테스트 수준의
문제를 쪽지시험으로 보게 된다면 조금은 덜 수 있을 것 같습니다.
자주 진행되면 좋을 것 같습니다!
진영님
1. 난이도는 적당했다.
2. 혼자 공부하는 것보다 직접 실시간 피드백을 받을 수 있어
도움이 되었다
<깃특강>
실시간강의가 집중이 잘되서 도움받았어용
아직은 실습이 별로 없었어서 잘 모르겠어요..!
근데 커밋메시지 중요성 이런거 가르쳐주시는 건 좋은 것 같아요!
특강도 좋은데 사실 직접해보는게 젤 좋은거같아요
<쪽지시험>
같이 같은 문제를 풀고 같이 해설까지 들을 수 있어서 좋은 반응
=> 같이 실습하거나 직접 눈으로 보여주면서
이 코드가 어떤의미인지
개발자 입장에서 어떻게 사고해야하는지
어떤 방식으로 생각해야 하는지
하나 알려주는 것에 대해 좋은 반응
온라인강의 각자 듣는거 -> 잘 흡수못하는듯
잘하고 있는지 물어보면
강의에서 분명히 나온내용인데 몰라서 고생하고있음
실시간강의 반응 좋던데 비중을 늘릴 수 있으면 좋겠다.
- 코드에 대한 피드백 -> 좋은 예시를 보여주고 고칠점들을 첨삭해주면 좋을 거 같아요
- 라이브 코딩
<팀장의 입장>
매우 긍정적
다들 너무 열심히함
힘들어했던 팀원들을 도와드리고 발전하는 모습볼 수 있어서
같이 성장하는 기분이 들어서 나도 좋았다.
모르는걸 직접 해결해보려고 하고 찾아보려고함
남이 알려주면 정말 쉬운데 혼자 이해하려면 정말 어려운 내용들
우리 입장에서는 얼마든지 질문하면 알려줄 수 있지만
질문하는 사람 입장에서는 어려울수 있음
모르는 거있으면 물어보세요 괜찮아요 -> 아무도 안물어봄
여러분 잘 되가시나요? 물어보면 그때가서 아 이거 안되네요 아 왜이럴까요
자연스럽게 질문하고 질문 받을 수 있는 분위기가 중요하지 않을까
+ 회의 내용
직접적인 케어, 1:1코드리뷰
4. 팀원들과 더 친해지기
16:00-18:00 팀원들과 소통
18:00-19:00 저녁시간
팀장 회의가 끝나고 팀원들에게 내용을 전달했는데 생각보다 이야기가 길어졌다. 회의 내용도 그렇지만 이런 저런 이야기들을 하다보니 자연스럽게 대화할 수 있는 시간이 되었다. 사실 우리팀은 각자 정말 열심히 노력하고있지만 팀적으로 봤을 때 다들 내성적이어서 그런지 친근하다는 느낌은 많이 받지 못했었다. 그런데 이렇게 뭔가 각자의 이야기들을 하고 소통하는 시간을 가질 수 있어서 좋았다.
사실 오늘이 금요일에다가 개인프로젝트에서 레이아웃을 베끼는 작업이 다들 지겨웠는지 평소에는 그렇게 안하던 대화를 정말 재밌게 한 것 같다. 다음부턴 일부러라도 금요일 오후에 팀 소통시간을 가져야겠다. 너무 좋았다.
5. 추가 기능 구현
19:00-20:00 추가기능 구현
20:00-21:00 일일회고 TIL 작성
다음으로는 간단하게 스토리 슬라이드 기능에 부드럽게 이동할 수 있도록 했다. 검색해보니 정말 다양한 방법들이 있었는데 지금 내가 구현한 상태에서는 css에 transition 속성을 넣는 것이 간단하면서도 정말 잘 작동했다.
- 개발일지:
- github: https://github.com/kimphysicsman/clone_instagram
