build faild, compile error의 경우 기존의 코드와 새로운 코드의 충돌 확률이 높음.

[aws 배포 전] branch merge를 취소 => (branch에서) master pull => master push => 충돌 검토 확인 => (master에서) master merge하면 됨.

[aws 배포 후 충돌 확인] 우선순위: 1. 실서버 충돌 돌려놓기 2. github master 충돌 해결 순으로 하기

실서버 충돌 돌려놓는 방법: 파일질라는 FTP 서버에 접속 => aws 서버에 업로드 된 파일을 폴더 형식으로 확인 가능 => 충돌 난 파일 확인하고 수정해서 바로 업로드

화면 넓이 값을 가져오기 위해서 w(가로넓이)를 사용할 때 setW($(‘#app’)) 무조건 기준은 ‘#app’으로 넣을 것 전체 클래스나 아이디를 주어도 되지만 값이 0이 나올경우 무의미해짐. 따라서 전체를 아우르는 ‘app’을 사용할 것

useEffect를 주는 이유: 화면 resize의 경우 첫번째값을 가져오지 않음.(화면 크기를 조정해야 값을 측정할 수 있음) 따라서 useEffect로 한번 실행되었을 때 첫값을 가져오도록 사용해야함.

참고페이지: event.page.js, main_slideBanner.js

위와 같은 에러가 발생하였다. 간단하게 map안에 key={idx}를 상위태그에 넣으면 되지만 전체를 감싸는 div를 넣으면 div영역으로 인해 메뉴바 스타일에 영향이 갔다.

그러던 중 벨로포트님의 인프런 강의를 듣다가 나처럼 스타일 관련 설정을 하면서 코드가 꼬이게 되는 것을 방지하기 위해 Fragment라는 것을 사용한다는걸 알게 되었다.

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

imprt에 fragment를 추가하고 fragment 태그로 전체를 감싼 후 key={idx}를 넣어주었더니 오류가 해결되었다!

{keyprop.map((raw,idx)=>{
return(
<Fragment key={idx}>
....

</Fragment>

콘솔에 더 이상 오류가 안떠서 마음이 편해졌다.

참고 블로그: https://react-anyone.vlpt.us/03.html

프로젝트 주제: 더 반찬 => 고기 반찬 페이지 클론

• 프로젝트 참여: 인원 6명 (프론트 엔드 3명, 백엔드 3명)
• 프로젝트 기간: 2021.04.12 ~ 2021.04.23
• 개발기관 및 소속: wecode 부트캠프

<팀원들과 원활한 소통을 위해 활용한 방식들>

• Scrum 스크럼 진행 방식에 대해서 논의하며, Trello tool 을 적극 활용👍
• Standup Meeting - 매일 아침 11시 미팅을 통해 어제 한 일, 오늘 할 일, blocker 세 가지를 공유하며 팀원들과 미팅 진행 +점심 메뉴도 함께 논의 후 결정🤞
• Communication - 팀원들과 궁금한 점이나 소통이 필요한 경우 올바른 방법을 통해 의견을 주고 받으며 해결👏
• Git - 기본적인 Flow에 따라 Git을 사용할 수 있으며, brach를 생성하고 올바른 이름과 내용을 commit message를 작성😉

<소개🤞> 더 반찬은 소셜 커머스로 소셜 미디어와 온라인 미디어를 활용하는 전자상거래 사이트이다. 신선한 반찬을 중간 유통과정을 줄여 소비자에게 적당한 가격과 좋은 품질로 제공하고 있으며, 현재 정기 구독 서비스를 진행 할 만큼 성장성이 기대되는 회사이기도 하다.

<더 반찬 클론 이유👀> 더 반찬을 클론하기로 한 이유는 먼저 UI/UX 요소가 많은 커머스 사이트에서 사용하는 디자인이였고, 이는 곧 회사에서 인재를 채용 할 때 고객 관점에서 사이트를 만들어 보았는가의 핵심이라고 생각했다. 또한 아직 공부를 하는 입장에서 어려운 기능을 구현하는 것보다 기초 베이스를 최대한 활용할 수 있는 단계의 사이트를 구현해보는 경험이 필요하다고 생각했다.

✔ 사용한 기술 스택 🐶 FrontEnd -javscript -react -html -scss -css 🐼 BackEnd -python -django -Bcrypt -Jwt -Mysql

담당역할: Category Page 레이아웃 제작 및 기능구현😎

1단계: React를 이용하여 페이지 레이아웃과 nav바 제작

2단계: Category nav바 기능구현 및 Pagination 적용

3단계: 백엔드와 통신완료 및 팀원들과의 충돌해결✨

✔완성된 Categoey 페이지

1차 프로젝트 후 배운 점😁

:: CRA & Router

• CRA를 이용하여 프로젝트 초기 세팅을 혼자서도 어느 정도 할 수 있다.
• Routes.js에 라우트를 추가할 수 있다.

:: React

• Pages, Components의 차이점을 알고 어디에 어떤 컴포넌트를 만들어야 하는지 안다.
• event handler를 정의해서 특정 이벤트에 부여할 수 있다.
• 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지 알고 있다.
• map 메서드를 사용, jsx 리턴하여 목록을 구현할 수 있다.
• fetch나 axios를 사용하여 백앤드 api를 호출하고, 응답받은 데이터를 활용하여 화면을 그려줄 수 있다.
• 로그인 사용자의 token을 왜 localStorage에 저장 하는지 설명할 수 있다.
• children 개념을 이용하여 컴포넌트를 재사용 할 수 있다.
• query string이나, path로 동적 라우팅을 구현할 수 있다.

:: SCSS

• scss를 왜 사용하는지 이해하고 있다.
• nesting 기능을 활용하여 스티일링을 구성할 수 있다.
• scss 의 variable / extend / mixin / & 등 여러기능을 자유자재로 사용할 수 있다.

프로젝트를 하면서 가장 마음에 들었던 코드🙏

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import LeftSortBox from './Component/LeftSortBox';
import RightSortBox from './Component/RightSortBox';
import Product from './Component/Product';
import { API } from '../../config';
import './Category.scss';
import Nav from '../Nav/Nav';
import NavCategory from '../Nav/NavCategory';
const LIMIT = 8;

class Category extends Component {
  constructor() {
    super();
    this.state = {
      display: false,
      productBoxData: [],
    };
  }

  componentDidMount() {
    this.getAllCategoriesData();
  }

  getAllCategoriesData = () => {
    fetch(`${API}/products?category=소`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          productBoxData: data.result,
        });
      });
  };

  handleClick = id => {
    const offset = 2;
    const query = `limit=${LIMIT}&offset=${offset}`;
    fetch(`${API}/products?sub_category=${id}&&${query}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          productBoxData: data.result,
        });
      });
  };

  clickHandler = filter => {
    fetch(`${API}/products/filter?category=소&filter=${filter}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          productBoxData: data.result,
        });
      });
  };

  sortHandler = () => {
    this.setState({ display: !this.state.display });
  };

  basketHandler = e => {
    fetch(`${API}/orders/cart`, {
      method: 'POST',
      body: JSON.stringify({
        user_id: 1,
        quantity: 1,
        id: e.target.id,
      }),
    })
      .then(res => res.json())
      .then(error => console.log(error));
  };

  render() {
    const { productBoxData } = this.state;
    return (
      <div className="category">
        <Nav />
        <NavCategory />
        <div className="categoryListWrap">
          <div className="categoryPageTitle">
            <div className="categoryTitle">
              <img src="/images/meatimg/cow.jpg" alt="cow img" />
            </div>
            <div className="sortBox">
              <div className="leftcategoryType">
                <ul className="categoryType">
                  {LeftSortBox.map((category, idx) => (
                    <li
                      className="categoryInner"
                      key={idx}
                      onClick={() =>
                        idx === 0
                          ? this.getAllCategoriesData()
                          : this.handleClick(category.name)
                      }
                    >
                      <span>{category.name}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="lightCategoryTypeActive">
                <button className="rightSortText" onClick={this.sortHandler}>
                  인기순&nbsp;
                  <i className="fas fa-chevron-down"></i>
                </button>
                {this.state.display && (
                  <ul className="categorySort">
                    {RightSortBox.map((category, id) => {
                      return (
                        <li
                          className=""
                          key={id}
                          onClick={() => this.clickHandler(category.filter)}
                        >
                          {category.filter}
                        </li>
                      );
                    })}
                  </ul>
                )}
              </div>
            </div>
          </div>
        </div>
        <div className="productBody">
          {productBoxData.map((data, idx) => {
            return (
              <Product
                basketHandler={this.basketHandler}
                id={data.id}
                key={idx}
                data={data}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

export default withRouter(Category);

이제는 map함수를 완벽히 이해했고, Product의 컴포넌트를 ProductBox, ProductCart, ProductImg, ProductTag, ProductText로 나누어 재활용 할 수 있게 된 점이 가장 성장한 부분이라고 느꼈다. 처음에는 state와 setState를 이용한 자식 컴포넌트 관리에 어지러움을 느꼈었는데 어느정도 개념이 잡힌 것 같아 다음 프로젝트엔 더 잘 활용할 수 있을 것 같다. 페이지네이션 개념과 동적 라우팅으로 nav의 기능구현을 할 때 React의 개념도 잡고 Git을 이용한 협업 능력이 향상된 걸 몸소 느낀 잊지못할 1차 프로젝트였다😎

<1차 프로젝트 느낀점🤗>

너무나도 좋은 분들을 만나 2주동안 서로가 배려하고 아껴주는 게 느껴져서 다음 프로젝트에 헤어지는 게 아쉬울 정도였다😢 코딩에 대한 이해도가 높아 배울점이 많고, 다른 팀원들을 항상 도와주면서 잘 웃어주던 민석님, 더 나은 사람이 되고 싶다며 솔선수범으로 팀원들을 배려해주는 재영님, 어디를 가든 사람들에게 긍정적인 에너지를 주고 프론트와 소통하기 위해 자주 찾아오고 말해주던 지원님, 묵묵히 팀원들을 뒤에서 챙겨주고 자신의 일을 끝까지 책임지고 해내는 동헌님, 언제나 프론트를 배려해서 데이터를 구상해주시고 사람이 참 좋다!라는 생각이 드는 서준님😊

힘들어도 함께여서 좋았고, 모두들 서로에게 도움이 되기 위해 노력했던 2주간의 시간은 개발자로서 어떤 팀원이 되어야하는지 배우는 소중한 시간이었다. 내가 느꼈던 행복감과 유대감을 같은 팀원들도 느꼈다고 확신하기에 앞으로도 겸손하고 서로에게 배울점을 찾는 사람 좋은 개발자가 되고 싶다. (모두들 너무 감사했고 The Meet팀 수고 많으셨습니다 우리 다시 만나요!!(❁´◡`❁))

Pagination(Paging)이란? 백엔드에서 가지고 있는 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용하는 것으로 일정 길이로 끊어서 전달한다. ex) 흔히 인스타에 피드를 내리다보면 보이는 로딩이 이러한 경우이다.

백엔드와 미리 정해야하는 Limit과 Offset🐒

출처: 위코드 수업 limit = 한 페이지에 보여줄 데이터 offset = 데이터가 시작하는 위치

프론트엔드에서 offset은 변하는 값이고 limit은 상수로 정해서, ex) const limit = 10을 정해주고 offset은 클릭할때마다 새로운 offset으로 업데이트 시켜주면 된다!

Pagination은 프론트엔드, 백엔드 양쪽에서 모두 알아야 한다. 왜냐하면 위와 같이 데이터를 얼마나 자를지 얼마나 보여줄지를 서로 상의해야하기 때문이다.

위코드 1차 프로젝트 기능구현 중 가장 인상 깊었던 기능은 역시 페이지네이션이였던 것 같다. 쿼리 스트링을 이용하고 limit과 offset에 대한 개념이 없었을 첫 프로젝트에 당연히도 이를 미리 정하지 않아서 처음엔 당황했지만.. 역시 방법은 있었기에 페이지 네이션으로 원하는 데이터를 잘라서 받을 수 있었다!💪

React 어렵다! 그런데 재밌다!😎

반복되는 코드들이 분명 있는데 그 부분을 캐치하는 눈을 기르는 순간 코딩을 하는 재미가 있달까? 하지만 처음엔 당연히 애매모호한 기분과 어디가 어디인지 모르는 황량한 사막 한 가운데이 있는 기분이 든다.

✨중요한 건 다른 사람의 코드를 많이 읽어보고 위코드에서 제공해주는 노션 페이지를 자주 읽어봐야한다는 점이다.

*직접 코드를 작성하고 코드를 읽는 작업이 도움이 되었다🙏 * 나 역시도 개념이 부족하다고 생각하여 React 공식문서를 찾아 개념 공부를 다시 하려고 했지만 오히려 이해하기가 더 어려웠다.

그러니 다 이해할 수 있다는 욕심을 내려놓고 천천히 읽어보고, 자주 따라 쳐보고, 데이터가 잘 들어왔는지 console.log()도 많이 쳐보면서 눈에 익힌다는 기분으로 접근하는 걸 추천한다!👍

reduce.((a,b) => a+b); 배열의 모든 값 더하기 reduce((a,b) => a-b); 배열의 모든 값 빼기

parseInt() 문자열을 정수로 바꾸는 함수

splice 사진 자료 출처: https://hianna.tistory.com/396

split: String.prototype.split() split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' '); console.log(words[3]); // expected output: "fox"

const chars = str.split(''); console.log(chars[8]); // expected output: "k"

const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over the lazy dog."]

<불변성을 위해 알면 좋은 것>

1. React.PureComponent

class Pure extends React.PureComponent {
    render()
         return <div>{this.props.message}</div>;
     }
 }

변경되는 데이터가 모두 원시값이거나 불변성을 보장할 수 있다면 React.PureComponent를 사용할 수 있다.

참고 사이트🙏: 렌더링: https://medium.com/vingle-tech-blog/react-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f255d6569849 리터럴: https://asfirstalways.tistory.com/21

1. 주제 React.js를 사용한 Instagram clone CRA를 사용한 초기 세팅 4명의 팀원들이 공동 component, scss 사용 및 관리 git을 사용한 첫 번째 협업

2. 기간 2021.03.29~2021.04.07

3. 적용 기술 HTML,CSS JavaScript(ES6+) React.js SCSS Git

4. 주요 기능

• 로그인, 메인 페이지 레이아웃
• id, pw 입력 시 로그인 버튼 활성화 기능 => 아이디: "@"포함 8글자 이상, 비밀번호: 8글자 이상
• 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능

로그인 페이지🐾

✔️ Westagram페이지를 react로 구현하면서 많은 시행착오를 겪었다. 수많은 에러 메세지를 보면서 하나하나 천천히 뜯어보던 한 주 동안의 시간이 주마등 처럼 지나가고 인스타그램을 클론한 게 너무 신기했다.

<React로 구현한 로그인 페이지>

이메일과 비밀번호를 작성 시 로그인에 버튼 색깔이 들어간다. 이메일의 경우 "@"가 들어가야하고 이메일, 비밀번호 8자 이상 작성해야 버튼에 색깔이 들어오도록 구현했다.👍

이 과정에서 React와 기존 방식인 DOM으로 javascript를 작성하던 방식의 차이를 체감했고, 더 간결하면서도 코드를 읽는 가독성을 높여주었다.

특히나 handleIdInput와 handlePwInputdml 중복 값을 어떻게 더 줄일 수 있을까 동기와 고민하던 시간이 큰 도움이 되었다.

⏰인상 깊었던 Refactoring Check Time⏰

// 처음 코드
handleIdInput = (event) => {
    this.setState({
      idInputValue: `${event.target.value}`,
    });
  };

  handlePwInput = (event) => {
    this.setState({
      pwInputValue: `${event.target.value}`,
    }); 
  };
  ------------------------------------------
  // 두 번째 코드
   handleInput = (e) => {
    const{ className } = e.target;
    const { value } =e.target;
    className === "email_password"
      ? this.setState({
        idInputValue: value,
      })
      :this.setState({
        pwInputValue: value,
      });
  }

• 비구조화 할당을 통해 긴 코드를 간결하게 쓸 수 있었다. React를 사용해 볼 수록 react는 중복되는 값들을 재사용할 수 있게 만든다는 것에 있다는 생각이 들었다.

• 가독성 부분에서도 중복되는 값을 줄여서 한 결 편안하고 깔끔하게 정리할 수 있었다. 코드를 작성해보고 줄일 수 있는 값들은 줄이면서 가독성을 높이는 데 집중하는 시간이 필요한 것 같다.

팀 작업 느낀점🌷

CRA초기 세팅시간에 단비님, 주영님, 새미님과 함께 common,reset.scss를 작성하면서 구글 폰트와 폰트어썸 링크, 버튼 색 변수 지정, 레이아웃을 공유 하면서 어떤 부분을 함께할지 공유하였다. 이야기를 나누면 나눌수록 '협업을 한다는 게 이런 기분이구나'를 알게 되어 좋았다🙌 가장 좋아했던 시간은 서로의 코드를 리뷰해주는 시간이었다. 람마다 성격이 다르듯이 코딩도 스타일이 다 다르기 때문에 많은 코드를 읽어보면 각자의 스타일이 보여서 재미있었다. 이런 방식도 사용할 수 있구나!하는 생각의 폭이 넓어지는 기분이었다👍

혼자서 git commit을 할 때는 github에 저장한다는 느낌만 들었는데 팀과 함께 master을 두고 각자의 branch를 만들고 VS터미널로만 git add ., commit -m"", push를 하는 과정에서 막연히 두려웠던 터미널 사용법에 재미도 들고 다른 사람들의 활동 기록들도 공유할 수 있어서 참신하다는 생각이 들었다. (어떻게 이런 효율적인 프로세스를 생각한 걸까?🤔) 짧은 시간이었지만 팀으로 작업하면 할 수록 코딩이 더 살아난다는 기분이 들었다🙏

대망의 백엔드와의 통신의 날🤸‍♀️

🎉What You Will Learn

✔️ 브라우저에서 로그인 관리를 할 수 있다. ✔️ 프론트와 백앤드의 통신을 구체적으로 이해한다. ✔️ 코드를 직접 치기 전에 POST MAN 을 사용해서 백앤드 api 호출 테스트를 해볼 수 있다. ✔️ access token과 JWT의 개념을 이해하고 말로 설명할 수 있다. ✔️ access token을 왜 사용해야하는지 알고, 프론트에서 어떻게 관리하는지 안다.

성공적으로 로그인Page에서 백엔드와의 api를 호출한 화면🤞 우측 개발자도구 하단에 console.log로 MESSAGE와 Token 출력, 로그인 실패 시: 1. 이메일, 비밀번호 값이 맞지 않을 때 2. 회원정보가 불일치 할 때 3. 백엔드와 키가 맞지 않을 때: 로그인 성공 시: 토큰도 잘 출력되었다 흐-뭇👏 토큰 저장 확인:

백엔드와의 첫 API통신 느낀점🎉

백엔드 개발자인 윤형님과 하나하나 통신이 될 때마다 박수를 쳤다😎👏👏 코딩으로 화합을 한다면 이런 기분인건가 느낀 소중한 날이었다. 개발자는 혼자가 아니라 여럿이해야 기쁨이 배가 되는 것 같다. 내가 만든 사이트에 데이터가 출력되는 기쁨은 해보지 않으면 모를 것 같다. 위코드 생활 3주차 체력적으로 힘듦은 있지만 후회하지 않는다고 확신한다.

Westagram 작은 프로젝트였지만 다음 프로젝트에 기본을 다져주는 소중한 시간이었다🙏

slice는 slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

• slice예제

  let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
  let citrus = fruits.slice(1, 3)
  // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
  // citrus contains ['Orange','Lemon']

split

split() 메서드는 문자열을 배열로 만들어 반환함.

• split 예제

  const str = 'The quick brown fox jumps over the lazy dog.';
  const words = str.split(' ');
  console.log(words[3]);
  // expected output: "fox"
  const chars = str.split('');
  console.log(chars[8]);
  // expected output: "k"
  const strCopy = str.split();
  console.log(strCopy);
  // expected output: Array ["The quick brown fox jumps over the lazy dog."]

join

join() 메서드는 원소를 모두 붙여 문자열로 반환합니다.

• join의 예제

  var a = ['바람', '비', '불'];
  var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
  var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
  var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
  var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

toString

toString() 메서드는 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다.

• toString()예제

  const array1 = [1, 2, 'a', '1a'];
  console.log(array1.toString());
  // expected output: "1,2,a,1a"

wecode에서 오전 10시 ~ 11시는 Code Kata시간을 보내고 있다. react 진도에 급급해서 약간 붕 뜬 기분으로 javascript문법을 공부하던 중 같은 팀이 된 종호님 덕분에 어떤 태도로 문제를 생각하고 대해야하는지 배우게 되었다🙏 (정말 wecode 19기 기수분들, 멘토분들 한 분 한 분에게 배울 점들도 많고, 열심히 공부하는 분위기가 너무나도 좋다😍)

<열심히 종이에 적어가며 공부한 흔적📕>

갓종호님의 추천 알고리즘 문제 접근 순서⏰

1. 먼저 문제를 정확하게 집중력있게 읽고 머릿속으로 어떻게 풀릴지 생각해 본다.

2. 머릿속으로 생각한 결과를 종이에다가 끄적여 본다. (바로 코딩해보는 건 NO NO~❌)

3. 로직이 맞는거 같으면 연필로 더 구체화해 본다.(종이에다 코딩문법 작성)

4. 이제! 코드를 컴퓨터에 구현해 본다. 여기서 중요한 점은 어려운 문법보다는 아는 게 적더라도 기본 문법으로 작성해 본다. (배열, 객체, for문, if문 등...)

5. 작성한 코드 중간 중간 console.log로 값이 잘 들어왔는지 확인해 본다😎 이 과정에서 중요한 건 내가 종이에 쓴 로직 값과 비교해서 스스로 수정이 가능하다! (스스로 작성한 로직과 값을 비교하며 수정하는 과정이 무척 무척이나!! 중요하다고 갓종호님이 말해주셨다!)

6. 위의 과정을 반복하면 50%~100%의 확률의 정답률과 성장할 수 있다!

+)위의 문제뿐만 아니라 해당 문제와 유사한 문제들을 구글링을 통해 다양하게 풀어보는 것도 추천하셨다! 검색어) 000 테스트 케이스

처음에는 알고리즘적인 사고를 하기 쉽지 않기 때문에 조용한 곳에서 (몰입할 수 있는 장소에서) 한 시간 이상 고민해보는 걸 추천한다👍 필자의 경우 매일 저녁 잠들기 전에 문제를 고민해보는 시간을 가지기로 다짐했다🔥

고민하는 시간도 정답을 맞추는 시간도 너무나도 재미있고 뿌듯한 과정인 것 같다. 공부하면 할 수록 개발자라는 직업은 참 매력적이라는 생각이든다. 과제 속도에 조금 조급했지만, 앞으로도 블로그에 내 생각을 더 담고 차근차근 나아가더라도 하루에 1%씩 성장한다는 마음으로 꾸준히 노력해야겠다!

알고리즘에 강하고 REACT에도 강한 개발 마스터가 되자! 화이팅🥰🎉

const str = 'Hello' + ' ' + 'world';

document.writeln(str); // Hello world

결과: Hello world**

2. concat() 함수

const result = 'Hello'.concat(' ', 'world', '!');

document.write(result); // Hello world!

결과: Hello world**

3.join() 함수

const str1 = ['Hello', 'world'].join();
const str2 = ['Hello', 'world'].join('🔥');

document.write(str1);
document.write('<br>');
document.write(str2);

Hello,world Hello🔥world

로마자에서 숫자로 바꾸기

1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900

<해결 방안🌸>

function romanToNum(s){ const numTable = { 'I':1, 'V':5, 'X':10, 'L':50, 'C':100, 'D':500, 'M':1000 } let sum = 0; for(i=0; i<s.length; i++){ if(numTable[s[i]]<numTable[s[i+1]]){ sum = sum - numTable[s[i]] console.log(sum); // 결과 값: -1 }else{ sum = sum + numTable[s[i]] console.log(sum); // 결과 값: 9 } } return sum } romanToNum('IX'); //결과 값: 9

reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.

x: 숫자 return: 뒤집어진 숫자를 반환!

예들 들어, x: 1234 return: 4321

x: -1234 return: -4321

x: 1230 return: 321

const reverse = x => {
  stringNum = x.toString().split('').reverse()
  if(x < 0){
    stringNum.pop();
    stringNum.unshift('-');
  } return Number(stringNum.join(''))
}
console.log(reverse(-1234))

module.exports = { reverse };

if문에서 if(string[string.length-1] === '-') 대신해서 x<0보다 작다를 넣어보니 결과값이 같았다!🙏

아래 설명을 읽고 getExamResult 함수를 구현하세요.

인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.

• 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'

{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.

1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

   • A+ => 4.5
   • A => 4
   • B+ => 3.5
   • B => 3
   • C+ => 2.5
   • C => 2
   • D+ => 1.5
   • D => 1
   • F => 0

2. requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다. 위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체과 리턴됩니다. 요소간 순서는 다를수 있지만, 채점에 무관합니다.

    {
      '생활속의회계': 2,
      '논리적글쓰기': 3,
      '독일문화의이해': 3.5,
      '기초수학': 1.5,
      '영어회화': 2.5,
      '인지발달심리학': 4.5,
      '공학수학': 0,
      '컴퓨터과학개론': 0,
    }

   <문제풀이 과정>

여기서 requiredClasses의 과목들과 scores과목들을 합치는 과정을 이해하는게 중요했다. for문에서 requiredClasses[i]로 반복하면서 점수가 0인 값들도 result[key]에 넣어줌으로써 모든 과목들이 들어갈 수 있었다! 재미있는 개발생활👍👍🔥

>Assignment👍

-addFirstAndLast 함수를 작성해주세요. -addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다. -addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요. -만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.

<작성한 코드>

<결과>

기대한 값이 7이고 반환된 값이 14라고해서 무척이나 당황했다ㅠㅠ 어디서 에러가 났는지도 못찾던 상황에서 Array의 순서를 바꿔보았다.

일반적인 상황을 맨 마지막에 두고 예외적인 상황부터 차근차근 다시 넣어보았다😉

<재작성한 코드>

function addFirstAndLast(myArray) {
  if(myArray.length === 1){
    return myArray[0];
  }
  else if(myArray.length === 0){
    return 0;
  }
  else if(myArray.length){
    return myArray[0]+myArray[myArray.length-1];
  }
}

<결과>

역시 순서가 틀렸던 것이다....😭 30분 이상을 고생한 결과 이제는 코드를 짤 때 순서를 우선적으로 고려해야한다는 것을 깨닫는 소중한 시간이었다😎

어렵지만 재미있는 코드생활인 것 같다🌷

사용한 도구 : Aquery ERD tools (가입 필수)

먼저 데이터 중심을 생각해가며 데이터 구조를 잡아보았다👍 중심으로 product(음료)로 잡고 데이터 구성을 만들어갔다.

PK(Primary Key) : PK는 테이블에서 오직 한개만 존재할 수 있으며, 유일성을 보장한다고 생각하면 된다. FK(Foreign Key) 둘을 나누는 이유는 데이터의 중복을 최소화 하기 위해서다! 우유가 들어가는 커피 종류가 많으면 우유를 FK로 생각하면 편하다!

여기서 헷갈렸던 방향 개념을 PK는 고유의 번호를 가진 Id(INT)로 PK이는 받는 데이터, FK는 주는 데이터라고 생각하면 좀 더 편하다.

데이터 타입은 Id의 경우 INT 문자나 이미지의 경우 VARCHAR를 사용했다. (길이가 변할 수 있는 값은 VARCHAR를 사용하자!)

<결과>

• Console 패널의 기능은? = 자바스크립트가 돌아가는 환경을 보여준다. 자바스크립트를 입력했을 때 브라우저에서 바로바로 확인할 수 있도록 해준다.

• 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은? = 콘솔 설정에서 Preserve log를 체크해주면 된다.

• 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?

  = console.clear(); OR clear(); 화면을 새로고침하면 기존의 선언된 변수는 초기화 된다. 하지만 clear을 사용할 경우 기존에 선언된 변수는 남아있고, console창에 기록들만 사라진다.

• 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은? = 콘솔 설정에 있는 Default levels 에서 Warnings, Errors체크를 해제하면 된다.

  

• 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

  = esc를 누르면 밑에 console창을 올리거나 내릴 수 있다🙌

<내가 원하는 모습>

<지금 내 모습>

왼쪽 상단을 보면 이미지가 매우 작게 있다🤔 아니 난 너를 건들적이 없는데 왜....??

문제를 해결하기 위해 구글링을 해보기로 했다!😄🙏

🤸‍♀️위의 문제를 해결하기 위해 먼저 구글 검사를 시도해보았다🤸‍♀️

구글 검사요소로 확인해보고 width: 600px을 추가해서 크기를 키워주기로 했다!🔥

결국 width값과 padding-left로 중앙으로 갔지만 코드가 예쁘다는 생각이 들지 않아서 다른 방법을 모색해보았다!

그런데 개념적으로 img는 block요소인 줄 알았는데 inline요소라는 걸 알게되서 text-align: center;로 손쉽게 중앙으로 옮길 수 있었다....

기초 개념을 단단히 잡아야겠다!!😭

결과물 뿌듯하다!!!🎉🌷😉

시맨틱 웹 은 "의미론적인 웹"으로 기계가 의미(Semantic)를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.

Q. 두 예시 중 검색엔진에서 웹 문서의 중요한 제목으로 인식되는 것은?

<!--예시 1-->
<font size="10"><b>Semantic Web</b></font>

<!--예시 2-->
<h1>Semantic Web</h1>

A. 컴퓨터가 인식하는 언어는 2번째입니다.

예시 1의 요소는 의도가 명확하지 않은데 비해, 예시2는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소를 나타냅니다.

코드의 가독성이 높고 유지보수에도 용이합니다.

Semantic Tag👩

브라우저,검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 의미합니다.

HTML 요소는 non-semantic 요소와 semantic 요소로 구분할 수 있습니다.

• *non-semantic 요소: *div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.

• *semantic 요소: *form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

Semantic Elements

• section  문서에서 세션을 정의할 때 사용합니다.
• header  헤더
• nav  내비게이션
• aside  사이드에 위치하는 공간을 의미
• article  본문의 주 내용이 들어가는 공간 의미
• footer footer

Q. "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것, div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

- img 태그를 사용하는 경우😎

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

//img태그의 경우 가장 많이 사용되며,  html에서 <img> 태그로 이미지를 생성합니다.

- background-image를 사용하는 경우😁

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/
thumb/6/61/HTML5_logo_and_wordmark.
svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
//태그가 아니라 css를 이용해 이미지를 생성하는 것입니다

-차이점- img 태그에는 alt="" 로 이미지에 대한 설명을 넣을 수 있어 SEO에 노출되는 용도로 사용이 가능합니다. 그에 반해 background-image는 이미지에 대한 정보를 가지고 있지 않습니다. ** 의미가 있는(ex) 글과 함께 있어야 하는 관련된 이미지라면 **img 태그를 사용하고 background-image는 순전히 '장식'으로 할 때 사용하는 것이 좋습니다.