문득 개발을 하면서 라우팅을 하다가 궁금증이 떠올랐다. ‘왜 우리는 URL에 케밥 케이스를 사용하고 있지?’ 뇌 빼놓고 코딩하는 습관을 고치기 위해, URL 컨벤션에 대해 한 번 찾아보았다!   URL에서 케밥 케이스를 사용하는 이유는 다음과 같다. 가독성과 사용자 친화성 URL은 사용자에게 직접 노출되는 요소다. 따라서 가독성이 좋고 사용자가 이해하기 쉬운 URL을 제공하는 것이 중요한데, 특히 케밥 케이스가 단어 사이에 대시를 사용하여 각 단어를 명확하게 구분해주기 때문에 가독성이 좋다. 특수 문자 제한 URL은 특수 문자를 제한하는 경우가 많다. 공백이나 다른 특수 문자를 URL에 직접 사용할 수 없기 때문에, 단어를 구분하는 데에는 특수 문자를 사용할 수 있는 유일한 방법은 대시(-)다. 케밥 케이스는 단어 사이에 대시를 사용하여 단어를 분리하므로, URL의 구조를 깨지 않고 유효한 문자만 사용하여 URL을 작성할 수 있다. 검색 엔진 최적화(SEO) URL은 검색 엔진 …

삐까뻔쩍 나도 한번 잘살아보자🎵 웹사이트를 만들다 보면 피할 수 없는 그것… 바로 모달 창 만들기..! 드롭다운이 아닌 일반적인 모달의 경우 화면 전체를 채우게끔 구현을 해야 하는데, 이 때 사용할 수 있는 몇 가지 팁을 정리해보려 한다. 현재 내 블로그에 있는 컴포넌트를 예시로 들어보도록 하겠다.   일단은 모달을 만들어보자 버튼을 클릭하면, 다음 사진처럼 모달이 열리게 된다. 자.. 그렇다면 닫히는 건 어떻게 해야 할까? 보통 모달은 모달 바깥을 클릭하면 닫히곤 한다.   모달 밖을 클릭하면 모달이 닫히게 하고 싶어! 여기에는 두 가지 방법이 있다. 1. ref 사용하기 ref를 사용해서 클릭 이벤트가 컴포넌트 내부에서 발생한 것이 아니라면 close를 해주는 방법이다.   2. Wrapper를 추가하기 모달을 감싸면서 화면 전체를 덮는 Wrapper를 추가하여 onClick 이벤트를 걸어주는 방법이다. 나는 어차피 모달 뒤에 배경을 넣어주고 싶었기에 Wrapper(Mod…

hosts 파일이란? hosts 파일은 운영체제가 호스트 이름을 IP 주소에 매핑할 때 사용하는 파일이다. 우리가 주소창에 url을 입력하면 DNS를 통해서 해당 도메인의 실제 IP 주소로 접속하게 되는데, 이 때 DNS를 통하지 않고 원하는 IP 주소로 접속하고자 할 때 hosts 파일을 수정하는 방법을 이용할 수 있다. 개발을 하다보면 로컬 환경에서 도메인 테스트를 해야 하는 경우가 생긴다. 이 때 원하는 도메인을 로컬 IP 주소를 바라보게끔 hosts를 수정할 수 있다.   sudo vi /etc/hosts vscode를 사용한다면 를 입력해도 된다. 터미널에서 위 명령어를 입력하고 비밀번호를 입력하자. 그러면 아래와 같은 파일이 뜰 것이다. 나는 이미 수정된 내용이 있다. 입력 hosts 파일 수정 입력 (저장 후 종료) 입력   요즘은 이런 거 해주는 앱도 있더라 Gasmask와 같은 앱을 사용하는 것도 좋은 방법이다. 기존 hosts 파일을 직접 건드리지 않고 …

제목을 ‘form생form사’로 하고 싶었으나 처참히 실패 폼과 관련된 서버 통신 작업을 할 때, 보통은 이미지를 업로드하는 api와 폼데이터를 전송하는 api를 함께 사용해 서버로 데이터를 전송하곤 했다. 그러던 어느 날, 파일은 파일대로 json data는 json 대로 넣어서 하나의 api를 사용해 같이 전송해달라는 서버 개발자의 요청을 받게 되었는데…   FormData란? FormData는 HTML 폼 데이터로, 폼을 쉽게 보내도록 도와주는 객체다. 네트워크 메서드의 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고 속성은 로 지정된 후 전송된다.   어떻게 동시에, 따로 보내야 하지? 그냥 다짜고짜 파일과 함께 보냈더니, 에러가 발생했다. 그래서 file은 multipart/form-data, 그 외의 데이터는 application/json 형식으로 따로 보내기 위해 Blob을 사용해주었다. Blob(Binary Large Object)은 이미지,…

CORS 에러는 터지는데.. 아무힘이 없는 프론트 개발자가 과연 무얼 할 수 있을까?   CORS란? CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다. CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다. CORS는 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청하는 데에 있어서 발생하는 보안 문제를 해결한다. 이전에는 같은 도메인에서만 요청할 수 있었기 때문에, 다른 도메인으로 요청을 보내는 경우 보안 문제가 발생할 수 있었다. 그러나 CORS를 사용하면 다른 도메인에서도 자원에 접근할 수 있다. CORS는 다음과 같은 방법으로 작동한다. 브라우저는 HTTP 요청을 보낸다. 서버…

1월. 우아한형제들 입사 뭐니뭐니 해도 올해 가장 큰 사건은 정직원으로 입사를 한 것. 원하던 회사에서 새해를 시작하는 건 무엇보다 짜릿한 일이었다.   2월. 졸업식 이전 회고글에도 올린 사진이지만 한번 더 올려야지 ㅋㅎ 휴학없이 비대면 수업 제대로 뽕뽑고 졸업한 건 다시 생각해봐도 정말 잘한 일.   3월. 코로나 확진 코로나 덕에(?) 1주일간의 유급휴가를 보내게 되었다. 일주일 내내 한 거라곤 누워서 게임하기 만화보기 애니보기… 크게 아프지도 않았어서 정말 꿀같은 시간을 보냈다.   4월. 이사 선릉에서 1년 반을 살고는, 깨끗하고 예쁜 집에서 살아보고 싶다는 로망 하나로 석촌으로 이사를 하게 되었다. 그리고 그 로망은 아주 제대로 실현중. 하지만 너무 비싼 월세와 방음 문제로 인해 1년만 채우고 또 이사를 할 예정… 제주도 본가에서 몇달 살다가 설입쪽으로 원룸을 구해볼까 생각중이다.   5월. 더큰집 지인 방문 더큰집(롯데타워)은 보안이 매우…

사실상 PPT 만든 게 아까워서 쓰는 글. 다시 발표자료를 봤을 때, 가치관이 달라진 부분도 있는 것 같다. 한낱 1년차의 시점으로 만들어진 것이기에 공감 안 가는 부분 있을 수 있음 주의   경희대학교 컴퓨터공학부에서는 최근 TechKHU Concert라는 IT 테크 콘서트를 꾸준히 주최하고 있다. 경희대 컴공 졸업생들이 연사로 참여하여 후배들에게 조언과 팁을 제공하는 자리인데, 어쩌다 보니 내가 연사로 참여하게 되었다 🥲 (복학한 남자 동기들이 대부분 과장, 동장을 맡고 있다 보니 자연스레 제의가 들어왔다.) 엄청 예쁘게 만들어주신 카드 뉴스!! 사실 재학생 입장에서 어떤 이야기들이 도움이 될까를 고민을 해봤지만, 역시나 기술적인 이야기보다는 공부나 취업에 대한 이야기가 더 고프지 않을까 생각이 들었다. 그래서 이전에 오픈부스 컨퍼런스에서 발표했던 내용과 비슷한 이야기를 또 풀어낼 수밖에 없었다. 그때의 발표 내용을 다시 살펴보니, 조금 공격적인 말투도 있었던 것 같고 PPT…

내가 디프만을 시작했던 게 8기, 현재 11기가 끝나가고 있다…! 8기부터 참여했던 사람이 아마 나밖에 없을 것 같기도… 어쩌다 고인물이 되었을까..? 이제 디프만 없이는 못 사는 사람이 된 걸지도… 🤔 디프만은 나에게 꿈의 동아리 같은 느낌이었다. 대학생 나부랭이였던 나에게 현직자와 함께 프로젝트를 해본다는 것은 상상조차 못할 일이었다. 부푼 꿈을 앉고 지원했으나 서류에서 탈락한 적도 있었기 때문에 더욱 더 벽이 높게만 느껴지기도 했다. 2학년이 끝나고 열심히 공부한 것을 바탕으로 8기에 또 지원하게 되었고, 결과는 합격이었다. 엄청나게 기뻤다. 당시 코로나가 크게 유행하기 전이었기 때문에 OT도 엄청나게 기대됐었다. 무려 8기 OT 때 찍었던 추억의 사진. 이 때가 2020년도..?   디자이너와 프로그래머가 만났을 때 대학생 신분으로 혼자서 고군분투했던 때와 달리, 디프만에서는 백엔드, 프론트엔드, 디자인 파트 사람들과 함께 프로젝트를 진행했다. 말로만 들어봤던 회사의 개발…

요즘 IT가 붐이긴 한가 보다! 아우쓱 지원자도 매 기수마다 기하급수적으로 늘어나고 있다 👀 나는 4기부터 활동하여 현재 6기 모집이 진행되는 현재까지도 열심히 활동하고 있는 일원이다 :)   AUSG? 아우쓱은 AWSKRUG University Student Group의 약자다. AWSKRUG는 AWS 한국 사용자 모임으로, AUSG는 AWSKRUG 밑에 소속되어 있는 느낌이면서 대학생들끼리만으로 따로 구성되어 있는 그룹이다. 즉 AWS와 클라우드에 관심 있는 대학생들의 모임인 것인데…   그렇다면 AWS나 클라우드에 대해 잘 알아야 하나요? 그렇진 않다! 사실 나도 하나도 모르고 들어갔기 때문에..ㅎㅎ 심지어 프론트엔드를 막 공부하기 시작할 때쯤 들어갔기에 개발에 대해서도 빠삭한 상태가 아니었다. 대학생 모임이기 때문에 실력이나 커리어보다는 열정을 많이 보는 것 같다. 그때의 열정 어디 갔을까 AUSG에 들어가고 싶었던 이유는 단 하나였다. 커뮤니티성 동아리였기 때문이다. 계…

JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게 될 것입니다. 위의 구조가 동작될 수 있게끔 JSX를 구현해보도록 하겠습니다. (Header의 props로는 스트링 타입의 와 함수 타입의 를 전달해주도록 하겠습니다.)   1. jsx 함수 기본 구조 우선 jsx 함수는 스트링 배열과 ${}에 포함된 아규먼트를 받아서, 공정을 거쳐 최종적으로 엘리먼트를 반환하게 됩니다. 초기 template은 div 엘리…

컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다!   src/index.ts   src/pages/Main.ts   src/pages/Sub.ts   src/components/Header.ts state와 props가 잘 동작하는지도 확인해보기 위한 코드도 함께 넣어주었습니다. 한 번 실행시켜 볼까요? 1. BrowserRouter의 경우 2. HashRouter의 경우 HashRouter의 경우 BrowserRouter와 다르게 이 들어가있는 것을 볼 수 있습니다. 두 경우 모두 state와 props가 잘 보여지고 있네요! 지금은 메서드로 string을 반환하여 UI를 그리고 있는데요, 때문에 클릭같은 이벤트도 메서드 내부에서 등록해주고 있는 것을 볼 수 있습니다. 다음 글에서는 jsx를 구현하여 더욱 효율적으로 엘리먼트를 그릴 수 있도록 해봅시다.

이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다.   1. Route 타입 정의 이는 HashRouter와 동일합니다.   2. Router 구조 라우터 구조 또한 HashRouter의 경우와 똑같이 잡아주도록 하겠습니다. 다만 이번에는 가 아닌 로 네이밍해주었습니다.   3. Class 초기화 당연히 생상자 내부 코드도 동일하겠죠? 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행합니다.   4. hash가 변경될 때의 이벤트 처리 이제부터 HashRouter와 다른 로직이 등장하게 됩니다. HashRouter의 경우 Hash가 변경될 때 이벤트 처리를 해주었지만, BrowserRouter의 경우 history API를 사용합니다. 에서 window 객체의 이벤트 리스너에 핸들러를 등록해줍시다. 여기서 의문이 들 수 있습니다. document 객체의 이벤트 리스너에 라는 이벤트가 있었나? 싶을 텐데요. 맞습니다. document 객…

라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요! [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다.   1. Route 타입 정의 라우트는 path와 해당 path에 해당하는 컴포넌트를 가지는 객체입니다.   2. Router 구조 SPA의 최상단 엘리먼트 객체와 정의된 라우트들을 필수적으로 받게 됩니다. 그리고 이벤트와 라우트를 다루는 여러 메서드를 통해 라우팅을 하게 됩니다.   3. Class 초기화 우선, 라우터 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행…

CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다.   react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습니다. 하지만 이렇게 하면 모든 페이지를 reload하게 되므로 속도가 느려질 수밖에 없습니다. 리액트에서는 SPA라는 특성을 활용하여 라우터를 이용하여 변경된 소스만 바뀌도록 …

리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다!   1. Component 구조 target으로는 해당 컴포넌트가 들어갈 Element를 받게 됩니다. 컴포넌트는 부모로부터 받은 props와 스스로 관리하는 state를 가집니다. 컴포넌트 생명주기와 관련된 메서드, 첫 렌더링과 이후 상태가 변경되었을 때의 리렌더링을 위한 메서드, 상태 업데이트와 이벤트 등록과 관련된 메서드를 적어주었습니다. template 메서드에서는 실제 엘리먼트를 그리게 됩니다. 기본값으로는 빈 스트링을 반환하도록 해주었습니다.   2. Class 초기화 우선, 컴포넌트 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 컴포넌트가 들어갈 Element를 받아 등록하고, props도 받아서 등록해줍니다. state는 빈 객체를 할당합니다. setup 메서드에서는 state 초깃값 선언, api 호출 등 컴포넌트가 렌더링되기 전에 일어나야 할 일들을 처리하는 용도입니다. 그 후 컴포넌트를 마…

별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-plugin mini-css-extract-plugin sass sass-loader ts-loader typescript webpack webpack-cli webpack-dev-server   1. webpack.config.js   2. tsconfig.json 절대 경로를 alias를 따로 설정해주었습니다.   3. .babelrc   4. index…

DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다.   SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다. 또한 기존의 웹 애플리케이션은 돔 전체를 직접 접근하여 조작해서 브라우저에 화면을 나타내는 방식이었고, 웹 어플리케이션의 규모가 커질수록…

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite)   1. Parsing 파싱 우선 HTML을 파싱하여 DOM(Documnet Object Model) Tree를 만들게 됩니다. 파싱 도중 CSS를 만나면 파싱하여 CSSOM(CSS O…

1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 시스템 환경설정 > 손쉬운 사용 > 포인터 제어기 > 트랙패드 옵션으로 들어가면 드래그 활성화 옵션이 있는데, 세 손가락으로 드래그하기로 설정해주면 됩니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다. 앱 expose 시스템 환경설정 > 트랙패드로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 큰 기능은 아니지만 유용합니다.   2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 크롬, 카카오톡, 노션, VScode, Zoom, Slack, Figma, Typora, iTerm2, Git…

입학 나는 경희대학교 컴퓨터공학과에 18학번으로 입학했었다. 사실 컴퓨터공학과에 생각이 있었던 건 아니다. 당시엔 개발 붐이 일어나기 전이었기에, 컴공이라는 과를 떠올리지도 못했다. 수시파 친구들의 경우 생기부와 자소서를 3년 내내 관리해야 하다 보니 자연스레 진로를 일찍부터 고민하게 되는데, 나의 경우 100% 정시파였고 (내신은 거의 4등급 정도 됐었던 걸로 기억한다..ㅎㅎ) 미래에 대해서는 딱히 아무 생각이 없었다. 어떻게든 되겠지~했던 안일했던 나.. 고등학생 시절 제일 좋아했던 과목은 생물이었다. 교육과정에 해당하는 내용 뿐만 아니라 따로 미생물학, 세포학 쪽으로 추가적인 공부를 했을 만큼 관심이 많았다. 생물을 좋아하게 된 계기는 학원 선생님 때문이었지만.. 그래서 그냥 생물학과 가서 연구원을 하고 싶다는 막연한 생각이 있었다. 그런데 막상 수능이 끝나고 정시 원서를 내려니, 겁이 나기 시작했다. 지식인에 생물학과 전망을 검색하니 암울하다는 내용 뿐이었다.(학과 비하 …

2021.09.27 - 2021.12.26 동안의 경험에 관한 글입니다. 아마 제 인생 마지막 인턴십이 되겠죠?   Minnie로 보냈던 당근마켓에서의 3개월. 새 맥북 기기부터 다양한 당근마켓 굿즈와 사원증까지! 많은 환영을 받았던 인턴 입사였다. 너무 설레는 순간이었다. 날 포함한 18명의 인턴들 모두가 비슷한 감정을 느꼈으리라 생각한다 :)   저엉말 잘 먹었다. 3명으로 이루어진 6개의 팀 당 법인카드가 하나 씩 주어졌다. 당근마켓은 식비 금액 제한이 없기 때문에, 정말 금액에 대한 고민 없이 마음껏 맛있는 식사를 하며 즐겁게 일할 수 있었다. 사진이 더 많지만 이하 생략.. 식사뿐만 아니라 당근마켓에는 층마다 간식 창고가 있는데, 다양한 과자와 음료수가 넘쳐나 하루 종일 배고플 틈이 없었다ㅎㅎ 그리워!!!!!!!!!!!   꿀 같은 도서 지원 복지 중 하나인 도서구입비 지원으로 평소 종이책으로 보관하고 싶었던 개발 책들을 몇 권 구입했다. 생각보다 많이 비싼 개…

3차 검증 마지막으로 당장모아에 방문했던 찐 유저들의 이야기를 들어보고 싶어요. 우리 서비스에서 어떤 것이 더 필요할까요? 앞서 짧은 기간 동안 진행되었던 검증들에서는 얻기 어려웠던 좀 더 상세한 정보들을 얻기 위해 당장모아를 사용한 찐 유저들을 대상으로 인터뷰를 진행해보기로 했다. 그렇게 총 6명의 찐 방문 유저들을 인터뷰하게 되었다. 주로 저장하는 카테고리, 기존 장소 저장 서비스에서 참고하던 정보의 종류, 당장 모아에서 추가됐으면 하는 정보, 당장모아의 차별성 등에 대한 생각을 물어보았다.   유저 인터뷰로 얻은 인사이트 유저들이 생각하는 당장모아의 가장 큰 차별성은 당근마켓의 신뢰도와 동네 이웃들이 제공하는 장소라는 것이었다. 그렇기에 보다 더 구체적인 장소 정보와 이웃들의 후기가 필요하다. 하지만 POI에 없는 가게와 정보들이 상당히 많다.   유저의 의견과 검증을 통해 느낀 인사이트를 기반으로 마지막으로 프로덕트를 개선해보자! 동네에 저장할 장소가 많지 않다. 동네…

2차 검증 유저는 테마에 관심이 있는 걸까요? 프로덕트를 이용하지 않고 새로 검증해봐요! ‘유저가 테마보다 장소 저장을 더 선호한다’는 검증에서 허점은 없었을까? 단편적으로 봤을 때는 테마보다 장소를 저장한 비율이 더 높았다. 하지만 엄청난 차이는 아니었다. 둘 다 낮은 퍼센트였다. 단순히 테마냐 장소냐의 차이로 발생한 문제가 아니었을 수도 있다. 그렇다. 장소를 랜덤으로 보여줘 놓고 저장을 해보라고 했기에, 유저가 원하는 장소가 없었을 수도 있었다. 우린 잘못된 방식으로 검증을 하고 있었다. 다른 요소에 영향을 받지 않는 검증 방식을 찾아야 했다.   “테마에 대한 수요와 공급을 다시 확인해볼까?” “장소와 테마를 직접 테스트로 받아보자!”   검증 2 (수요) - 테마를 텍스트로 받아보기 우선, 사용자들에게 알고 싶은 테마가 있는지 물어봤다. 그 결과, 총 99개의 답변을 받았고 그중 58명의 유저가 추후 테마에 대한 글이 작성되면 알림을 받아보고 싶다고 응답했다. 99개…

1차 검증 유저는 테마에 관심이 있는 걸까요? 프로덕트를 이용해서 검증해봐요! 유저는 테마에 관심이 있는 걸까? 유저가 테마를 만드는 것에 관심이 있나? 유저가 테마 글을 저장하고 싶은게 맞을까? 유저는 우리 서비스를 어떻게 생각할까? 3. 유저의 의견을 직접 들어보자! 이전에는 프로덕트의 개선을 통해 공급과 수요를 늘리려고했는데, 그게 아니라 본질적으로 공급과 수요가 있는지부터 확인하고자 했다. 그래서 이미 만든 프로덕트를 활용해서 공급과 수요를 나누어 검증하는 동시에, 유저테스트를 진행해서 현 프로덕트에 대해서 처음보는 유저가 어떻게 느끼는지 보고자 헀다.   1. 유저가 테마를 만드는 것에 관심이 있나? 장소를 하나의 주제로 묶는 테마에 관심이 더 많은지, 장소 자체에 관심이 더 많은지를 파악하기 위해 테마를 작성하는 것과 장소만 저장하는 것을 각각 풍성피드에 띄워 A/B테스트를 진행했다. 검증1의 결과는…? 장소 저장을 한 유저 비율이 더 높았다.   2. 유저가 테마…

3차 프로덕트 유저가 작성과 저장을 쉽게 할 수 있는 방법을 고민해요 1. 공급을 늘리기 위해 1-1. 장소만 저장 가능하다면 테마 생산이 늘어날까? - 장소 저장 기능 장소만 저장할 수 있다면 테마 작성이 더 쉬워지지 않을까? 그래서 기존 장소 카드에서 바로 테마에 저장할 수 있도록 개선했다. 이때 새로운 테마를 간단하게 바로 만들어 추가할 수 있는 방법과 기존 테마에 추가하는 방법 2가지를 제공했다.   1-2. 처음부터 테마를 만들지 않고도 장소들을 저장할 수 있도록 하면 어떨까? - 기본 테마 제공 기본 테마를 제공한다면 테마 작성에 대한 부담감을 덜어줄 수 있지 않을까? 우선적으로 기본 테마에 장소들을 쉽게 추가할 수 있게 되니, 테마를 떠올려야 한다는 부담감을 덜고 좀 더 테마 작성이 쉬워질 것이라 판단했다. 그래서 회원가입을 하면 기본 테마를 비공개로 하나씩 제공하고, 카드를 터치해서 바로 장소를 추가할 수 있도록 구현했다.   1-3. 저장하고 싶을 만한 장소들…

2차 프로덕트 수요와 공급이 상호작용할 수 있는 프로덕트를 만들어요 ” 테마 작성이 어려운 걸까? ” 그럼 텍스트 필드에서 자세한 예시를 보여주고, 작성완료된 글이 어떻게 보이는지도 함께 보여주면 어떨까? ” 저장할 만한 장소가 떠오르지 않는 걸까? ” 그럼 동네 장소들을 여러 개 보여주면 어떨까? ” 만든 테마를 볼 수 있는 곳이 없어서일까? ” 그럼 만든 테마를 볼 수 있는 공간을 마련해주면 어떨까? 테마에 대한 예시를 구체화한다면 테마 작성이 쉬워지지 않을까? 동네 장소들을 보여준다면 테마에 추가할 장소들을 떠올리기 쉬워지지 않을까? 만든 테마를 볼 수 있는 공간이 있다면 테마를 만들고 싶어 하지 않을까? 이 가설에 대한 검증을 진행해보고자 테마 작성 기능을 개선하고, 엔터테인 요소인 둘러보기 기능을 추가했다. 우리는 이 검증을 거치기 위해 프로덕트를 우선적으로 만들어서 당근마켓 생활서비스 내에 런칭해보기로 했다. 당장모아 서비스는 수요와 공급이 함께 보이고 상호작용이 되…

본격적인 세 번째 이야기를 시작하기에 앞서, 프론트엔드 개발자인 나, 미니 백엔드 개발자 루디, 디자이너 레일라. 3개월 동안 너무 고생했고 고맙고 미안하고 사랑해요!   문제 정의 아이디어를 구체화하기에 앞서, 우리 팀은 문제를 정의해보았다. 1. 당근 내부에서의 핵심문제 당근에서 알게된 장소 정보를 저장하고 모아볼 수 있는 영역이 없다. 2. 당근 외부에서의 핵심 문제 광고성 게시글이 아닌, 믿을 수 있는 유저로부터 장소를 추천받을 수 있는 공간이 없다. 비슷한 특징/리뷰를 가진 여러 장소들을 한꺼번에 추천받을 수 있는 공간이 없다. 그렇게 나만의 지도를 만들고 공유하는 해결책을 떠올리게 되었다. 원하는 장소를 주제에 맞게 저장할 수 있다. 저장된 장소들을 지도 형태로 동네 이웃들에게 공유할 수 있다. 원하는 장소를 자유롭게 주제에 맞춰 저장하고, 저장된 장소들을 지도 형태로 동네 이웃들에게 공유해보면 어떨까? 나아가 지도를 만든 사람을 구독하거나 세부 장소를 따로 저장할 수 …

팀도 꾸려졌으니, 아이디어 선정해보자! 세 명으로 구성된 총 6개의 팀. 우리는 제공받은 기획안들을 훑어보며 서로 겹치지 않는 선에서 아이디어를 선정해야 했다. 이 과정에서 우리 팀은 큰 난관을 겪었다. 2 지망으로 골랐던 ‘플리마켓’ 아이디어로 결정되었는데, 아이디어 구체화를 하다 보니 서비스가 생각보다 너무 크다고 느끼게 되었다. 삼사 주 내로 런칭을 해야 피드백을 받고 개선할 시간이 생길 것이라 생각했고, 그러기에는 플리마켓 아이디어가 상당히 까다롭게 느껴졌다. “초반에 빠르게 피봇을 하자.” 결론을 내렸지만 쉽게 되지 않았다. 새로 제안한 아이디어들이 또 피봇 되기 부지기수였고 그렇게 우리는 팀 이름도 정해지지 않은 채 일주일을 보내게 되었다. 일주일 동안 우리 팀은 참 많은 감정을 느꼈다. 하지만 확실한 건, 이 과정을 통해 우리가 보다 더 끈끈해졌다는 것이다. 나중 가서 일이 틀어지느니 빠르게 겪어보는 게 나을 거야, 우리는 서로를 다독이며 파이팅을 외쳤다. 그렇게 고난…

사실상 PPT 만든 게 아까워서 쓰는 글. 다시 발표자료를 봤을 때, 가치관이 달라진 부분도 있는 것 같다. 한낱 1년차의 시점으로 만들어진 것이기에 공감 안 가는 부분 있을 수 있음 주의   나는 디자이너 개발자 협업 동아리, 디프만에서 10기 운영진으로 활동했다. 디프만 10기는 참 많은 일들을 했다. 옥토퍼스 로켓과 함께 애자일 코칭을 진행하기도 하고, 핵클과 함께 A/B 테스트 및 운영 세션을 진행하기도 했다. 오픈부스와의 콜라보도 그 중 하나였다. 오픈부스는 온라인 박람회 플랫폼을 운영하는 스타트업으로, 디프만과 공동 컨퍼런스를 주최하고 싶다는 연락이 왔다. 오픈부스 측에서는 디자이너 2명, 개발자 2명으로 구성했으면 좋겠다고 전했다. “할 사람 없으면 제가 하죠, 뭐.” 그렇게 내가 하게 되었다. 아무 생각없이 시작한 일이었는데, 생각보다 큰 이벤트였다. 페이지에 내 사진이 걸리고 티켓도 5,000원 상당의 가격으로 매겨졌다. 대단한 연사 멤버가 아닌데다 오천원도 부…

당장모아는 11~12월 동안 ‘당근마켓’앱 내 ‘생활서비스’에 런칭되었던 서비스다. 서초동, 잠실동, 한남동 대상으로 오픈을 진행했다.   MVP [ ˌem viː ˈpi ] Minimum Viable Product : 최소 실행 가능 제품 Most Valuable Player : 최우수 선수 ❝당근마켓 앱 내에 미니 서비스 MVP(Minimum Viable Product)를 런칭할 개발과 디자인 분야의 MVP(Most Valuable Player) 분들을 찾아요” 솔깃했다. MVP 인턴십이라니? 미니 서비스란 어떤 걸까? 어떤 도전과제가 주어질까? 당근마켓이 제시한 아이디어로 미니 서비스를 직접 만들어 당근마켓 내에서 런칭해볼 수 있다니! 서비스에 대한 유저의 실제 반응을 분석하고 개선해볼 수 있다니! 당근마켓 팀원들로부터 피드백과 조언을 받을 수 있다니! 지원을 안 해 볼 수가 없었다. 0주 차에는 오리엔테이션 및 팀 구성, 1-7주 차에는 서비스 MVP 개발 및 디자인, 8…

2021.07.05 - 2021.08.31 동안의 경험에 관한 글입니다.   정직원이 하고 싶어! 네이버 인턴이 끝나고, 이제 인턴은 더 하고 싶지 않았다. 소속되지 않은 불안감은 생각보다 힘들었고, 정직원으로서 당당하게 스스로를 개발자라고 소개하는 날이 하루빨리 찾아왔으면 했다. 4월부터 6월까지의 공백기 동안 수많은 도전과 실패를 겪었다. 신입뿐만 아니라 경력 채용 공고에도 서류를 많이 넣었는데, 생각보다 합격률이 높았다. 면접도 1차 면접이나 짧은 전화면접의 경우 무난하게 통과할 수 있었다. 하지만 지원했던 대부분의 회사들이 2-3년 차 경력직을 원하고 있었기 때문인지 심화 기술면접에서 줄줄이 떨어졌다. 좌절감과 실망감도 들긴 했지만, 새로운 질문과 문제들을 경험할 수 있었다는 즐거움이 더 컸다. 내가 경력직만큼의 실력을 갖고 있는 건 당연히 아니었으니 말이다. 면접만 거의 열몇 번을 봤고 그만큼 데이터를 많이 쌓을 수 있었다. 그러던 중 한 스타트업에서 최종 합격을 하게 되…

2021.03.02 - 2021.04.09 동안의 경험에 관한 글입니다. 6주 동안 진행되었던 네이버 전환형 인턴입니다 :)   퇴사가 결정되고.. 3-2의 경우 메가존 클라우드 근무와 학업을 병행했는데, 겨울방학이 끝날 때쯤 더 이상 재학생은 인턴을 받지 않기로 결정되었다는 소식을 듣게 되었다. 하지만 나에게 휴학은 존재하지 않는 선택지였다. 코로나로 모든 대학 강의가 비대면으로 진행되는 꿀 기간을 놓칠 수 없었기도 했고, 적어도 취업계를 낼 수 있는 4-2 전까지는 혹시 몰라서라도 빨리 끝내 놔야 한다는 생각이 컸다. 그렇게 2월 말 퇴사가 확정되면서 다른 회사를 알아보기 시작했다. 그러던 중, 우연히 모집기간이 하루 남은 네이버 채용연계형 인턴 모집공고를 보게 되었고, 하루 남은 걸 발견한 것도 인연이다 싶어 서류를 제출하게 되었다. 해당 공고는 서류 - 코딩 테스트 - 1차 면접 - 5주 인턴 - 2차 면접 - 최종 합격의 절차로 진행된다고 안내되어있었다. 서류를 제출한 지…

2020.11.02 - 2021.02.28 동안의 경험에 관한 글입니다.   AUSG에서의 인연을 시작으로 AUSG는 AWS University Study Group으로, AWSKRGU(AWS 한국 사용자 모임) 소속의 소모임이다. 나는 AUSG(아우쓱)에서 4기부터 활동 중인데, 그곳에서 메가존클라우드에 근무하고 계시는 프론트엔드 개발자 한 분과 알게 되었고 인턴 채용까지 이어지게 되었다.   CloudOne에서의 프론트엔드 개발 CloudOne은 메가존클라우드의 CTC(Commecial Technology Center) 부소에 소속된 팀으로, SpaceONE이라는 Multi Cloud에 대한 오픈소스 CMP(Coud Management Platform)를 개발하고 있다.   1. SpaceONE Storybook 구조 재정립 및 컴포넌트 리팩토링 SpaceONE의 콘솔 앱(대시보드)과 디자인 시스템은 모두 오픈소스로 구축되어있다. spaceone-dev/conso…

2020.06.29 - 2020.10.16 동안의 경험에 관한 글입니다.   경희대학교 현장실습 모든 대학교가 그렇듯, 경희대학교에도 산학 현장실습 프로그램이 있다. 학기 중에 진행하는 장기 현장실습, 방학 중에 진행하는 단기 현장실습으로 나뉜다. 장기 현장실습의 경우, 한 학기에 학점으로 채울 수 있는 학점보다 낮았기 때문에 나는 단기 현장실습을 선택했다. 현장실습의 경우 3-1을 수료한 재학생만 신청 가능하기 때문에, 3학년 여름방학에 지원하게 되었다.   첫 번째 서류, 첫 번째 면접, 첫 번째 인턴 서류 작성도 처음이었다. 작성할만한 내용이 없었기 때문에 프론트엔드 직군으로 지원했음에도, 해봤던 건 뭐든 죄다 적어 넣었다. 어설픈 서류였음에도 학교 현장실습이었기 때문에 무난하게 통과할 수 있었다. 이어서 면접을 진행했고, 칭찬이 가득한(?) 면접이었다. 학부생이 이런 것까지 해봤어요? 와 같은 맥락이었다. 지금 생각해보면 제대로 할 줄 아는 게 없던 꼬꼬마 시절이었지만,…