프로그램 3주차

내면 2022. 3. 27. 13:11

2022. 3. 27. 13:11

프로그램 2주차 2022/03/17~ 2022/03/27/

2022/03/17 ~ 2022/03/24 프론트앤드 리액트 기초

요번주 과제 제목 : 나만의 주특기를 갈고 닦는 시간

항해를 종료 할 때까지 당당히 가져갈 나의 주특기를 시작해봅시다!
같은 주특기를 가진 사람들끼리, 뭉쳐서 힘을 합쳐봅시다!
[메타 인지]쉽게 말하면 자신이 무엇을 알고 무엇을 모르는지 아는 것을 의미합니다.
프로젝트에 돌입하기 자신의 강점, 보완점을 꾸준히 파악하고 이에 따른 학습을 계획합시다!

2022/03/17~ 2022/03/24 ( 리액트 입문 : 내 일주일 평점 남기기 )

과제 요구사항

메인 페이지 만들기

1. 일주일 평점 보여주기

평점은 1~5까지 숫자 중 랜덤한 정수로 만들어주세요.

2. 각 요일 옆 삼각형 버튼을 누르면 요일 평점 남기기 페이지로 이동하기

평점 남기기

1. 선택한 요일 보여주기

2. 동그라미를 눌러서 평점 입력하기

3. 남기기 버튼을 누르면 이전페이지로 이동

추가로 해보면 좋은것

1. 오늘의 기준으로 일주일을 보여주기

2. 키보드의 숫자키를 눌러서 평점을 입력하는 방법

제출한 나의 일주일 화면

구현된 페이지와 기능들

메인페이지와 상세페이지 를 라우터 시켜주는곳 App.js

내 코드

import "./App.css";

import Mainlist from "./pages/Mainlist";

import DetailList from "./pages/DetailList";

import React from "react";

import styled from "styled-components";

import { BrowserRouter, Switch, Route } from "react-router-dom";

const App = (props) => {

return (

</Route>

</Route>

</Switch>

</BrowserRouter>

);

};

export default App;

1. 메인리스트와 상세 리스트로 의 라우터 연결

메인페이지 Mainlist.js

내 코드

import React from "react";

import styled from "styled-components";

import MainCycle from "../component/Minicycle/MainCycle";

import { Link } from "react-router-dom";

const Mainlist = (props) => {

let day = ["일", "월", "화", "수", "목", "금", "토"];

return (

<List>

</Link>

</Daylist>

</Link>

</Daylist>

</Link>

</Daylist>

</Link>

</Daylist>

</Link>

</Daylist>

</Link>

</Daylist>

</Link>

</Daylist>

</List>

</Contents>

</Container>

);

};

export default Mainlist;

const Container = styled.div`

background-color: #fff;

width: 50vw;

max-width: 350px;

margin: 80px auto 0px auto;

height: 70vh;

padding: 16px;

border: 1px solid #ddd;

border-radius: 5px;

const Contents = styled.div`

width: 100%;

height: 100%;

const List = styled.ul`

width: 33vh;

height: 100%;

const H1tag = styled.h1`

display: flex;

justify-content: center;

const Daylist = styled.li`

height: 50px;

display: flex;

flex-direction: row;

justify-content: space-between;

margin-top: 10px;

const Daytext = styled.div`

text-align: center;

margin-top: 10px;

const Link1 = styled.div`

width: 0px;

height: 0px;

border-left: 30px solid #666666;

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

margin-top: 5px;

1. 메인 화면의 css입힘

2. 각 요일 받아오기

3. MainCycle 로 props 방식으로 랜덤숫자 넘겨주기

4. props 방식으로 날짜 해당 날짜 링크로 보내주기

상세 페이지 DetailList.js

내 코드

import React from "react";

import { Link } from "react-router-dom";

import styled from "styled-components";

import Minicycle from "../component/Minicycle/Minicycle";

import { useParams } from "react-router-dom";

const DetailList = (props) => {

let day = [

"일요일",

"월요일",

"화요일",

"수요일",

"목요일",

"금요일",

"토요일",

];

const { dayId } = useParams();

return (

<SelectDay>{day[dayId]}</SelectDay>

<div>평점남기기</div>

</DaySubList>

</Daylist>

</Link>

</Container>

</div>

);

};

export default DetailList;

const Container = styled.div`

background-color: #fff;

width: 50vw;

max-width: 350px;

margin: 180px auto 0px auto;

height: 40vh;

padding: 16px;

border: 1px solid #ddd;

border-radius: 5px;

const Daylist = styled.li`

height: 50px;

display: flex;

flex-direction: row;

justify-content: center;

const DaySubList = styled.div`

display: flex;

flex-direction: row;

justify-content: center;

margin-bottom: 20px;

align-items: center;

const SelectDay = styled.div`

width: 80px;

height: 30px;

background-color: orange;

color: white;

display: flex;

justify-content: center;

align-items: center;

border-radius: 5px;

const NavLink = styled.button`

background-color: purple;

color: white;

border-radius: 5px;

margin-top: 10px;

width: 200px;

height: 50px;

1. 상세 페이지 css입힘

2. 파람 연결로 인한 클릭 시 해당 페이지로 이동

3. props를 통해 파람 값으로 id를 가져와 해당 요일을 화면 뿌려주기

4. 평저 남기기 누를 시 메인페이지로 되돌아가기

메인 페이지 의 동그라미 MainCycle.js

내 코드

import React, { useEffect, useState } from "react";

import styled from "styled-components";

const MainCycle = (props) => {

console.log(props.count);

const count = props.count;

let [random, setRandom] = useState(randomEvent(count));

function randomEvent(count) {

let Clist = [false, false, false, false, false];

for (let i = 0; i < Clist.length; i++) {

if (i <= count) {

Clist[i] = true;

}

// setRandom(Clist);

return Clist;

}

useEffect(() => {

// randomEvent(count);

// console.log("call me ap0i");

}, []);

return (

</CheckList>

);

};

export default MainCycle;

const CheckList = styled.div`

width: 200px;

display: flex;

flex-direction: row;

const Check = styled.div`

width: 40px;

height: 40px;

border-radius: 20px;

background-color: yellow;

1. props로 랜덤한 숫자 받아와 변수에 담기

2. 랜덤한 숫자를 활용하여 변하는 수 random 에 set변수로 random 을 변경하여 화면에 뿌려주기

3. 변수값이 false인 5개의 동그라미를 랜덤한숫자에 따라 true로 변환하여 원의 색을 다르게 보여주기

4. 랜덤으로 7개의 숫자를 가져와 세로 7개로 만들어지고 한줄에 5개인 원을 대입하여 각 줄의 원의 색 변환

5. 한줄의 5개인 원의 상태가 Clist의 위치에따라 회색과 노란색으로 변화

상세 페이지 의 동그라미 MiniCycle.js

내 코드

import React, { useState } from "react";

import styled from "styled-components";

const Minicycle = (props) => {

let [a, setA] = useState([false, false, false, false, false]);

function clcikEvent(position) {

let Clist = [false, false, false, false, false];

console.log(position);

for (let i = 0; i < Clist.length; i++) {

if (i <= position) {

Clist[i] = true;

}

setA(Clist);

}

return (

<Check

onClick={() => clcikEvent(0)}

style={{ background: a[0] ? "yellow" : "gray" }}

<Check

onClick={() => clcikEvent(1)}

style={{ background: a[1] ? "yellow" : "gray" }}

<Check

onClick={() => clcikEvent(2)}

style={{ background: a[2] ? "yellow" : "gray" }}

<Check

onClick={() => clcikEvent(3)}

style={{ background: a[3] ? "yellow" : "gray" }}

<Check

onClick={() => clcikEvent(4)}

style={{ background: a[4] ? "yellow" : "gray" }}

</CheckList>

);

};

export default Minicycle;

const CheckList = styled.div`

width: 200px;

display: flex;

flex-direction: row;

const Check = styled.div`

width: 40px;

height: 40px;

border-radius: 20px;

background-color: yellow;

1. 정해놓은 변수를 활용하여 변하는 수 a 에 set변수로 a 을 변경하여 원하는값 화면에 뿌려주기

2. 어느곳을 클릭하는지에 대한 정보를 가져오기위해 position 을 걸어 위치 확인

3. 가져오는 위치에따라 정해놓은 변수의 값 [false,false,false,false,false] 를 true로 변화

4. 첫번째 포지션은 상관없지만 2번째 클릭하면 전에 해당하는 원도 같이 색을 칠함

5. 클릭의 위치를 가져와 조건문을 걸어서 색의 변화

나의 생각

처음시작하는 자바스크립트 모듈이었습니다

처음 시작할때는 동영상을 봐도 이게 뭔가 라는 생각을 시작하였지만 같이 공부하는 조원분들과 멘토님들 의 조언과 지인의 도움으로 방향을 잡아 과제를 제출할수있었고 부족한 부분을 좀 더 채우기 위해서 시간을 많이 사용한것 같습니다

아직 미숙하고 잘할수있다는 자신감은 없지만 계속 도전해서 저만의 프로젝트나 웹사이트를 처음부터 끝까지 만들어 공유하고 싶습니다

이 기간중 배운것

1. 리액트 시작법

2. 화면에서 변하는 부분을 설정하는법

3. 화면의 연결이 어떻게 진행되는지

4. 내가 생각한 방식말고도 무궁무진하다 라는것

앞으로의 필요한 점

1. 다양한 코드 사용법

2. 자바스크립트 함수 사용법

3. 자바스크립트 문법의 이해

4. 코드를 간결하게 정리하는법

5. 라이프 사이클의 이해

2022/03/24~ 2022/03/27 ( React 숙련 )

깃허브 주소

https://github.com/insidelamp/React_Study/tree/main/homework

GitHub - insidelamp/React_Study

Contribute to insidelamp/React_Study development by creating an account on GitHub.

github.com

2022/03/27~ 2022/03/27 ( 3주 차 회고 )

항해를 시작하고 3주차가 지나고 작성하는 회고입니다

처음에 중요시 여겼던 소통은 조금씩 나아져가고 있지만 사용법을 이해하는데에 시간을 너무많이 사용하고있습니다

이해하고 적용해서 더 많은것을 배우고싶지만 생각보다 힘이 든것같습니다

빠르게 지식을 배워 팀원분들과 공유하고 도움이 될수있는 팀원이 되고 싶습니다

아쉬운 점

제출한 결과물을 가지고 발표하는 시간을 가지게 되었습니다

다른 팀원분들보다 발표의 질이 떨어진다 생각되고 이를 보완해 발표를 하는것에대한 자신감을 높이고싶습니다

좀더 설명이 수월하게 코드를 작성하고싶고 코드에 대한 이해가 더욱 많이 필요한것같습니다

What I Learned

이번 WIL 키워드

1. DOM

2. 서버리스

DOM이란?

DOM은 문서 객체 모델( Document Object Moderl ) 이며 HTML, XML 문서의 프로그래밍 interface입니다
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할수있게 돕습니다
DOM은 nodes와 objects로 문서를 포현하며 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될수있도록 연결시켜주는 역할을 담당합니다
웹페이지는 일종의 문서(document) 입니다
이 문서는 웹브라우저를 통해 그 내용이 해석되어 웹브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도합니다
DOM은 웹페이지의 객체 지향 표현이며 자바스크립트와 같은 스크립팅 언어를 이용하여 DOM을 수정가능합니다

서버리스란?

서버리스를 직역하면 서버가 없다는 뜻입니다
서버리스는 클라우드 컴퓨팅의 모델 중 하나로 사용자가 서버를 직접 관리할 필요가 없는 모델을 의미합니다.
서버리스는 동적으로 서버의 자원을 할당합니다.
기존 클라우드 컴퓨팅 모델에 비해 경제적이고 가용성이 좋은 모델이 서버리스입니다
사용자가 없으면 자원을 할당하지 않고 대기하다가 요청이 들어오면 그 때 자원을 할당해서 요청을 처리하고 다시 대기 상태로 들어가게 됩니다.
비용 또한 대기상태를 제외한 실제 사용 자원에 대해서만 청구가 되기 때문에 굉장히 경제적이고 자원을 효율적으로 사용할 수 있는 것입니다.
이 서버는 클라우드 제공 기업에서 전적으로 관리하기 때문에 사용자는 스케일링, 업데이트, 보안 등 서버에 대해 일절 관리하거나 신경 쓸 필요가 없어 서버를 고려하지 않고 서비스와 애플리케이션에 집중할 수 있습니다

장점

이벤트 기반의 비용.
인프라 구성, 운영, 보안 등에 신경쓰지 않고 비즈니스 로직에 집중할 수 있다.
자동 스케일 업 및 스케일 다운
간단한 패키징 및 배포
릴리즈 주기 감소
높은 생산성

단점

실시간 서비스에는 적합하지 않음 (항시 실행 중인 서버랑 달리, 트리거에 의해 서버를 실행하고 종료하기를 반복하기 때문에 실행 대기 시간이 오래 걸림)
클라우드 서비스 업체에 종속적
마이그레이션의 어려움
실행 시간 한계 (AWS Lambda의 경우 15분)
로컬 데이터를 사용할 수 없다. (Stateless)
디버깅이나 테스팅에 불편하다.

저작자표시 (새창열림)

'프로그램 시작후 각 주차 정리' 카테고리의 다른 글

프로그램 5주차 (0)	2022.04.10
프로그램 4주차 (0)	2022.04.03
프로그램 2주차 (0)	2022.03.20
프로그램 알고리즘문제풀이 (0)	2022.03.18
항해 99 모의고사 (0)	2022.03.16

편안하게 개발하기