항해 후/예상 질문31 적응형 웹 vs 반응형 웹 근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법입니다. 하지만 적응형 웹과 반응형 웹은 사이트 설계부터 구동까지 많은 차이가 있습니다. 적응형 웹 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출합니다. 적응형 웹의 특징으로는 기존의 사이트를 재구축 할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다. (장단점) 기존에 이미 데스트톱용 템플릿이 있었다면 처음부터 재구축 할 필요없이 다른 기기용 템플릿만 제작하면 되기 때문에 효율적이고, 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드 하기 때문에 데이터 낭비 및 로딩 속도를 줄일 수 있습니다. 다만, 각 기기별로 별도의.. 2022. 2. 14. 라이브러리, 프레임워크 라이브러리 프로그래머 혼자서 모든 코드를 다 작성하는 경우는 드뭅니다. 보통은 신뢰할 만한 기업이나 단체, 개인이 작성한 양질의 코드들을 소프트웨어를 만드는 데 가져다 활용합니다. 이처럼 누군가 가져다 필요에 맞게 사용할 수 있도록 특정 기능들을 코드로 작성 해놓은 것을 '라이브러리'라고 합니다. 예를 들어 집을 지을 때 문이나 창틀 등의 자재들을 구입해다 사용 할 수 있듯이 내가 만드는 소프트웨어에 적절히 붙여 넣을 수 있는 코드들을 말합니다. 프레임워크 위의 라이브러리가 내가 만들고 있는 소프트웨어에 갖다 붙일 수 있는 것이라면 프레임워크는 이미 특정 형태의 소프트웨어가 기본 틀이 갖춰져 있고 그 위에 내 코드를 덧붙여 넣어 만들 수 있도록 되어있는 것들을 말합니다. 프로그래머가 이를 처음부터 다 만.. 2022. 2. 14. 메모이제이션 메모이제이션이란? 동일한 값을 return 하는 함수를 반복적으로 호출 해야 한다면 맨 처음 값을 계산 할 때 해당 값을 메모리에 저장 해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용 하는 기법을 말합니다. 즉, 자주 사용하는(필요한) 값을 맨 처음 계산 할 때 캐싱 해두고 값이 필요할 때마다 다시 계산을 하는 게 아니라 캐시에서 꺼내서 사용하는 기법을 말합니다. 이전 포스팅에 자세히 정리 되어 있기 때문에 참고!! [React] useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook에는 useMemo와 useCallback이 있습니다. [ useMemo란? ] useMemo에서 memo란 Momoization(메모이제이션)을 뜻합니다. 메모이제이션은 동일한 값을 return .. 2022. 2. 14. SEO SEO란? Search Engine Otimization의 약자로, 검색 엔진 최적화라는 의미이다. 현재에는 구글 점유율이 높은 나라(전세게)에서 중요한 디지털 마케팅 전략으로 인식 되고 있다. (우리나라는 아직 중요하게 생각하는 것 같지 않다.) SEO의 목적 SEO 마케팅은 광고 비용을 줄이지 않고도 자신의 콘텐츠를 검색 결과 상위에 표시함으로써 사이트 유입을 늘리고, 검색 키워드에 관련된 최적의 콘텐츠를 제공하여 검색에 대한 니즈를 만족 시켜줌으로써 브랜드 인지도 향상 및 신뢰도 상승, 상품 구매까지 이어질 수 있는 마케팅 전략이다. (생각 해보면 나도 사용자로써 검색 했을 때 최상단에 있는 것들만 보는 것 같다..) SEO의 기술적 요소로는 메타 태그(meta tag), 캐노니컬 태그(canoni.. 2022. 2. 14. 클래스형 vs 함수형 컴포넌트 React 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성 될 수 있습니다. 클래스형 컴포넌트는 상태값을 가질 수 있고, React 컴포넌트의 생명 주기 함수를 작성 할 수 있습니다. 함수형 컴포넌트는 위와 같은 일을 할 수 없습니다. 즉, 이 둘의 차이점은 상태값과 라이프 사이클을 가질 수 있느냐 없느냐의 차이입니다. 리액트 버전 16.8 부터는 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다. 단순하게 말하자면 클래스형 컴포넌트는 모든 기능을 다 사용 할 수 있지만, 복잡합니다. 함수형 컴포넌트는 제한된 기능만 사용 할 수 있지만, 단순합니다. (출처 생활코딩) 요즘은 클래스형 컴포넌트 보다는 함수형 컴포넌트 사용을 지향하는 추세입.. 2022. 2. 14. 시멘틱 태그 시멘틱 태그란? : 의미가 있는 태그를 말한다. 시멘틱 태그를 사용하면 좋은 점? SEO 검색을 최적화 하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우저의 검색 엔진이 내가 만든 웹사이트를 어떤 검색 결과에 띄워줘야 되는 지 알려 줄 수 있다. 웹 접근성 웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제 없이 동작할 수 있습니다. 유지보수성 단순히 div 태그로만 모든 구조를 짜는 것보다는 더 한눈에 알아보기 .. 2022. 2. 10. TypeScript(타입스크립트) 타입스크립트란? : 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환 해주어야 합니다. 이 변환 과정을 컴파일(compile)이라고 부릅니다. 왜 타입스크립트를 써야 할까요? : 자바스크립트도 충분히 복잡하고 어려운 데 왜 또 다른 언어를 배워야 할까요?? 단지 최신 기술이라서?? 혹은 다른 회사도 많이 사용하니까 우리도 써야 하는 걸까요?라는 고민을 하게 됩니다. 타입스크립트는 아래 2가지 장점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다. 에러의 사전 방지 코드 자동 완성과 가이드 => 개발 생산성 향상 에러의 사전 방지, 코드 자동 완성과 가이드에 대한 내용은 아래 노.. 2022. 2. 10. Context API 일반적으로 전역적으로 필요한 상태(state)를 관리 해야 할 때는 최상위 컴포넌트인 App의 state에 넣고 컴포넌트 간에 props로 전달합니다. 위와 같이 props로 상태를 전달 할 경우 prop drilling이 일어날 수 있고, 유지 보수성이 매우 안좋습니다. Context API는 전역 상태 관리 방법 중 하나로써 React 패키지에서 제공하는 툴입니다. Context API를 사용하면 Context를 만들어 props 없이도 한번에 원하는 값을 받아와서 사용 할 수 있습니다. 더 자세한 예제와 설명은 전에 포스팅 했던 내용을 참고 [React] useContext + Context API [ Context란? ] React로 만든 앱은 여러개의 컴포넌트로써 최상위 APP 컴포넌트로 부터 .. 2022. 2. 10. Virtual Dom(가상돔) DOM이란? DOM(Document Object Model) DOM이란? Document Object Model의 약자로, 문서 객체 모델로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방 eundol1113.tistory.com 즉, DOM은 HTML과 JS를 서로 이어주는 역할을 한다. Virtual DOM이란? DOM은 스크립트 언어(JavaScript)를 사용하여 Document 객체를 통해 문서(XML, HTML 등)에 접근 할 수 있도록 도와주는 역할을 하며, 가상 DOM은 실제 DOM의 가벼운 사본 역할을 합니다. 우선 브라우저가 DOM을 이용하여 렌더링 하는 방법을 알아보자면 브라우저는 HTML .. 2022. 2. 10. 이전 1 2 3 4 다음 728x90
