들숨에 건강! 날숨에 재력!

이번 내용 후기이전편 보고 탄력받아서 쭉쭉 읽어야하는데 프로젝트가 끝나면유지보수와 동시에 새 서비스를 구현해야하는것을 잊었나..! 책읽기 쉽지 않았다..ㅜ 수학 놓은지 10년이 다 되가니까 개념을 잊어먹어서 빨리 읽을 수 없고(로그..? 어따쓰는거였지.. 페르마가 뭐였지 라며 검색하고있는 나...)초반에 예제를 푸는데 시간을 많이 썼는데.. 예제 던지고 우선 1회독목표로 훑기 시작했다!ㅋㅋㅋ 생각보다 읽은 양이 적은데 안쓰던 뇌를 써야해서 재밌다..재귀를 개선해볼 생각을 한번도 못해봤는데(당연할수도.. 프론트개발이라 수학보다는 주로 위계나 구조상 재귀가 필요한 상황 밖에 안써봤다)다음 함수짤 때 재귀를 만나면 아래 내용이 생각나서 신날거같다. 그러고 이런 내용을 미리 배웠더라면..정처기 시험때 노가다(?..

어느날 로그인 모달을 만드는데, 로그인 인풋에 텍스트를 입력하니 갑자기 모달 전체가 흐려졌다 의도하는것도 쉽지 않을듯한 이런 일이..? 예상가는 부분이 없어서태그를 하나씩 숨기면서 테스트해보니 밑에 SNS 로그인 버튼쪽에 문제가 있었고,그 중에 mix-blend-mode: luminosity; 가 문제였다.   원인은 찾았는데 이유를 모르겠어서 구글링했더니 원하는 답이 없었고, 챗지피티한테 물어봤더니- mix-blend-mode: luminosity; 를 적용했을 때, 주변 요소가 흐려지거나(특히 텍스트가 뿌옇게 보이는 현상) 전체 컴포넌트가 예상치 못한 방식으로 렌더링되는 문제는 비교적 자주 언급되는 이슈 중 하나- 특정 브라우저(주로 Chrome)나 GPU 가속 환경에서 발생하는 렌더링 버그- 그 외..

동기프엔 2년차가 되었는데 코드 작성이 익숙해졌지만 오히려 더 많이 고민하고 있었다.어쨰서.. 여전히 모르는것 투성이인가..!망치를 들면 모든게 못으로 보인다고했던가.. 딱 내 모습이었다.알고있는 지식으로 요구사항대로 구현하고는 있는데, 시원하지 않은 느낌.. 의심없이 배운대로 쓰던 폴더 구조에 불편함을 느껴서 어떻게 바꾸는 게 좋을지 고민하거나,유틸함수로 분리하여 통일성과 안정성을 가져가는게 나은지, 자유도를 위해 지역함수로 남겨두는게 나은지 같은 고민이 늘어나는데, 그에 대한 정답에 가까운 결정을 내리기에 지식이 부족하다는 것을 느꼈다. 마침 최근 프로젝트 하나가 끝났고(여전히 유지보수에 기능 추가 중이지만..)조금 여유로워졌으니 이젠 가려운곳을 긁어보려고 이 책을 샀다. 🙄책 잘산거 맞나..?오랜..

로그인안되는 문제! 2번 호출됨. 첫 마운트 시 요청은 200을 받지만 두번째 마운트 시 요청은 401에러를 받음.   방법1. main.tsx에서 strictmode 삭제. 젤 쉬운방법. 삭제하면 한번만 요청하기때문에 바로 이슈가 해결된다. 하지만 리액트에서 권장하지 않는 방법.    방법2. 계속 찾다보면 이 방법이 나온다 그런데 시도해보니 지금 상황에 맞지않음. [React]useEffect가 2번 호출되는 이유(feat. StrictMode)문제 확인 React 18 버전을 사용하여 애플리케이션 개발을 진행하던 도중 별다른 코드를 작성하지 않았는데 useEffect() 안의 내용이 두 번 출력되는 경우가 발생하였습니다. 이 현상은 개발 시에만thoughtcode.tistory.com각 코드에 1 ..

사용해보게 된 동기더보기여태껏 svg 사용시 아래 두가지 방법으로 썼었다.1. svg를 파일로 img 태그로 사용하기 (컬러 변경이 필요없을때) 2. svg를 메모장에다 넣어가지구 ... 코드 복사해서 컴포넌트에 직접 복붙하기(컬러 변경 필요시)export default function UserIcon() { return ( )} 팀프로젝트 중에 svg를 다른 방법으로 컴포넌트화 해서 쓸 수 있는 방법이 있는데,우리 프로젝트가 vite에 ts를 사용하다보니 설정이 잘안된다고 나에게도 한 번 시도 해보라고 알려주셨는데찾아보니 매우 괜찮아 보였다..! 이런것도 모르고 svg를 사용하고 있었다니.. 기존 사용하던 방법 중1번 방법은 svg 컬러 수정 등이 불편하고2번 방법은 svg..

See the Pen Untitled by 류수현 (@ryusoo) on CodePen. 참고 : https://songsong.dev/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0 오늘 하루 보지 않기 팝업 만들기 오늘 하루는 보지 않기 팝업을 구현합니다. 쿠키와 로컬 스토리지가 어떤 것인지 간단하게 알아보고 두가지 방법으로 구현하는 방법을 함께 알아봐요! 구현 사항 및 방법 정리 어떤 걸 구현해야 songsong.dev https://codechacha.com/ko/javascript-compare-dates/ Java..

Local에서 git branch -r 로 보이는 remote branch 는 실제 remote 저장소의 branch 가 아니다. 실제로는 remote 저장소의 branch를 바라보는 참조내역이라 보면 될 듯하다. 원격 저장소의 branch가 삭제되어도 Local에서 git branch -r 로 나오는 list는 변화가 없다 .'.remote branch를 삭제하려면 : git push origin --delete 출처: https://remagine.tistory.com/17 [remagine:티스토리] 위 사실을 모르는탓에 git branch -r 을 해버려서 로컬에서 브랜치를 지워서 접근도 할 수 없고, 브랜치가 사라지고 가르키고 있지도 않은데 왜 사라지지 않고 그대로 인지 당황하고 있었는데 로컬에..

내가 윈도우이니까 LF를 CRLF로 바꾸어야해서 경고를 띄워주는것! 따라서 아래 코드로 core.autocrlf를 켜주면 자동으로 변환이 실행되므로 더이상 경고를 띄우지 않는다고 한다! git config --global core.autocrlf true 설명은 아래글 참고!! Git 에러 CRLF will be replaced by LF (혹은 반대) 핸들링하는 방법 맥/리눅스 이용 개발자와 윈도우 개발자가 협업할 때 왜 발생할까? 터미널에 git 명령어를 입력했는데 다음과 같은 에러가 뜨는 경우가 있다: ```bash warning: CRLF will be replaced by LF in some/file blog.jaeyoon.io

CSS 공부할 초에 잠깐 보고 지나갔던것들인데 지금보니까 직접 이미지로 안뽑고도 되었던 배경들도 있는거같다.. 이 파이차트 만들려고 코드보다가 검색했는데 그라디언트를 무시하고 있었던거같다! CSS only pie chart CSS Tip! https://twitter.com/ChallengesCss/status/1459113686614872067... codepen.io 다양한 그라디언트 예제들!! Using CSS gradients - CSS: Cascading Style Sheets | MDN CSS gradients are represented by the data type, a special type of made of a progressive transition between two or mor..

1. 클릭시 생기는 아웃라인, 박스 없애기! [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com input:focus{ outline:none; -webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color - CSS: Cascading Style Sheets | MDN -webkit-tap-highlight-color is a non-standard..

div { border: 5px solid; border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); border-image-slice: 1; } [HTML+CSS] border에 그라데이션 넣기 border(테두리)에 그라데이션 효과 넣는 예제입니다. See the Pen border gradation by limqo (@limqo) on CodePen. 위의 코드에서 box1의 div는 border-image를 이용하여 gradation 넣은 것을 확인 할 수 있습니.. limqoh.tistory.com

[javascript] 뒤로가기(이전 페이지), 앞으로가기(다음 페이지) 구현 - window.history.back(), forward(), go() 아래와 같은 브라우저의 뒤로가기, 앞으로가기 기능을 자바스크립트를 사용해서 구현할 수 있습니다. window 내장객체 안에 있는 history object를 사용합니다. 뒤로가기(이전 페이지) window.history.back( codingbroker.tistory.com back forward 블로그 글을 보다보니 forward를 쓰는 사람도있고 go를 쓰는사람도있어서 찾아보니 history.go는 앞뒤 둘다 갈 수 있는 메서드였다. History.go() - Web API | MDN History.go() 메서드는 history 세션에서 특정한 페이..

모바일 웹에서 hover 효과 제거하기 모바일(터치 디바이스)에서는 마우스 커서가 없기 때문에 hover 효과를 줄 수 없다.PC에서처럼 css에 hover 효과를 넣게 되면 해당 요소를 두번 터치해야 원하는 동작을 얻을 수 있다. (한번 터치하면 velog.io @media (hover: hover) { ... }​ 와.. 미디어쿼리에 사이즈말고 다른걸 넣을 수 있다는 걸 처음 알았네.. 라는 생각을 하는 순간 다른게 더 있지않을까 싶어서 미디어쿼리를 검색해봤다. 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합..

이전 까지는 모두 미디어 쿼리로 구분했었는데 코딩하다보면 데스크탑일때와 모바일/태블릿일 때 터치나 hover인 경우에 다르게 적용해줘야 하는 부분들이 생긴다! 그래서 검색하다 이 방법을 알게되었다!! 너무 고맙게도 설명을 잘해주셔서 보고 잘썼다..! Javascript - 디바이스 구분하기 [Mobile, PC] 이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트 7942yongdae.tistory.com

animation-fill-mode: forwards; none // 기본값 forwards // 마지막 프레임 유지 backwards // 처음에 적용된 스타일 값으로 유지 both // forwards와 backwards를 모두 유지 ( 이상태는 뭐지? 담에 시도해봐야지)

처음엔 시간을 다룬다고 신났지만.. 비동기의 어려움을 알게되면서 마구쓰기는 무서워진 친구.. setTimeout() 잘쓰게 되는 날이 빨리오면 좋겠다. 딜레이를 줘야할 상황이 있어서 사용했다. https://developer.mozilla.org/ko/docs/Web/API/setTimeout setTimeout() - Web API | MDN 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. developer.mozilla.org

배열을 이용해서 배열만들기를 for문으로 해보았다. foreach로 가능하지 않을까 했는데 안될거같아서 for문으로했는데 이 글적다가 foreach로 가능한 방법이 생각났다. 간단하게 코딩 상황설명 : 아래처럼 .item을 가진 div들중에 .option을 포함하는 .item만 모은 배열을 만들고 싶었는데 코드에 이미 .option를 가진 div리스트의 배열이 있어서 그 배열을 사용해서 .option을 포함하는 .item 리스트 배열을 만들기위해 for문을 썻다. for문으로 배열만들기 let optionList = document.querySelectorAll('.option'); let itemList = []; for(let i = 0; i { itemList[i] = element.closest(..

아무래도 퍼블리싱 하다보면 DOM을 찾고 가져오거나 지우거나 추가하거나 입맛대로 다루어야하는데 그때마다 자주 찾게되서 그런 녀석들 정리! 내가 편하려고!! DOM에서 앨리먼트 찾을때 자주쓰는 방법들 더보기 아이디/클래스를 가진 앨리먼트 찾기 document.querySelector('여기에 클래스나 아이디, 앨리먼트를 입력'); document.querySelectorAll('여기에 클래스나 아이디, 앨리먼트를 입력'); querySelectorAll을하면 저 조건의 요소들을 배열로 만드는데.. 한번씩 그사실을 까먹고 하나로 생각하고 작업을 해버려서 왜 찾을수 없다고 하지? 하면서 실수를 한다ㅠ 배열은 하나씩 가져와서 작업해야하는걸 잊지말자ㅠ 부모, 자식 찾기 부모, 자식, 형제 찾기는 이분글을 보는게 ..

[JavaScript] 이벤트 캡쳐링, 이벤트 버블링 개념, 방지하는 방법 HTML 요소에서 이벤트가 발생하면 해당 요소를 포함한 모든 조상 요소에 이벤트를 전달한다. 왜 전달하는지 알아보고 이벤트가 전파되는 과정을 설명한다. velog.io button만 클릭이 되고 body에는 이벤트가 전달되지 않기를 바래서 버블링 막는것을 찾아보았다. event.stopPropagation(); 이 코드를 입력하면, 그 요소에 등록된 이벤트리스너는 실행되지만 버블링되지 않아서 원하는대로 동작하였다!

https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 진작에 정리된거 있는줄 알았으면.. 매번 블로그 뒤지고 다니지 않았을텐데ㅠㅋㅋㅋㅋㅋ