💬 들어가며 프로젝트를 진행하며 뒤로가기 기능을 만들다가 눈치챈 부분 useHistory가 사라진 점. 그것을 대체하는 방법을 갖고왔다. 💡 문제 해결 간단 그 자체이다. 기존에 사용하였던 react-router-dom 의 useHistory가 아닌 window의 history를 사용하면 된다. const handleGoBack = () => { window.history.back(); }; 이렇게 사용하면 window에 내장되어있는 history를 이용하여 바로 전의 페이지로 이동할 수 있다. 버튼내부 내용 이런식으로 버튼에 onClick을 걸고 함수를 실행시키면 뒤로가기가 정상적으로 작동하는 모습을 볼 수 있다.
❓ 문제 상황 보통 개발자 도구에서 오류가 나는것은 잘못된 코드를 작성한 것이지만 간혹 확장 프로그램때문에 생기는 오류가 있다. 난 이전부터 보이던 오류를 해결하지못하다가 확장프로그램을 하나씩 비활성 시켜보면 문제를 찾아냈다. 💡 문제 해결 스택 오버플로우에서 Uncaught TypeError: Cannot read properties of undefined (reading 'getInlineAnchor') 라는 오류는 크롬의 확장프로그램에서 나는 충돌이라는 것을 알고 나의 확장프로그램을 하나씩 비활성시켜보며 알아낸 결과 https://chrome.google.com/webstore/detail/terabox-download-assistan/dpadflhmiohjfhhaehelneimpllfbpcg?hl..
💬 들어가며 이제는 공부하고 정리했던 자료를 확인할 때, 노션, 한글파일보다 블로그에 먼저 들어온다. 오랜만에 환경구성부터 해볼려고하니 헷갈리는게 생각보다 있어 조금씩 정리해보려 한다!! CRA 설치 CRA는 설치하고 사용하기 굉장히 편리하다. npx create-react-app 프로젝트이름 을 적으면 현재 폴더 아래에 프로젝트 CRA 프로젝트 파일이 생긴다. 그럼 이런식의 폴더와 파일들이 구성된 것을 확인 할 수 있다. 오늘은 많은 작업을 하지 않고 필요한 화면만 구성할 것이다. 이전에 해봤던 것 처럼 react-router를 이용하여 page들을 관리할 생각이다. src 파일 정리 그러기 위해선 먼저 필요없는 파일들을 지워볼 예정이다. App.css , App.js, index.css, index...
💬 들어가며 이전에 만들었던 web 홈페이지를 리팩토링 하는중, lighthouse를 통해 성능최적화까지 진행중에 있었다. 이전에 다른 프로젝트를 마무리하며 진행하다가 알게된 한가지 팁을 소개하고자 한다. ❓ 문제 상황 SEO 검색엔진 최적화 부분에서 사진과 같이 문서에 메타설명이 없음. 이라고 뜰 때 해결하는 아주 간단한 방법이다. SEO 란? SEO (Search Engine Optimization)의 약자로 "검색엔진 최적화" 를 뜻한다. 웹 사이트나 웹 페이지가 검색 엔진 경과 페이지(SERP)에서 높은 순위에 나타나도록 최적화 하는 프로세스를 가르킨다. 이 프로세스는 유용한 콘텐츠를 제공하고 웹 사이트를 검색 엔진 알고리즘에 친화적으로 만들어 사용자들이 검색 결과에서 해당 웹페이지를 더 쉽게 찾..
💬 들어가며 Github organization을 이용하여 팀원들과 프로젝트를 진행하고 있는데, wiki가 인원이 많아서 그런가 결제를 해야하는 이슈가 생겼다. 따라서 기존에 잘 사용하지 않았던 Issues를 활용하여 보기로 하였다. 백로그등을 사용할 때만 자주 사용했고, 문서를 작성하진 않았는데 이젠 사용해봐야겠다. 💡 사용방법 Issues에서 New issue를 이용하여 쉽게 이슈를 만들수는 있다. 하지만 더 간편하고 다른 사람들과 공통적인 컨벤션을 위해서는 템플릿을 설정하는 것이 좋다. 템플릿을 설정하면 위와같이 설정한 템플릿등이 뜨게 된다. 오른쪽 아래에 Edit templates를 누르면 편집할 수 있지만, 초기에 템플릿설정이 되지 않았다면 이 페이지 자체가 보이지 않으므로 편집할 수 없다. 그..
JSON (JavaSCript Object Notation ) 데이터를 표현하는 방식중 많이 사용되는 JSON은 데이터를 간단한 텍스트 형식으로 표현하는 방법이다. 객체와 배열을 사용하여 데이터를 구성하고, 객체는 이름-값 쌍을 포함한다. 배열은 값의 순서 목록을 포함한다. JSON은 JavaSCript에서 사용하는 형식으로, 데이터 교환과 스크립트에서 사용하기 쉬우며, 다양한 프로그래밍 언어에서도 지원된다. 형식은 다음과 같다. { "name": "John", "age": 30, "city": "New York" } XML ( Extensible Markup Language ) XML은 데이터를 마크업언어로 표현한 언어이다. HTML 코딩시 사용하는 마크업 언어와 같이 데이터를 구성한다. 태그는 데이터..
useCallback과 useMemo의 차이점 결론 부터 말하자면 useCallback과 useMemo는 모두 컴포넌트를 최적화하기 위해 사용하는 Hook 이다. 차이점은 useCallback은 함수를 캐싱하고, useMemo는 결과값을 캐싱한다. useCallback useCallback은 함수를 기억하는 Hook으로 2개의 인자를 받는다. 첫번째 인자는 새로만들 함수의 내용이 들어오고, 두번째 인자는 함수가 의존하는 값이 들어있는 배열이 들어온다. 두번째 인자가 변경되지 않으면 기존의 함수를 재사용하게 된다. 예를 들어 다음과 같은 코드가 있다. function Example({ onClick }) { const handleClick = () => { console.log('button clicked..
Application을 만들때 가장 중요한 통신에는 동기와 비동기가 있다. 그의 차이점은 여기서 확인하자. https://strap.tistory.com/75 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 웹 비동기 통신 종류중 JS에서 사용되는 HTTP 통신을 알아보자. Ajax (Asynchronous JavaScript And XML) Ajax는 JavaScript를 사용하여 서버로 데이터를 보내고, 서버에서는 XML, JSON 등의 데이터 형식으로 응답한다. 이 데이터를 사용하여 웹 페이지의 일부..
오버로딩 ( Over Loading ) 오버로딩은 한 클래스 내에 여러 같은 이름의 메소드르 정의해, 프로그램의 가독성을 증가시키는 방법이다. 오버로딩의 특징 메소드 이름이 같다 파라미터 개수가 달라야한다 파라미터 갯수가 같다면, 데이터 타입이 달라야한다. public class Overloading{ void test(){ System.out.println(" 매개변수 없음 "); } void test(int a, int b){ System.out.println(" 매개변수 없음 " + a + b); } void test(string abc){ System.out.println(" 매개변수 없음 " + abc); } } 이렇게 메소드의 이름을 같게하고 매개변수의 갯수를 다르게 혹은 타입을 다르게 선언하..
숫자인가??? ( isdigit() ) 숫자 인지 판별할때는 isdigit() 을 사용하면 된다. a="1" b="2a" c="010-0000-0000" print(a.isdigit()) //True print(b.isdigit()) //False print(c.isdigit()) //False 문자인가??? ( isalpha() ) 반대로 문자인지 판별할때는 isalpha() 를 사용한다. a="1" b="2a" c="aa" print(a.isalpha()) //False print(b.isalpha()) //False print(c.isalpha()) //True 문자는 영어 소문자 대문자, 한글 모두 상관없이 사용가능하다. 하지만 파이썬 2점대는 지원되지 않는다고 하니 참고해야한다. 또한 isalp..