전체 글

내가 받고 있는 자극에 대하여. 어디서부터 시작해야할지 모르겠을 정도로 나는 여기저기에서 자극을 받고 있다. 주로, 커리어적인 측면이나 내 인생을 전문가적으로 고양 시킬 수 있는 측면에서의 자극이다. 최근엔 ATC를 참여하면서 아텍 안에서의 나에 대해 고민을 해봤는데- 고맙게도 결이가 참여 이유와 아텍으로서 정체성을 고민해볼 수 있는 질문을 해주어서-, 컴퓨터공학을 복수전공하고 있기 때문에 잃고 있던 나의 정체성을 상기시킬 수 있는 계기가 되었다. 사실 개발자로 진로를 어렴풋이 정한 순간, 내가 본 학과에서 어떤 것을 추구해야하는지 깨진 것이 사실이다. 지난 1학기에도 내가 무엇을 원해서 공부를 했다기 보다는 정말 이 학점을 이수해야하고, 어쨌든 내 전공은 아텍이니까 한번 들어볼까 하는 가벼운 마음가짐이..

#1 TS를 왜 쓸까? 자바스크립트 : 동적 언어. 런타임 시간에 타입을 결정, 오류 발견 타입스크립트 : 정적 언어. 컴파일 타임에 타입 결정, 오류 발견 즉, 컴파일 과정에서 오류를 발견함으로 효율을 더 높여주고, 코드를 공유할 시에 가독성이 높아진다. 아래의 경우, 인자의 타입(number인지, number로 이루어진 배열인지)를 명확히 표시해줌으로써 에러 방지를 할 수 있다. function add(num1:number, num2:number){ console.log(num1+num2); } function showItems(arr:number[]){ arr.forEach((item)=>{ console.log(item); }) } add(2,3); showItems(1,2,3) #2 기본 타입 ..

서버와 클라이언트에 대한 개념부터 상기해보자. 클라이언트는 서버라는 프로그램에게 서비스를 요청하고, 서버는 그 요청에 대한 응답을 보내주는 역할을 한다. 즉, 클라이언트가 주문을 하면 서버가 요리를 해주는 느낌. 클라이언트와 서버는 정보를 서로 주고 받는다. 1. SSR이란 - Server Side Rendering, 서버 쪽에서 렌더링을 위한 모든 준비를 하고나서 클라이언트에 전달 - SSR의 단계 1) 사용자가 웹사이트에 요청을 보내면, 서버는 'ready to render'한 형태로 html 파일을 만들어낸다. 2) 클라이언트에게 html파일이 전달되면 렌더링이 바로 된다. 하지만 javascript가 읽히기 전이기 때문에 조작 등의 기능은 작동하지 않는다. 3) 이후 클라이언트가 javascrip..

줌 녹화를 해야하는데 기본 녹화는 소리가 녹음이 안된다... 그리하여 찾은 방법. iShowU Instant | Awesome realtime screen recording for macOS Share to all OS X services, including YouTube, Facebook and more shinywhitebox shinywhitebox.com 우선 위의 프로그램을 다운 받아야 한다. 오디오 드라이버를 사용할 것이기 떄문에, trial 버전을 사용한다. 나는 이미 설치해서 안 뜨지만, 처음 설치하면 - 위 설정창에 보면 audio drive setup이었나? 하는 버튼이 있다. 사운드 장치에 이 프로그램을 추가하겠다는 것. 그것을 눌러주면 오디오 기기에 위 프로그램이 입력된다. 다음으론..

vue2 cli로 vue 프로젝트를 진행하던 중, 라우터를 사용하려는데 설치 중에 오류가 났다. 아래와 같은 오류 발생 npm i vue-router npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: saekdong@1.0.0 npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.5.11" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.0.0" from vue-router@..

- 기존 파일을 열고 싶을 때 (본인의 새 프로젝트를 만들고 싶다면 아래로) 레포지토리 clone을 해준 뒤 폴더를 비주얼 스토리에서 열어줌. git clone "레포지터리 주소" "폴더명" terminal > new terminal 을 통해 터미널 창을 켠 뒤에 지금의 파일을 지워준다. (아직 vue-cli 실행 이전이라면 생략 가능) rm -rf vue-todo/ 그 뒤에 바로 열어주려고 했지만 다음과 같은 문구가 떴다. "Command vue init requires a global addon to be installed." vue init 해서 프로젝트를 열려면 global 로직이 담긴 무언가를 다운 받아야한다는 뜻 npm i -g @vue/cli-init - 새로운 프로젝트를 만들고 싶을 때 n..

라우터 라우터란 특정 url에 들어갔을 때 어떤 페이지로 갈지에 대한 정보를 포함하는 속성이다. vue 인스턴스의 router 라는 속성을 이용해 연결해준다. new Vue({ el:'#app', //app 이라는 태그 안에 인스턴스 정의 router:router //router 변수를 속성에 연결한다. }) 라우터 링크를 이용하는 방법 라우터를 위한 링크 태그가 존재한다. 내용을 이용해 html 부분에서 연결해주면 된다.이때 router-view에서는 라우터가 제공하는 컴포넌트를 보여주는 역할을 한다. Login Main routes에 라우터 객체를 배열로 정의한다. 해당 페이지의 정보는 path 에 선언하고,페이지에 뿌릴 컴포넌트는 component 에 선언한다. 단, 컴포넌트는 페이지 당 하나만 가..

컴포넌트 통신방법 - 같은 레벨인 경우 바로 같은 레벨로 전달 불가능. 위의 루트 컴포넌트를 거쳐 다시 하위 컴포넌트 (루트 기준)이자 같은 레벨의 컴포넌트 (전달하고자 하는 레벨 기준)야 한다. 아래와 같이 이벤트 발생과 프롭스 전달을 동시에 함으로써 구현해야 한다. app-content 컴포넌트의 'methods'이자 이벤트 발생 대상인 pass를 인스턴스(루트)의 deliverNum이라는 '컴포넌트 데이터'로 전달한다. 실제로는 deliverNum(num)과 같고, data를 처리해주기 위한 methods를 사용한다. num값을 전달받은 인스턴스의 데이터를 app-header 방향으로 props 전달한다. 이때 props속성은 propsdata가 되며, 인스턴스의 num값을 넘겨받는다.