import axios from 'axios';

프로젝트 하면서 엑시오스를 불러오려는데

다른 파일에서도 멀쩡하게 불러와지던게

보기 싫은 빨간 밑줄이 생겨버렸다

 

이런 오류는 왜 뜨는걸까?!

 

원인은 from 뒤에 있다

 

 

오류 메세지를 보면

 

Absolute imports should come before relative imports. eslint (import/first)

 

=> 절대 경로는 상대 경로보다 이전에 와야만 한다 ESLint (불러오기/ 먼저)

 

절대 경로는 'react' 나 'axios' 처럼 절대적인 경로이고

 

상대 경로는 

'../../components/molecules/TopNavBarSave/TopNavBarSave'

와 같이 현재 파일의 위치로부터 설정된 경로이다

 

 

때문에 이런 오류가 떴다면 현재 위의 상황과 같이 폴더로 된 상대 경로가

엑시오스와 같은 절대 경로보다 위에 있지는 않는지 위치를 확인해보면 된다

 

 

위치를 바꿔주자 간단히 오류가 사라졌다

 

근본적으로 왜그런지 까지는 알 수 없지만 스택오버 플로우에 의하면 ESLint 설정상 법칙인 것 같다

 

https://stackoverflow.com/questions/47734886/why-should-absolute-imports-come-before-relative-imports

 

Why should absolute imports come before relative imports?

I'm importing some resources in my Vue file. The fact that it's Vue, though, have nothing to do with my question, I believe. I import them as such: import Vue from 'vue' import { mapState, mapMut...

stackoverflow.com

It's just an coding convention to make everything cleaner.

공통된 문제 하나씩 풀어와서 서로 설명해주는 오프라인 스터디

문제 풀이 의식의 흐름

먼저 left와 right의 약수의 개수를 구해야하고, 개수가 짝수이면 더하고 홀수이면 빼야한다

 

// 석우님의 풀이
function solution(left, right) {
    
    // 주어진 숫자의 약수를 구해 반환하는 함수
    function 약수(num) {
        const result = [];
        for (let i = 1; i <= num; i++) {
            if(num % i === 0) {
                result.push(i);
            }
        }
        return result;
    }
    
    // left부터 right까지의 숫자 생성
    const 대상 = new Array(right - left + 1).fill().map((number, index) => left + index);
    
    console.log(대상)
    return 대상.reduce((acc, number) => {
        if (약수(number).length % 2 === 0) {
            acc += number;
        } else {
            acc -= number;
        }
        return acc;
    }, 0);
}
// 성진님의 풀이
function solution(left, right) {
    var answer = 0;

    function divisorNum (n){
        let num = 0; 
        for(let i=1; i<= Math.sqrt(n); i++){
            if(n % i === 0 && i === Math.sqrt(n)){
                num += 1
            }
            else if(n % i ===0){
                num += 2
            }
        }
        return num;
    }
    ///// 약수 구해주는 함수 끝          


    for(let i= left; i<= right; i++){
        if(divisorNum(i) % 2 === 0) answer += i
        else if(divisorNum(i) % 2 !== 0) answer -= i
    }
    

    return answer;
}
// 도영님의 풀이
function solution(left, right) {
    var answer = 0;
    const num = right - left + 1 //갯수
    let cnt = 0; //약수의 갯수
    
    for(let i = 0; i < num ; i++){
        for(let j = 1; j <= left; j++){
            if(left % j === 0){
                cnt++ 
            } //left에서 약수의 갯수를 계산
        }
        //약수에 갯수에 따라서 덧셈, 뺄셈을 진행
        cnt % 2 === 0 ? answer += left : answer -= left
        
        //다음 값을 탐색하기 위해 left에 1을 더하고, cnt를 0으로 초기화
        left++
        cnt = 0
    }
    return answer;
}
// 윤정님의 풀이
function solution(left,right){
            let sum = 0;
            for(i=left;i<=right;i++){
            let count=0;
            for(j=1;j<=i;j++){
                if(i%j===0){
                    count++
                }
            }
            if(count%2===0){
                sum += i;
            }else{
                sum-=i;
            }
        }
            return sum
        }
// 민승님의 풀이
function solution(left,right){
var answer = 0;
    for(let i=left;i<=right;i++){
        let count = 0;
        for(let j=1;j<=i;j++){
            if (i%j ===0){
            count++
            } 
        } count%2===0?answer+=i:answer-=i;     

    }

    return answer

 

현상황: 모종의 이유로 프로젝트 폴더 삭제했다가 다시 땡겨온 상황
npm start 에서 오류메세지가 뜸

 

sh: react-scripts: command not found

 

빠른 해결을 위한 해결방법 요약

 

  1. npm start 하는 위치 확인 엉뚱한 디렉토리에서 하고 있는게 아닌지
    (필자는 이부분이 맞았다)
  2. 아니라면 npm install
  3. 다시 npm start
  4. 안된다면 node_modules 폴더 지웠다가 npm install 해보기
  5. npm start

 

처음에 npm install 했을 때

npm audit fix --force 을 하라는 메세지도 같이 나오지만 찾아보니

오히려 이렇게 했을 때 프로젝트가 망가지는 경우도 있다고 하여 일단 후퇴.

 

그리고 혹시나 하여 src가 아닌 전체 프로젝트로 빠져나와 npm start를 해보았는데, 된다!

 

구글링한 해결방법 중 node노드 모듈 폴더를 삭제하고 다시 설치하라는 방법도 있었는데,

노드 모듈 폴더가 src 폴더 바깥에 위치해 있어서 그랬던거 아닐까 싶다 (단지 나의 추측이긴하다)

 

 
 
리액트 스타일 컴포넌트로 프로젝트 중 가상요소를 넣었어야 했다

첫번째로 시도 했을때도 구글링으로 헤메다 물어물어 겨우 했었는데,

두번째 시도때에 똑같은 방법으로 가상요소를 적용하려는데 적용이 되지 않았다

 

바로 그 원인은 요소 자신에게 주느냐, 자식요소에 주느냐에 따라서였는데,

가상요소의 대상이 어딘지에 따라 사용법이 조금씩 달랐다

 

가상요소를 적용하고자 하는 부분이 어느 위치인지 이점을 분명히 알아야 할 필요가 있다

 

1. 부모 스타일 컴포넌트 안에서 특정 자식 클래스 요소에 가상 요소 주는 법

 

첫번째 사례로는 이메일 버튼으로 묶여있는 컴포넌트 안에서

구분선을 추가하기 위해 자식 요소인 클래스들 중 하나에 가상요소를 주고 싶었다

 

<LoginForm>
    <SocialLogin>
        <SocialBtn className='kt'>카카오톡 계정으로 로그인</SocialBtn>
        <SocialBtn className="gg">구글 계정으로 로그인</SocialBtn>
        <SocialBtn className="fb">페이스북 계정으로 로그인</SocialBtn>
    </SocialLogin>
    <EmailDiv className="btnEmailLogin-Join">
        <EmailButton className="btnEmailLogin">이메일로 로그인</EmailButton>
        <EmailButton className="btnJoinLogin">회원가입</EmailButton>
    </EmailDiv>
</LoginForm>

자식 클래스에 가상요소 주는 법

    const EmailDiv = styled.div`
        display: flex;
        padding-top: 20px;
        justify-content: center;
        gap: 32px;
        .btnEmailLogin::after {
            content: '';
            background-color: #C4C4C4;
            width: 0.8px;
            height: 11px;
            position: absolute;
            margin: 5px 22px;
        }
    `;

 

이렇게 부모 스타일 컴포넌트에서 가상요소를 부여할 자식 클래스명으로 가상요소를 부여하였다

 

.자식클래스명::after, before {

    가상요소 속성 입력

}

 

결과 : 구분선 속성을 가상요소로 나타내었다

 

 

2.  스타일 컴포넌트 안에서 클래스 자기자신에 가상 요소 주는 법

 

두번째로 헤맷던 부분은 가상요소를 그안에서 주려고 했을 때였다

앞의 방법과 같이 입력했지만 동작하지 않았고,

자식요소가 아닌 클래스 자기 자신에게 가상요소를 줄때는 다른 방법으로 사용하면 된다는 것을 알게 되었다

                <ChatBoard>
                    <ChatList className="newChat">
                        <ChatProfile />
                        <ChatWrap>
                            <ChatUserName>리듬이</ChatUserName>
                            <ChatPreview>책 주세요</ChatPreview>
                        </ChatWrap>
                        <ChatDate>2022.12.25</ChatDate>
                    </ChatList>
                    <ChatList>
                        <ChatProfile />
                        <ChatWrap>
                            <ChatUserName>뽐내기 좋아하는 사자</ChatUserName>
                            <ChatPreview>모던 자바스크립트 구매원합니다</ChatPreview>
                        </ChatWrap>
                        <ChatDate>2022.12.24</ChatDate>
                    </ChatList>
                        <ChatDate>2022.12.09</ChatDate>
                    </ChatList>
                </ChatBoard>

 

여기서 newChat 이라는 클래스 자체에 가상요소를 주고 싶었다

 

const ChatList = styled.li`
    font-size: 14px;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    &.newChat::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: #c55854;
        top: 75px;
    }
`;

 

이렇게 클래스 명 앞에 . 이 아닌 &.으로 표기해주면 잘 나타난다

 

&.자식클래스명::after, before {

    가상요소 속성 입력

}

 

결과: 새로온 메세지 알림을 임시로 가상요소로 표현해 보았다

 

 

이렇게 가상 요소를 주고자하는 위치에 따른 사용법을 프로젝트를 통해 알게 되었다

새로운 사실을 깨우치는 느낌은 너무 즐겁다!

 

 

리액트로 프로젝트를 하기전 CSS를 제외한 React 구현 연습용으로 초간단한 투두리스트를 만들어 보았다

먼저, 무엇을 만들것인지 생각해본다

 

  1. 인풋 창이 있고 버튼이 있다
  2. 값을 입력하거 추가 버튼을 누르면 아이템이 추가된다
  3. 삭제버튼을 누르면 삭제가 가능하다

 

리액트 할 때 중요한 것은 모든 것을 하나 하나 나눠서 컴포넌트화 시키는 것이다


UI 에서 무엇을 컴포넌트화 시킬지 생각해보는것은 주관적이나,

확실한것은 반복되는것을 컴포넌트화 해야한다


리액트의 매력은 바로 재활용이기 때문이다

지금 우리가 해볼 투두리스트에서 반복되는것은 투두리스트의 아이템들이다
TodoItem 이 모여있는 섹션을 투두보드 TodoBoard 라고 컴포넌트화 시키면 될 듯한다

1.인풋창과 버튼 만들기

main 태그 안에 아래의 코드를 입력한다

 

 <input type="text"/>
<button>추가</button>

 

2.인풋창에 입력한 값 읽는 방법

인풋창의 값이 변화할 때마다 알려주는 onChange Event 를 준다
모든 이벤트 핸들러는 객체 형태로 값을 받는다

 

<input type="text" onChange={(event)=>console.log(event.target.value)}/>

 

인풋창에 변화가 생기면 콘솔로그에 나타날 것이다

 

이렇게

 

인풋창에 텍스트를 입력하고 지우자, 오른쪽 콘솔로그 창에 그대로 이벤트가 출력된다

이 값을 저장햇다가 나중에 아이템으로 저장하면 된다

 

저장하기 위해서는 state 를 사용한다

state를 호출해보자

 

const [inputValue, setInputValue] = useState('');

 

초기값비어있는 문자열이다

 

inputValue 값을 input 에 넣어주고 이제 콘솔로그 자리에 인풋값을 넣어준다

 

<input
    value={inputValue}
    type="text"
    onChange={(event) => console.log(event.target.value)}
/>

 

3.버튼을 클릭하면! 호출할 함수 만들기

버튼에 onClick 이벤트를 준다

 

<button onClick={addItem}>

 

클릭을 했으니 이제 아이템을 추가하자

addItem 이라는 함수도 만들어 준다

 

어디다?! 우리가 이런 데이터들을 모아두려면

어떤 데이터 타입이 제일 어울릴까?

바로, 배열이다!

 

또다시 state를 만든다

 

const [todoList, setTodoList] = useState([]);

 

useState의 타입은 이번엔 빈문자열이 아니라 배열 [ ] 이다

 

setTodoList([...todoList,inputValue])

 

... 으로 기존의 리스트들은 보존하고 새로운 인풋밸류를 가져오게한다

 

이제 이 아이템을 보여줄 투두 보드,

4. 컴포넌트를 만들자

components 폴더를 만든 뒤 TodoBoard.jsx 파일을 생성한다

 

import React from "react";

function TodoBoard() {
  return (
    <div>
      <h1>Todo List</h1>
    </div>
  );
}
export default TodoBoard;

 

이렇게 만든 컴포넌트를 App.js 파일에서 불러온다

 

import React, { useState } from "react";
import "./App.css";
import TodoBoard from "./components/TodoBoard";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todoList, setTodoList] = useState([]);
  const addItem = () => {
    setTodoList([...todoList, inputValue]);
  };

  return (
    <main>
      <input
        value={inputValue}
        type="text"
        onChange={(event) => console.log(event.target.value)}
      />
      <button onClick={addItem}>Add</button>
      <TodoBoard />
    </main>
  );
}

export default App;

 

투두보드안에 투두아이템 컴포넌트가 오게 해야한다

 

투두 아이템 컴포넌트도 만들자

 

import React from "react";

function TodoItem() {

    return (
        <div>
            리액트 공부
        </div>
    )
}

export default TodoItem

 

5. 스타일도 살짝 넣어준다

 

App.css에 가서 투두 아이템을 냅다 꾸며준다

 

.todo-item{
    width: 300px;
    height: 50px;
    border: 1px solid lightblue;
}

 

투두아이템을 클래스 네임으로 넣어준다

(클래스는 클래스 네임으로 사용한다)

 

import React from "react";

function TodoItem() {
  return <div className="todo-item">리액트 공부</div>;
}

export default TodoItem;

 

 

이 아니고 투두리스트에 저장된 아이템들은 어떻게 보여줄 수 있을까?

App.js가 가지고 있는 todoList를 어떻게 Todo Board에 전달하느냐?

 

Props를 사용한다

 

TodoBoard.jsx에 props를 주고

function TodoBoard(props) {

App.js에서도 props를 사용해 투두 보드는 불러온다

<TodoBoard todoList={TodoBoard}/>

 

6. 할일 리스트 보여주기

 

import React from "react";
import TodoItem from "./TodoItem";

function TodoBoard(props) {
  return (
    <div>
      <h1>Todo List</h1>
      {props.todoList.map((item) => (
        <TodoItem item={item} />
      ))}
    </div>
  );
}
export default TodoBoard;

어레이 함수로 받아온다

 

import React from "react";

function TodoItem(rpops) {
  return <div className="todo-item">{props.item}</div>;
}

export default TodoItem;



출처 : 코알누(코딩알려주는누나)님의 리액트로 할일앱 만들기 유튜브 영상을 보고 공부했다

리액트를 처음 사용하다 보면 자동완성이 되질 않아 일일이 타이핑을 하곤 합니다

스니펫을 깔아도 되지만, 깔지 않고도 자동완성 기능을 사용할 수 있습니다

 

  1. 하단의 언어 선택
  2. Rea까지만 쳐도 JavaScript React가 뜬다
  3. 선택
  4. 완성

+ Recent posts