7/19 개발일지

정명환·2022년 7월 19일

대구 ai 스쿨

목록 보기

58/79

1)학습한 내용

멘토링 내용

맡은 파트 진도율과 현재 개발된 부분에 대해 얘기할 것
-> 항상 깃헙에 들어가면 구현된 기능이 보여야함
진척도를 사람별로 기입해달라
-> 현재 어디 구현하고 있다 하는 각파트 진척도 (10~100%)
반응형이 추가될 수 있으니 염두에 두고 작업
중간 점검 체크 방식에서 -> 데일리 체크로
: 본인의 생산성이 얼만큼 되는가, 하루에 코드를 얼만큼 작성할 수 있는가를 파악할 수 있음.
이는 다른 기능을 구현했을 때 작업 시간이 얼마나 걸리는가 파악할 수 있음

===========================================

<스크럼 방식>

내가 어느 파트를 어디까지 구현을 했고 어디서 막혔다
-> 다른 팀원들: 내가 할 때 그 부분은 어떻게 해결했다
하는 시간을 가지는거

오전에 모여서 10분간 다같이 공유하는 시간

===========================================

<최종 준비>

깃허브 URL에 직접 구현된 과정 준비 (미완성본이라도)
각자 파트에 대한 진도율을 보면서 멘토시간을 가질 것

이번 프로젝트에서 맡은 부분 :

오늘 구현한 부분 :
헤더 부분의 배경을 입힌 후 조직도 부분부터 구현을 시작하였다.

조직도에는 애니메이션 효과가 적용되어 있는데 아직 맞는 애니메이션을 찾지 못하여 임시로 저장 해 두었다.
구현 중인 사이트 :

원본 사이트 :

조직도를 만들때 선을 그리는 것을 몰라서 검색을 통해 canvas를 사용하여 만들었다.
참고 사이트 : https://curryyou.tistory.com/324

   <canvas id="myCanvas" width="1400" height="150"></canvas>
    <script>
        // canvas 엘리먼트를 취득한다.
        const canvas = document.getElementById('myCanvas');

        // 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
        const ctx = canvas.getContext("2d");

        // 새선 그리기 설정
        ctx.beginPath();

        //  출발점 지정
        ctx.moveTo(220, 75);

        //  도착점 지정
        ctx.lineTo(1220, 75);

        //  출발점 지정
        ctx.moveTo(220, 75);

        //  도착점 지정
        ctx.lineTo(220, 150);

        
        // 출발점 지정
        ctx.moveTo(470, 75);

        //  도착점 지정
        ctx.lineTo(470, 150);

        
        // 출발점 지정
        ctx.moveTo(720, 75);

        // 도착점 지정
        ctx.lineTo(720, 150);

        
        // 출발점 지정
        ctx.moveTo(970, 75);

        // 도착점 지정
        ctx.lineTo(970, 150);

        
        //  출발점 지정
        ctx.moveTo(1220, 75);

        // 도착점 지정
        ctx.lineTo(1220, 150);

        
        // 출발점 지정
        ctx.moveTo(720, 75);

        // 도착점 지정
        ctx.lineTo(720, 0);

        ctx.lineWidth = 1;
        // 선 그리기
        ctx.stroke();
    </script

그리고 아래 li부분은 wow애니메이션 중 fadeindown을 사용하였으며 윗쪽 애니메이션은 아직 찾지 못해 임시로 magic애니메이션을 사용해 swashIn효과를 주었다.

    <ul class="organi_ organi wow fadeInDown">
        <li>
    <ul>
        <li>유저 Needs 분석</li>
        <li>고객 수요 확인</li>
        <li>BM 설계/기획</li>
        <li>사업화 전략 수집</li>
        <li>사업계획서 작성</li>
    </ul></li>
    <li>
    <ul>
        <li>DB분석/설계</li>
        <li>Cloud 서버 관리</li>
        <li>기능 정의</li>
        <li>기능 구현</li>
        <li>기능 테스트</li>
    </ul></li>
    <li>
    <ul>
        <li>디자인 트렌드 분석</li>
        <li>트렌드 디자인</li>
        <li>웹사이트 디자인</li>
        <li>모바일 앱 디자인</li>
        <li>상품개발 디자인</li>
    </ul></li>
    <li>
    <ul>
        <li>서비스 시장조사</li>
        <li>시장동향 분석</li>
        <li>시장성 검증</li>
        <li>온라인 채널 운영</li>
        <li>오프라인 광고</li>
    </ul>
</li>
    <li>
    <ul>
        <li>경영 무 지원</li>
        <li>업무 환경 지원</li>
        <li>세무 업무 지원</li>
    </ul>
</li>
</ul>

<div class="swa">
    <p class="center"><br><br>대표이사</p>
   
    <canvas id="myCanvas" width="1400" height="150"></canvas>
    <script>
    </script>

    
    <ul class="organi">
        <li><p><br><br>회사소개</p></li>
        <li><p><br><br> 개발부</p></li>
        <li><p><br><br> 디자인부</p></li>
        <li><p><br><br>마케팅부</p></li>
        <li><p><br><br>경영지원부</p></li>
    </ul>
</div>
<script>
    $('.swa').scrollTop(function () {
    $(this).addClass('magictime swashIn');
});