본문 바로가기

Side Projects19

1. 로고 제작기 0. 로고를 위한 준비 a) 로고란 무엇인가? - 로고는 브랜드이자 정체성을 그림으로써 한눈에 보여주는 역할을 한다. - 그렇다면 사이의 서비스를 한마디로 표현하면 되지 않을까? - 그 한마디를 그림으로 표현하면 로고가 될 것이라 확신했다. b) 정의하기 - 사이의 핵심 서비스는 사람 간의 관계를 측정해주는 것이다. - 그렇다면 "관계를 측정하는 것"을 그림으로 표현하면 로고 완성이다. - 근데... 어떻게 그려야 할까? c) 키워드 정하기 - 서비스를 정의하면서 관계와 측정이라는 키워드가 등장하였다. - 각 키워드를 그림으로 표현하기 위해서 비유적인 표현이나 빗대어 사용할 수 있는 물건을 떠올려보았다. → 관계: 거리(distance), 사회적 활동, 공간 → 측정: 수치화, 그래프, 줄 자(ruler.. 2022. 6. 9.
0. 프로젝트 소개 0. 개요 - 본 카테고리에는 포트폴리오로 사용될 프로젝트의 개발 일지가 작성될 예정입니다. - 본 포스팅은 전반적인 프로젝트 소개입니다. 0. 개발 동기 a) 해결하려는 문제 및 비즈니스 - 저는 사람을 만나는 것에 에너지를 소비하는 성향으로, 사람 간의 일을 잘 기억하지 못합니다. - 그러나 사소한 기억을 공유하는 것이야말로 관계를 발전시키는 방법입니다. - 이와 같은 이유로 만남을 기록하고 리뷰하여 관계를 더욱 편리하게 관리할 수 있는 서비스를 만들게 되었습니다. 1. 사이(SAI) 소개 a) 사이의 뜻 - 사이는 너와 나의 사이에서 착안된 이름으로, 사람 간의 관계를 의미합니다. - SAI는 Social Activity Interpreter의 약자로, 사회 활동을 기반하여 관계를 해석함을 의미합니.. 2022. 6. 9.
Vue3 - 영화 검색 사이트 코드분석 - 본 포스팅은 아래의 프로젝트를 기반으로 다뤄진 내용입니다. https://devraphy.tistory.com/235 Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hell.. devraphy.tistory.com 1. 개요 - 본 프로젝트는 Vue3 강의에서 진행한 내용을 그대로 클론코딩한 프로젝트이다. - 강의내용을 따라서 프로젝트를 만들다 보니, 코드와 데이터 흐름에 대한 이해가 부족함을 느꼈다. - 이와 같은 이유로 해당 프로젝트의 핵심 기능을 분석해보려고 한다. 2... 2021. 6. 30.
Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - OMDbAPI를 사용하여 영화 검색 사이트 기능 구현 - Vue3를 사용하여 프론트 작업 진행 3. 사용기술 Vue3 BootStrap Webpack ESLint 4. Github https://github.com/devraphy/vue3-movie-app GitHub - devraphy/vue3-movie-app: movie app made of Vue 3 movie .. 2021. 6. 22.
은섬 조춘자 - 웹사이트 구축 프로젝트 1. 프로젝트를 완성하며 실제 클라이언트가 있는 첫번째 프로젝트로, 클라이언트의 요구사항 파악부터 기획, 개발, 테스팅까지 전체적인 과정을 경험하며 많은 것을 배울 수 있었다. 부트스트랩이나 프레임워크를 사용하지 않고 하나씩 공부해가며 직접 코딩한 첫 결과물로, 애착이 많이 가는 프로젝트다. 반응형 페이지를 개발자 도구로 보았을 때와 실제 기기를 통해 보았을 때의 차이가 많아서 그걸 조정하는데 꽤 오랜시간이 걸렸다. 반응형 페이지에 대한 결과물을 다양한 기기를 통해 직접 테스팅 해보지 못하는 환경적 제약에 아쉬움이 남는다. 이제서야 프론트 개발에 있어서 기초를 쌓은 것 같다는 생각이 들고 어느정도 화면단을 개발하는 것에 있어서 자신감이 생기는 것 같다. 이제는 백엔드를 직접 만들어보려고 한다. 2. 프로.. 2021. 3. 23.
Vanilla JS - Pastel Browser 1. 개요(Introduction) Vanilla JS를 이용하여 Momentum이라는 크롬 extension의 기능을 재구현했습니다. A clone of the chrome app Momentum's features using Vanilla JS. 2. 기능(Features) ClockTo-Do List (local-storage) Username (local-storage) Weather and location (openWeather API) Random Background (refresh and change) 3. GitHub 링크 https://github.com/devraphy/pastelBrowser GitHub - devraphy/pastelBrowser: A repository for th.. 2020. 10. 17.
HTML/CSS - 음악 플레이어(Music Player) 1. 개요(introduction) HTML/CSS 실력향상을 위해 음악 플레이어의 디자인을 만들었습니다. To have a better understanding of the usage of HTML and CSS, I copied a music player FE. 2. 화면구성(UI) 재생 목록과 재생화면을 구현했습니다. I made two screens, playList and playing screen. 3. 프로젝트 링크(Project Link) gitHub: https://github.com/devraphy/musicPlayer GitHub - devraphy/musicPlayer: A repository for musicPlayer portfolio A repository for musicPl.. 2020. 10. 13.
코코아톡(HTML/CSS) 1. 개요 - 카카오톡 메신저의 UI를 HTML/CSS만 이용하여 카피하면서 HTML/CSS의 기본 사용법과 웹의 기본 구조를 익히고 공부하기 위해 진행한 프로젝트입니다. 2. 사용한 기술 - HTML/CSS 3. Github https://github.com/devraphy/kakao-clone GitHub - devraphy/kakao-clone: Repository for the KakaoTalk interface cloning portfolio Repository for the KakaoTalk interface cloning portfolio - GitHub - devraphy/kakao-clone: Repository for the KakaoTalk interface cloning portfo.. 2020. 9. 20.
파이썬 스크래퍼(python scrapper) * 플레이 시 광고가 나옵니다.(카카오 스테이션 사용으로 인해 광고발생) 1) 기능 설명 검색어를 기반으로 원격근무 채용정보를 StackOverflow, WeWork, RemoteOk 세가지 사이트에서 크롤링 Based on a search word, the program scraps remote jobs' info from the three different platforms which are StackOverflow, WeWork, RemoteOk. fake DB를 사용하여 검색한 자료를 저장하고 재검색되면 불러올 수 있도록 하여 크롤링 검색 속도를 향상 While the program is running, if a user searches the same word that has searched b.. 2020. 9. 7.