아티클

모바일 웹이란 PC용 웹사이트와 별개로 모바일 브라우저에서 이용들이 편하게 이용할 수 있도록 PC용 웹사이트를 모바일 스크린 크기에 맞춰 구현한 것을 말합니다. 따라서 이것은 스마트폰으로 접속할때와 PC로 접속할 때 url이 달라지게 되는데 같은 사이트에서 pc용 웹사

리액트를 공부하면서 가장 많이 들었던 말이 '상태관리'이다. 상태관리란 무엇이고 어떻게 관리하는 것이 좋은 것인지 짧게나마 이야기해보고자 한다! 상태관리란? > 프론트엔드에서 상태란 "화면에 영향을 주는 자바스크립트 객체"이다. 즉, 계속해서 "변화하는 데이터"를 말

프로젝트 기간 중에 가장 궁금했던 부분이 서버와 통신이다. 개발을 시작한 지 얼마되지 않아, CS에 대한 지식도 많이 부족했기에 서버 통신이 신기하고 꼭 따로 공부해보고 싶었다. 기간이 정해진 프로젝트 안에서 아쉽게도 그 기회가 없었지만 오늘 아티클을 통해 한 번 공부

이 글은 코딩 자율학습 HTML+CSS+Javascript를 참고하여 작성하였습니다. Semantic Web > 웹은 끝없이 발전하고 있다. 그리고 대부분 사용자는 검색사이트를 통해 웹 서비스를 이용한다. 이때 검색엔진에 잘 노출될수록 사용자가 웹 사이트를 이용할

ES6 이전에는 for in루프를 사용했다.for in루프는 순서 없이 객체의 모든 열거 가능한 속성을 반복하기 때문에 for of와 살짝 다르다. for in 루프은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다. 따라서 반복

next.js 환경에서 프로젝트를 진행하고 있는데 생각치 못한 오류를 만나 이렇게 정리해보게 되었다! 사소한 오류지만 생각하고 있지 않아서 처음 봤을 때 당황했던 것 같다.이런식으로 div 안에 p태그와 이미지 태그가 함께 있는 div를 여러개 만들었는데 갑자기 중간에

Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주었다. React에서 Hook은 useState, useEffect, useReducer, useMemo, useCallback, useRef 혹은

이번에는 지난 [아티클]Hooks 총정리(1)에 이어 남은 Hooks인 useMemo, useCallback, useRef 커스텀 훅에 대해 이야기해보려고 한다. > # useMemo useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다

자바스크립트를 공부하면서 비동기에 대해 가장 이해하기 어려웠다. 동기와 비동기를 간단하게 말하면동기: 요청의 그 결과가 동시에 일어난다.비동기: 요청과 결과가 동시에 일어나지 않는다.로 이야기 할 수 있다. 실제로 나도 이렇게만 이해하고 넘어갔는데 api를 연결하는 작

웹 최적화란 웹의 성능을 최적의 상태로 만드는 것이다. 프론트엔드 개발자라면 이것을 필수적으로 고려해야한다. 하지만 웹은 각자의 서비스 환경에 따라 똑같이 동작한다 해도 다 다르게 동작하고 있고 이것에 따라 성능 최적화 방법을 각각 고려해야 한다. 즉, 웹 최적화는 간

정규 표현식은 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴이다. 복잡한 코드를 아주 간략하게 작성할 수 있다는 장점이 있지만 가독성이 떨어지고 코드 구현이 쉽지 않다는 단점도 갖고 있다.이러한 단점에도 불구하고 우리가 정규표현식을 사용하는데는 굉장히 어려

🆀1.구글봇은 이제는 Javascript도 실행한다고 하는데 그렇가면 Next.js 큰 장점 중 SEO 최적화 부분이 크게 돋보이지 않는 것 같다. 이외의 성능 최적화에 대한 부분은 어떻게 장점으로 작용하는가? 🆀2.Next 13으로 마이그레이션을 하려는 상황에서

🚨 Link를 사용하지 않고 버튼의 onClick에 router.push 를 넣어주게 되면 심각한 접근성 문제가 발생한다! 어떤 문제인지 정리해보자! 🚨 Static Export 🆀 CSR, SSR, SSG, ISR 방식들은 정해진 정답이 없고 프로젝트의 특성