얼음저장소

REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 의미한다. REST 는 Representational State Transfer 의 줄임말 SOAP (Simple Object Access Protocol) 컴퓨터 네트워크 상에서 http, https 등을 통해 XML기반 메세지를 교환하는 프로토콜 SOA를 구현하는 규약이다. SOA?서비스가 중심이되는 소프트웨어 아키텍처의 한 종류이다. Service Oriented Architecture 구성 : 모든 data가 XML로 표현되고 data와 data를 다루는 operation이 WSDL로 정의되면 UDDI에 등록되어 누구라도 서비스를 검색, 접근할 수 있도록 공개한다. WSDL(Web Service Description La..

정의 자바스크립트가 실행될 때 필요한 변수, 스코프의 정의, this 값 등이 정의되는 환경 종류 GEC (Global execution context) JS가 실행될때 맨 처음에 시작되는 실행 컨텍스트 JS 는 싱글 스레드이기 때문에 무조건 하나만 존재함 FEC (Functional execution context) 실행 컨텍스트는 함수마다 생길 수 있음 함수가 호출되고 실행될 때 만들어지는 실행 컨텍스트 Eval eval 함수가 실행될 때 만들어지는 실행 컨텍스트 execution context stack 콜스택과 비슷한 구조 실행 컨텍스트 생성 과정 Creation Phase Create the Activation object / Variable Object Activation object : 글로..

SEO가 왜 그렇게 중요한가? SEO는 브랜드에 대한 전환율과 자신감을 높이기 위한 키이다. 더 높은 검색순위 배치는 더 많은 방문자로 연결된다. 검색엔진 유기적 트래픽(검색 엔진에서 사이트를 방문하는 방문자)은 다음과 같은 세가지 이유로 많은 비즈니스의 핵심이다. 정성적 - 방문자가 고객으로 전환될 가능성이 높다 신뢰할 수 있는 - 브랜드에 대한 더 높은 신뢰도 저비용 - 소요된 시간과 노력을 제외하고 검색 엔진 순위를 높이는 좋은 SEO 관행을 무료로 할 수 있다. 상위 자연 검색 결과 위치에 표시되는데 직접적인 비용이 없다. ** SEM(검색 엔진 마케팅)과는 다름 웹사이트 최적화 프로세스 기술 - 크롤링 및 웹 성능을 위해 웹사이트를 최적화 생성 - 특정 키워드를 대상으로 하는 콘텐츠 전략을 만든..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 동적 경로 (Dynamic Routes) 동적 경로로 페이지를 정적 생성 하는 방법 각 게시물에 경로가 있어야함 ‘/posts/’, 여기서 id 는 최상위 posts 디렉토리 아래에 있는 마크다운 파일의 이름이다 pages/posts 폴더 내에 [id].js 라는 파일을 생성 대괄호로 묶인 파일 이름은 동적경로를 나타냄 getStaticPaths 를 이용 객체 배열이 들어옴 (params 내에 id 값이 있어야함) // Returns an array that looks like this: // [ // { // params: { // id: 'ssg-ssr' // } // }, // { // params: { // id: 'pre-rend..

기본적으로 Next.js 는 모든 페이지를 미리 렌더링한다. 즉, Next.js 는 클라이언트 측 JavaScript 로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다. 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결된다. 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되고 페이지가 완전히 대화식으로 만들어진다 (이 과정을 hydration, 수화 라고 함) 사전 렌더링이 진행중인지 확인하는 방법 브라우저에서 JavaScript 를 비활성화한다 (개발자도구 → 커맨드+Shift+P → 자바스크립트 검색 후 사용중지) 다음 페이지에 액세스 → https://next-learn-starter.vercel.app/ 앱 UI 가 제대로 ..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 0. 설치 npx create-next-app nextjs-blog --use-npm --example "" 1. 라우팅 page 폴더 내 폴더나 파일 생성 ex ) /posts/first-post 경로를 만들고싶다면 pages/posts/first-post.js 이런식으로 파일 생성하면 자동으로 라우팅이 된다. import Link from 'next/link'; // .. 이동하기 ⇒ 위와 같은 예제로 링크 라우팅이 가능 Link 를 이용하면 client-side Navigation 이 가능하다. 브라우저 내 개발자도구로 style 을 변경한 후 페이지 이동하고 돌아와도 바꾼 스타일이 그대로 적용되어있음! a 태그를 쓴다면 브라우저가 ..

웹 크롤러란? 웹 크롤러(web crawler)는 조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램이다. 웹 크롤러가 하는 작업을 '웹 크롤링'(web crawling) 혹은 '스파이더링'(spidering)이라 부른다. 검색 엔진과 같은 여러 사이트에서는 데이터의 최신 상태 유지를 위해 웹 크롤링한다. 웹 크롤러는 대체로 방문한 사이트의 모든 페이지의 복사본을 생성하는 데 사용되며, 검색 엔진은 이렇게 생성된 페이지를 보다 빠른 검색을 위해 인덱싱한다. 또한 크롤러는 링크 체크나 HTML 코드 검증과 같은 웹 사이트의 자동 유지 관리 작업을 위해 사용되기도 하며, 자동 이메일 수집과 같은 웹 페이지의 특정 형태의 정보를 수집하는 데도 사용된다. - 위키백과 간단하게 설명해서 검색 사..

Reducer 란? 액션을 주면 그 액션이 적용되어 달라진 결과를 만들어 줌 (안달라질 수도 있음) 함수이다. Pure Function : 같은 인자를 주었을 때 항상 같은 값이 나와야 함 Immutable⇒ 리듀서를 통해 상태가 달라졌음을 리덕스가 인지하는 방식이기 때문 : 기존의 상태와 업데이트된 상태가 각각 다른 객체여야함 형태 function 리듀서(previousState, action) { return newState; }​ 액션을 받아 스테이트를 리턴하는 구조 인자로 들어오는 previosState 와 리턴의 newState 는 다른 참조를 가지도록 해야한다. 예제 코드 // action.js export const ADD_TODO = "ADD_TODO"; function addTodo(to..

리덕스의 액션이란? 액션은 객체(Object)이다. 두가지의 형태가 있다 // type 1 {type: 'TEST'} // payload 없는 액션 // type 2 {type: 'TEST', params: 'hello'} // payload 있는 액션 필수 프로퍼티는 type 하나이며, type은 보통 문자열(string)이다. 액션은 스토어에 전달이 되면 스토어의 상태를 변경하는데 사용된다. 리덕스의 액션 생성자 (Action Creater) 액션을 생성하는 함수를 액션 생성자라고 한다. 함수를 통해 액션을 생성하여 액션 객체를 리턴해주는 함수이다. createTest(’hello’); // {type: ‘TEST’, params: ‘hello’} 와 같은 구조다. 리덕스의 액션의 역할 액션 생성자를..

글꼴 h, p 태그 등은 reset.css 를 적용하면 설정들이 사라진다 font-style 글자의 기울기 nomal : 기울기 없음(기본값) italic : 이탤릭체 oblique : 기울어진 글자 font-weight 글자의 두께 nomal, 400 : 기본 두께 (기본값) bold, 700 : 두껍게 bolder : 상위(부모) 요소보다 더 두껍게 lighter : 상위(부모) 요소보다 더 얇게 100 ~ 900 : 100 단위의 숫자 font-size 글자의 크기 16px : 기본값 단위 : px, em, rem 등 단위로 지정 % : 부모요소의 폰트 크기에 대한 비율 smaller : 부모요소보다 작은 크기 larger : 부모요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 ..