개발공부 임고미

개념정리 리액트란? 프론트앤드 라이브러리 사용하는 이유? 요즘의 웹은 단순히 웹 페이지 가 아니라, 웹 애플리케이션으로 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있다. 어떠한 유저인터페이스를 동적으로 나타내기위해서는 정말 수많은 상태를 관리해줘야한다. 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌다. ( 대표적으로 Angular, Ember, Backbone, Vue, React ) - 상태 관리하기가 매우 편함 버츄어 돔이란? DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최..

함수 일정시간 뒤에 함수가 실행되게 하고싶을때는 ? setTimeout( function () { ... }, delay); 어떤때 활용하는가 ? i. 접속 후 몇 초 후에 팝업 또는 배너창 띄우기 ii. 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행 iii. 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우 iv. 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우 setTimeout(function() { alert('http://webisfree.com'); }, 3000); clearTimeout( ) ; 삭제하는 방법은 ? var clear = setTimeout( ) =함수를 변수에 담고 clearTimeout ( clear ) = 함수..

주소 뒤에 파라미터 값이 붙을땐 ? 첫번째 값은 : 무조껀 ' ? ' 로 와야합니당 두번째 이후 값 : 은 &도 가능 ( ? 도 된다고 합니다. but 맨 처음 ? 그뒤 & 가 약속입니다.) 2. html로 sms보냈을때 (iphone 과 android 분기를 태워야 합니당) 문제 : html은 sms를 보낼때 & 뒤에 붙는 부분을 url로 인식하지 않는 경우가 있습니다. 그럴때는 js로 변수에 담아서 &와 %~ 를 인식하게 만들어 줘야합니다. google 에 html sms / js로 문자보내기 / localhost parameter검색해보기

iframe 개념 아이프레임이란 내부 프레임(inline frame)이라는 의미로 하나의 HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다. / 동영상, 뮤비도 넣을 수 있습니다. 특징 모든 브라우저에서 작동합니다. DOCTYPE문서 에서는 작동하지만 script문서에서는 작동하지 않습니다 src 속성 inline frame 내에 불러올 문서의 주소를 적어주면 됩니다. 홈짱 홈페이지를 불러오는 예제를 만들어 보겠습니다. 1) width와 height 속성 inline frame의 너비와 높이를 지정할 수 있습니다. 2) frameborder 속성 inline frame의 경계선의 두께를 지정할 수 있습니다. 3) marginwidth와 marginheight inline frame의 여백을..

HTTP Request Methods 1. HTTP 란 무엇입니까? HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 가능하게하도록 설계되었습니다. HTTP는 클라이언트와 서버 간의 요청-응답 프로토콜로 작동합니다. 웹 브라우저는 클라이언트 일 수 있으며 웹 사이트를 호스팅하는 컴퓨터의 응용 프로그램은 서버 일 수 있습니다. 예 : 클라이언트 (브라우저)가 서버에 HTTP 요청을 제출합니다. 그런 다음 서버는 클라이언트에 응답을 반환합니다. 응답에는 요청에 대한 상태 정보가 포함되어 있으며 요청 된 컨텐츠가 포함되어있을 수도 있습니다. 2. HTTP 메소드 1) GET method 개념 : 지정된 리소스에서 데이터를 요청하는데 사용됨 가장 일반적인 http 방..

프로젝트 실행이 안된다..... npm start를 해봐도... node src/App.tsx를 해봐도 실행이 안된다... 정답은 .env에 local에서 실행될 환경변수가 세팅이 안되어 있던것..(맞는표현인가) 타입스크립트를 세팅하는 방법이 아주 잘 적혀있다.( https://doitnow-man.tistory.com/170 ) 구글링 과정중.. .ts 와 .tsx가 사용되고 있는것을 봤다 처음엔 오탄줄 알았는데 아니었다 TypeScript 를 사용 할때는 .ts (리액트 컴포넌트의 경우에는 .tsx) 확장자 (어떤값이 넘어오는구나~ 하느) 라고 한다. .ts .tsx 화면에 보이는게 아닌, 액션, 함수같은 것을 담는다 화면단 보이는 곳 ( 컴포넌트 ) 4. 설명 잘 되어 있는곳 : https://re..

document.cookie 를 이용해서 쿠키를 받아와도 되지만, 간단히 라리브러리를 통해 통제가능 1. 라이브러리 로드 : universal-cookie 2. src/utils.ts안에 import Cookies, { CookieSetOptions, CookieGetOptions } from 'universal-cookie'; export function getCookies(name: string, options?: CookieGetOptions) { const cookies = new Cookies(); return cookies.get(name, options); } 3. 사용하고자 하는 component 로 가서, import { getCookies } from 'lib/utils'; import..

History HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 가능하게하도록 설계되었습니다. HTTP는 클라이언트와 서버 간의 요청-응답 프로토콜로 작동합니다. 웹 브라우저는 클라이언트 일 수 있으며 웹 사이트를 호스팅하는 컴퓨터의 응용 프로그램은 서버 일 수 있습니다. 예 : 클라이언트 (브라우저)가 서버에 HTTP 요청을 제출합니다. 그런 다음 서버는 클라이언트에 응답을 반환합니다. 응답에는 요청에 대한 상태 정보가 포함되어 있으며 요청 된 컨텐츠가 포함되어있을 수도 있습니다. 웹환경에서 client와 server를 구분하는것은 매우 중요합니다. 1. Client와 Server (1) client란 ? 스스로 로직을 가지고 있는게 아니라 서버에서 데이터를..