전체 글 (6) 썸네일형 리스트형 [Javascript] Computed Property Name Nuxt.js 프로젝트를 활용해 프로젝트를 진행하다 보면 Vuex를 함께 공부해야 한다. 근데 Vuex를 공부하다 보면 Mutation 부분에서 아래와 같은 코드를 볼 수 있다. const mutations = { ['SET_SOMETHING'](state, payload) { state.something = payload; } }; 이런 코드 구조는 Vuex뿐만 아니라 React에서도 자주 쓰인다. const [state, setState] = useState({ id: '', password: '' }); const handleChange = (e) => { setState({ [e.target.name]: e.target.value }); }; return ( ) 그렇다면 대체 이러한 패턴의 문법은.. [Javascript] strict mode 1. strict mode란? 오류를 줄여 안정적인 코드를 생산하기 위해서 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들어야 한다. 그 환경을 만들기 위해 ES5부터 strict mode가 추가되었다. function foo() { x = 10; } foo(); console.log(x); //10 strict mode가 적용되기 전 코드 'use strict'; function foo() { x = 10; //ReferenceError: 'x' is not defined. } foo(); console.log(x); strict mode의 적용 strict mode를 적용하기 위해서 전역의 선두 또는 함수의 선두에 'use strict';를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 str.. [FrontEnd] SPA(Single Page Application)에서 SSR이 필요한 이유 SSR(Server Side Rendering)이란? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. SPA(Single Page Application)에서 SSR이 필요한 이유 SPA는 처음 CSR 방식을 사용한다. CSR 방식은 어플리케이션에 필요한 자바스크립트 링크만 들어있는 심플한 html파일로 이루어져 있다. 따라서 이 방식은 두 가지 문제점이 있다. 첫째로 초기 로딩 시간이 느리다. CSR방식의 자바스크립트 파일 안에는 필요한 라이브러리, 프레임워크, 로직등이 담겨져 있다. 그래서 다운로드 받아야 할 양이 많으면 많을수록 초기 로딩이 오래 걸린다. 둘째.. [TIL] CSR에 대하여 CSR(Client Side Rendering) 이란? CSR 방식은 서버로부터 페이지를 최초로 요청할 시 HTML, CSS, JS등 각종 리소스를 받아온다. 이후 Client는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤 한다. CSR의 작동 방식 사용자가 웹사이트에 접속하면 서버에서 index.html 파일을 클라이언트에 보내준다. 이때 받은 index.html파일 body안에는 자바스크립트 링크만 들어있다. app.js 파일을 서버에 요청한다. 이때 js파일에 있는 어플리케이션 로직, 프레임워크, 라이브러리의 소스코드들이 들어있다. 이후 추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 후 이것들을 기반으로 동적 html을 생성해 사용자에게 최종적인 어플리케이션을 보여준다. C.. [Algorithm] BFS (너비 우선 탐색) 1. 알고리즘 설명 (1) BFS란 ? 다차원 배열에서 각 칸을 방문할 때 너비를 우선으로 방문하는 알고리즘 시작 정점으로부터 가까운 정점을 먼저 방문하고 멀리 떨어져 있는 정점을 나중에 방문하는 순회 방법. 사용하는 경우 : 두 원소 사이의 최단 경로 혹은 임의의 경로를 찾고 싶을 때 이 방법을 선택. 코딩테스트 단골 문제이기 때문에 상당히 중요하다. (2) BFS의 특징 BFS는 재귀적으로 동작하지 않는다. BFS는 방문한 원소들을 차례로 저장한 후 꺼낼 수 있는 자료구조인 큐(Queue)를 사용한다. 선입선출 원칙으로 탐색 일반적으로 큐를 이용해서 반복적 형태로 구현하는 것이 가장 잘 동작한다. 시간복잡도 : 칸이 N개일 때 O(N). 2. 알고리즘 과정 (1) 시작하는 칸을 큐에 넣고 방문했다는 .. [TIL, Javascript] getElementById와 querySelector의 차이점 Javascript를 공부하면서 최근에 getElementById와 querySelector 메서드들을 접하게 되었다. 처음 Javascript를 접하는 나에겐 둘의 역할이 비슷하다고 생각했다. 그래서 이번 기회에 이 둘의 차이점을 알아보고 싶었다. getElementById란? getElementById는 주어진 문자열과 일치하는 id요소를 찾아 이를 나타내는 Element객체를 반환한다. document.getElementById(id); querySelector란? querySelector는 css선택자로 element를 선택한다. 주의할 점은 선택자에 해당하는 첫번째 element만 불러온다는 점이다. document.querySelector(selector) getElementById와 quer.. 이전 1 다음
