잿꽃's posting Garden

REACT styled-component에 prop전달이 안 되는 문제 Received `false` for a non-boolean attribute '변수' 2일 동안 안되어서 머리를 감싸 쥐었는데 해결해보니 멍청한 나를 탓해야지 뭐..... 이걸 해결하면서 다른 여러가지 방법이 있다는 것을 알게 되었다. 해결방법 1. 내가 만든 속성이 기본 속성과 중복하는지 확인. 중복하면 속성 이름 바꿔야 함. emotion/props.js at main · emotion-js/emotion (github.com) GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition 👩‍🎤 CSS-in-JS..

GIT 설치 window https://git-scm.com/ Git git-scm.com mac command + space에서 termial 검색하여 터미널.app 선택 또는 https://git-scm.com/ Git git-scm.com git --version 입력하면 설치화면 뜬다. GIT 초기 셋팅(한 번만 하면 됨) 버전관리 선언 git init 셋팅작업 window git config --global core.autocrlf true mac git config --global core.autocrlf input 사용자 정보 입력 git config --global user.name 'yourName' git config --global user.email 'yourEmail' 사용자 정보..

내가 보려고 만드는 오류 리스트 Module not found : can't resolve 파일 in 경로 리액트 복습하다가 yarn start를 했는데 오류가 나왔다. 저한테 왜 이러세요 정말... 검색을 해보니 node-module, package-lock.json을 제거 후 yarn install npm install 을 하면 해결이 된다고 했지만 난 안되었다. 여러 가지 찾아보았지만 안 되는 것을 보고 파일 내에 문제가 있겠다 싶었다. './Layout'을 자세히 확인해보니 이 녀석만 경로 하나가 빠져있었다.(왜 빠져있었지....???) 스택오버플로우에서 댓글을 보니 몇몇분이 경로를 확인하라는 댓글이 있어서 확인해보니 바로 발견ㅠㅠ.... https://stackoverflow.com/questi..

주어진 배열 안에서 끝말잇기에 일치하지 않거나 중복되는 단어가 있으면 몇 회째에 몇 번째 사람이 틀렸는지 찾는다. ex) n = 3, words = ["tank", "kick", "know", "wheel", "land", "dream", "mother", "robot", "tank"], return = [3,3] 3 ["tank", "kick", "know", "wheel", "land", "dream", "mother", "robot", "tank"] [3,3] 전에 끝말잇기를 한번 만들어 봤었어서 그나마 수월하게 진행... 기존의 값을 새로운 배열에 push하고 맨 뒷자리와 기존의 맨 앞자리가 같은지 비교한다. 또는 기존의 값들을 담은 새로운 배열에서 중복되는 단어가 있는지 확인한다. 찾으면 bre..

SASS(SCSS)문법을 정리했다. SASS(SCSS)는 최종에는 표준 CSS로 동작해야 하며 전처리기로 작성 후 CSS로 컴파일 해야 한다. 1. 중첩 : 자식 요소를 부모 요소 내부에 작성이 가능 .box{ h2{ color: red; } } 2. & : 바로 상위의 요소를 선택할 수 있음 .box{ /* .box:hover */ &:hover{ color: red; } } 3. @at-root : 하위 요소는 범위 밖에서 사용할 수 없기 때문에 중첩에서 벗어 날 때 사용 .box{ @at-root h2{ color: red; } } /* CSS .box{ } h2{ color: red; } */ 4. 속성 중첩 : 중복되는 속성의 이름을 중첩 .box{ margin: { left : 5px; bot..

버튼 클릭하면 물결처럼 원이 나타나는 효과를 만들어 보았다. 이런 기능 진짜 해보고 싶었는데 마침 유튜브의 '맛있는코딩'님의 영상에 이런 내용이... 정말 취향저격 영상밖에 없다... 맛있는 코딩 yummy coding - YouTube 맛있는 코딩 yummy coding HTML5, css, Javascript와 React.js기반의 다양하고 재미있는 프로젝트들을 연구하는 개발자입니다. 많은 분들께 영감을 주기 위해 노력하겠습니다. www.youtube.com 원래 영상들 보면 배속해서 보는데 영상이 빨라서 정지 버튼 누르면서 보는 게 함정... 영상 보고 따라 만들어 봤는데 모르는 부분이 꽤 많았다. 사실 마우스에 대한 효과를 주는 것들을 배우지 않아서 대강 마우스의 x, y 값을 읽어와야 한다는 것..

임의의 배열에서 n의 숫자 이상의 숫자의 개수가 n개 이상일 때 최댓값 n을 구한다. ex) [1,2,4,6,7]의 최대값은 3 3이상 숫자 [4,6,7] 이고 length 3이기 때문에 최댓값은 3 사실 프로그래머스에 나온 예시가 한 개밖에 없어서 이해를 잘 못했음;; 배열 내에 있는 숫자가 그 숫자 이상의 숫자 개수라고 이해했는데 질문하기 보니까 배열 내에 있는 숫자가 아닌 그 사이 값이 될 수 있다고 말해줘서 알았다. function solution(citations) { var answer = []; let result = 0; let filters; for(index in citations){ filters = citations.filter(item => item >= citations[inde..

background 속성을 이용하여 세련된 hover효과를 만들어보자. 회사에서 웹사이트 동적 구현을 주로 한다지만 그래도 프론트엔드라면 간지나는 hover효과 하나는 만들 줄 알아야 한다는 생각이 들어서 만들어보았다. 유튜브의 '맛있는코딩'님을 참고했다. 간단하면서 세련된 효과를 만드는 영상이 많아서 보면서 만들었다. 맛있는 코딩 yummy coding - YouTube 맛있는 코딩 yummy coding HTML5, css, Javascript와 React.js기반의 다양하고 재미있는 프로젝트들을 연구하는 개발자입니다. 많은 분들께 영감을 주기 위해 노력하겠습니다. www.youtube.com 코드의 핵심은 background에 대한 부분이다. background-color가 아닌 background..