var와 let,const 환경차이 var - object 환경 let & const - declarative 선언환경을 가지기때문에 결과값이 달라진다. Object 환경 특징 - 함수 스코프 : 'var'로 선언된 변수는 해당 함수의 스코프 내에서만 유효하다. 함수 외부에서 접근할 수없다. - 호이스팅 : 'var'로 선언된 변수는 해당 스코프 내에서 최상위로 끌어올려지는 현상(호이스팅)을 가진다. 즉 변수 선언이 해당 스코프의 최상단으로 옮겨지기 때문에 변수 선언 이전에도 변수를 참조할 수 있다. 렉시컬환경 내 메모리환경에 호이스팅으로 끌어올려지면 var는 undefined로 할당된다. var가 할당 되기전이기때문에 undefined 출력된다. 반면에 let 과 const도 똑같이 호이스팅되지만 동작..

SCSS (Sassy CSS) SCSS는 웹 개발에서 사용되는 스타일 시트 언어중 하나로, CSS의 확장버전이다. 보다 효율적이고 모듈화된 방식으로 스타일을 작성하고 관리할 수 있게 도와준다. // 변수 선언 $primary-color: #3498db; $secondary-color: #e74c3c; // 믹스인 정의 @mixin button-style { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } // 스타일 규칙 .button-primary { @include button-style; background-color: $primary-color; color: white; &:hover ..

Async Async, Await 모두 비동기 코드를 더 읽기 쉽고 동기적으로 작성할 수 있도록 도와주는 키워드이다. async 는 함수 선언 앞에 사용되며, 해당 함수가 비동기적으로 동작함을 나타낸다. async로 선언된 함수는 항상 프로미스를 반환한다. Await await은 async 함수 내에서 사용되며, 다른 프로미스를 기다렸다가 해당 프로미스가 처리되고 값을 반환한 후에 다음 코드로 진행된다. 이를통해 비동기 작업을 동기적으로 작성하는 것처럼 보이게 만들 수 있어서 코드의 가독성이 높아지고, 콜백지옥 문제를 피할 수 있다. function fetchData() { return new Promise((resolve) => { setTimeout(() => resolve("Data fetched"..

Callback 함수 콜백 함수는 다른 함수에게 인자로 전달되는 함수를 의미한다. 웹 개발에서 자주 사용되는 비동기적 작업일 때 사용하고 예를 들어. 웹페이지에서 서버로부터 데이터를 받아야 할 때, 데이터 로딩이 완료된 후 어떠한 작업을 수행하고 싶을때 사용한다. function orderFood(menu, callback) { console.log("주문 중..."); // 실제 주문 처리하는 시뮬레이션 setTimeout(function() { console.log(menu + " 준비 완료!"); callback(); // 요리가 끝났을 때 콜백 함수 호출 }, 2000); // 2초 후에 요리 준비 완료로 가정 } function enjoyMeal() { console.log("맛있게 식사하세요!..

📍자바스크립트 엔진 자바스크립트가 동작하려면 JS엔진이 필요한대, 브라우저 내에 내장되어 있고 node.js를 설치해서 로컬 컴퓨터에서 실행할 수 있다. 이때! 동작하는 시간을 런타임이라고 하며, 이 런타임 과정에서 코드를 한줄한줄 읽고 번역해 실행해주는 것을 인터프리터 라고 한다. 인터프리터란? - 프로그래밍 언어로 작성된 소스코드를 읽어 한줄씩 해석하고 실행하는 프로그램 또는 환경을 말한다. - 소스코드를 기계어로 컴파일 하지않고도 바로 실행할 수 있게 해주는 방식으로 동작한다. 사용언어 : Python, Ruby, JavaScript .. cf ) 컴파일러 - 소스코드를 한번에 컴파일하여 중간언어 또는 기계어로 변환후 실행하는 방식을 사용함 사용언어 : C, C++, JAVA ... 📍자바스크립트란..

💬 들어가며 공모전 개발을 진행하며 위도, 경도 값을 이용하는 부분이 있어 Geolocation을 통해 위도 경도 값을 받아와 사용중이었다. 이번엔 현재위치를 띄워야 하는 상황이 생겨 받아왔던 위도, 경도 값을 이용해 상세 주소를 받아오는 방법을 공유해본다. ❓ 문제 상황 Cannot find Authorization : KakaoAK header kakao API 를 이용해 다양한 기능들을 구현하는 방식은 다른 블로그들, 공식 문서 등에 자세히 나와있다. 따라하던 와중 계속해서 위와같은 오류가 발생했다. 초기에는 401 오류자체가 권한 문제라는 생각에 내 Key값, IP, 호스트 주소설정등이 문제인줄 알고 뻘짓을 하다가. 다른분이 작성하신 질문 글을 보고 형식이 잘못된 것을 알았다. 💡 문제 해결 co..

💬 들어가며 프로젝트를 진행하며 뒤로가기 기능을 만들다가 눈치챈 부분 useHistory가 사라진 점. 그것을 대체하는 방법을 갖고왔다. 💡 문제 해결 간단 그 자체이다. 기존에 사용하였던 react-router-dom 의 useHistory가 아닌 window의 history를 사용하면 된다. const handleGoBack = () => { window.history.back(); }; 이렇게 사용하면 window에 내장되어있는 history를 이용하여 바로 전의 페이지로 이동할 수 있다. 버튼내부 내용 이런식으로 버튼에 onClick을 걸고 함수를 실행시키면 뒤로가기가 정상적으로 작동하는 모습을 볼 수 있다.

💬 들어가며 이제는 공부하고 정리했던 자료를 확인할 때, 노션, 한글파일보다 블로그에 먼저 들어온다. 오랜만에 환경구성부터 해볼려고하니 헷갈리는게 생각보다 있어 조금씩 정리해보려 한다!! CRA 설치 CRA는 설치하고 사용하기 굉장히 편리하다. npx create-react-app 프로젝트이름 을 적으면 현재 폴더 아래에 프로젝트 CRA 프로젝트 파일이 생긴다. 그럼 이런식의 폴더와 파일들이 구성된 것을 확인 할 수 있다. 오늘은 많은 작업을 하지 않고 필요한 화면만 구성할 것이다. 이전에 해봤던 것 처럼 react-router를 이용하여 page들을 관리할 생각이다. src 파일 정리 그러기 위해선 먼저 필요없는 파일들을 지워볼 예정이다. App.css , App.js, index.css, index...

useCallback과 useMemo의 차이점 결론 부터 말하자면 useCallback과 useMemo는 모두 컴포넌트를 최적화하기 위해 사용하는 Hook 이다. 차이점은 useCallback은 함수를 캐싱하고, useMemo는 결과값을 캐싱한다. useCallback useCallback은 함수를 기억하는 Hook으로 2개의 인자를 받는다. 첫번째 인자는 새로만들 함수의 내용이 들어오고, 두번째 인자는 함수가 의존하는 값이 들어있는 배열이 들어온다. 두번째 인자가 변경되지 않으면 기존의 함수를 재사용하게 된다. 예를 들어 다음과 같은 코드가 있다. function Example({ onClick }) { const handleClick = () => { console.log('button clicked..

💬 들어가며 프로젝트가 끝난 후 슬비쌤이 해주신 피드백을 통해 접근성에 대해 되돌아보고 있다. 생각보다 접근성에 대해 놓친부분이 많아서... 수정을 하던 중 공유하고 싶은 부분을 적어보려 한다. ❓ 문제 상황 스크린 리더가 페이지를 읽을 때, 괄호, 꺽쇠등을 모두 읽어내며 스크린리더를 이용하는 사용자에게는 필요하지 않은정보를 제공하기 때문에 그 부분을 수정해야 했다. 해당 페이지는 React프로젝트를 진행했던 우동집의 About Us 페이지 이다. 💡 문제 해결 캐릭터 이미지를 "캐릭터 이미지" 그자체로 읽어내주는 정보가 필요하지 않다는 느낌이 들어 img 태그의 alt=""를 공백으로 뒀다. 또한 const 나 let등 스크린리더로 읽어주는게 필수 요소가 아닌 부분은 읽어주지 않는게 낫고 또한, < L..