본문 바로가기

전체 글179

버튼 누르면 알림권한 요청 // turtle_co/src/App.js import React, { useEffect, useState } from 'react'; import {Routes, Route, Link} from "react-router-dom"; import './App.css'; function App() { // 맨 밑에 드래그 const [notificationPermission, setNotificationPermission] = useState(null); // Notification 권한 요청 const requestNotificationPermission = () => { Notification.requestPermission().then(permission => { setNotificationPermis.. 2024. 2. 13.
[GO언어로 배우는 웹 애플리케이션 개발] 리뷰 해당 책의 대상자는 아래와 같다. GO언어를 처음시작하는 개발자 X GO언어 문법은 알지만 왜이렇게 작성해야하는지 모르는 중급 개발자 O 일단 나는 GO언어를 처음 시작하는 개발자로서 GO를 기초단계부터 알아가지 못하여서 조금 아쉬운 마음이 있었다. 하지만 책에서 적혀있다시피 이 책은 중급 개발자를 위한 책으로 지어졌다. 개발할 때 하드코딩을 하는 것이 아니라 향후 보완을 위한 코딩을 하는 방법, 그리고 그것을 왜 하는지에 대해 자세히 알려주고 있다. 또한 context패키지에서 나오는 각족 에러들을 자세히 설명하면서 단순히 에러만 없애는 코드가 아니라 상호작용이 되는 코드를 설명해준다. 실습에서는 직접 http 서버를 만들어서 직접 프로젝트를 리펙토링하는 작업까지 나와있어서 실습과 이론적인 부분들을 한.. 2024. 2. 12.
스크롤에 따라 360도 돌아가게 {/*---App.js-------------------------------*/} import dollimpanImg from './Images/dollimpan_img.png'; import dollimpanText from './Images/dollimpan_text.png'; function App() { {/*---돌림판---------------------------------*/} } /*mid-part : 돌림판*/ .bottom-part { margin-top: 50px; } .dol-lim-pan { position: relative; width: 300px; height: 300px; margin: 0 auto; } .dol-lim-pan img { position: absolute;.. 2024. 1. 30.
[Python] 파이썬 print 출력 함수 종류 1. 기본print(149)>>> 149print(13+14)>>> 27print("Hello")>>> Helloprint('my name')>>> my nameprint("""is""")>>> is 2. 특수기호 사용print("""I'm happy""")>>> I'm happyprint('''"안녕하세요"라고 말했다''') >>> "안녕하세요"라고 말했다print("I\'m sad")>>> I'm sad 3. print를 한 번만 사용하여 2줄로 출력하기print("my name is \n ddah0329")>>> my name is >>> ddah0329 # 맨안에 한 칸 띄어진 이유는 \n 띄고 ddah0329를 했기때문print("""my nameis ddah0329""")>>> my n.. 2024. 1. 29.
스크롤 이벤트) 스크롤을 내리면 화면 밖으로 나가게끔 // turtle_co/src/App.js import React, { useEffect, useState } from 'react'; import './App.css'; function App() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const handleScroll = () => { setScrollPosition(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); // Calculate the.. 2024. 1. 16.
리액트 componenet 만들기 : <div>가 많으면 component 사용 1. 컴포넌트 사용 이유 2. 컴포넌트 만드는 문법 - function 사용 - let / const 사용 각각 사용하기에 장점 단점이 있음...! 3. 컴포넌트 사용하면 좋은 곳 1. 반복적인 HTML 축약 2. 큰 페이지를 컴포넌트로 만들 수 있음 3. 자주 변경될 거같은 컴포먼트 UI들 4. 컴포넌트 단점 1. state 사용 시 문제 생김 ** A 함수에 있던 변수는 B 함수에서 맘대로 가져다 사용 할 수 없음 --> 그래서 무작정 컴포넌트를 만들면 안됨. 2024. 1. 16.
React 좋아요 누를때마다 1씩 증가하는 버튼 만들기 state, 함수 이용 좋아요 버튼을 누르면 숫자가 올라가게끔 만들 것이다. 이때 숫자는 누르는 횟수만큼 +1이 되기 때문에 state를 써줄 것이다. 1단계 : 형태만 만들기 import {useState} from "react"; function App() { let [heart] =useState(0); return ( 좋아요 ❤️ {heart} ); } 2단계 : 좋아요를 눌렀을 때 0이 1로 바뀌도록 (onClick 사용) import {useState} from "react"; function App() { let [heart, heartAlterNums] =useState(0); return ( 좋아요 hearAlterNums(1)}> ❤️ {heart} ); } 3단계 : 누를때마다 +1이.. 2024. 1. 16.
리액트 Button을 누르면 state 변경 값으로 전환 *원본 데이터 보존 버튼을 누르면 state 변경 값으로 전환 되게끔 할 수 있다. - 방법 1 : 배열을 그대로 가져와서 수정하기 let [articleList, articleSwitch] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( articleSwitch(['여자코트 추천', '강남 우동 맛집', '파이썬 독학'])}> 글변경버튼 ) 하지만 이렇게 할 경우에는 원본 데이터인 articleList가 보존이 안되고 여자코트 추천으로 바뀌기 때문에 적합하지 않다. 그래서 우리는 원본 데이터를 보존하면서 state를 사용해야하는 것이다. - 방법 2 : 원본 데이터 보존하면서 값 변경 let [articleList, articleSwitch] = useState(['남.. 2024. 1. 16.
함수 만들기 : 식은 무조건 그릇을 따로 만들어서 1. 함수만들기 - 형태 function 함수() function 함수() { console.log(1) } return( 좋아요 ❤️ {heart} 2월 17일 발행 ); - 형태 ()=> {식} 좋아요 {식}}> ❤️ {heart} 2월 17일 발행 ** 주의사항 좋아요 ❤️ {heart} 2월 17일 발행 식을 바로 넣으면 절대 안됨! 빈 함수를 만들어서 넣든 함수를 따로 만들어서 넣든 어쨌든 함수라는 그릇을 만들어서 거기다가 식을 넣어야함! 2024. 1. 16.
리액트 Warning 경고 안뜨게 하기 /* eslint-disable*/ 경고 표시는 실행 시 영향을 주는 부분이 아니기때문에 무시해도 된다. 하지만 초보자들은 코딩을 하다보면 이것저것 신경쓸게 많다 보니까 경고 표시가 눈에 걸리게 된다. 그럴때는 그냥 리액트 App.js 맨 상단에 해당 주석코드를 입력하게 되면 신경쓰이던 경고 표시가 안뜨게 된다. /* eslint-disable*/ 2024. 1. 16.
state란? 왜 쓰는 것일까? destructuring? 1. 왜 state를 써야할까 변수로 설정했을때는 값이 바뀌면 값이 바뀐 것으로 실행해야한다고 다시 코드 작성해야한다. 하지만 state로 만들어서 변수로 선언해주면 state는 자동으로 HTML을 전체 적으로 다시 젠더링 해주는 기능이 있기때문에 따로 작업을 안해도 된다. 즉 : 자주 변경될 것 같은 HTML 부분을 state로 만들어 두면 됨 - 변수 설정 후 값을 바꿀때 let post = '강남 우동 맛집' ---> '역삼 우동 맛집' return( #추가추가추가 작업 어쩌구 저쩌구 {post} ); } - state 설정 후 값을 바꿀때 let [a,b] = useState('남자 코트 추천'); ----> '여자 코트 추천' return( {a} ); } 2. state 사용방법 import .. 2024. 1. 16.
React 변수에 있던 자료를 HTML에 넣기 import "./App.css"; function App() { let post = '강남 우동 맛집'; // 서버에서 가져온 실제 테이터라는 가정 return ( 네비게이션 바 {post} ); } export default App; let post 로 변수 저장한 후 중괄호 {}를 이용해 불러올 수 있다. 2024. 1. 16.
[Python] 문자열 길이 반환 함수 len() len()은 문자열 길이를 반환하는 함수이다.  length의 약어.  1. 문자열 (공백도 count)len("내 아이디는 ddah0329이다.")>>> 18 2. 숫자 -> 문자열로 바꿔서 len(0329)>>> 오류 발생 (숫자라서)len(str(0329))>>> 4 3. 자료형 (리스트, 튜플, 딕셔너리, 세트 등) - 총 갯수len([10, 20, 30, 40, 50])>>> 5myList = [10, 20, 30, 40, 50]len(myList)>>> 5 2024. 1. 15.
JSX란? JS와 JSX의 차이점 1. JSX란 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaS 의 확장 2. JSX의 장점 1. 개발자 편의성 향상 2. 협업에 용이 / 생산성 향상 -> 디자이너 분들이 코드를 보더라도 구조를 파악하기 쉬워서 협업에 용이! 3. 문법 오류와 코드량 감소 3. JSX의 특징 HTML 태그 내에 JavaScript 연산 가능! 3. JS 와 JSX 차이점 2024. 1. 14.
[Python] pip install os import oscommand = input("명령을 입력하시오: ")if command == "shutdown": print("컴퓨터가 곧 종료됩니다. 엔터키를 누르세요") input() os.system("shutdown /s /t 1")elif command == "cwd": cwd = os.getcwd() print("Current working directory: ",cwd)else: print("알수없는 명령어입니다.")>> 명령을 입력하시오: cwd >> Current working directory: C:\Users\Admin\Desktop\ddah 2024. 1. 11.

티스토리툴바