Timeline

클릭 시 보여주는 메뉴를 구현했습니다 실제 구현 화면은 아래와 같고 이전 포스팅인 검색 기능 구현하기의 연장선입니다 JSX 부분 // 버튼 클릭 시 메뉴가 보이도록 하기 위해 onClick에 함수를 지정했습니다 {onClick ? ( //MENU_DATA안에 있는 메뉴리스트를 map함수를 이용해 구현했습니다 {MENU_DATA.map(list => ( {list.menu} ))} ) : null} js 문법 부분 // 버튼의 클릭을 감지하는 state를 만들었습니다 const [onClick, setOnClick] = useState(false); // 함수 안의 setOnClick 함수를 이용해 버튼 클릭 시 이전 상태를 바탕으로 동작하게 했습니다 const onClickMenu = () => { se..

인스타그램의 메뉴바를 클론 코딩했습니다 완성된 js 파일은 게시물 하단에서 확인하세요 아래 파일을 통해 구현한 메뉴바의 모습입니다 JSX 부분 // 검색창 왼쪽 로고 부분 westagram // 검색창 부분 // keyword를 입력하지 않으면 검색결과가 나오는 창이 보이지 않도록 했습니다 {keyword.length > 0 && ( {filteredList.map(profile => ( {profile.profileId} ))} )} // 검색창 오른쪽 아이콘 부분 js 문법 부분 const [profiles, setProfiles] = useState([]); const [keyword, setKeyword] = useState(''); // mock data이기 때문에 fetch로 불러왔습니다 us..

Q. 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900 A. function romanToNum(s) { //로마자:숫자 객체 변수는 romeNum const romeNum = { 'I' :..

Q. 문자열 배열 strlist가 매개변수로 주어집니다. strlist 각 원소의 길이를 담은 배열을 retrun하도록 solution 함수를 완성해주세요. A. 내 답 let strlist = ["We", "are", "the", "world!"] function solution(strlist) { let answer = []; for(let i=0; i strlist.map(str => str.length); 문제 해결 과정 우선, 배열의 모든 인덱스에 접근해서 length를 받아오기 위해 for문을 돌렸다 그리고 나는 이걸 answer에 +=로 넣으려고 했다 내 answer의 초기값은 []였는데 그러다보니 length가 string으로 받아와졌다 어떻게 이걸 다시 number로 바꿔야하지 하다가 여..

노마드코더의 ReactJS로 영화 웹 서비스 만들기 코스 중 todolist 만드는 방법을 따라 js 파일 하나로 구현했고, css 파일은 따로 만들지 않았습니다 완성된 js 파일은 게시물 하단에서 확인하세요 https://nomadcoders.co/react-for-beginners/lobby ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co JSX 부분 Comment List Click 우선, jsx를 작성할 때는 모든 태그를 하나의 태그로 감싸줘야하기 때문에 로 전체를 감싸주었습니다 간단하게 로 제목을 만들어주고 안에 과 을 넣어줬습니다 로 선을 그어주어 input과 output(댓글이 입력되는 부분)을 나눠주었습니다 ..

Q. 정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요. A. 내 답 function solution(n) { let answer = 0; for(let i=0; i

Q. 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 예각 : 0

Q. 머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요. A. 내 답 function solution(age) { let answer = 2022 - age + 1; return answer; } 더 좋은 답 function solution(age) { return new Date().getFullYear() - age + 1; } 문제 해결 과정 당연히 단순하게 계산을 해서 구했다 Date() 함수 몰랐던 건 아니지만 이럴 때 척척 사용하는 사람들 새삼 대단스러웠다 TIL Date.prototype.getFullYear() https://developer.mozilla.org/k..

Q. 정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. A. 내 답 function solution(num1, num2) { if (num1 == num2) { return 1 } else { return -1 } } 더 좋은 답 function solution(num1, num2) { var answer = num1 === num2 ? 1 : -1; return answer; } 문제 해결 과정 답이 나오는 것에만 집중해서 더 좋은 코드를 짜는 법은 생각하지 못했다 당연히 삼항연산자를 쓰면 더 간결한 답을 낼 수 있는데,,, 다음에는 답을 내는 것보단 간결한 코드를 작성하는 것에 집중해야겠다 TIL 삼항연산자 ht..

Q. 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. A. function solution(common) { if (common[2] - common[1] === common[1] - common[0]) { return common.pop() + common[1] - common[0]; } else { return common.pop() * (common[1] / common[0]); } } TIL Array.prototype.pop() pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다 ex. const animal = ['cat', 'dog', 'rabbit', 'lion'] co..