본문 바로가기

분류 전체보기

 (179)
[React] 1. React 시작하기(1) - 환경 설정 *글 출처는 버릴것이 없는 갓대희님 글 입니다. [React] 1. React 시작하기 0. 프론트 프레임워크 선택에 대한 고찰 - React를 시작하기 앞서, 왜 리액트를 공부하기로 생각했었는지에 대해 간단히 작성 해두려 한다. - 이 부분도 상당히 길다보니, 무시하고 바로 환경 설정부터 보시려면 > [클릭] 1. 프론트 개발 언어의 변화 - 내가 알고있는 범위 한정이겠지만, 프론트 만큼 변화가 빠른 언어, 프레임워크는 없는 듯 싶다. - 데충 스쳐 지나갔던, 프론트 관련 키워드만 모아봐도 하기 예시 정도가 된다. ex) jsp, jquery, mustache, jstl, velocity, Freemarker, vanilla js, vue.js, react - 한때는 혁명이라고 생각 했던 jquery에..
[JavaScript] 배열에서 중복제거 및 값 삭제 1. 배열 값 삭제 1. let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr = []; console.log(arr.length); 배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해 새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다. 2. let arr = ['a', 'b', 'c']; let arr2 = arr; // 배열 값 전체 삭제 arr.length = 0; console.log(arr.length); // 0 document.writeln(arr2.length); // 0 배열의 길이 속성 값을 0으로 주면, 해당 배열은 길이 0의 빈 배열이 됩니다. 2.배열 첫번째 값 삭제 let arr = ['a', 'b', 'c']; // 배열의 첫번째 값 삭제 ..
같은 내부망 모바일에서 웹서버 접속오류 해결방법 같은 와이파이 사용해서 접속하면 실행중인 프로젝트에 접근 가능해야 하는데 아래처럼 안될 때가 있다 알아본 방법은 2가지였는데 첫번째 방법이 안돼서 두번째 방법으로 했다 방법.1 채팅 앱을 개발하면서 다른 전자기기로 서로 채팅을 주고받는 것이 가능한지 확인해보기 위해 pc에서 실행한 localhost페이지에 모바일로 접속을 하는 방법을 찾아서 알아낸 내용을 포스팅하려고 합니다. 먼저 간단하게 웹서버 구축 후 // server.js // 서버 사용을 위해 http모듈을 http라는 변수에 담는다. var http = require('http'); // http모듈로 서버를 생성한다. var app = http.createServer(function(req,res){ // 사용자에게 요청이 들어오면 응답해준다..
[JavaScript] 자바스크립트 forEach 메서드 이해하기 ForEach 메서드란? forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다. 문법 const myArr = [1, 2, 3, 4, 5]; const newMyArr = myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); console.log(newMyArr); // undefined forEach 메서드도 map메서드와 동일하게 파라미터로..
[JS] 쿠키(Cookie) 다루기 선행 학습 [WEB] 🌐 쿠키 / 세션 정리 inpa.tistory.com 비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 있습니다. 이는 서버의 자원을 절약하기 위해 모든 사용자의 요청마다 연결 Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. ​ 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. ​ ..
[React] 리액트 Hooks : useEffect() 함수 사용법 🚀 useEffect()란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행. componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행 compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. 기본 형태..
[react]리액트 렌더링 최적화하는 8가지 방법과 고찰 서론 이 글은 함수형 컴포넌트, 클래스형 컴포넌트 상관없이 공통적으로 적용되는 렌더링 최적화 이야기와 hooks를 사용하는 함수형 컴포넌트에서 구체적으로 어떤 기능들을 사용해 렌더링 최적화를 사용할 수 있는지를 작성해봤습니다. 클래스형 컴포넌트에서의 구체적인 기능들은 다루지 않습니다. 예제가 많습니다. github에서 전체 코드를 볼 수 있습니다. https://github.com/cocoder16/react-rendering-optimization cocoder16/react-rendering-optimization Contribute to cocoder16/react-rendering-optimization development by creating an account on GitHub. github..
[javaScript]자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수 오늘은 Javascript에서 제공하는 타이머(Timer) 함수 활용에 대한 간단한 포스팅입니다. Javascript 를 이용할 때, 1) 종종 특정 함수나 기능을 페이지가 로드되거나 버튼이 클릭되었을 때, 바로 실행하지 않고, 약간의 시간이 지난후에 실행되게 하고 싶은 경우가 있습니다. 또는 2) 특정 함수를 지속적으로 반복하여 실행하고 싶은 경우도 있구요. 예를 들면 특정 정보를 화면에 표시하여 사용자에게 안내하고, 5초 후에 다른 페이지로 이동시키고 싶은 것이라면 위의 첫번째 경우이겠죠? 그리고 10초마다 새로운 정보를 보여주기 위해 페이지의 특정 영역 프레임을 AJAX호출을 통해 지속적으로 갱신해주고 싶은 경우라면 두번째 경우일 것 같구요. 이런 처리를 위해 Javascript는 어떤 함수를 제공..

티스토리툴바