오늘한일 👨🏻‍💻 . 원티드 프리온보딩 진행 새로운 팀프로젝트 react-daum-postcode 사용하여 주소검색 기능 구현하기 기록 ✍🏻 . 면접 질문 공부는 끝이 없군 나의 암기력은 문제가 많다 ㅎㅎ 지난주에 이어서 주소 검색 기능을 한 번 더 담당하게 되었다. react-daum-post code 사용하여 주소 검색 기능 구현하였는데, 사용방법이 참 간단하고 쉽다.

react-daum-postcode 사용하여 주소검색 기능 구현하기 react-daum-postcode는 사용법이 정말 간단하다는 장점이 있다. 그래서 주소 검색 컴포넌트를 진행하는 프로젝트 테마에 맞게 커스텀 하는데 좀 더 포커스를 맞추고 진행하였다. 참고 카카오 우편번호 서비스 참고2 react-daum-postcode 0308_gif_v1.gif 구현 사항 체크 react-daum-postcode 사용 주소 검색 기능 구현 modal을 사용하여 주소 검색 노출, 주소 선택 후 선택한 주소와 상세주소 입력 부분 노출 상세주소 입력 여부에 따라 저장 버튼 활성화 및 비활성화 데스크탑 사이즈에서는 modal 팝업 모바일 사이즈에서는 화면에 가득 채우기 - 반응형 1. react-daum-postcode 사용 주소 검색 기능 구현 설치 사용 위 절차대로 진행하면 바로 주소검색 기능을 사용가능하다. 이제 원하는대로 커스텀해서 사용하면되는데 가이드라인 문서를 확인해보면 원하는 기능을 확…

오늘한일 👨🏻‍💻 . 원티드 프리온보딩 진행 주소 검색 기능 구현 기록 ✍🏻 . 면접 질문 공부는 끝이없군 ㅎㅎ 어제 view작업은 끝!! juso.go.kr에서 제공하는 OPEN API를 사용하여 주소 검색 기능 구현하였다.

주소검색 Api 사용하여 주소검색 컴포넌트 구현하기 - 2 view 작업은 어제 끝냈다. 이제 OPEN API를 활용하여 주소 검색 기능을 구현하고 redux를 사용하여 유저가 검색한 주소 + 입력한 상세주소를 저장하는 부분까지 진행하였다. 0304_gif_v1.gif 구현 사항 체크 Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 상세주소 처리 1. Axios를 사용하여 OPEN API를 받아 주소 검색 및 검색한 주소 자동완성 기능 구현 실질적인 검색 기능이 실행되는 modal 팝업에서 axios를 활용하여 juso.go.kr에서 제공하고 있는 OPEN API를 받아왔다. 주소를 검색하는 input에 입력된 값을 useRef를 사용하여 addAddress에 담아 api의 부분에 들어갈 수 있도록 하였다. 그리고 autosearch라는 함수에 api를 받아 useState를 사용하여 datas에 검색한 주소를 저장, console.log…

오늘한일 👨🏻‍💻 . 원티드 프리온보딩 진행 새로운 팀프로젝트 주소검색 컴포넌트 view 작업 기록 ✍🏻 . 한동안 TIL 작성을 못했다. 열심히 원티드 프리온보딩을 진행 중이다. 새로운 팀 프로젝트 진행 중이다. juso.go.kr에서 제공하는 OPEN API를 사용하여 주소 검색 기능 구현을 담당하였다. 오늘은 view 작업 먼저 진행!!

주소검색 Api 사용하여 주소검색 컴포넌트 구현하기 - 1 juso.go.kr에서 제공하고 있는 OPEN API를 사용하여 주소검색 기능을 구현하고자 한다🔥 오늘은 주소검색 컴포넌트 view 작업을 먼저 진행 0303_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. 을 클릭 시 modal 팝업을 사용 컴포넌트 노출 주소 선택 후 modal 팝업 종료와 선택된 주소 노출 및 재검색 버튼 노출 상세 주소 입력 인풋 유저가 주소 검색 영역을 클릭 시 modal 팝업을 사용하여 주소 검색 컴포넌트를 노출시킨다. 해당 컴포넌트에서 실질적인 주소 검색 기능이 실행되는 영역이다. view 작업을 하며 우선 체크한 부분은 검색 input 영역 하단에 위치한 검색 안내 가이드 문구는 유저가 검색어를 입력 시 자동완성된 영역에 가려진다는 점이다. 그리고 그 하단에 있는 회색으로 된 주소 입력 가이드 부분도 자동완성된 영역의 크기만큼 줄어든다는 점을 생각하여 작업 진행 조건부…

오늘한일 👨🏻‍💻 . 모의 면접 준비 새로운 프로젝트 팀 회의 vue.js 학습 기록 ✍🏻 . 면접 질문 공부를 많이하자.. 팀 과제 진행 요구사항에 vue를 사용해야해서 급하게 공부중이다

오늘한일 👨🏻‍💻 . 두번째 팀 프로젝트 Api 데이터를 chart에 담아 순위 차트 구현 기록 ✍🏻 . Api를 통해 받은 데이터를 원하는대로 가공하고 chart에 적용 시켰다. 좀 버벅거리긴 했지만 팀원들의 도움을 받아서 구현했다. 자바스크립트 공부에 열을 올리자!!! 데이터 받을 차트가 하나 더 있지만 시간 관계상 다 마무리 짓지는 못했다. 시간날때 로컬에서 구현해봐야겠다. 이번 과제는 개인적으로 너무 즐겁게했다. 다음주 과제도 즐겁게!! 프리온 보딩 열심히 하자 !!

Api 호출하여 데이터 받고 가공하여 Chart 구현하기 최근 1경기부터 50경기까지 1~8위의 데이터를 라인 차트로 구현하여 유저에게 보여줘야 한다. 라인 차트를 사용하기 위해 여러 가지 라이브러리들을 검색해 봤다. Recharts와 Chartjs를 먼저 알게 되었는데 Chartjs가 공식 문서에 커스텀 하는 부분이 상세하게 나와있고 가볍다는 장점이 있어 Chartjs를 사용하여 구현하기로 했다. 처음 사용하는 라이브러리이고 주어진 시간은 짧기 때문에 공식 문서가 친절한 Chartjs에 마음이 감ㅋㅋ 0227_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. Api를 호출하여 유저의 최근 1경기부터 50경기까지 1~8위의 기록을 라인차트로 구현 우측 상단 지난 200경기의 평균 순위, 최근 50경기의 평균 순위 표시 1. Api를 호출 유저의 1경기부터 50경기 1~8위의 기록을 라인차트로 구현 Chart.js의 공식 문서를 먼저 살펴보았다. 그 뒤 여러 블로그…

오늘한일 👨🏻‍💻 . 두번째 팀 프로젝트 react chart.js 커스텀 로컬 스토리지 사용 댓글 남기기 Tap 컴포넌트 만들기 Toggle 컴포넌트 추가 Footer 추가 기록 ✍🏻 . 과제는 제출 되었지만 팀원들이랑 부족한 부분을 마무리 짓기로했다 아직은 Api를 활용하는 단계는 아니기때문에 문제없이 맡은 부분을 만들어냈다. 내일은 Api 호출로 데이터 받아서 chart에 데이터 담기 프리온 보딩 열심히 하자 !!

로컬 스토리지를 활용해 간다한 댓글 남기기 구현할 기능은 간단한 댓글 남기기이다. 프로젝트 스코프가 작다고 판단하여 팀원들과 회의 끝에 Redux를 사용하지않고 진행하기로 함. 로컬스토리지를 사용하여 구현하기로 마음먹었다 0226_gif_v1.gif view 작업을 진행하며 구현 사항을 체크했다. 로컬 스토리지에 닉네임, 댓글 담고 남기기 버튼 클릭 시 댓글 보여주기 우측 상단 추가된 댓글 만큼 숫자 count 하기 우측에서 좌측으로 들어오는 에니메이션 추가 새로 추가된 댓글에 스크롤이 고정되어 추가된 댓글 먼저 보여주기 1. 로컬 스토리지에 닉네임, 댓글 저장 우선 유저가 작성하는 input의 닉네임과 댓글을 useRef를 사용하여 값을 받은 뒤, saveComment 함수인에서 commentArry 배열에 yourName, 과 yourCommet에 담아 로컬 스토리지에 setItem을 사용하여 저장한다. 댓글이 추가될 때마다 로컬 스토리지에 배열로 추가 저장하기 위해 스프레드 …

오늘한일 👨🏻‍💻 . 팀 기업과제 과제 발표 기록 ✍🏻 . 시간이 갈수록 팀원들이랑 소통도 진행도 잘 되는 거 같다 부트 캠프 진행하며 모르는 걸 질문하는 게 힘들었다 일단 다들 바쁘고 정신없는데 시간 뺏는 게 미안하기도 하고 근데 지금은 다르다 모르는 건 계속 물어보고 배우고 얻어 가는 게 많은 거 같다 다들 바쁘고 힘든데 친절하게 설명해 주고 같이 해결해 주는 팀원 들게 고맙다~ 프리온 보딩 열심히 하자 !!

오늘한일 👨🏻‍💻 . CSS 애니메이션(keyframes Canvas) 학습 새로운 프로젝트 회의 및 작업 시작 기록 ✍🏻 . 생각보다 프로젝트를 제출하기까지 오랜 시간이 걸리는 거 같다. 제한된 시간 안에 제출하기 위해 열심히 해야겠다 새로운 프로젝트가 시작되었다. 맡은 기능 구현을 최선을 다해 진행해야 한다 프리온 보딩 열심히 하자 !!

오늘한일 👨🏻‍💻 . 팀 기업과제 1진행 번등링과 빌드 시스템 Git, PR 잘 쓰는 방법 기록 ✍🏻 . git의 중요성을 느꼈고, 팀원들과 소통하고 문제해결하고 배우기도하고 재미있다. 프리온 보딩 열심히 하자 !!

오늘한일 👨🏻‍💻 . DOM 스터디 모의면접세션 참여 기록 ✍🏻 . 모의면접세션에 참여하고 프리온보딩 첫 팀프로젝트를 시작했다. 이론이 너무 부족하다는 걸 느끼고있다. 프로젝트 준비하면서 공부도 좀 하자

DOM DOM은 Document Object Model의 약자이며, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. MDN 에서 말하는 DOM의 정의는 다음과 같다. 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 여기서 XML이란 EXtensible Markup Language의 약자이다. 간단하게 설명하면, 텍스트 기반 컴퓨터 자료 구조인 SGML을 HTML처럼 간략화, 표준화하면서 HTML과 호환될 수 있도록 만들어진 마크업 언어이다. 다시 돌아와서, DOM이란 마크업 언어를 구조화해 웹페이지를 프로그래밍 언어를 통해 변경할 수 있게 하는 API인 셈이다. DOM으로 HTML 조작하기 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 학습해보…

1. 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요? myAnswer 🍕 CSS 태그를 태그 사이에 위치시키는 이유는 css 태그를 뒷부분에 사용할경우, HTML을 렌더링 한 후 CSS를 렌더링하기 시작하기 때문에, 랜더링이 총 두번 진행된다. 두번의 렌더링으로 낭비가 심하고 사용자에게 UX적인 측면에서 좋지 않다. JS 태그를 태그가 끝나기 직전에 위치시키는 이유는 브라우저는 태그를 만나면 HTML 파싱을 잠시 멈추고 를 다운로드하고 실행한다. 이 경우 사용자에게 화면이 보여지기까지 시간이 늦어지기 때문에 , HTML요소를 모두 파싱한뒤에 자바스크립트 파일을 다운로드하고 실행할 수 있도록 태그 맨 뒤에 태그를 두는 것이 좋다. 2. script / script async / script defer 태그들의 차이점은 무엇인가요? myAnswer 🍕 3개의 스크립트 태그는 해당 스크립트를 다운로드받은 뒤 실…

오늘한일 👨🏻‍💻 . 원티드 프리온보딩 코스 진행 🍕 OT 참석 모의 면접 답안 작성 모의 면접 기록 ✍🏻 . 원티드 프리온 보딩 코스를 진행하게 되었다. 사전 설명회 때 zoom 링크에 인원이 다 차서 못 들어간다는 메시지를 본 뒤 지원자가 많아서 안 뽑힐 거라 예상했는데 선발되어 놀랬다 ㅋㅋ OT 참석하고 모의 면접을 진행하며, 너무 부족한 부분이 많다고 느꼈다. 어버버…어버버… 휴 코스 진행하는 동안 정말 열심히 준비해보자!!

오늘한일 👨🏻‍💻 . 면접준비 🔥 코딩테스트 ⚙️ 기록 ✍🏻 . 1. Introduction json-server는 json 파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴이다. 2. Setup json-server 설치 npm을 이용하여 json-server를 로컬 설치한다. db.json 파일 생성 프로젝트 루트에 fake-server폴더 생성 requests.json 파일을 생성한다. requests.json 파일은 데이터베이스 역할을 한다. 3. json-server 실행 json-server가 requests.json 파일을 watching하도록 실행한다. 기본 포트는 3000이다. 포트를 변경하려면 port 옵션을 추가한다. 실행 및 포트 변경 접속해보면 json파일로 작성한 데이터를 확인 가능하다. 4. Postman을 사용하여 json-server에 접속하여 보자. 5. axios 설치하고 console.log로 확인해…

오늘한일 👨🏻‍💻 . 면접준비 🔥 코딩테스트 ⚙️ 기록 ✍🏻 . 오늘은 필터링 기능을 가진 Select버튼 뷰 작업 및 기능 초반 작업 진행 22_02_15_img_2.png 프로젝트 폴더 구조 ContentsOne.js에 SelectBox 컴포넌트를 불러와 사용 22_02_17_gif.gif Select버튼 조건 Select버튼에 마우스hover 시 border색상 변경 + 화살표 icon색상도 변경함 Select버튼 클릭 시 DropDown으로 체크박스 리스트 오픈 + 에니메이션 추가로 자연스러운 움직임 추가함 체크박스 클릭 시 셀렉트 버튼 백그라운드 컬러 변경과 텍스트 컬러변경, 우측에 체크된 숫자만큼 숫자 표시 체크박스 클릭 시 셀렉트 버튼 우측에 필터링 리셋 ui추가, 리셋 클릭 시 체크된 거 초기화 + 상단에서 하단으로 자연스럽게 내려오는 에니메이션 추가함 1. Select버튼에 마우스hover 시 border색상 변경 + 화살표 icon색상도 변경함 hover + transit…

오늘한일 👨🏻‍💻 . 면접준비 🔥 코딩테스트 ⚙️ 기록 ✍🏻 . 오늘은 필터링 기능을 가진 toggle버튼 뷰 작업 진행 프로젝트 폴더 구조 ContentsOne.js에 Toggle 컴포넌트를 불러와 사용 22_02_16_gif.gif json-server를 컨텐츠 하단 카드 리스트는 뷰작업을 다 끝낸 뒤에 할 계획이다. 주어진 조건에 맞는 뷰작업을 먼저 진행 Toggle 버튼은 useState를 사용하여 버튼이 클릭되었는지 상태 값을 관리하며 onClick을 사용하여 버튼 이벤트를 관리, 토글 버튼 백그라운드와 동그라미 버튼의 색상 변화는 props로 전달하여 상태 값에 맞는 색상을 삼항연산자를 사용하여 적용함, 자연스러운 색상 변화 적용을 위해 transition을 사용 토글버튼 작동 테스트를 위해 여러 번 클릭을 하다 보니 우측의 텍스트가 드래그 되는 현상이 싫었다. 유저 입장에서도 보기 좋지 않고 불편할 거 같은 느낌이 들어 토글버튼 영역은 드레그가 되지 않도록 부모컴포넌트 Con…

오늘한일 👨🏻‍💻 . 면접준비 🔥 코딩테스트 ⚙️ 기록 ✍🏻 . 이력서를 제출한 회사에서 연락이 왔다. 알고리즘 테스트가 아닌 실무에 가까운 내용으로 구성된 과제 느낌 피그마 url과 json 파일을 메일로 받음 피그마 내용대로 뷰 작업부터 진행했다 프로젝트 폴더 구조 App.js에 Navigation 컴포넌트를 불러와 사용, Navigation 컴포넌트 안에서 MobileMenu를 모달 팝업 형태로 사용 주어진 조건 중 반응형을 적용하여 모바일 사이즈가 되었을 시 상단의 네비게이션이 햄버거 메뉴 버튼과 로고만 남고 햄버거 메뉴 버튼을 클릭 시 좌측에서 우측으로 fade-in 애니메이션을 적용하는 조건이 있어 이 작업부터 진행함, 추가적으로 햄버거 메뉴가 나올 시 우측 빈 여백을 클릭하여 햄버거 메뉴를 닫는 기능까지 추가함 22_02_15_gif.png 네비게이션 컴포넌트를 style-component, @media screen를 사용하여 가로값이 500px이 되었을때 모바일 메뉴로 변…

오늘한일 👨🏻‍💻 . 항해99 친구들이랑 1박2일 놀러 감 🍕 기록 ✍🏻 . 오늘은 항해99 부트캠프 진행하며 가깝게 지낸 동기들? 이랑 1박2일 놀러 간다 그래서 아침에 미리 TIL 작성 중 ㅋㅋㅋ 부트캠프 진행하며 여러모로 도움도 많이 받고 덕분에 좀 더 수월하게 진행할 수 있었던 거 같다 매일 같이 공부하며 끝나고 놀러 가자고 이야기를 했는데 벌써 그날이 다가오다니 시간 참 빠르다 🔥

오늘한일 👨🏻‍💻 . 코딩테스트 준비 면접 준비 기록 ✍🏻 . 코딩 테스트를 꾸준히 해야 할 거 같다. 진작에 준비 좀 할걸.. 후

오늘한일 👨🏻‍💻 . 알고리즘 테스트 준비 면접 준비 기록 ✍🏻 . 오늘도 똑같은 하루다 🥸 코테 & 면접 준비 잠시 쉬다가 우연하게 모던 JavaScript 튜토리얼이라는 곳을 알게 됨. 🔥   모던 JavaScript 튜토리얼 📘   자세한 소개 Blog ⚙️   GitHub 소개 블로그를 읽어보면.. Mozilla 재단이 운영하는 MDN web docs가 최신 명세서를 빠르게 반영하고 있고 로컬라이제이션도 상당 부분 진행되어 있지만, 리뷰 없이 누구나 문서를 수정할 수 있어 오역이 자주 발견된다. 또한, 한국어 혹은 번역 기술에 대한 학습이 부족한 상태로 번역에 참여하고 있는 기여자가 많아 가독성이 떨어지는 실정이다. 이런 상황을 개선하고자 The Modern JavaScript Tutorial(이하 Tutorial)의 한글화 프로젝트, ‘모던 자바스크립트 튜토리얼(이하 튜토리얼) 한글화’ 프로젝트를 시작하게 되었다. 라고 적혀있음. 이걸 보고 기분이 좋아졌다. 구매한 자바스크립트 서…

오늘한일 👨🏻‍💻 . 코딩테스트 준비 면접 준비 기록 ✍🏻 . 알고리즘 테스트 정말 큰일이다!!!!!!! 😱

오늘한일 👨🏻‍💻 . 코딩테스트 준비 면접 준비 기록 ✍🏻 . 러닝 자바스크립트라는 책을 공부 중이다. 그러면서 프로그래머스 알고리즘 문제 푸는 중.. 어렵다 면접 준비가 사실 부트 캠프보다 더 어려운 거 같음 ㅜㅜ

오늘한일 👨🏻‍💻 . 항해99 수료 인프런 타입스크립트 강의 결제 알고리즘 준비 기록 ✍🏻 . 항해 99 부트 캠프가 드디어 끝이 났다. 뭔가 시원 섭섭한 기분ㅋㅋㅋ 사실 오늘 하루 좀 쉬었다. 수료해서 그런가 일단 인프런 타입 스크립트 강의 결제함 낼부터 달려야지 🔥 면접 준비에 알고리즘… 뭔가 수료하고 더 바빠진 기분이다. 내일부터 또 달려보자!!

오늘한일 👨🏻‍💻 . 면접질문 정리 블로그 정리 원티드 프리온보딩 제출 기록 ✍🏻 . 벌써 내일이 항해99 마지막 날이다. 시간 참 빠르네.. 내일부터 면접 준비에 더 박차를 가해야겠다. 면접 질문 더 꼼꼼하게 정리하고 암기!! 이제 앞으로 블로그는 하루에 한 번씩 꼭 작성하자 일기처럼이라도..

clicktoedit.gif ClickToEdit 만들기 🛠 웹서비스를 만들 때 자주 사용하게 되는 ClickToEdit 만들어 보자!! 프로젝트 구조는 다음과 같습니다. ClickToEdit 폴더 안에 ClickToEdit 컴포넌트와 Myinput 컴포넌트를 만들고 ClickToEdit 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 input의 상태를 관리하고, useRef 훅으로 input 창을 클릭한 상태에서만 값을 변경할 수 있게 하였습니다. 어려웠던 점 해결 방법 . input의 변경된 값을 저장하는 button이 따로 존재하지 않기 때문에 입력된 값을 변경하는 방법이 어려웠습니다. 해결 방법으로 input에 입력한 값을 newValue에 담은 뒤, handleBlur에 의해서 handleValueChange 함수가 실행되어 값이 바꿔 해결하였습니다. 자세한 실행…

tag.gif Tag 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 Tag를 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Tag 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 tags의 상태를 관리하고, initialTags 함수로 기본 tag 값을 세팅하였습니다. 공백이 입력이 되지 않게 해주기 위해 trim() 함수 사용하였고, 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 않기 위해 includes() 함수 사용하여 확인하였습니다. Enter 키를 활용하여, 태그를추가할 수 있도록 구현하였으며, map 함수의 index를 전달받아 클릭된 인덱스 정보를 활용해서 삭제하였습니다. 어려웠던 점 해결 방법 . 배열의 첫 번째 요소에 대한 인덱스를 반환하는 findIndex 함수를 사용하여 index를 찾아 삭제해 주는 방식을 사용하였지만, 비효율적…

tab.gif Tab 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 Tab(네비게이션?)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Tab 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . li 엘리먼트를 map 함수로 menu의 숫자만큼 만들어 준 뒤, 인덱스를 두 번째 인자로 넣어서 onClick 핸들러 함수에 index를 전달했습니다. 그리고 인덱스를 전달받은 함수를 통해서 currentTab 상태를 해당 인덱스로 바꿔주며클릭 된 Tab의 className을 변경하고 클릭 된 메뉴의 CSS 값을 변경, 선택된 li이 엘리먼트를 시각화 시켜줄 수 있게 됩니다. 어려웠던 점 해결 방법 . 처음 구현할 시 menu를 map 함수로 생성한 것이 아니라 li를 원하는 menu 개수만큼 만들어 구현하였습니다. 코드의 길이가 길어지고 효율성이 떨어진다 판단하여 map 함수를 사용하여 menu를 원하는 …

toggle.gif Toggle 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 토글(스위치)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Toggle 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 boolean 상태 값을 핸들링하는 ToggleHandler 함수를 만들어 토글의 스위치를 켜거나 끄도록 하였습니다. 상태 값을 변수로 사용하면 토글의 스위치가 켜질때 자동으로 Dom이 재 렌더링 되는 것을 방지하기 위해 useState를 사용하여 구현하였습니다. 어려웠던 점 해결 방법 . 토글스위치가 켜질 때 뒷배경과 토글 버튼이 좌측에서 우측으로 이동되는 움직임을 만드는 게 어려웠습니다. linear-gradient를 사용하여 배경이 한쪽에서 부터 점점 채워지는 느낌으로 구현할 수 있었고, 토글 UI에서는 isToggleOn 상태를 활용해서 className을 변경해…

modal.gif Modal 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 모달(팝업)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Modal 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 boolean 상태 값을 핸들링하는 ModalHandler 함수를 만들어 모달을 열거나 닫도록 하였습니다. 상태 값을 변수로 사용하면 모달이 오픈될 때 자동으로 Dom이 재 렌더링 되는 것을 방지하기 위해 useState를 사용하여 구현하였습니다. 어려웠던 점 해결 방법 . 모달을 구현한 뒤 모달 영역을 클릭해도 모달이 닫히는 현상이 있었습니다. 이유는 부모 컴포넌트에 이벤트가 핸들러가 걸려있을 때 자식 컴포넌트에도 같은 핸들러가 작동이 되기 때문이었습니다. 이를 방지하기 위해 stopPropagation 메서드를 사용하여 자식 요소인 하여 문제를 해결했습니다. 결과로 모달 영…

1. https란 무엇인지 아는 만큼 설명해주세요. myAnswer 🍕 https는 의 약자로 http가 서버와 정보를 텍스트로 주고받기 때문에 원치 않는 데이터 유출이 일어날 수 있는 보안 취약점을 해결하기 위한 프로토콜이 장점으로는 가 있습니다.단점으로는 가 느려질 수 있습니다. 2. http와 https의 차이점은? myAnswer 🍕 HTTPS는 기본 골격이나 사용 목적 등은 HTTP와 거의 동일하지만, 입니다. HTTPS를 사용하면 서버와 클라이언트 사이의 모든 통신 내용이 암호화됩니다. 3. 프로세스 생성 과정에 대해 설명해주세요. myAnswer 🍕 먼저 프로세스란 프로그램이 구동될 때 주 메모리에 적재되며 메모리 상에서 실행되는 작업의 단위를 프로세스라고 합니다. 보통은 작업(Task)라고도 부릅니다(작업 관리자). 쉽게 말해 실행중에 있는 프로그램이라고 할 수 있습니다. 프로세스의 생성과정은 다음과 같습니다. 실행파일 클릭 -> 실행을 위한 메모리 할당 -> …

✨ 먼저 Hook이란? 함수 컴포넌트에서 React state와 Lifecycle 기능을 연동할 수 있게 해주는 함수 (버전 16.8부터 도입) 만들어진 목적 자체가 함수 컴포넌트에서 사용하기 위함이었으니 당연히 클래스 컴포넌트 안에서는 동작하지 않음 기존에 함수 컴포넌트를 사용하다가 state를 추가하고 싶어서 클래스 컴포넌트로 바꾸곤 했는데 이제 그럴 필요가 없다! ⚙️ Hook의 사용 규칙 1 .최상위에서만 Hook 호출이 가능 (루프, 조건문, 중첩된 함수 안에서는 사용할 수 없음) : 조건문을 Hook 내부에 넣는 것은 괜찮음 👉   컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어 state를 올바르게 유지할 수 있음 2️. 리액트 함수 컴포넌트 내에서만 호출이 가능하며, 일반 자바스크립트 함수 안에서는 호출하면 안됨 (custom hook에서는 가능) 🛠 왜 Hook을 만들었을까? 컴포넌트들 사이에서 상태 로직을 재사용하는 것의 어려움 hi…

🤔 React란 무엇인가? 페이스북에서 제공해주는 , 컴포넌트 기반으로 되어 있어서 를 만들어 사용자에게 보여진다. 웹 페이지를 만들기에는 html, css로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 리액트를 사용!! React 공식 홈페이지, 위키백과 - React 🥸 그럼 왜 React를 사용하지? 🛠 Component 단위 작성 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 된다. 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해준다. 가령, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다. 이러한 특징은 하게 한다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡…

Lv.1 - 하샤드 수 👳🏾‍♂️ 문제 설명 🎙 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요 제한 조건 🔓 x는 1 이상, 10000 이하인 정수입니다 입출력 예 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12947 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 콜라츠 추측 🤬 문제 설명 🎙 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요. 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요. 제한 조건 🔓 입력된 수, 은 1 이상 8000000 미만인 정수입니다. 입출력 예 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12943 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 제일 작은 수 제거하기 🔫 문제 설명 🎙 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 조건 🔓 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 입출력 예 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12935 문제 풀이 🤔 문제 해석 🥸 다른 문제 풀이 😱 다른 문제 해석 😰

Lv.1 - 정수 제곱근 판별 🕵️‍♂️ 문제 설명 🎙 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 조건 🔓 n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12934 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 정수 내림차순으로 배치하기 📉 문제 설명 🎙 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건 🔓 은 1이상 8000000000 이하인 자연수입니다. 입출력 예 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12933 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 자연수 뒤집어 배열로 만들기 🍳 문제 설명 🎙 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 🔓 n은 10,000,000,000이하인 자연수입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12932 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 자릿수 더하기 ➕ 문제 설명 🎙 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 조건 🔓 n은 범위 : 100,000,000 이하인 자연수 문제링크 https://programmers.co.kr/learn/courses/30/lessons/12931 문제 풀이 🤔 문제 해석 🥸 변수 answer의 초깃값을 0으로 만들어준다 n을 문자열로 반환하여 변수 letters에 담아준다 for 문을 활용하여 변수 letters에 담긴 문자열의 길이 보다 적게 반복되며 증가한다 answer에 letters[i] 값을 더하여 할당한다 다른 문제 풀이 😱 다른 문제 해석 😰 String : 문자열 반환 / .split("") : 문자열 자르기 .reduce(acc, cur) : reduce 배열의 합 구하기 acc 누적값, cur 현재 …

Lv.1 - 이상한 문자 만들기 👽 문제 설명 🎙 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 제한 조건 🔓 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/42576 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 완주하지 못한 선수 🏃‍♂️ 문제 설명 🎙 String형 배열 seoul의 element중 “Kim”의 위치 x를 찾아, “김서방은 x에 있다”는 String을 반환하는 함수, solution을 완성하세요. seoul에 “Kim”은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한 조건 🔓 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 …

Lv.1 - 수박수박수박수박수박수? 🍉 문제 설명 🎙 길이가 n이고, “수박수박수박수…”와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 “수박수박”을 리턴하고 3이라면 “수박수”를 리턴하면 됩니다. 제한 조건 🔓 n은 길이 10,000이하인 자연수입니다. 문제 링크 👀 https://programmers.co.kr/learn/courses/30/lessons/12922?language=java 문제 풀이 🤔 문제 해석 🥸 for 문은 n에 입력된 값만큼 “수”,“박”을 반복 if 문에서 n의 값을 2로 나누고 남은 값을 0과 비교 (홀, 짝으로 구분) 하여 출력한 글자를 리턴 두개의 값이 result에 담겨 n만큼 반복 된 “수”, “박”을 출력 다른 문제 풀이 😱 다른 문제 해석 😰 repeat : 문자열 반복 / (n) : 반복횟수 = n의 값만큼 반복 substring : 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문…

Lv.1 - 서울에서 김서방 찾기 🕵️‍♂️ 문제 설명 🎙 String형 배열 seoul의 element중 “Kim”의 위치 x를 찾아, “김서방은 x에 있다”는 String을 반환하는 함수, solution을 완성하세요. seoul에 “Kim”은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 조건 🔓 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. “Kim”은 반드시 seoul 안에 포함되어 있습니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12919 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 문자열 다루기 기본 👨‍🔧 문제 설명 🎙 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 “a234”이면 False를 리턴하고 “1234”라면 True를 리턴하면 됩니다. 제한 조건 🔓 는 길이 1 이상, 길이 8 이하인 문자열입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12918 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 문자열 내 p와 y의 개수 🐽 문제 설명 🎙 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. ‘p’, ‘y’ 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 “pPoooyY”면 true를 return하고 “Pyy”라면 false를 return합니다. 제한 조건 🔓 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12916 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 내적 🥷 문제 설명 🎙 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은  입니다. (n은 a, b의 길이) 제한 조건 🔓 a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/70128 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 나누어 떨어지는 숫자 배열 🤕 문제 설명 🎙 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한 조건 🔓 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12910 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 2016년 📅 문제 설명 🎙 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각  입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 “TUE”를 반환하세요. 제한 조건 🔓 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12901 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 부족한 금액 계산하기 👨‍🏫 문제 설명 🎙 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 제한 조건 🔓 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수 놀이기구의 이용 횟수 count : 1 ≤ count ≤ 2,500, count는 자연수 예시 👀 문제 링크 📎 https://programmers.co.kr…

Lv.1 - x만큼 간격이 있는 n개의 숫자 🤔 문제 설명 🎙 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 조건 🔓 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12954 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 행렬의 덧셈 🎉 문제 설명 🎙 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 🔓 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12950 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 핸드폰 번호 가리기 📱 문제 설명 🎙 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 * 으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 🔓 s는 길이 4 이상, 20이하인 문자열입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12948 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 평균 구하기 ➗ 문제 설명 🎙 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 🔓 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12944 문제 풀이 🤔 문제 해석 🥸 다른 문제 풀이 😱 다른 문제 해석

Lv.1 - 음양 더하기 ➕ 문제 설명 🎙 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 제한 조건 🔓 absolutes의 길이는 1 이상 1,000 이하입니다. -absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. - 가 참이면  의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/76501 문제 풀이 🤔 문제 해석 🥸 다른 문제 풀이 😱 다른 문제 해석 😰

Lv.1 - 없는 숫자 더하기 🧐 문제 설명 🎙 0부터 9까지의 숫자 중 일부가 들어있는 배열 가 매개변수로 주어집니다. 에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한 조건 🔓 1 ≤ 의 길이 ≤ 9 0 ≤ 의 모든 수 ≤ 9 의 모든 수는 서로 다릅니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/86051 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 문자열을 정수로 바꾸기 🤹‍♂️ 문제 설명 🎙 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 🔓 s의 길이는 1 이상 5 이하입니다. s의 맨앞에는 부호 (+,-)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 “0”으로 시작하지 않습니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12925 문제 풀이 🤔 문제 해석 🥸 다른 방법의 문제 풀이 😱 다른 방법의 문제 해석 😰 다른 방법의 문제 풀이 😱 다른 방법의 문제 해석 😰

Lv.1 - 두 정수 사이의 합 👏 문제 설명 🎙 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건 🔓 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12912 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 가운데 글자 가져오기 🖕 문제 설명 🎙 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 제한 조건 🔓 s는 길이가 1 이상, 100이하인 스트링입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12903 문제 풀이 🤔 문제 해석 🥸

Lv.1 - 짝수와 홀수 🖖 문제 설명 🎙 정수 num이 짝수일 경우 “Even”을 반환하고, 홀수인 경우 “Odd”를 반환하는 함수, solution을 완성해주세요. 제한 조건 🔓 num은 int 범위의 정수입니다. 0은 짝수입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12937 문제 풀이 🤔 문제 해석 🥸 다른 문제 풀이 😱 다른 문제 해석 😰

Lv.1 - 직사각형 별찍기 🌟 문제 설명 🎙 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 🔓 n과 m은 각각 1000 이하인 자연수입니다. 예시 👀 문제 링크 📎 https://programmers.co.kr/learn/courses/30/lessons/12969?language=javascript 문제 풀이 🤔 문제 해석 🥸