#02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)

▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈 화면 UI: 배너 및 헤더 파트 UI 구현 (1) 홈 화면 UI 구현 : 기본틀 import AddForm from 'components/AddForm'; import Header from..

• format_list_bulleted React
• · 2023. 11. 20.
• textsms

#01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정

개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : yarn create react-app practice React 안 쓰는 파일 삭제 : logo.svg / reportWeb / Setuptest / App.test.js / App.css [변경] App.jsx & index.jsx: React.StrictMood & reportWebvitals() 삭제 pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성 styled-components, react-r..

• format_list_bulleted React
• · 2023. 11. 20.
• textsms

[프로그래머스 | JavaScript] 문자열 내림차순으로 배치하기

(1) 내 코드 function solution(s) { return (s.split('').sort().reverse().join('')) } ▶ split(''): 배열로 만들기 ▶ sort() : 알파벳 순서대로 정렬 (js의 sort메서드는 대문자,소문자별로 정렬) ▶ reverse() : 배열 내림차순 정렬 ▶ join(''): 배열을 문자열로 변환 [sort()] * 문자열을 정렬 (대소문자 구분) => sort() 사용 * 숫자 정렬 => sort( (a,b)=> a-b) ) 로 사용 끝.

• format_list_bulleted 코딩테스트
• · 2023. 11. 20.
• textsms

[프로그래머스 | JavaScript] 약수의 개수와 덧셈

(1) 내 코드 function solution(left, right) { let answer = 0; let cnt = 0; for (let i = left; i 약수의 개수가 홀수 [Math.sqrt()] : 주어진 숫자에 루트(√ )를 씌웁니다 Math.sqrt(9); // 3 Math.sqrt(2); // 1.414213562373095 Math.sqrt(1); // 1 Math.sqrt(0); // 0 Math.sqrt(-1); // NaN [Number.isInteger()] : 주어진 값이 정수인지 판별 Number.isInteger(value); --> true/false 반환 끝.

• format_list_bulleted 코딩테스트
• · 2023. 11. 20.
• textsms

[프로그래머스 | JavaScript] 내적

(1) 내 코드 function solution(a, b) { let newarr = []; for (let i = 0; i a + c, 0); } ▶ 길이만큼 반복해서 a배열과 b배열의 같은 인덱스끼리 곱해서 새로운 배열에 추가 ▶ reduce를 사용해서 더하기 # 반복문하고 새로운 배열에 push 안해도 [let answer +=]으로 누적해서 더해도 되겠음 (2) 다른 사람 풀이 function solution(a, b) { return a.reduce((acc, _, i) => acc += a[i] * b[i], 0); } ▶ reduce 한 개만 활용 ▶ r..

• format_list_bulleted 코딩테스트
• · 2023. 11. 18.
• textsms

[프로그래머스 | JavaScript] 수박수박수박수박수박수?

(1) 내 코드 function solution(n) { var answer = ''; for (let i = 0; i "수박".repeat(n).slice(0,n); console.log("n이 3인 경우: "+ waterMelon(3)) console.log("n이 4인 경우: "+ waterMelon(4)) ▶ "수박"단어를 n번 repeat + slice로 (0번째인덱스, n번까지의 인덱스) ▶n이 3이면 수박수박수박 => (0,3) : 0부터 3까지의 ..

• format_list_bulleted 코딩테스트
• · 2023. 11. 18.
• textsms