코테연습 중 map을 이용한 숫자변환을 적용해 보고 다양하게 활용할 수 있는 방법을 더 찾아보게 되었다아래 활용 예시뿐만 아니라 더 많은 활용사례가 있으니 한 번씩 찾아보는 것도 좋을 거 같다 https://kahee430.tistory.com/155 [코딩테스트] 자연수 뒤집어 배열만들기function solution(n) { var answer = String(n).split('').reverse() return answer.map(Number)} 풀이 매개변수를 문자로 변환한 뒤 split() 메서드를 활용해서 하나씩 쪼개 배열로 변환해 준다 (괄호 안에 따옴표만 넣으kahee430.tistory.com1. 배열의 문자열 요소를 모두 대문자로 변환하기toUpperCase() or toLowerCas..
자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.function solution(n) { var answer = String(n).split('').reverse() return answer.map(Number)} 풀이 매개변수를 문자로 변환한 뒤 split() 메서드를 활용해서 하나씩 쪼개 배열로 변환해 준다 (괄호 안에 따옴표만 넣으면 문자를 하나씩 ' ' 으로 감싸 새 배열로 반환된다) 배열을 뒤집기 위해 reverse() 메서드를 활용했다 마지막으로 return 값을 숫자로 변환하면 끝인데return Number(answer)으로 변환을 시도했으나 배열이라 변환이 안 되는 게 문제였다 찾아보니 ..
▶️ 클로저란 무엇인가요?클로저의 개념뿐 아니라, 클로저가 실제로 어떻게 사용될 수 있는지 구체적인 예시도 같이 설명해주세요. 그리고 클로저의 장단점에 대해서도 같이 작성해주세요.클로저는 렉시컬 환경의 조합으로 스코프 체인을 통해 이뤄집니다.전역 변수를 지역변수화 시켜 내부 함수에서만 참조할 수 있도록 해 전역 스코프로 인한 오류를 방지하는 기술로 데이터 은닉과 캡슐화를 사용할 수 있습니다.클로저의 장점데이터 은닉을 통해 외부 접근으로 인한 의도치 않은 변경을 막을 수 있습니다함수 호출 이후에도 가비지 컬렉터에 의해 수집되지 않아 데이터의 상태를 기억시킬 수 있습니다클로저의 단점함수가 가비지 컬렉션에서 제외되어 메모리에 계속 남아있기 때문에 메모리 누수가 발생할 수 있습니다클로저를 통해 할 수 있는 것특..
자바스크립트의 대표적인 디자인패턴 중 하나로, 캡쳐링을 이용해 이벤트 리스너 (Event Listener) 를 효율적으로 관리할 수 있다 이벤트 델리게이션 패턴 사용하기버튼마다 다른 기능을 수행한다고 했을 때 리스너를 전부 등록하게 되면 브라우저의 메모리를 많이 사용하게 되고, 성능저하로 이어질 수 있다이것을 해결하기 위해상위 요소에 이벤트 리스너를 등록하고 이벤트가 발생할 target을 찾아 이벤트를 지정하는 것 상위 요소인 parent에 클릭 이벤트 리스너 등록event.target 으로 클릭된 요소가 child 클래스를 가진 버튼인지 확인하고 이벤트를 수행한다 Button 1 Button 2 Button 3 // 상위 요소에 이벤트 리스너 추가document.getElementById('..
되도록 width랑 height 단위는 동일하게 맞추는 게 좋고취향이지만 rem을 많이 사용하는 것 같다전체 사이즈 따라 변동될 경우 margin, padding도 rme을 사용하고div 사이즈 따라 변동될 경우 em을 사용하도록 하자border같이 고정 사이즈는 px을 사용할 것rem 편하게 쓰기기본 폰트 사이즈는 16px이고 이게 1rem이 된다매번 계산하는 번거로움을 줄이는 방법, html에 폰트사이즈를 지정하기아래와 같이 지정하면 1rem = 10px 이 된다html { /* 62.5% of 16px browser font size is 10px */ /* 16px * 0.625 = 10px */ font-size: 62.5%;}css 사이즈 단위px (픽셀)화면의 고정된 물리적 크기를 기준..
이미지가 통통 튀어 오른다 js 없이 css keyframes으로 구현 V-UP 음악과 커뮤니티를 결합한 서비스입니다 Visit Project .project-container { width: 70%; height: 40vh; padding: 1%; display: flex; flex-direction: row; animation: flightProject 2s ease-in-out; box-shadow: 1px 1px 20px #fff500; border: 1px solid #fff500; justify-content: center; ..
FrontEnd BackEnd .list-container { width: 100%; display: flex; margin: 1%; flex-direction: row; justify-content: space-around; .list-title { color: aqua; font-weight: bold; font-size: 2vw; } div { width: 48%; height: 40vh; padding: 3% 0; display: flex; flex-direction: column; align-it..
카드 앞면은 이미지뒷면은 텍스트가 나오는 효과 project .project-container { width: 80%; height: 43vh; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; perspective: 500px; animation: scaleUp 2s ease-in-out;}.projectCard-container { width: 25%; height: 100%; position: relative; transform: rotateY(0deg); transition: transform 1s ease-in-out; trans..
게임 랭킹화면처럼?타이틀이 먼저 나오고 내용이 순차적으로 텍스트 입력되듯 나오는 효과more info 버튼을 누르면 구글드라이브에 저장된 이력서를 볼 수 있다 각 항목을 동적으로 생성하고 setTimeout으로 출력 시간을 설정해 주면 끝 more information! .about-container { width: 100%; height: 40vh; display: flex; flex-direction: column; align-items: center; gap: 15vh; .resume { text-decoration: none; text-align: ce..
마우스를 올리거나 클릭 시 색상이 3가지로 변경되는 효과클릭한 메뉴 버튼은 색상변경 효과가 유지된 상태이다 js 안 쓰려했는데 , 태그로는 원하는 대로 토글을 만들 수 없을 거 같아 js를 적용했다이쁘니까 괜찮아.. @keyframes ToggleBlinky으로 색상을 지정해 주고 클릭한 li에 active 클래스명을 추가하면 끝 About Skill Projects Activities .toggleBtn-container { margin: 15vh 0 10vh 0; font-size: 2vw; ul { display: flex; justify-content: space-around; list..