전체 글(271)
-
리액트 팬레터 홈페이지 만들기: 댓글 관리와 글자수 제한 기능 구현
1. 화면 1. 댓글이 없으면 '댓글 없음'을 알려주고 있으면 댓글 보여주기 2. 댓글 등록시 작성자/내용에 최대 글자수 제한주기 2. 코드 (1) 댓글 유무에 따른 화면 구성 //멤버에 따라 댓글 필터링 const filteredByMember = comments.filter((comment) => comment.member === member); //필터링된 댓글 없으면 '댓글없음 '표시 if (filteredByMember.length === 0) { return ( {member}의 등록된 팬레터가 없습니다. 댓글을 남겨주세요! ); } ▶ 멤버에 따라 필터링 하고 length로 구분 return ( {filteredByMember.map((comment) => { return ( {comment..
2023.11.15 -
[프로그래머스 | JavaScript] 핸드폰 번호 가리기
(1) 내 코드 function solution(phone_number) { let back_number = phone_number.slice(-4); let star = ''; for (let i = 0; i < phone_number.length - 4; i++) { star += '*'; } return star + back_number; } ▶ slice로 뒤에서부터 4글자 반환 : phone_number.slice(-4); ▶ 배열의 길이에서 -4 한길이만큼 ' * ' 추가 ▶ 추가된 * 과 slice로 반환한 값 더해서 출력 (2) 다른 사람 풀이 1 function hide_numbers(s){ var result = "*".repeat(s.length - 4) + s.slice(-4); r..
2023.11.15 -
리액트 팬레터 홈페이지 만들기: 댓글 수정 기능 구현
0.TIL ▶ useState만 사용해서 Router 구현은 Router.js 에서 모든 Route마다 props로 데이터를 전달해야함. ▶ 메인페이지 -> 상세페이지 -> 상세페이지의 업데이트 페이지 이렇게 이동하도록 구현을 알기까지 삽질함. ▶ 데이터를 업데이트 하기 위해서는 2가지로 나눔 (데이터 변경 & 수정완료 시 처리) --> 이 부분을 한 번에 처리하려고해서 시간을 너무 버렸음...😢안 될때는 나눠서 생각하면 편리함. 1. 화면 1. 등록된 댓글의 "하니"를 클릭시 상세페이지 이동 2. 상세페이지에서 [수정] 버튼 클릭하여 버튼 재 클릭시 수정완료 ( 버튼 명칭은 변경예정 "수정수정완료") 3. [홈으로] 버튼 클릭하여 돌아가면 수정된 데이터 확인 가능 2. 코드 const param = u..
2023.11.14 -
React : 필요 개념 정리 (1)
1. JSX란 무엇인가요? [생각] 자바스크립트 + XML을 더한 확장한 문법 [정답] + JS모든 기능이 포함되어 있고 react element를 생성하기 위한 문법 2. SPA와 MPA의 개념 및 각각의 특징 [생각] : SPA 는 단일페이지 ( 바꾸고 싶은 데이터만 가져다가 변경하기에, 깜빡임이 없음) 단점으로는 SEO 검색엔진최적화가 약하다 :MPA는 여러페이지로 구성되어 있어서 전체 리랜딩해서 깜빡임 (잘 사용하지 않음) [정답] + SPA는 단 하나의 페이지만 로딩 (서버에 index.html / index.js만 요청 & state 변경시에 필요 부분만 요청해서 동적 업데이트) + 속도: SPA 는 초기 로딩속도가 가져와야하는 리소스양이 많아서 MPA 에 비해 오래걸림 + 리액트.뷰 -> 라..
2023.11.14 -
[프로그래머스 | JavaScript] 음양 더하기
(1) 내 코드 function solution(absolutes, signs) { let num_signs = []; let cal = []; signs.forEach((x) => { if (x == true) { num_signs.push(1); } else { num_signs.push(-1); } }); for (let i = 0; i a + c, 0); } ▶ num_signs 에 true면 1 / false면 -1 추가 ▶ 배열의 길이만큼 돌면서 absolutes 배열의 인덱스와num_signs배열의 같은 인덱스끼리 곱하기 ..
2023.11.14 -
[프로그래머스 | JavaScript] 나누어 떨어지는 숫자 배열
(1) 내 코드 function solution(arr, divisor) { let newArr =[]; arr.sort((a,b)=>a-b); arr.forEach((value)=>{ if(value %divisor === 0){ newArr.push(value); } }) if(newArr.length === 0 ) {newArr.push(-1);} return newArr; } ▶ 나누어 떨어지는 숫자 배열 1. arr 오름차순정렬 2. divisor로 나눠서 나머지가 0이면 3. 새로운 배열에 push 4. 새로운 배열 length===0 return -1 ▶ 같은 팀원분 : return newArr.push(-1)로 직접 리턴할 경우: -1이 아닌 1이 리턴되는 케이스 발생 => 배열의 push..
2023.11.14