터치 디바이스(핸드폰/패드) 마우스 hover 해결방법 pc에서 마우스 hover 가상 클래스를 이용해서 이펙트를 주는 경우가 정말 많다.근데 핸드폰이나 패드 같은 "터치" 디바이스에서 제대로 작동하지 않는다는 문제가 존재한다.이를 해결하기 위해서 해결방법을 작성해 본다.https://ykwan0714.github.io/%ED%84%B0%EC%B9%98-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-hover-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0/ 터치 디바이스, 모바일에서 hover 제거하기 | 잡다한 개발 이야기모바일에서 클릭시 hover 효과가 나타난다. 이를 제거해 보자.ykwan0714.github.io(관련글)핵심핵심은.. 2024. 10. 31. 코딩실력보다 더 중요한 것. https://youtu.be/pkr48S22zH0?si=FQOOPSn4jMlVmvaj그건 바로 "허리"이다.허리뿐 아니라 전체적인 몸의 밸런스를 말한다. 원래 많이 앉을수록 허리 디스크 확률은 올라간다.디테일한 부분은 영상을 보자. 2024. 10. 14. 2의 보수란? (비트 연산) https://yiyj1030.tistory.com/83 2의 보수란?? 쉬운 설명으로 궁금증 해결.. (비트 연산)2의 보수: 컴퓨터가 음수를 저장하기 위해 사용하는 방법 중 하나. 예를 들어 4비트 머신을 생각해보자. 이 머신은 0000부터 1111부터 표현이 가능하다. 총 16개. 양수만을 저장하고싶다면 숫자 0부yiyj1030.tistory.com디테일한 설명은 위의 블로그를 참고하자.2의 보수는 심플하다. 양수를 음수로, 음수를 양수로 바꾸기 위함이다.정수 체계는 양수만 있는 것이 아니라 음수도 있기에, 이 2개의 범위를 "비트"로 표현하기 위함이다.보통 십진수를 이진수로 바꿀 때에는 쉽게 2의 0승부터 시작해서 2의 1승~~ 이런 식으로 커진다.이 점을 이용해서 not 연산에 1을 더하는 방식.. 2024. 10. 12. 미디어 쿼리란? 기초부터 실전까지 미디어 쿼리란 "반응형 웹 디자인"을 위한 훌륭한 명령어라고 생각하면 편하다.인터페이스는 각각 "데스크톱 / 태블릿 / 핸드폰"으로 아주 크게 나눌 수 있다. 근데 이 인터페이스의 크기는 서로 각각 다르며 같은 종류의 장치라도 넓이와 높이가 다르다. (예를 들어 아이폰 12 pro와 갤럭시 s8의 넓이는 다르다.)즉, 다른 사이즈의 디바이스이지만.. 우리는 "동일한 유저 경험"을 제공해야 하지 않겠는가. 이것을 위해서는 미디어 쿼리는 필수라고 볼 수 있다.("동일한 유저 경험" ... 이게 진짜 생각보다 만만치 않다. 어찌 보면 챌린지에 가깝다.)아무튼. 이에 대한 영상을 참고하길 바란다.https://youtu.be/hltvPyLHKPk?si=-xFzEhdmT87IYFEX 2024. 10. 9. 리액트 - 카카오 Map API 이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.카카오 api 키 받기https://apis.map.kakao.com/여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로.. 2024. 10. 9. 리액트 - 환경 변수 관리하기 [API key] [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Passwordrominlamp.tistory.com 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임이다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 존재한다.이런 환경 변수를 세팅해서 노출하고 싶지 않은 key 아이디나 시크릿을 관리할 수 있다.자세한 것은 글을 참고하자. 영상은 밑의 영상을 참고하자.h.. 2024. 10. 9. 리액트 - 네이버 Map API 리액트에서 네이버 지도 api를 쓰는 법에 대해서 글을 써본다. 여러 차례, 삽질을 끝에... 어느 정도는 해결이 되었다.(어느 정도라는 건, 완벽히는 해결되지 않았다는 뜻... 돈이나.. 가끔 에러가 뜨기도 하고...)https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] 네이버 지도 api 사용하기react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한velog... 2024. 10. 3. 리액트 Routing으로 페이지 이동하는 법 리액트에서 라우팅 방식은 좀 다르게 된다. 리액트는 SPA, 즉 단일 페이지인 html 하나로 돌아가게 된다. 그래서 경로 이동에 따라서 Ul을 바꾸고 싶다면 라우팅 기능을 해주는 react-router-dom을 깔아야 한다. npm을 이용해서 깔아주면 된다.npm install react-router-dom(참고로 리액트로 안 만들고 일반적인 HTML / CSS / JavaScript으로 만들게 되면 그냥 html 파일을 연동해 주면 끝이다.)// Router.jsimport React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Main from './pages/Main';import Main f.. 2024. 10. 2. Netlify으로 리액트 배포 Netlify이라는 사이트를 이용해 주면 웹사이트를 배포할 수 있다.실제로 이 사이트를 이용해서 기존에 만들었던 리액트 사이트를 배포해 두었다.https://codingworld2002.tistory.com/162 9. 리액트로 포트폴리오 사이트 만들기 (마무리)사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이codingworld2002.tistory.com(관련 글)근데 Netlify에 대한 디테일한 설명은 없어서 이렇게 글을 남겨본다.영상은 다음 영상을 참고하자.https://www.youtube.com/watch?v=WJtetccrv3o참고로 Netlify 사.. 2024. 10. 2. 우피란 무엇인지, 사용방법은 무엇인지? 노션을 이용해서 마치 웹서비스처럼 open을 할 수 있다.다만 이러면 링크도 깔끔하지 않고, 제한 사항이 많다. 이 점을 극복하기 위해서 "우피"를 이용하는 것이다.우피를 이용해서 매우 빠르게 랜딩 페이지 혹은 웹서비스를 만들 수 있어서, 꽤 많은 기업들이 사용하고 있다.당연히 개인들도 많이 쓰인다. 우피를 이용하면 빠르게 mvp를 만들어 볼 수 있다.https://www.oopy.io/ 1분 만에 만드는 노션 웹사이트, 우피!우피는 노션 페이지를 최적화된 웹사이트로 바꿔드립니다. 원하는 주소를 연결하여 나만의 홈페이지를 시작해 보세요.www.oopy.io(사이트) - 광고 아닙니다.https://youtube.com/playlist?list=PLkfUwwo13dlVFVZqs_npJG8kPckQiXkyW.. 2024. 9. 29. 노션 입문 무료 강의 https://youtube.com/playlist?list=PL1jdJcP6uQtv5YRnm1j50rbLW4TRuBrBh&si=FGk7H9jDhj7M1ZlN 노션(Notion) 초급, 입문 사용자로 시작해서 전문가가 되는 날까지!! www.youtube.com노션은 정말 쓰임새가 많은 툴이다.이 노션으로 개인 페이지를 만들 수 있고, 메모도 가능하다.업무에도 사용가능하고, 심지어 랜딩 페이지도 만들 수 있다. (우피와 결합하게 되면.)지금 나도 쓰고 있지만, 디테일한 부분은 더 배워야 한다. 위 재생목록을 이용해서 학습하고자 한다. 2024. 9. 29. 32. 최대공약수와 최소공배수(2609) 문제.두 개의 자연수를 입력받아 최대 공약수와 최소 공배수를 출력하는 프로그램을 작성하시오.답:import matha, b = map(int, input().split())print(math.gcd(a, b)) #최대공약수를 찾는 함수print(math.lcm(a, b)) #최소공배수를 찾는 함수문제에서 제시한 그대로 최대공약수와 최소공배수를 찾기 위하고 싶다면 "파이썬 내장 함수"를 이용해서 쉽게 풀 수 있다.먼저 math를 임포트를 해준다. 이후 a, b를 input를 받는다.이후 파이썬에 내장된 수학 함수를 이용한다.gcd는 최대공약수를 찾는 함수이고, lcm은 최소공배수를 찾는 함수이다.참고로 최대공약수는 두 수의 공통인 약수 중 가장 큰 자연수를 말하고, 최소공배수는 두 수의 공통인 배수 중 가.. 2024. 9. 28. 31. 나머지(10430) 문제.(A+B)%C는 ((A%C) + (B%C))%C 와 같을까?(A×B)%C는 ((A%C) × (B%C))%C 와 같을까?세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오.답:A, B, C = map(int, input().split())print((A+B)%C)print(((A%C)+(B%C))%C)print((A*B)%C)print(((A%C)*(B%C))%C)a,b,c을 입력받는다. map함수를 이용하면 한 줄에 다 받을 수 있다.이후 문제에서 제시한대로 print문을 구현해주면 된다. 굉장히 쉬운 문제이다! 2024. 9. 27. 큰돌님이 보는 개발자 채용공고 사이트 그곳은 바로 "직행"이다.사이트는 다음과 같다.https://zighang.com/ 직행 - 전국민 채용 정보 플랫폼직행은 모든 직군의 최신 채용 정보를 제공하는 플랫폼으로, 구직자와 기업 모두에게 최적의 솔루션을 제공합니다.zighang.comhttps://youtu.be/qaMicjbF2yo?si=HBLpSb80EeKqY3y7(관련 영상) 2024. 9. 25. 9. 리액트로 포트폴리오 사이트 만들기 (마무리) 사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이트를 참고하자.https://webstoryboy.co.kr/1943 20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보webstoryboy.co.kr전체적인 코드는 다음과 같다.https://github.com/kss2002/PortfolioWebsite-be.. 2024. 9. 25. 30. 접미사 배열(11656) 문제.접미사 배열은 문자열 S의 모든 접미사를 사전순으로 정렬해 놓은 배열이다.baekjoon의 접미사는 baekjoon, aekjoon, ekjoon, kjoon, joon, oon, on, n 으로 총 8가지가 있고, 이를 사전순으로 정렬하면, aekjoon, baekjoon, ekjoon, joon, kjoon, n, on, oon이 된다.문자열 S가 주어졌을 때, 모든 접미사를 사전순으로 정렬한 다음 출력하는 프로그램을 작성하시오.답:s = input()answer = []for i in range(len(s)): answer.append(s[i:])answer.sort()for i in answer: print(i)어떻게 input()으로 받은 문자열의 맨 앞 글자 한 자씩 빼서 저장.. 2024. 9. 23. 프드프 구매 현황 따라해봄. https://pudufu.co.kr/ 프드프상위 1%만 아는 고급 스킬을 알려드립니다. - 돈버는방법, 창업, 돈버는법, 쇼핑몰제작, 위탁판매, 인터넷투잡, 남자소자본창업, 상가분양, 자기계발, 전자책, ebookpudufu.co.kr유명한 사이트까지는 아니지만, 자기계발하시는 분들에게는 조~금 유명할 사이트인(?) 프드프 사이트입니다.그중 "구매 현황"이라는 카테고리를 한번 따라 해서 만들어봤습니다. (이걸 구현한다는 뜻.)완전 구현은 아니지만, 핵심적인 요소. 즉, 아래에서 위로 무한히 계속되는 애니메이션이 들어가 있습니다.마지막 리스트부분과 첫 리스트 부분에는 약간의 mask가 들어가 있습니다.관련된 코드는 다음 깃허브 페이지에 들어가면 볼 수 있습니다.https://github.com/kss2.. 2024. 9. 23. 8. 리액트로 포트폴리오 사이트 만들기 (푸터 영역) https://webstoryboy.co.kr/1942 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on.. 2024. 9. 22. 29. 네 수(10824) 문제.네 자연수 A, B, C, D가 주어진다. 이때, A와 B를 붙인 수와 C와 D를 붙인 수의 합을 구하는 프로그램을 작성하시오.두 수 A와 B를 합치는 것은 A의 뒤에 B를 붙이는 것을 의미한다. 즉, 20과 30을 붙이면 2030이 된다.답:a, b, c, d = input().split()a = a+bc = c+dprint(int(a)+int(c))너무 쉽다.일단 input을 a, b, c, d 다 받아준다. 그냥 받으면 문자열로 받는다는 것을 기억하자.이후a에 a와 b를 합치게 만든다. (더 정확히 표현하자면 "붙인다"가 된다.) 어차피 문자열로 취급을 하기에, 예를 들어 a가 10이고 b가 20이라면 10과 20을 문자열처럼 합치게 되어서 1020이 된다.c도 똑같다.이후 다 합쳐진 문자열 .. 2024. 9. 22. 7. 리액트로 포트폴리오 사이트 만들기 (연락처 영역) https://webstoryboy.co.kr/1941 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account o.. 2024. 9. 20. 이전 1 2 3 4 5 6 7 ··· 12 다음
