'Front End' 카테고리의 글 목록
본문 바로가기

Front End

 (28)
[번역] 실패하기 쉬운 JavaScript 인터뷰 질문 해당 아티클은 아래 미디엄 블로그글의 번역입니다. The most failed JavaScript interview questions Try yourself and read the explanation. intspirit.medium.com True Stroy — JavaScript 면접을 통과하기 위해서, JavaScript를 그렇게까지 잘 알 필요는 없습니다. 다른 문장의 형태를 띄고 있겠지만 면접관들은 동일한 주제로 테스트를 하기 때문에, 면접에서 나오는 질문들은 거의 대부분 비슷합니다. 하지만, 뒤에 나오는 질문들처럼 이러한 질문에 대한 올바른 답변 통계는 정답률이 상당히 낮습니다. 어떻게 이런 상황을 바꿀 수 있을까요? 간단합니다 - 이러한 주제를 최대한 많이 연습하고, 무엇보다도 그 과정과 ..
[프론트엔드] 자바스크립트의 불변성 (Immutability) 불변성 Immutability 안녕하세요! 오늘은 자바스크립트의 중요한 개념 중 하나인 "불변성"에 대해 알아보려 합니다. 다소 추상적인 개념인 불변성을 자세히 알아보기 위해서는 원시타입과 참조타입에 따라 자바스크립트 엔진이 어떻게 변화하는지에 대해서 짚고 넘어가야해요. 자바스크립트의 원시타입은 현재 총 7가지가 있지만, 기본적으로 많이 쓰이는 것은 Number, Null, String, Undefined, Boolean 타입이 있고, 참조타입으로는 Object, Array, Function 등이 있습니다. 보통 원시 타입은 불변하다고 하고, 참조 타입은 반대로 변한다고 표현합니다. 왜냐하면 데이터 저장 방식에 차이가 있기 때문입니다. 원시 타입의 경우 콜스택의 실제 값에 바로 담기게 되고, 참조 타입은..
[Vue.js] 간단한 Vue 기본 상식 시리즈 -2 Vue 라우터 Vue Router 라우터 설치 및 라우터 구현 사전적 의미에서 라우터란 컴퓨터 네트워크 간 데이터 패킷을 전송하는 네트워크 장치라고 되어있습니다. 하지만 프론트엔드에서 라우터의 개념은 조금 다르죠. Single Page Application 줄여서 SPA에서는 서버에서 주는 HTML이 단 하나뿐입니다, 이 때, 라우터는 페이지에서 다른 페이지로 넘어 갈 수 있도록 도와주는 페이지 구분을 위한 도구입니다. Vue Router v3.router.vuejs.org Vue Router Vue에는 공식 라우터인 Vue Router가 존재합니다. 주요 기능으로는 여덟까지로 나눌 수 있어요. 1. 중첩된 router / view mapping 2. 모듈화된 컴포넌트 기반의 라우터 설정 3. 라우터 파라미터, 쿼리, 와일드카드 4. t..
[Vue.js] 간단한 Vue 기본 상식 시리즈 -4 Vue 3 컴포지션 API 재사용성과 직관성을 위해 Vue 3에서 새롭게 탄생하게된 컴포지션 API Vue 3 프로젝트를 알아보기 위해 초기 세팅을 하던중 컴포지션 API라는 새로운 함수 기반의 API를 마주치게 됐어요. 해당 API 발전의 이유를 알아보니 기존 Vue 2에서 믹스인을 통해 컴포넌트의 로직을 여러 컴포넌트에서 재사용을 할 수 있었지만, 오버라이딩 문제나 다중 믹스인을 적용했을 때 관리가 어려운 점 등의 단점이 있고, 하나의 싱글 파일에서 로직을 구현시에 가독성이 떨어지는 이유 등을 보완하기 위해 만들어졌다고 해요. setup 훅이 추가된 것을 볼 수 있는데, 컴포지션 API를 사용하기 위한 초기화 지점입니다. beforeCreate 이전에 setup이 호출되므로 beforeCreate, created 대신 setu..
[Vue.js] 간단한 Vue 기본 상식 시리즈 -3 Vue 3 프로젝트 라우팅 설정 Vue 3 프로젝트 Vue Router 추가로 페이지 분리하기 프론트엔드 개발을 하면서 라우팅 설계를 제대로 해야한다는걸 작년에 뼈아프게 느낀후, 그래서 지난 시간 Vue 3 프로젝트 시작하고 제일 먼저 한것은 Vue Router 인스톨과 알맞는 세팅입니다. Vue Router router.vuejs.org 1. vue-router 라이브러리 설치 프로젝트 디렉터리 내 뷰 라우터를 설치하는 명령어를 입력하면 뾰로롱🌈 이렇게 package.json 내에 vue-router가 설치된것을 볼 수 있어요. 이제 라이브러리는 설치가 되었으니 기본 구조에서 각 페이지 별 분기하는 방법에 대해서 설명해볼께요. 1. localhost:8080/ 접속 시 가장 처음 만나는 페이지 처음 뷰 프로젝트를 시작해서 로컬 호스트..
[Vue.js] 간단한 Vue 기본 상식 시리즈 -2 Vue 3 프로젝트 시작하기 Vue 3 프로젝트 시작하기 최근에 개발공부를 하면서 다시 조금씩 기초를 다져나가야겠다는 생각이 막 들어요. 그래서 현재 회사 프로젝트인 Vue 2 버전에서 Vue 3로 올려서 공부를 해야겠다는 마음이 들어서 Vue 3 프로젝트 시작하는 법 기록을 하렵니다! iTerm2 또는 터미널에서 새로운 프로젝트를 위한 디렉터리 만들기 첫번째로 현재 내 로컬 컴퓨터에서 프로젝트에 대한 경로를 만들어주어야겠죠? 저는 맥을 사용하고 있기때문에, iTerm2를 사용해서 워크스페이스 폴더 안에 'wekor' 이라는 디렉터리를 만들어주는 명령어 mkdir 입력해주고, 생성된 디렉터리 안으로 이동합니다. 그리고 이제 Vue를 설치하기 위한 명령어들을 쭉 설명해볼께요. 아차, Vue 3 설치하기에 앞서 현재 제 개발환경에 문제..
[Vue.js] 간단한 Vue 기본 상식 시리즈 -1 IDE 고르기 Vue를 시작하며 국비지원으로 학원다니던 뽀시래기 시절 배웠던 언어는 Java였습니다. 약간의 파이썬을 곁들인.. 지금 생각해보면 코딩의 기본 틀을 알려면 범용적인 백엔드 언어부터 시작하는게 정석이라는 생각을 했던거 같습니다. 3년이 지난 지금은 프론트개발자로 그 중 Vue 라이브러리로 총 2번의 이직을 했네요! 사람일은 참 알다가도 모르겠습니다. 언어뿐 아니라 리액트, 리액트 네이티브도 조금씩 배워보며 가장 개발 성향에 알맞는 라이브러리에 정착하다보니 도착한 곳은 Vue.js 아직도 배워야 할 산은 멀고 멀지만, 그 동안 디버깅 짬빠로 다져진 Vue 팁을 짧게나마 정리해보면 좋을꺼 같습니다. 모두 렛츠꼬! 회사에서 일을 처음 시작할 때, 사수 개발자나 팀장급에서 제일 먼저 물어보는 것 자네 IDE 뭘 ..
[JavaScript] 자바스크립트 this 4가지와 화살표 함수의 this This 자바스크립트의 this 키워드는 거의 모든 상황에서 객체이며 문법적으로는 '나'와 비슷합니다. 그리고 다른 언어들과 비교해서 조금 다르게 동작합니다. this의 값은 this를 사용하는 해당 함수를 어떻게 실행(함수를 호출하는 방법)하느냐에 따라 값이 바뀝니다. this를 실행하는 방식 this는 크게 4가지 방식으로 실행을 하며 각각의 방식에 따라 가르키는 주체가 달라집니다. this의 값이 어떻게 변화하는지 어떤 값과 연결되는 지는 this의 바인딩을 통해서 확인해 볼 수 있는데요. 바인딩이랑 호출 방식에 따라서 this가 특정 '객체'에 연결되는 것 입니다. 일반 함수 내부에서 this는 글로벌 객체(window)와 바인딩이 됩니다. 메소드 내부에서 this는 메소드를 호출한 객체와 바인딩..
반응형

티스토리툴바