전체 글51 westagram project(인스타그램 클론 코딩) - 메인 화면 (2) 메인 컴포넌트 구성 이번에는 Feed.js 와 그 하위 컴포넌트인 Comment.js, CommentHeart.js, InputCommentLine.js 를 보겠습니다 ~! Feed.js import React from 'react'; import Comment from './Comment'; import Member from './Member'; import InputCommentLine from './InputCommentLine'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHeart, faComment, faPaperPlane, faBookmark, } from '@fortawesome/free-regu.. 2022. 7. 3. westagram project(인스타그램 클론 코딩) - 메인 화면 (1) Main.js 컴포넌트 구성 메인 화면 구성을 위해서 컴포넌트를 나눠보았습니다. 처음으로 컴포넌트를 여러 개를 사용했고, 시작 단계에서 제대로 나누지 않고 들어가서 컴포넌트를 나누는데에 어려움이 있었습니다. 어쨌든 결과적으로 나온 컴포넌트는 이렇습니다. Main.js import { React, useState, useEffect } from 'react'; import './Main.scss'; import Navbar from '../components/Navbar'; import Feed from '../components/Feed'; import Rightbar from '../components/Rightbar'; export default function Main() { const [comme.. 2022. 7. 3. westagram project(인스타그램 클론 코딩) - 로그인 안녕하세요. wecode 기간 중 개인 프로젝트로 인스타그램 클론 코딩을 하게 되었습니다 ~! 오늘은 로그인 부분을 보겠어요 import { React, useState } from 'react'; import './Login.scss'; import { useNavigate } from 'react-router-dom'; export default function Login() { const navigate = useNavigate(); const [inputId, setInputId] = useState(''); const [inputPw, setInputPw] = useState(''); const [btnState, setBtnState] = useState(true); const goToMain.. 2022. 6. 26. [React] 동적 라우팅 1-1. Router - Route(경로)를 찾아가는 행위 즉 라우팅이란, 다른 경로(url주소)에 따라 다른 View(화면)을 보여주는 것 1-2. SPA (싱글 페이지 앱, 단일 페이지임) -> 사용자가 다른 뷰로 이동할 때 앱은 뷰를 동적으로 다시 그림 --->SPA는 MPA(페이지간 이동)보다 빠름 2. 정적 / 동적 라우팅 -> path에 1대 1로 경로를 지정해놓은 것 -> 정적 라우팅 ->상품 번호별로 url 막 여러개 구성되어있는게 동적 라이팅임!!!! -> 아이디 값을 가져와서 parameter로 지정해놓고 무수한 url을 만듬 ! ->>>path parameter, query parameter 를 통해 만들 수 있다 쓰는 법 !! 2-1. path parameter Netflix Zil.. 2022. 6. 26. [JS Method 기초] map과 forEach 1. map 배열의 각 요소에 대해 callback 함수를 실행하고 실행 결과를 모은 새 배열을 리턴 arr.map(callback(currentValue, index, array), thisArg) arr - 순회하고자 하는 배열 currentValue - 배열의 요소 index(생략 가능) - 현재 배열 요소의 index array(생략 가능) - map 함수를 호출한 배열 thisArg(생략 가능) - callback을 실행할 때 this로 사용되는 값(= map 함수에서 사용될 this값) var arr = [1, 2, 3, 4]; var newArr = arr.map(function(data) { return data * 2; }) console.log(newArr); // [2,4,6,8] 2.. 2022. 6. 26. [JS Method 기초] filter 와 sort 1. filter filter 메소드는 배열에서 조건에 맞는 요소들만 모아서 새로운 배열로 반환합니다 newArr = arr.filter((value,index,array) => function ) 새로운 배열 = 원래 배열 . filter ( (value(현재 요소), index(현재 인덱스), array(타겟 배열 객체) ) => 함수 ) 새로운 배열에 함수에 성립하는 값만 넣어준다 ! ex) 객체 배열에서 10 이상의 id를 가진 배열을 만들고 싶다 ? newArr = arr.filter( value => value.id >= 10) 위의 (value.id >= 10) 조건식이 true를 반환하는 요소들만 배열에 넣어주는 함수이다 !!! 사용 시 유의 사항 ! 원래 배열은 변하지 않는다 ! 문자열에.. 2022. 6. 19. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
