art-it.log https://velog.io/ 좌충우돌 개발 일기 Sun, 23 Jan 2022 14:06:50 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed art-it.log https://images.velog.io/images/art-it/profile/e96b165a-5f5f-42a3-9f26-8a79bd3b8ed3/png-transparent-snoopy-illustration-snoopy-joe-cool-charlie-brown-wood-drawing-cartoon-wearing-sunglasses-snoop-puppy-cartoon-character-animals-hand.png https://velog.io/ Copyright (C) 2019. art-it.log. All rights reserved. <![CDATA[2022.01.23]]> https://velog.io/@art-it/2022.01.23 https://velog.io/@art-it/2022.01.23 Sun, 23 Jan 2022 14:06:50 GMT fact
  • 늦잠을 잤다.
  • 식물들 물을 갈아주었다.
  • 빨래를 돌렸다
  • 산책을 다녀왔다.
  • 반응형 포트폴리오 사이트를 일부 개발했다.

feeling

  • 몸살기운이 남아있어서 하루종일 처진 기분이였다.
  • 그래도 해야할일들을 몇가지 끝내서 기분이 나아졌다.

Findings

  • 깃허브 페이지 배포하는 방법을 알아보고, 진행된 결과를 배포했다.
  • postcss 설정하는 방법을 찾아 적용했다.
  • postcss에서 변수사용하는 방법을 알아보고 사용했다.
  • useRef를 이용하여 페이지 스크롤링을 구현했다.
  • 반응형 웹페이지를 만들기 위해 태크닉들을 찾아 공부하고 적용했다.

Affirmation

  • 포트폴리오 웹사이트를 만들겠다. (반응형으로)

오늘 목표 했던 것

포트폴리오 웹사이트를 만들겠다. TIL 작성

내일의 목표

TIL작성 포트폴리오 웹사이트 만들기 운동다녀오기. 건강검진 잘 받고 오기

]]> <![CDATA[2022.01.22]]> https://velog.io/@art-it/2022.01.22 https://velog.io/@art-it/2022.01.22 Sat, 22 Jan 2022 10:17:33 GMT fact

  • 몸살기운이 있었다.

feeling

  • 축 처진기분이이였다.
  • 포트폴리오 웹사이트를 가볍게 만들어보고 싶어졌다.

Findings

  • .classList.toggle('active'); 활용법을 배웠다.
  • 미디어쿼리와 css변수사용을 익혔다.

Affirmation 포트폴리오 웹사이트를 만들겠다. (반응형으로)

오늘 목표 했던 것 완성한 유투브 클론에서 css 변수를 적용하겠다. 또한 js를 추가하여 동적인 요소를 추가하겠다. TIL 작성 드림코딩 유튜브 강의 하나 따라하기.

내일의 목표 TIL작성 포트폴리오 웹사이트 만들기

]]> <![CDATA[2022.02.21]]> https://velog.io/@art-it/2022.02.21 https://velog.io/@art-it/2022.02.21 Fri, 21 Jan 2022 10:20:16 GMT fact

  • 운동을 두번 다녀옴.
  • 추가로 8000보 이상 걸었다.
  • html & css 유투브 클론 미션을 끝냈다.

feeling

  • 오늘은 기분이 안정적이고 평안했다.

Findings

Affirmation

  • 완성한 유투브 클론에서 css 변수를 적용하겠다.
  • 또한 js를 추가하여 동적인 요소를 추가하겠다.

오늘 목표 했던 것

  • 유튜브 클론 완성
  • TIL작성

내일의 목표

  • 유튜브 클론 업그레이드
  • TIL 작성
  • 드림코딩 유튜브 강의 하나 따라하기.
]]> <![CDATA[TIL + 일일 회고 양식]]> https://velog.io/@art-it/TIL-%EC%9D%BC%EC%9D%BC-%ED%9A%8C%EA%B3%A0-%EC%96%91%EC%8B%9D https://velog.io/@art-it/TIL-%EC%9D%BC%EC%9D%BC-%ED%9A%8C%EA%B3%A0-%EC%96%91%EC%8B%9D Thu, 20 Jan 2022 07:46:06 GMT 회고의 목적 :  하루를 어떻게 썼는지 기록하고, 하고자 했던 것들을 성취하기 위해 쓴다.

fact // 하루의 사건사고, 나의 행동등을  간략하게 적는다. // 의미있어 기록이 필요한 경우 몇줄 더 쓴다. 

feeling // 오늘 하루 든 생각, 기분 중 기억하고 싶은 중요한 것만 서술한다.   Findings  //공부한것 위주로 정리한다. // 길게 정리할경우 새로운 포스트를 작성하고 링크 처리한다.  

Affirmation // 오늘의 경험으로 앞으로 방향을 업데이트 하기 위함이다. // 하고자 하는 일을 선언한다.   

오늘 목표 했던 것   내일의 목표 

]]> <![CDATA[2022.01.20]]> https://velog.io/@art-it/2022.01.20 https://velog.io/@art-it/2022.01.20 Thu, 20 Jan 2022 07:43:18 GMT fact

  • 건강검진 예약을 했다. 별일 없기를...
  • 온라인 강의를 들었다. 꾸준히 무언가를 한다는 것에서 안도감이 든다.
  • 오늘부터 다시 TIL을 작성하기로 했다. 남기지 않으면 뭘 공부했는지 잘 기억이 안나는 것 같다.

feeling

  • 무기력함을 이겨내고 있다는 느낌이 든다.
  • 어제보다 긍정적인 생각으로 살고 있어 다행이다.   Findings 

드림코딩 타입스크립트 + 객체지향 프로그래밍 마스터 강의 듣는중이다.

  1. throw error는 언제쓰는 것인가? 예치 못한 오류가 발생할 수 있을 때 쓴다. 예상할 수 있는 오류는 ? 오류상태값을 부여해서 더 명확하게 관리하면 좋다.

  2. 에러 핸들링에 대해서 배웠다. try, catch, finally 사용법을 익혔다. 언제 에러를 잡아야 하는가? 에러발생시 의미있는 액션(다이얼로그 팝업같은..)을 하는 곳인지 고민하자.

  3. 에러 이유를 상태값으로 관리하는 것. 네트워크 통신 라이브러리들에서 제공해주는 state값을 살펴보았다. 타입스크립트에서 통신 성공/실패 타입을 나누고, 실패시 어떤 이유로 실패 했는지 이유를 정의하자. 그리고 스위치케이스로 해당 오류를 관리해보자. 잘 이해가 안된다면 노트 8-3-state를 볼 것.

 

Affirmation

  • 개인프로젝트를 진행한다. 컨셉과 구현계획을 상세하게 적었다.
  • 온라인 강의를 꾸준히 듣는다. 그리고 복습한다.

오늘 목표 했던 것

  • 8강 완강.
  • 개인프로젝트 계획 세우기.   내일의 목표 
  • 개인 프로젝트 계획 완료하기
  • 9강 일부 듣기
  • TIL 남기기
]]> <![CDATA[웹프로젝트 기본 설정 (2) index.html과 웹서버 실행]]> https://velog.io/@art-it/%EC%9B%B9%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95-2-index.html%EA%B3%BC-%EC%9B%B9%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89 https://velog.io/@art-it/%EC%9B%B9%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95-2-index.html%EA%B3%BC-%EC%9B%B9%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89 Sun, 03 Oct 2021 08:30:39 GMT 웹프로젝트 기본 설정 (1)에 이어서..

이제 기본적인 웹페이지를 띄워보자.

  1. index.html, main.js 파일 추가 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./main.js"></script>
</head>
<body>

</body>
</html>

index.html에서 main.js를 불러오는 script 태그를 작성해준다.

main.js는 간단한 console.log('test'); 와 같은 내용만 입력했다.

  1. package.json에 스크립트 추가.
  "scripts": {
    "dev" : "parcel index.html",
  },

아래 스크립트 명령어는 parcel-bundler를 통해서 로컬서버에서 index.html을 보여줄수 있게 만든다.

  1. 터미널에서 서버 실행
    npm run dev

내가 작성한 스크립트를 npm run "이름"으로 실행시킨다.

parcel-bundler는 현재 폴더내 프로젝트에서만 설치 되어있기 때문에, 스크립트를 통해 실행 시킬 수 있다.

출력된 주소(http://localhost:1234)로, 브라우저에서 접속해보면 index.html 페이지를 볼 수 있다.

현재는 작성한 내용이 없어서 흰화면만 나올 것이다. 대신, 크롬브라우저>검사> 콘솔 탭에서 이전에 작성한 main.js에 console.log가 실행 되었는지 확인 할 수 있다.

]]> <![CDATA[웹프로젝트 기본 설정 (1) Npm init & 모듈 설치]]> https://velog.io/@art-it/Npm-init-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98 https://velog.io/@art-it/Npm-init-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98 Sun, 03 Oct 2021 08:13:41 GMT 이전에 설치한 node.js와 npm을 통해 웹 프로젝트 기본 환경 설정을 해야한다.

보통은 첫 리액트 프로젝트를 시작할 때, create-react-app을 통해서 이미 셋팅된 환경을 이용하기도 한다.

  1. 프로젝트 정보를 default로 설정할 때
    npm init -y
  2. 생성된 package.json 확인
// -y를 할 경우 기본값으로 셋팅됨
기본값은 아래와 같다.
{
  "name": "nodetest", //프로젝트의 이름(폴더명이 기본값)
  "version": "1.0.0", //버전
  "description": "", // 프로젝트 설명
  "main": "index.js", //모듈제작시 필요한 옵션 (web프로젝트에서는 삭제해도 무방)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }, // 현재 프로젝트에서 사용할 수 있는 스크립트 명령들 작성하기
  "keywords": [],
  "author": "", // 제작자명
  "license": "ISC" // 라이센스
}

가장 기본적인 프로젝트 설정이 끝났다. 이제부터는 필요한 모듈러들을 설치하면 된다.

  • parcel : 웹 애플리케이션 번들러 설치

    npm i parcel-bundler -D
//개발용 의존성 패키지로 설치 (개발할 때만 사용하는 모듈)

  • lodash 설치

    npm i lodash -D
//일반 의존성 설치 (웹브라우저에서 동작시 필요한 모듈이란 의미)

node_modules폴더가 생기고 여러 모듈들이 추가 된 것을 확인할 수 있다. (parcel과 lodash의 의존성 모듈러들이 함께 설치가 되었다.)

]]> <![CDATA[node.js 설치하기]]> https://velog.io/@art-it/node.js-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 https://velog.io/@art-it/node.js-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 Sun, 03 Oct 2021 07:15:55 GMT javascript언어는 브라우저와 node.js가 설치된 컴퓨터에서 스크립트를 실행할 수 있다.

react로 웹 개발을 시작할 때, 여러 라이브러리와 babel과 같은 웹모듈러를 설치하기 위해 node.js가 필요하다.

node.js를 설치할 때, 공식홈페이지에서 바로 다운받아 설치하기 보다는 NVM을 통해 설치하면 버전 관리에 용이하다.

설치 순서

1) NVM 설치 (노드 버전 관리 프로그램) https://github.com/nvm-sh/nvm

2) NVM을 통해 원하는 node 버전 설치하기

명령어 정리

nvm install 14 //14정식릴리즈 버전 설치
nvm uninstall 12.21.0 // 특정버전 삭제
nvm use 12 // 12버전을 사용하려 할 때 
nvm ls //현재 설치된 node버전 확인
nvm --help // 도움말

3) 설치된 노드버전 확인

node --version

4) 함께 설치된 npm (노드 패키지 관리 프로그램)을 통해서 필요한 모듈, 패키지 이용하기!

https://www.npmjs.com/ npm 공홈에서 필요한 모듈을 검색해서 사용해 보자.

]]> <![CDATA[React - 타이틀 & 탭 아이콘 (favicon) 변경 + 즐겨찾기]]> https://velog.io/@art-it/React-%ED%83%80%EC%9D%B4%ED%8B%80-%ED%83%AD-%EC%95%84%EC%9D%B4%EC%BD%98-favicon-%EB%B3%80%EA%B2%BD-%EC%A6%90%EA%B2%A8%EC%B0%BE%EA%B8%B0 https://velog.io/@art-it/React-%ED%83%80%EC%9D%B4%ED%8B%80-%ED%83%AD-%EC%95%84%EC%9D%B4%EC%BD%98-favicon-%EB%B3%80%EA%B2%BD-%EC%A6%90%EA%B2%A8%EC%B0%BE%EA%B8%B0 Fri, 01 Oct 2021 04:12:38 GMT

이미지의 오른쪽 (아마존)웹 사이트를 보면, 주황색 정육면체 아이콘이 보이는데, 이렇게 브라우저 탭에서 보이는 아이콘을 favicon이라고 한다.

웹사이트의 제목과 아이콘(favicon) 설정하는 법

1. 아이콘 만들기

https://www.favicon-generator.org/

1) 위 웹사이트로 접속 2) 아이콘으로 만들 이미지파일 업로드 및 기타 설정 체크

3) create favicon 버튼 클릭

4) 만들어진 아이콘 다운로드

2. index.html 수정하기

index.html에서 두곳만 수정해주면 된다.

1) title 태그에 웹사이트 제목 수정하기. 2) link 태그를 이용해서 rel="icon" href="이미지 경로" 작성하기.

  • rel에 icon뿐만아니라 한칸띄고 "shortcut"을 써주면 즐겨찾기 추가시 보이는 아이콘도 동일한 이미지로 변경된다.
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--1) 제목-->
<title>Demo : 여기에 제목쓰기</title>
<!--2) 탭 아이콘 & 즐겨찾기 아이콘 설정-->
<link rel="shortcut icon" href="./src/imgs/favicon.ico" />  
</head>
<body>
```

적용후 ->

]]> <![CDATA[React Testing Library로 List 요소 찾기]]> https://velog.io/@art-it/get-by-role https://velog.io/@art-it/get-by-role Tue, 28 Sep 2021 09:09:37 GMT 리액트로 웹사이트를 개발하던중, map()함수를 이용해서 동적인 목록을 만들게 되었는데요.

<img url="큰 이미지로 보이는 화면"/>
<ul>
    <li>미리보기 이미지1</li>
    <li>미리보기 이미지2</li>
    <li>미리보기 이미지3</li>
</ul>

li 요소를 클릭하는 테스트 코드를 작성하고 싶은데, li 요소는 react-test-library로 어떻게 찾아야 될까요?

예제 1: 동적인 목록요소를 포함한 컴포넌트

const fruits = ["Bananas", "Apples", "Strawberries", "Grapes", "Oranges"]

function FruitList() {
  return (
    <section>
      <h1 id="fruits-heading">Fruits</h1>
      <ul aria-labelledby="fruits-heading">
        {fruits.map(fruit => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </section>
  )
}

fruits라는 과일이름이 들어있는 array가 있고, FruitList()함수는 과일목록을 포함한 컴포넌트를 리턴해주고 있어요.

예제 2: 목록의 아이템 갯수를 확인하는 테스트 코드

import React from "react"
import { render, screen, within } from "@testing-library/react"

it("should render list of 5 fruits", () => {
  render(<FruitList />)
  const list = screen.getByRole("list", {
    name: /fruits/i,
  })
  const { getAllByRole } = within(list)
  const items = getAllByRole("listitem")
  expect(items.length).toBe(5)
})

이름이 fruits인 list를 찾고, 그 안에서 listitem을 getAllByRole로 찾을 수 있었습니다.

이미 부여된 role을 갖고있는 요소목록은 list of roles을 참고하세요.

더 볼거리

아래 포스트를 통해 방법을 알게 되었는데, 일부를 옮겨왔습니다. Role에 대해서 더 깊이 있는 내용은 아래 포스트를 참고해 주세요. [Testing Lists Items With React Testing Library]

testing library 공식 홈페이지 about queries

  • 더 공부할 것 
    const list = screen.getByRole("list", {
  name: /fruits/i,
})
    ``` list를 찾을 때, 매개변수로 넘기는 오브젝트{} 속 name option 사용법 이해하기. (혹시 잘 알고 계신분 있다면 알려주세요!)
]]>