본문 바로가기

전체 글280

a태그 대신 react-router-dom으로 링크 연결하기 REACT-ROUTER-DOM 기능별 설명 BrowesrRouter as Router 메뉴의 모든것을 감싸는 최상의 컴포넌트. 컴포넌트명이 길어서 보통 Router 로 줄여서 쓴다. Link 컴포넌트 a태그는 그 링크로 이동시켜줘서 더이상 사용을 못함 history.pushState()처럼 url만 바꿔주는 기능을 사용해야함 그게 Link 컴포넌트. Routes 컴포넌트 여기부터가 메뉴야! 메뉴의 범위를 지정해준다. 컴포넌트가 보여줄 영역을 감싸는 컴포넌트. Route 컴포넌트 메뉴 하나당 하나씩 할당할 수 있으며, URI에 맞는 컴포넌트를 찾아주는 컴포넌트. react-router-dom 설치하기 버젼 V6 (21.12.17)에 나온 기능이다. 이전 버전과는 차이가 있으니 사용하는 버전을 알고 사용하자.. 2022. 10. 22.
전역 스타일 만들고 적용 / GlobalStyle createGlobalStyle 설치하기 npm i styled-components 전역적으로 적용하고 싶은 스타일 작성하기 // GlobalStyles.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html, body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { padding: 0; margin: 0; box-sizing: border-box; text.. 2022. 10. 22.
타입스크립트의 타입 타입스크립트의 타입 : 을 사용해서 자바스크립트 코드에 타입을 정의하는 방식을 타입표기(Type Annotation)이라고 한다. String let str: string = 'hi'; Number let store: number = 123412342; // number 타입이 너무 길때는 구분을 위해서 _를 넣을수 있다. let store_1: number = 123_4123_42; Boolean let isLoggedIn: boolean = false; Array let arr: number[] = [1,2,3]; let arr: Array = [1,2,3]; Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 생.. 2022. 10. 11.
github contributions(기여도)에 반영이 안될때 결론 한줄. git에 기록되어있는 이메일 & 계정명은 github에 기록되어있는 primary 이메일 & 계정명과 같아야 한다. 해결법 가끔..도 아니고 초기에 빈번하게 일어났던 기여도 문제! 자꾸 찾아보기 귀찮아서 해결법 작성함. 1. git에 현재 저장되어 있는 계정명과 이메일이 뭔지 확인하기 $ git config user.name $ git config user.email 2. github에 현재 저장되어 있는 계정명과 이메일이 뭔지 확인하기 해당 레포지토리에 들어가서 setting - Emails를 보면 알 수 있다. 꼭 primary 이메일을 확인해야 한다. 계정명은 간단하게 github 맨 오른쪽에 있는 프로필을 누르면 바로 뜬다. 서로 다르다면 git에서 github과 같게 설정해줘야 함... 2022. 10. 10.
[221030-221107] 일주일간 뚝딱거리며 포폴만든 이야기 자고로 우리 교수님이 그랬다. (코드를) 만지작거릴거면 적어도 예뻐야 만질맛이 난다고. 만지고있는데 재미가 없다면 그 이유 중에 하나는 안 예쁘다는 이유일거라고. 나도 그렇다. 디자이너는 아니지만 막 화려하게 예쁘진 않아도 마음에 들게 깔끔하면 코드 두들긴 결과물이 별게 아니더라도 마음에 참 들더라. 어쨌든 포폴을 만들어야해서 무료로 공개해놓은 포폴들 보고 있는데 내가 원하는 스타일이 없었다. 분명히 내 성격상 마음에 드는 디자인 찾을때까지 포폴 내용도 작성 안하고 구글링할게 뻔해서 호다닥 만들기로 했음. 1. 페이지 구성 구상 만들 페이지를 정하고, 나에 대해서 작성할 키워드를 작성했다. 정리 끝. 2. 레퍼런스 찾기 + 무한 구글링 마음에 드는 느낌을 가진 레퍼런스를 찾을때까지 찾아본다. 머리속에 희.. 2022. 10. 7.
level 1) 자연수 뒤집어 배열로 만들기 자연수를 주면 뒤집어서 하나씩 요소로 넣어서 배열을 반환하기 12345 -> [5,4,3,2,1] function solution(n) { var answer = []; let str = String(n).split(""); for (let i = 0; i 0); return answer; } 이게 훨씬 간단해보여서 이걸로 결정 암.. 2022. 9. 15.
level 1) 정수 제곱근 판별 특정한 정수를 주었을때, 정수 i의 제곱근일 경우, i+1의 제곱을 반환하고, 아닐 경우 -1을 반환하기 121 = 11*11이므로 12의 제곱인 144를 반환 3은 정수제곱근으로 만들 수 없으므로 -1을 반환 function solution(n) { var answer = 0; for (let i = 1; i 2022. 9. 15.
level 1) 약수의 합 숫자 12을 줄 경우, 약수를 모두 더해서 28이란 값이 나오도록 메서드 작성 12 -> 1+2+3+4+6+12 = 28 앞에서 자릿수마다 합을 구하는 문제를 풀어서 쉽게 풀 수 있었다. 1부터 28까지 정수를 대입해서 나누도록 시키고, 나머지가 0인 숫자들의 합을 구하면 된다. function solution(n) { var answer = 0; for (let i = 1; i 2022. 9. 15.
level 1) 각 자릿수 더하기 주어진 함수 기본형 function solution(n) { var answer = 0; // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다. console.log('Hello Javascript') return answer; } 123 -> 1+2+3 = 6 이 값을 도출해내는 함수 만들기 너무 오랜만에 문제를 풀려니까 머리가 멍하다. 원래 이 자릿수를 하나하나 끊어주는 함수가 있던가? split은 문자열에만 적용되는거니까 123을 강제로 string화 시켜주고( .toString()이나 String()) 하나하나를 다시 숫자로 바꿔주고(Number(), parsInt())를 사용해서 더해주면 되겠지만 번거롭다. 다른게 없을까. let sum = 0; do { sum += n % 10; n = Ma.. 2022. 9. 15.
[220808-0925] NFT마켓 프로젝트 목적 영상이나 음원의 저작권을 거래하는 사이트. 영상이나 음원의 조회수에 따라 사이트는 해당 영상이나 음원 소유자에게 수익금을 분배해준다. 영상과 음원은 각각 토큰으로 만들어져 거래가 된다. 08.08 ~ 08.22 / 담당한 파트를 위한 공부기간 나는 이 중에서 경매사이트를 담당하게 되었다. 리액트는 대충 알아도 솔리디티는 기초만 알고있는 상태. 크립토좀비를 풀어서 기초를 다시 다지고, 다른 사람들의 nft마켓 코드들을 구글링해봐야겠다. 08.12 역시 기초와 실전코딩은 다르다. 크립토좀비만 떼면 될 줄 알았는데 실제로 코딩을 잡아보니 어디부터 손을 대야할지 막막하다. 마침 감사하게도 다른 팀의 nft마켓을 구현한 팀프로젝트 코드를 얻을 수 있어서 우선 그걸 뜯어봐야겠다. 08.20 경매사이트 코드를 .. 2022. 9. 14.

티스토리툴바