JadeCode

최근 스타일도 컴포넌트화 하는 CSS-in-JS가 점점 뜨고있다. 직접 사용해보니 props를 넘겨 사용할 수도 있고 여러 면에서 편리하여 애착이 가는 라이브러리이다. 프로젝트를 처음 세팅할 때 styled-components 에 초기 세팅하는 법을 정리해보자. 설치 일단 프로젝트를 생성한다. 최근 공부하고 있는 next.js와 typescript로 생성하자. npx create-next-app@latest --typescript 그리고 만든 프로젝트 내부에 styled-components를 설치한다. npm i styled-components npm i @types/styled-components //타입지정 타입스크립트도 사용할 예정이기 때문에 npm i @types/~ 도 설치해야된다. 또한, st..

Binary Search Binary Search(이진 탐색) 이진 탐색은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘이다. 최소값는 리스트의 첫 번째 값이고, 최대값은 리스트의 마지막으로 설정한다. 중간의 값을 중앙값으로 설정하고, 중앙값 target이면 중앙값이 새로운 최대값이 된다. 정렬된 리스트에만 사용할 수 있다는 단점이 있지만, 검색이 반복될 때마다 목표값을 찾을 확률은 두배가 되므로 속도의 측면에서는 장점이다. 704. Binary Search 기본적인 binary search이다. /** * @param {number[]} nums * @param {number} target * @retu..

console.log에 %c를 사용하여 색깔을 넣을 수 있다. console.log("%c Hello, World!","background:blue; color:white") 배경색과 글자색 모두 변경할 수 있다. 또한 error와 warn역시 표현할 수 있다. console.error("error!") console.warn("warn!")

문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 ..

알고리즘을 풀다보면 2진수로 변환해 풀어야하는 문제들이 종종 있다. 자바스크립트 메소드를 사용하면 쉽게 바꿀 수 있다. 10진수 -> 2진수 ->10진수 let decimal = 25; let binary = decimal.toString(2); // '11001' let binaryToDecimal = parseInt(binary,2); //25 + 8진수, 16진수 let octal = decimal.toString(8) //'31' let hexadecimal = decimal.toString(16) //'19' let octalToDecimal = parseInt(octal,8) //25 let hexadecimalToDecimal = parseInt(hexadecimal,16) //25 중요한 ..

타입스크립트는 왜 만들어졌을까? ?자바스크립트를 버리고 타입스크립트로 넘어오는 이유? 타입 안전성때문 엄청난 개발 경험. 코드에 버그가 줄어든다. 런타임 에러가 줄어든다. 생산성도 늘어난다. 런타임에러가 최악인 이유? 왜 타입 안전성이 중요한가? 자바스크립트는 매우 유연한 언어이다. 그렇기 때문에 자바스크립트는 에러를 보여주지 않으려고 노력한다. 예를들어 [1,2,3,4] + false 를 작성하면 '1,2,3,4false' 배열과 false를 더하면 string형태가 된다. 다른 언어였다면 이상한 일인데 가능하다. 또한 argument가 2개 필요한 코드도 한개만 작성해도 에러가 안나고 NaN이 나온다. 개발자로서 우린 조금 보호받을 필요가 있다. 다른 언어는 보호해준다. 자바스크립트는 확인작업을 거치..

데이터베이스와 간단한 rest api까지 사용 가능한 파이어베이스를 사용해서 안드로이드 어플 만들기 파이어베이스 프로젝트 생성 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 파이어베이스 사이트에 들어가서 시작하기 -> 프로젝트 추가 를 눌러 프로젝트를 생성한다. 디버그 서명 인증서 SHA-1 우측 코끼리를 누른 후 gradle signingReport를 검색하고 엔터를 누르면 여러 정보들이 나온다. 여기서 필요한 SHA1을 찾아 복사 붙여넣기를 하면 된다. 앱 등록 후 구성파일 다운로드 후 추가한다. Firebase SDK추가 다..

공식문서 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org expo로 프로젝트 생성 후 tabs로 설치하면 자동으로 설치된다. 그렇지 않으면 하나하나 설치해주어야 한다. 필자는 처음부터 expo로 설치했다. 설치 npm install @react-navigation/native npm install @react-navigation/native-stack with expo npx expo install react-native-screens react-native-safe-area-context with bare React Native npm i..