[TIL] 두근두근, 내일은 프로젝트 발표일 / 오늘의 개발일지

 

내일 있을 팀플 발표를 위해 오늘 최종 마무리 작업을 진행했다.

저번에는 바닐라 자바스크립트로 하드코딩(?)을 해야해서 할 것이 많았는데, 확실히 리액트로 넘어오고 나서

좀 더 수월해진 느낌이 아주아주 아주~! 살짝 든다 (^-^)

역시 코딩은 팀프로젝트를 할때가 확실하게 느는 것 같다.

공부라는게 문제를 풀면서 실력이 확 늘때가 많은데, 개발은 프로젝트가 문제푸는 행위인 것 같다.

 

최종 팀플 마무리 작업 중에 내가 지난 번에 짰던 코드에서 이슈가 발생한 것을 확인!! 

해당 이슈는 아래 따로 정리했긔 (오류일지) 

https://warn-code.tistory.com/206

[리액트] 파이어베이스 이용하여 사진 저장하는데, 사진이 하나씩 밀리는 현상 발생

 

>> 실시간으로 Input창에 타이핑 내역 보이게하기(?)

// javaScript 함수
function onChangeHandler(event) {
    setTest(event.target.value);
  }

<input type="text/" value={test} disabled />
<input type="text" onChange={onChangeHandler} />

 

 

>> 오늘 마무리한 Caraousel 코드 정리

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import React, { Component } from "react";
import Slider from "react-slick";
import styled from "styled-components";
import carouselImg1 from "../../../sampleimg/img1.png";
// import carouselImg1 from "./sampleimg.img1.png";
import carouselImg2 from "../../../sampleimg/img2.png";
import carouselImg3 from "../../../sampleimg/img3.png";

export default class SimpleSlider extends Component {
  render() {
    return (
      <div>
        <h2> 캐러셀 Section </h2>
        <Slider {...settings}>
          <CarouselBox>
            <CarouselImg src={carouselImg1} />
            {/* <CarouselTitle>1</CarouselTitle>
            <CarouselContent>1번 본문</CarouselContent> */}
          </CarouselBox>
          <CarouselBox>
            <CarouselImg src={carouselImg2} />
            {/* <CarouselTitle>2</CarouselTitle>
            <CarouselContent>2번 본문</CarouselContent> */}
          </CarouselBox>
          <CarouselBox>
            <CarouselImg src={carouselImg3} />
            {/* <CarouselTitle>3</CarouselTitle>
            <CarouselContent>3번 본문</CarouselContent> */}
          </CarouselBox>
        </Slider>
      </div>
    );
  }
}

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: "0px",
  centerMode: true,
};

const CarouselBox = styled.div`
  /* border: 2px solid black; */
`;

const CarouselImg = styled.img`
  width: 100%;
  height: 400px;
`;

const CarouselTitle = styled.h3`
  font-size: 25px;
  text-align: center;
`;

const CarouselContent = styled.h3`
  font-size: 16px;
  text-align: center;
`;

 

추가로 귀여운 일기 하나 남기면, 이번 프로젝트때 우리 팀플 주제가

애완동물을 자랑하는(일종의 애니멀 싸이월드)  사이트인데, 팀 로고를 뭘로할까 하다가 각자 팀원들을 닮은 동물들로 나타내자고 해서

아이패드 포토샵으로 내가 요렇게 그림을 그렸당 ㅋ.ㅋ

(왼) 도안 (오른) 색깔 입히기

 

내가 그린 비루한 그림이 프로젝트 로고로 들어가니 배로 뿌듯하고

비루한 그림임에도 무한 칭찬 주셔서 뿌듯하게 해주셨던 팀원분들께 넘 감사하당❤️ (난 인복이 참 좋다니깐 ㅎㅎ)

 

그림에 이렇게 다른 팀원분이 로고까지 붙여주셨더니, 그림에 숨을 불어넣어주신 너낌 >_<

오늘은 남은 시간에 팀프로젝트 마무리 작업을 하고, 내일 있을 발표 업무 분담도 필요할 것 같당

내일 팀플 끝나면, 플젝 때문에 중단됐던 패캠 리액트 강의를 꼭꼭 목요일 시작 전까지 들어야겠당 ㅎ.ㅎ

오늘의 개발일지 끄읕