FrontEnd/Frontend-related basic knowledge (9) 썸네일형 리스트형 자스에는 없는 타입스크립트만의 인터페이스 https://velog.io/@winbigcoms/4.-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4소개인터페이스는 자바스크립트가 지원하지 않는 타입스크립트만의 특징이다. 인터페이스는 타입이며 컴파일 후에는 사라진다. 인터페이스는 선언만 존재하며, 멤버 변수와 메소드를 선언할 수 있지만, 접근 제한자는 선언할 수 없다. API데이터 전송 확인 툴 postMan 클라이언트와 서버간에 데이터가 잘 전송되는지의 여부를 알기 위해 영상에서 소개하는 postMan이라는 프로그램을 사용해 보았다. 아직까지는 그 필요성을 구체적으로는 느끼지 못하겠다. 그냥 post할때는 서버 파일에 post가 정상적으로 될수 있는지 확인하는 console문구를 해당 함수에 추가하면 되고 Get이 잘 되는지는 브라우저 화면에 res.json혹은 res.send와같은 res.json res.send와 같은 함수를 사용해 주면 되기 때문이다(여기서 클라이언트가 body안에 보낸 값을 확인하기 위해서는 body-parsing middleware인 body-parser를 사용해 주면 된다). nodeJS - req.params, req.query, req.body에 대하여 1. Request Properties 1-1. req.params 예를 들어 /user/:name 경로가 있으면 "name"속성을 req.params.name으로 사용할 수 있다. https://params/user/12341234 일 경우 12341234를 받는다. req.param은 더이상 사용하지 않음 1-2. req.query 이 속성은 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체다. 예를 들어 https://query/search?searchWord=구글검색 이면 searchWord 매개변수(parameter)의 구글검색 이라는 값(argument)을 가져온다. 1-3. req.body JSON 등의 데이터를 담을때 사용한다. (주로 POST로 유저의 정보 또는 파일 업로드를.. 왜 프론트앤드 라이브러리/프레임워크를 쓰고 React는 무엇인가 출처: https://velog.io/@gusdh2/React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EB%AD%98%EA%B9%8C 참고: https://www.youtube.com/watch?v=V3QsSrldHqI&t=333s 리엑트를 사용하는 이유중 하나가 싱글페이지(single page application)를 구현하기 위해서임. 리엑트는 복잡한 웹앱에서의 데이터와 화면의 불일치 문제를 해결해 준다. 따라서 전통적인 웹페이지(예를들면 어떤 정적인 문서를 보여주는 웹페이지)들에 굳이 리엑트를 사용할 필요는 없습니다. 이것이 아직 JQuery같은 프레임워크가 많이 쓰이는 이유입니다. 굳이 모든 웹사이트를 .. 브라우저 동작 원리에 대하여 출처: https://velog.io/@wlwl99/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EA%B5%AC%EC%A1%B0 출처: https://www.youtube.com/watch?v=Mqh13dNI8jc 출처: https://poiemaweb.com/js-browser 브라우저 엔진이란? 사용자 인터페이스와 렌더링 엔진의 교두보 역할. 예를들어 인터페이스로 뒤로가기 버튼 눌렀다면 이전의 페이지를 가져오라는 명령을 하는 것이 브라우저 엔진이고 그 명령을 실행하는 것이 렌더링 엔진! UI백엔드: 사용자와 소통하는 부분. 예를들면 사용자 입력, 마우스 움직임, 클릭을 핸들링 자료저장소? 브라우저가 필요한 정보.. 자바스크립트 실행환경(브라우저와 Node.js)에 대하여 출처: https://poiemaweb.com/js-hello-world 자바스크립트 언어를 실행시킬수 있는 환경은 두가지가 존재한다. 브라우저와 Node.js이다. 두개 모두 자바스크립트엔진을 가지고 있어 자바스크립트의 코어인 ECMAScript를 실행할 수는 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않는다. 즉, 자바스크립트엔진을 가지고 있다는 것이 브라우저와 Node.js의 공통점이다. 차이점은 이렇다. 브라우저는 그 주된 목적이 HTML, CSS, Javascript로 작성된 웹페이지를 브라우저 화면에 랜더링하는 것이 주목적이라면 Node.js는 그 주된 목적이 서버사이드 개발 환경을 제공하는 것이 목적이다. 예를들어 브라우저는 HTML요소.. From the scratch 참조: https://www.youtube.com/watch?v=TTLHd3IyErM 반응형 웹페이지란? 사이즈에 따라 컨텐츠의 배치가 달라지는 것. 프론트엔드의 대부분의 프래임워크는 자바스크립트를 기반으로 하기 때문에 잘 알고 있어야함. HTML, CSS는 프레임워크와 상관없이 계속쓰임. HTML:모든 태그 알수 있다. 찾아가면서 해결해 나가야함. 따라서 태그정보 어디서 찾아야 하는지 소스 알아두기. Page Structure: HTML에서 정말 중요한 Point 페이지의 구조를 어떻게 어떻게 잡아나갈것인가 Semantic Tags:어떨때 어떤 태그쓰는지 SEO: Search Engine Optimization: 사용자가 검색엔진에 검색했을때 내 웹페이지가 나오게 만드는 것. 이 모든것을 꼼꼼히 공부하.. Typescript란? 참고: https://www.youtube.com/watch?v=tP4apCtkqy8&list=PLcqDmjxt30Ru7uSbzi28capKJKIeaOwH9 Javascript의 슈퍼셋이기 때문에 Javascript를 알아야 배울수 있음. Javascript의 변수, 함수의 매개변수, 함수의 리턴값의 타입이 명시적으로 붙은 것이 타입스크립트이다. 물론 타입을 안붙여주어도 되지만 타입을 붙이지 않으면 그냥 자바스크립트가 되는것임. TypeScript는 언엉이면서 라이브러리임. 엄격한 문법을 지원한다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 자바스크립트의 실행기는 브라우저와 노드이다(노드는 서버가 아님). 브라우저는 타입스크립트의 실행기가 아니기.. 이전 1 2 다음
