종종

Write now? Right now!

프로그래밍/Front-end

1. json 생성(1) package.json 생성npm init -y(2) tsconfig.json 생성단, typescript 설치를 먼저 하고 진행해야 한다.tsc --init 2. TypeScript 설치(1) global인 경우sudo npm install -g typescript(2) global이 아닌 경우npx tsc --init 3. Compile(1) TypeScript local package 설치npm install --save typescript(2) package.json에 추가"scripts": { "build": "tsc"}(3) buildnpm run build(4) 실행node [위치]node ./src/practice 4. 실행App.js에 사용을 희망하는 컴포넌..

2024. 5. 11.

프로그래밍/Front-end

1. fetch VS axios 백엔드와 통신을 하기 위해선 비동기 HTTP 통신을 하게 된다. fetch 또는 axios의 활용이 필요하다. 각자 선호하는 방식에 따라 선택을 하면 되는데, 필자는 axios를 선택하게 되었다. fetch와 axios의 비교를 통해, 자신에게 적합한 라이브러리를 확인하여 선택하면 될 것이다. (1) fetch fetch는 Promise(JavaScript 비동기 처리의 성공 유무를 나타내는 객체) 기반 JavaScript 내장 라이브러리로, 추가적인 설치 과정 없이 바로 활용이 가능하다. 다만, 네트워크 에러가 발생하는 경우 response timeout이 없어 기다려야 하며, 전달받은 데이터를 JSON으로 변환해주는 과정이 필요하다. (2) axios axios는 Pr..

2023. 11. 19.

프로그래밍/Front-end

1. 라우팅: Routing이란 무엇인가 해당하는 페이지에 가기 위해 서버에서 요청한 url에 대한 정보를 전달해주는 것을 말한다. 즉, 서버로부터 새로운 데이터인 html을 전달받아 오는 것이다. 이때 브라우저 페이지 전체가 새로운 데이터를 받아오게 된다. 정보를 전달받아 오는 구체적인 과정은 다음과 같다. 1. 새로운 url 경로 입력하기 2. url에 대한 정보를 네트워크 서버에 요청하기 3. 서버로부터 새로운 데이터인 html을 받아와 페이지 전체 업데이트하기 2. CSR: Client Side Routing이란 무엇인가 일반적인 라우팅과 달리 새로운 링크를 클릭할 때 url이 업데이트가 되지만, 페이지 전체가 새로운 데이터를 받아오는 것이 아니다. 즉, 완전히 새로운 html을 받아 오는 것이 ..

2023. 10. 3.

프로그래밍/Front-end

1. FrontEnd Library와 Framework의 등장 이유 (1) 정적 웹페이지와 동적 웹페이지란 무엇인가 정적 웹 페이지는 웹 서버에 이미 저장되어 있는 HTML문서를 클라이언트에게 전달한 것이다. 단순한 정보 전달의 원리를 가지기에, 유저의 인터랙션은 중요하지 않다. 고로 HTML과 CSS만으로도 웹 페이지를 생성할 수 있다. 하지만 현재 사용자들이 요구하는 페이지는 동적 웹 페이지이다. 동적 웹 페이지는 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트에게 전달한 것이다. 이때 HTML 제작 방식을 SPA(Single Page Application)이라 한다. (2) 라이브러리와 프레임워크의 필요성 프로젝트의 규모가 커지고, 다양한 유저 상호작용이 전달되면 DOM 요소들 역시..

2023. 9. 17.