분류 전체보기

React에서 styled-component 이용하기 + typescript

사용하는 이유 styled-components는 React css 스타일링 프레임워크로, CSS in JS이다 따라서 JS에서 직접적으로 스타일에 영향을 줄 수 있다. className을 따로 지정할 필요가 없다 => 빌드 시 고유한 클래스명이 적용된다. CSS 문법을 따르기 때문에 가독성에 좋다 새로운 component를 만들고 만들어둔 component를 다른 컴포넌트에 이용할 수 있어 효율적이다. 중첩 스코프 규칙을 이용해 직관적인 코드 작성이 가능하다. 일관적인 스타일 관리가 쉽다. 반복적으로 쓰이는 요소를 정의해서 props로 가져다 쓸 수 있다. 시작하기 0. 설치 npm install --save styled-components // 기본 yarn add styled-components //..

[ CSS ]Internet Explorer, Edge, Firefox, Chrome 에서 스크롤바 없애는 법

/* 스크롤바 없애는 ie edge 코드 */ -ms-overflow-style: none; /* 스크롤바 없애는 firefox 코드 */ scrollbar-width: none; /* 스크롤바 없애는 chrome 코드 */ (스크롤바를 없애고 싶은 박스이름)::-webkit-scrollbar { display: none; } 짠~ 이게 끝입니다 브라우저마다 스크롤바 유무가 달라질 수 있으니 세 코드르 다 작성해주시는걸 추천드립니다

VScode 설정 간단하게 동기화하기

🤷‍♀️ Settings Sync? VScode 설정 동기화를 한번이라도 생각해봤다면 Settings Sync라는 익스텐션에 대해서는 들어봤을 것이다. 나 또한 이전까지는 Settings Sync를 이용했고... 병합을 안하고 새로운 설정값으로 덮어버린 후 그걸 병합해버린다든가 하는 멍청한 실수들이 있었다. 물론 Settings Sync의 잘못은 아니지만 어쨌든 Settings Sync는 토큰을 받아와서(한 번밖에 못보는) Gist ID를 받아오고.. Settings Sync 익스텐션에 들어가서 Gist ID와 토큰, URL 등등을 입력해줘야 했다. + settings.json 파일에 업로드 이렇게 설정이 복잡하기는 하지만 처음 한번이 복잡할 뿐 그 후로는 간단하게 동기화 할 수 있다 하지만 우리가 원하..

[ TIL ] Next.js에서 Link 사용하기

✍ React와 Next.js에서 란? React에서 react-router-dom을 이용할 때도 Link 태그를 사용했었다. : react-router-dom About 익숙한 모습이다. : Next.js Home {post.title} Blog Post . . . 다른 점이 몇 개 있다. 그 중 하나가 바로 a 태그이다. react에서는 페이지를 전환하는 과정에서 페이지를 불러오지 않고 페이지의 주소만 변경해야 하기 때문에 a 태그를 쓰지 않는다. 반면에 Next.js는 페이지 전환을 방지하는 Link 내에서 a 태그를 사용한다. Home Next.js Link 태그 안에 a 태그를 따로 쓰지 않더라도 HTML 마크업은 a 태그 안에 Home이 쌓여져 나온다 => a 태그를 Link 안에 넣지 않아도..

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing )

✍ Next.js에서의 라우팅 Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원한다. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Next.js는 파일 시스템 기반의 라우팅을 해준다 pages 경로에 파일을 추가하면 자동적으로 route할 수 있다 => Next.js 프로젝트..

[ study ] 웹 게임을 만들며 배우는 react

내가 기억하려고 올리는거라 내용이 조금 빈약할 수 있음 #2.8 ~ 3.7 학습 내용 바벨을 설치해서 react 파일을 웹이 읽을 수 있도록 만드는 과정 terminal에 babel/core을 설치 : 기본적인 바벨. 최신 문법을 바꿔주는 것. babel/preset-env : 우리 문법을 환경에 맞게 바꿔주는 것 babel/preset-react : jsx를 지원해줌 babel/babel-loader : 바벨과 웹펙을 연결해준다. reloading: 새로고침. 기존 데이터가 사라짐 hot-reloading : 기존 데이터를 유지하면서 화면을 새로고쳐주는 것 react에서 map을 돌릴 때는 유니크한 key가 항상 필요하다 key에 i를 넣고 숫자를 하나씩 올리며 주입해주면 다음에 성능 최적화를 할 때 ..

[ TIL ] Next.js redirects와 rewrites로 API key 숨기기

✍ API KEY 개요 API 키(KEY) 는 인증(Authentication) 방식의 한 종류이다. API 키 이외의 인증방식으로는 API 토큰(Token) 방식이 있다. 특징 API 키는 특정 사용자만 알 수 있는 문자열이다. 개발자는 API 제공사의 페이지에서 키를 발급받아 호출 시 API 키를 이용하여 호출한다. 단점 모든 클라이언트가 같은 API 키를 공유하기 때문에 보안에 취약할 수 있다. ✍ next.config.js redirects와 rewrites는 둘 다 루트 디렉토리에 있는 next.config.js에서 사용할 수 있는 함수이다. next.config.js는 설정 파일로 클라이언트의 접근 경로를 우회하여 전송해주는 방법을 명시 / 설정하는 파일이다. 📌 redirects 다른 페이지..

Next.js에서 .env 사용하기

🙆‍♀️ .env 생성하기 react에서 했던 것처럼 .env를 최상단 루트에 만들어주고 .gitignore에 .env를 등록해준다. 🙆‍♀️ .env 작성하기 REACT_APP_API_KEY=1234567890 NEXT_PUBLIC_API_KEY=1234567890 🙆‍♀️ .env 이용하기 const API_KEY = process.env.REACT_APP_API_KEY; const API_KEY = process.env.NEXT_PUBLIC_API_KEY;