[220609 / Day 26] json placeholder, aos 라이브러리

1. json placeholder

https://jsonplaceholder.typicode.com/

범위 데이터? : users - 대괄호~대괄호 까지 복사 - 메인 피드 안에 userData.json 파일 만들고 붙여넣기

 - 어떤 구조를 리턴해주려면 병렬구조로 하위구조로 리턴해줘야 함 div 안에 div 이런 식으로

 

 

2. react03 폴더

컴포넌트 파일 이름 주고 밑에 jsx 파일 이름은 index 라고 해줘도 됨

users.map(() => {}) → 안팎 전부 써도 됨

{user.picture} → 가져오려면 { } 꼭하기

 

{user.online} → 이것만 하면 그냥 true false 값만 출력됨 리턴 안에 이프 스위치 문 사용x 때문에 그래서 삼항 연산자로 온라인 유저에 true 면 콜론 앞 문장으로, false 면 콜론 뒤 문장으로 밑에 처럼 적어줌

→ {user.online ? <span className='online on'></span> : <span className='online off'>OFFLINE</span>}

 

- 상위 컴포넌트에 넣어주기 : app.js 에 <UserList /> 해줘야 index.jsx에 만든 게 들어감

 

!!! js 문법 (까먹을 까봐 다시 설명) object-ex.js !!!

 

 

 

3. for in문

증감식 하지 않아도 자기가 알아서 증감함

그래서 순환하고 싶을 때 사용

 

!!! object-ex3.js

다시 이해하고 정리하자 !!!

 

em 은 이탤릭체 강조

 

 

 

4. MovieList 의 index.jsx 반복으로 들어갈 구조 먼저 만들어 놓기

const MovieList = () => {
    const movieList = movieData;
    return (
        <div>
            <ul className='move-list'>
                <li>
                    <div className='imgbox'>
                        <img src="" alt="" />
                        <span className='grageinfo'>12</span>
                        <div className='dimmed'> // hover 했을 때 dim 나오게
                            <a href="#"> 예매하기 </a>
                            <a href="#"> 상세정보 </a>
                        </div>
                    </div>
                    <div className='txtbox'>
                        <div className='title'> 제목 </div>
                        <div className='info'>
                            <span>예매율 <strong className='rateinfo'>0.1</strong> %</span>
                            <span>★ <strong className='starinfo'>8.9</strong></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    );
};

export default MovieList;

 

 

 

5. aos 라이브러리

CDN SOURCES 에 css, js 코드들 head 안에 붙여넣기 하고 초기화 해주고 위에 해당 박스들 복사 붙여넣기만 해주면 적용가능

깃헙 가면 anchor 라는 데모 페이지도 있으니 보고 적용하면 됨, 어떤 옵션이 있는지도 보기 가능

옵션은 초기화의 소괄호 안에 중괄호 만들고 각 옵션 적어주면 됨

간단하게 이용가능

 

화폐박물관 풀페이지 슬라이더 잘 나와있으니 한번 볼 것

 

!궁금한 점!

1. movieList.map((movie) => { }  소괄호 안의 movie 는 무슨 의미 인지?

A) 위에서 MovieList라는 변수에 movieData를 가져왔음 movieList.map은 각 데이터에 movie라는 변수를 집어넣어서 movie 는 각 하나하나의 정보를 뜻함, 따라서 movie.grade 는 결국 각 movieData에 grade 라는 정보를 뜻하는 것

2. <li className='move-list-li' key={movie.id}>  key 값은 왜 꼭 줘야 하는지?

A) 어떤 걸 추가로 넣으면 js는 새 페이지를 불러서 그려 넣는 식으로 한다면 react 는 가상 돔으로 기존 페이지에 추가로 그려 넣는 식임 그래서 똑 같은 li 를 넣는다고 해도 id에 값을 각각 다른 독립적인 객체로 넣어줘야 하기 때문에 key 값이 필요함

3. e.target 은 무엇?

A) 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환

 

 

내일은 컴포넌트 자체를 반복해볼 것임

과제! : sns에 나의 친구들만 반복시켰지만 메인 피드들도 반복해볼 것 / 메인 피드 바디 내용은 제이슨생성기로 post 나 comment 들 반복