OWEN

지난 포스팅에 이어서 Vue.js로 트렐로와 비슷한 앱을 만드는 작업을 블로그로 정리해 보려고 한다. 이번에 만들어볼 기능은 카드 이름을 실시간으로 수정하고 카드를 다른 리스트로 이동하는 기능이다. 1. 카드 이름 실시간으로 수정하기 예를 들어 첫번째 리스트인 A 리스트에서 첫번째 카드인 TaskA의 이름을 수정하고 싶을 때, 바로 이름을 수정하고 그 수정된 이름이 저장이 되게 하고 싶다. 이 때 사용하는 지시자는 v-model이다. v-model은 form의 input 요소와 컴포넌트의 output을 변화시키고 싶을 때 사용한다. 예를 들어 라고 하면 이 input에 입력하는 값이 컴포넌트의 message 데이터에 자동으로 저장되고 실시간으로 바뀔 때 마다 그 변화가 반영된다. 아래 소스코드 line ..

요즘 구직을 하는 중이다. 열심히 시험 보고 면접 보러 다니고 그러고 있다. 앞으로 언제가 될지 모르겠으나 회사를 가면 이만큼 운동 많이 하기 어려울 것 같다는 생각에, 운동은 거의 매일 꾸준하게 나가고 있는 중이다. 크로스핏 5개월차, 이제는 어떤 WOD가 나와도 당황하지 않고 할 수 있는 수준까지는 된 것 같다. 분발해야 할 기록 적당히 좋지도 나쁘지도 않은 기록 스스로 만족한 기록 5월 11일 월요일 WOD Every 5minutes 5rounds 10 strict pull ups 15 strict pushups 20 burpees 25 strict ab mat sit ups 내 기록 : 4Rounds, Rx'd 맨몸 운동 종합 세트 와드였다. 맨몸 운동을 절대로 만만하게 보면 안 될 것이다라는 큰..

이전 포스팅 Network #1. Intro 오늘은 IP 주소에 대해서 내용을 정리해보려고 한다. TCP/IP라는 프로토콜을 만들 때 이 프로토콜에서 사용하는 모든 장비들을 구분해 주기 위해서 만들어 낸 것이 IP 주소이다. 우리는 현재 IPv4라는 인터넷 프로토콜을 사용한다. 물론 오늘날에는 IPv6도 있지만, 아무래도 대중화된 프로토콜은 IPv4일 것이다. IPv4는 32 bit로 이루어진 숫자이며 총 네 구간으로 나누어져 있는데 각 구간은 8bit 이므로 0에서 255까지 숫자가 가능하다. 따라서 0.0.0.0 ~ 255.255.255.255까지 IP 주소로 사용할 수 있는 것이다. 산술적으로 보았을 때 2^32 = 약 40억 정도 되는데 실제로 전 세계에 존재하는 IP 주소는 그보다는 약간 적다...

자바스크립트 배열을 다룰 때 자주 사용하는 메서드들을 한 번 정리 해 보고자 한다. 실제로 지난 일주일동안 자바스크립트 기반 알고리즘 문제를 풀 때나, 프론트엔드 로직을 구현하는 기술과제를 할 때 많이 찾아보고 많이 사용했던 메서드들을 위주로 살펴보고자 한다. forEach 배열의 각 원소별로 순서대로 돌면서 함수를 실행한다. const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" 참고로 forEach 메서드는 Object에서는 사용할 수 없지만 Map이나 Set 객체에서도 사용할 수가 있..

오늘은 vue로 간단한 웹 어플리케이션을 만들어 보면서 vue의 기능들을 공부해 보려고 한다. 이와 같은 과제가 실제로 프론트엔드 개발 직군에서 나오는 경우도 있으니 연습해 보면 많은 도움이 될 것이라고 생각한다. 트렐로 라는 앱을 써본 사람들이 있을 것이라고 생각한다. https://trello.com/ Trello Infinitely flexible. Incredibly easy to use. Great mobile apps. It's free. Trello keeps track of everything, from the big picture to the minute details. trello.com 트렐로는 프로젝트의 순서를 관리해 주는 앱으로 보드와 리스트 등으로 할 일들을 구분하여 사용하기 쉽..

자바스크립트 관련 예상 질문은 양이 많아서 두 번에 나누어서 정리해 보려고 한다. JavaScript 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. event delegation에 대해 설명하세요. (D사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 ..

오늘은 최근에 내가 개발을 하면서 몇 시간동안 고민한 이슈에 대한 정리를 해 보려고 한다. 이 이슈는 내가 어떤 회사에 입사하기 위해 치뤘던 코딩 과제를 하는 도중에 발생하였다. 다행히도 이 과제 기한을 48시간을 주어서, 몇 시간 삽질을 해도 완성 후 제출할 수 있었으나, 만약에 짧은 시간에 해결을 해야 하는 경우였다면 문제를 해결하지 못했을 것이다. 내가 했던 삽질을 앞으로 나를 포함한 누구도 하지 않고 시간을 아끼기 위한 마음에 내용을 정리해 보고자 한다. 먼저 나는 REST API가 구현된 서버 코드를 이미 받은 상태였고, 이미 잘 구현된 API를 그래도 가져다 쓰기만 하면 되는 것이었다. README에 명세된 API는 다음과 같은 조건을 가지고 있었다. POST 메서드로 Content-Type은..

오늘 살펴볼 문제는 백준 3176번 '도로 네트워크' 라는 문제이다. https://www.acmicpc.net/problem/3176 3176번: 도로 네트워크 문제 N개의 도시와 그 도시를 연결하는 N-1개의 도로로 이루어진 도로 네트워크가 있다. 모든 도시의 쌍에는 그 도시를 연결하는 유일한 경로가 있고, 각 도로의 길이는 입력으로 주어진다. 총 K www.acmicpc.net 이 문제는 꽤 어렵다. https://solved.ac/ 라는 알고리즘 문제 난이도 측정 사이트에서는 이 문제를 플레티넘 4 레벨로 분류했다. 플레티넘 레벨은 상당수가 쉽게 해결책을 찾기 어려운 고난이도 문제이다.(나에게는) 이 문제도 그래서 사실 풀다가 다른 사람의 소스를 어느 정도 참고하였고, 천천히 상세하게 풀이를 정리..