본문 바로가기

전체 글

IT관련/Flutter 2024. 8. 30.
Windows에서 Flutter을 설치해보자 !!!!! 안녕하세요 !!! 이번에는 Windows환경에서 Flutter을 설치해보려고 합니다 !!! 잘 따라와주세요 ^^ ( 저는 2024년3월19일 기준으로 진행했습니다.... 홈페이지들의 UI가 변경되거나 그러면 달라질수도 있는점 주의하세요 !!! 그래도 이 흐름정도면 괜찮을겁니다 ^^ )  저는 개인적으로 flutter.dev의 공식홈페이지를 따라하려고 하는데 잘 안되는것도 만더라구요 ㅜㅜ 그러던 와중에   Chocolatey  를 찾아서 하는 중인데 windows에서도 여러가지 패키지를 설치 할 수 있게 해준답니다 !!!  https://chocolatey.org/install#individual먼저 ! 위로 접속을 해주세요 ~~~  그 다음에는 Individual을 눌러주시구 ~~ 순서대로 따라해봅시다 ..
IT관련/TypeScript 2024. 8. 30.
TypeScript을 이용해서 함수를 만들어봅시다 !! 안녕하세요 !! 최근 타이프 스크립트를 공부하면서 공부한것들을 정리하려고 합니다 !TypeScript는 Type를 적어서 나의 실수를 줄이고자 하는 것 같습니당 ! 그 중에서 함수의 관한 글 !  func에서 각 변수들의 Type를 쓰지 않으면 defult로 any와 void가 설정이 됩니다!위와 같이 기본적으로 함수를 선언하고 Type를 지정하지 않으면 defult값으로 any와 void가 들어갑니다! 이제 Type를 적어봅시다 !  함수에 Type를 선언 한 경우 함수의 결과를 void로 지정하고 return 1을 했을 경우위 사진과 같이 함수를 void로 하고 return 1을 하는 순간 에러가 납니다.. 왤까요 ?  왜냐하면 void는 return 값이 필요하지 않기 때문입니다 ! 함수의 Argu..
IT관련/Python 2023. 1. 28.
Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 2편 1편은 아래에 있습니다 !! https://heokknkn.tistory.com/57 그럼 바로 시작하겠습니다 ! 자 전부 동의 해주시구요 ! 자 ! 그러면 카카오에서의 설정과 프론트쪽은 거의 다 진행했습니다 !! 저번에 여기까지 했습니다 ! 그럼 바로 백엔드로 가기전에 리액트 부분에서 조금만 손 좀 봅시다 ! 딱 필요한 부분만 가져와서 설명하겠습니다 ! 깃허브 로그인 했을 때와 비슷할겁니다 ! 먼저 저희는 code가 필요합니다 ! 어떻게 가지고 올까요? useLocation()와 URLSearchParams, code를 이용해서 손쉽게 code를 빼올 수 있습니다. code를 가져오는 방법은 다양하지만 저는 이 방법으로 가져왔어요 !! import { useLocation, useNavigate } f..
IT관련/Python 2023. 1. 23.
Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 1편 안녕하세요 !! 저번에는 github를 이용해서 로그인을 구현했는데요 !! 이번에는 사실상 모두가 이용하는 카카오를 이용해서 로그인 기능을 구현해보겠습니다 !!! 깃 허브 로그인이 궁금하시면 https://heokknkn.tistory.com/54 여기를 참고해주세요 !! 자 ! 먼저 저런식으로 버튼을 만들어주시면 편합니다 ~~ 자 ! 그러면 저 버튼을 눌렀을 때부터 시작됩니다 !!! 코드를 봐봅시다 ! https://developers.kakao.com/console/app 우선 위에 URL로 들어가서 어플리케이션을 만듭시다 ! 로그인 하시구요 ! 저는 만들어 놓은게 있어서요 ^^ 「+」눌러주시구 ! 앱이름이랑 사업자명은 원하는데로 적어주세요 !! 그리고 당연히 「V」표 체크해주시구 저장 ! 자 ! 다..
IT관련/CSS 관련 2023. 1. 17.
Tailwind CSS에서 space에 대해서 알아봅시다 ! 안녕하세요 !!! 오늘은 Tailwind CSS에서 유용한것에 대해서 사용해보려고합니다 !!! 앞으로 자주 유용한 기능들을 짧게 정리해나가려고합니다 !!! 그럼 바로 본론으로 갑시다 ! Space란?? 간단합니다 !! 하위 요소 사이의 공간을 제어하는 ​​유틸리티입니다. 그리고 !! 하위 요소에서 기본적으로 display가 none인 요소는 제외 하구요 !!! 자 아래와 같은 코드가 있습니다 ! const Home: NextPage = () => { return ( ); }; 한번 화면을 봐볼까요?? 너무 못생겼네요 ㅜㅜ 요소들 사이에 공간이 있으면 좋다고 생각하시죠?? 자 ! 이럴 때 space를 추가해줍시다 !! 아래처럼요 !! 자 그러면 화면을 봐볼까요?? 저 위에 보다 훨씬 괜찮지 않나요?? 아래..
IT관련/Python 2023. 1. 14.
Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 2편 https://heokknkn.tistory.com/54 지난편은 여기서 확인해주세요 !!!! 자 ! 저번에 밑에와 같은 화면에서 끝났는데요 !! 바로 이어서 시작해보겠습니다 ! 아래에서는 리액트 쿼리에 대한것들도 있는데 이 부분끝나고 바로 다뤄볼게요 !!!! 딱 필요한 부분만 가져와서 설명하겠습니다 ! 먼저 저희는 code가 필요합니다 ! 어떻게 가지고 올까요? useLocation()와 URLSearchParams, code를 이용해서 손쉽게 code를 빼올 수 있습니다. code를 가져오는 방법은 다양하지만 저는 이 방법으로 가져왔어요 !! import { useLocation, useNavigate } from "react-router"; export default function GithubCo..
IT관련/Python 2023. 1. 7.
Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 1편 안녕하세요 !!! 이번편에서는 Django와 리액트를 이용해서 github로그인을 구현해보려고 합니다 !!! 참고로 프론트는 리액트입니당 ^^ 그럼 바로 시작해봅시다 ! 저는 sign up을 해서 아이디가 없으면 아이디를 생성해서 로그인 시키고 아이디가 있으면 그냥 바로 로그인을 시키는 로직입니당 ! 전 우선 저번에 배운 차크라 UI를 이용해서 아래처럼 Sign up UI를 구현해봤습니다 ! 자 ! 그러면 저 버튼을 눌렀을 때부터 시작됩니다 !!! 코드를 봐봅시다 ! 자 !! 저걸 누르면 저런식으로 github 관련 URL을 입력해주셔야하는데요 !! 그럼 밑에서 href줄에서 「parameter」는 어떤식으로 만드는지 알아봅시다 !!! 왜냐하면 github에게 권한을 받아서 로그인을 해야하니까요 !! h..
IT관련/CSS 관련 2022. 12. 28.
[Chakra] 차크라 UI로 정말 간단하고 쉽게 다크모드 구현해봅시다 ! 안녕하세요 !! 이번에 저번 시리즈에 이어서 차크라 UI로 정말 간단하고 쉽게 다크모드를 구현해 볼 생각입니다 !!! 정말 쉬우니 잘 따라와주세요 ^^ 자 바로 코드 보면서 설명 들어가겠습니다 !! ( 기본적으로 chakra UI는 설치를 해주세요 !!!! 안하시는 분들은 여기서 밑에 URL에서 확인해주세요 !!! ) https://heokknkn.tistory.com/51 index.tsx import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"; import ReactDOM from "react-dom/client"; import router from "./router"; import { RouterProvider } from "react..
IT관련/CSS 관련 2022. 12. 24.
[Chakra] Chakra UI를 이용해서 Modal(모달)을 작성해봅시다 ! 안녕하세요 !!! 이번에는 Chakra UI를 이용해서 Modal(모달)을 작성해보려고 합니다 !! 리액트 환경에서 정말 쉽고 간단하게 만들 수 있습니다 !! (state라던가 function하나도 안쓰고 가능합니다 ! ) 자 그러면 바로 시작해봅시다 ! 그 전에 아직 설치를 하지 않는 분들은 아래 URL에서 확인해서 설치해주세요 ^^ https://heokknkn.tistory.com/51 또한 그 전에 Modal에서 아이콘도 사용할겁니다 !!! 저는 react-icons를 사용할것입니다 !!! 정말 무궁무진하게 icons를 많이 사용할 수 있거든요 ^^ 사용 하실분들은 아래 보시구 다운로드 합시다 !! npm install react-icons --save Modal 만들기 먼저 저의 기본 화면을 봐..
IT관련/CSS 관련 2022. 12. 19.
[Chakra] css를 간단하게 ! Chakra UI에 대해서 배워봅시다 ! (feat. tailwind css 와 비교) 안녕하세요 ! 최근에 Chakra UI에 대해서 공부를 시작해봤습니다 !!! 그래서 Tailwind CSS말고 Chakra에 대해서 알아보면서 비교도 해보고 ! 설치방법에 대해서도 알아보겠습니다 ! ( 마지막 까지 봐주세요 !! TIP이 좋습니다 ^^ ) Chakra UI란? Chakra UI는 개발자가 웹 응용 프로그램을 위해 액세스 가능하고 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할 수 있도록 도와주는 React의 UI 구성 요소 라이브러리 입니다. React 위에 구축되었으며 테마 엔진에 스타일이 지정된 시스템을 사용합니다. Chakra UI의 목표는 프로그래머가 최소한의 노력으로 아름답고 반응이 빠르며 접근 가능한 사용자 인터페이스를 쉽게 만들 수 있도록 하는 것입니다. 이 툴킷에..
728x90

티스토리툴바