문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 나의 풀이 function solution(s) { return Number(s); }

문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 입출력 예 N answer 987 24 123 6 입출력 예 설명 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. 나의 풀이 function solution(n) { return String(n).split("").reduce((acc,cur) => acc + Number(cur), 0); }

반응형 작업을 위해서 모바일을 작업하는 중에 a 태그 또는 button 요소를 터치 시 영역의 색상이 변화하는 문제를 발견했다. 기능적인 문제는 아니지만 페이지를 보는 입장에서는 거슬리고 불완전하다고 느낄 수 있었다. ( 이것을 디자인적인 요소로 배치한다면 몰라도 의도치 않은 경우라면! ) 이것을 해결하기 위해서 -webkit-tap-hightlight-color 를 사용했다. .link { -webkit-tap-hightlight-color: transparent } transparent 속성을 줘서 간단하게 제거가 가능하다. 그 외에도 색상을 준다면 해당 색으로 영역을 변화시킬 수 있다.

Next.js 프로젝트를 배포하기 위해서 build 중 오류가 발생했다. 'Build optimization failed: found page without a React Component as default export in pages/...' error 해석해보면 React 컴포넌트가 아닌 것을 export 하는 페이지는 렌더링 될 때 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 한다. 한마디로 pages 폴더 안에 React 컴포넌트 외 다른 파일이 존재하기 때문에 발생한 문제였다. 나같은 경우 styled-components를 사용한 코드를 모아두는 Style.js 파일이 있어서 발생한 문제였다. 해결 방법 간단하게 Style.js 파일을 외부로 이전시켜주는 것으로 해결했다. 앞으로는 pag..

웹 사이트를 디자인하다보면 글자색에 배경 이미지가 들어가는 경우가 있다. 해당 기능을 구현하는 것은 생각보다 간단한데, 알아보자 필요 속성 ▶ color : 배경 색을 넣어야하기 떄문에 당연 필요! ▶ background-image : 이미지를 넣어서 배경을 꾸미기 때문에 사용한다. ▶ background-clip : 텍스트를 이미지로 표현할 수 있다. ▶ -webkit-background-clip : -webkit 은 웹 브라우저 엔진으로 구글, 사파리 등에서 css 속성을 사용할 수 있게 한다. 이제 이것으로 적용을 해보자 .image_text { color: transparent; background-image: url("이미지 경로"); background-clip: text; -webkit-ba..

React와 같이 사용하는 css 라이브러리로 styled-components를 자주 사용한다. 그런데, 공통 스타일을 관리하려고 theme를 만들면 필요할 때마다 import를 해야한다는 불편함이 있었다. 또한 dark 테마와 같이 전체적인 스타일이 변경되야 하는 경우 처리하기가 매우 까다로웠다. 하지만 styled-components에서는 context API를 통해 theme를 관리할 수 있는데, ThemeProvider이다. ThemeProvider ThemeProvider는 context를 통해서 하위 컴포넌트에서 theme 속성을 전달하는 역할을 한다. 그래서 일관적인 theme를 유지할 수 있다. import { ThemeProvider } from 'styled-components'; co..

메뉴, 리스트 등을 여는 애니메이션을 구현하기 위해서 hight 값을 조작하는 경우가 많다. 하지만 height 값에 변화는 생기지만 transition이 적용되지 않는 경우가 발생했다. .menu { height: 0; overflow: hidden; transition: all 0.8s } .menu_active { heigth: auto } 이론상 menu 클래스만 가지고 있는 엘리먼트가 menu_active 클래스를 가지게 된다면 자식 엘리먼트의 height 값 만큼 커지면서 애니메이션이 발생되어야 한다. 하지만 display: none을 했을 때 애니메이션이 발생하지 않는 것처럼 아무런 애니메이션이 작동하지 않았다. 그 이유는 height 값이 auto라면 transition이 작동하지 않는다고..

문제 설명 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 제한사항 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 입출력 예 s return "try hello world" "TrY HeLlO WoRlD" 입출력 예 설명 "try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 ..