Code/JavaScript & Node.js6 [React] LifeCycle API React의 LifeCycle에 대해 Dan Abramov라는 개발자가 다이어그램을 그린 바 있다. 많은 프론트엔드 개발 블로그에서 인용된 유명한 그림이다. velopert님의 강의를 듣다 간단히 정리한다. 참고 : 누구든지 하는 리액트 유투브, 튜토리얼 컴포넌트가 놓인 상태에 따라 작업하려면 LifeCycle API를 적절히 사용한다. 리액트의 생명주기는 크게 Mounting, Updating, Unmounting으로 나뉜다. Mounting : 컴포넌트가 브라우저 상에 나타나는 단계 Updating : 컴포넌트의 props나 state가 변경되었을 때 수정하는 단계 Unmounting : 브라우저에서 컴포넌트가 사라지는 단계 constructor 컴포넌트가 브라우저 상에 나타나면 constructor.. 2020. 9. 22. [Nodejs] 차근차근 Nodejs - 쿠키(cookie) nodejs를 이용해 로그인 구현을 하려고 모듈을 알아보던 중, 쿠키와 세션에 대한 개념이 명확하지 않아 생활코딩 강의를 빠르게 정리한다. 먼저 쿠키에 대해 정리하도록 하겠다. 쿠키를 통해 수행되는 가장 중요한 일이 인증 기능이다. 본 강의는 인증이 무엇이고 인증을 어떻게 구현하는가에 대한 맥락을 파악하는 수업이다. 실제로 적용하기엔 적합하지 않고 개념을 실습해보기 위한 내용이다. 강의 : https://opentutorials.org/course/3387 개인화란? 쿠키와 인증은 개인화와 관련이 있다. 개인화란 모든 사람에게 똑같은 웹페이지를 보여주는 것이 아니라 사람마다 선택과 취향에 맞는 웹페이지를 보여주는 것이다. 예를 들어 로그인해서 장바구니에 물건을 담으면 다음에 로그인했을 때 그 물건을 다시.. 2020. 7. 21. [프로그래머스] 완주하지 못한 선수 - javascript function solution(participant, completion) { var answer = ''; participant.sort(); completion.sort(); for(let i=0; i 2020. 3. 6. html에서 js 연동 시 주의할 점 웹을 배운다면 html 파일에서 javascript 파일을 자주 연동한다. 연동 시 주의할 점에 대해 작성하겠다. 간단한 예시로 아래와 같이 html 파일을 작성하고 버튼을 만들어주었다. 그리고 같은 폴더의 006.js와 연결해주었다. js 파일에서는 html 문서에 있는 button 태그를 가져와 button 변수에 담고 콘솔에 찍어주게끔 했다. 그러나 콘솔에는 'null'이 뜨고 아무것도 없다고 나온다. 그 이유는 js 파일을 연결하는 코드가 html의 상단에 위치하여 js 코드를 먼저 읽었기 때문이다. html이 완전히 loading되기 전에 js 파일이 실행되어 문제가 발생했다. 해결방법은 두 가지가 있다. 해결방법 1 - html 코드 순서 변경 html 파일만 고치는 방법이다. html에서 코.. 2020. 3. 4. Javascript의 window.print() 기능 window 객체는 DOM 문서가 들어있는 하나의 창을 나타낸다. 즉 문서의 속성은 해당 창에 로드된 DOM 문서를 가리키고, window.print()는 현재 문서를 인쇄하기 위해 인쇄 대화상자를 여는데 사용된다. html과 자바스크립트 파일로 실행해보았다. Print this page라는 버튼을 만들어주고 버튼을 클릭하면 js파일의 print_current_page()함수를 실행한다. js파일의 print_current_page() 함수에는 현재의 창을 인쇄할 수 있는 window.print() 함수가 들어있다. html파일을 실행해보면 브라우저에서 화면은 이렇다. 버튼을 클릭하면 인쇄할 수 있는 창이 뜬다. 코드 출처 w3resource의 JavaScript: Display the current d.. 2019. 10. 21. 이전 1 2 다음
