Dev

    DB에서 상대적 위치 값을 활용해 드래그 앤 드롭으로 인한 순서 변경 처리하기

    최근 나는 드래그 기반의 계획표 서비스인 'DRAG ME'를 개발하고 있다. 우리 서비스의 특징은, 이름에서도 알 수 있듯이 '드래그' 기능이 굉장히 많이 사용된다는 점이다. 특정 계획에 대한 시간을 설정할 때, 특정 계획을 다른 날짜로 이동할 때 모두 드래그 기능이 사용된다. 다양한 드래그 기능들 중, 로직을 구성하고 DB를 설계하는 데 가장 많은 고민을 들였던 부분 중 하나가 바로 '드래그 앤 드롭'으로 인한 순서 변경이었다. 오늘 글에서는 이 기능을 구현하는 과정에서 직면했던 문제를 소개하고, 이를 어떻게 구현했는지에 대해 소개하려고 한다. 아래 화면에서, 사용자는 표지판 모양의 계획블록을 통해 계획을 세우고 시간을 관리할 수 있다. 그리고 이 계획블록들은, '해당 영역' 내에서 순서 변경이 가능하..

    [THE SOPT 도커 스터디] Week5 - 3. 도커 스웜

    1) 도커 스웜을 사용하는 이유 도커 엔진을 구동하다가, CPU나 메모리, 디스크 용량과 같은 자원이 부족해지는 경우 현실적으로 새로운 서버를 새로 사는 것은 매우 어려움 가장 많이 사용하는 방법은 여러 대의 서버를 클러스터로 만들어 자원을 병렬로 확장하는 것 도커에서 제공하는 이를 위한 공식 솔루션이 바로 ‘도커 스웜’과 ‘스웜 모드’ 2) 스웜 클래식과 도커 스웜 모드 도커 스웜의 두 가지 종류 컨테이너로서의 스웜 (도커 버전 1.6 이후부터 사용 가능) : 스웜 클래식 여러 대의 도커 서버 하나의 지점에서 사용하도록 단일 접근점 제공 일반적인 도커 명령어, 도커 API로 클러스터의 서버 제어, 관리 가능 분산 코디네이터(각종 정보 저장, 동기화), 매니저(클러스터 내 서버 관리, 제어), 에이전트(..

    [THE SOPT 도커 스터디] Week4 - 2.5. 도커 데몬

    1. 도커의 구조 도커의 구조는 크게 두 가지로 나뉨 : 클라이언트로서의 도커, 서버로서의 도커 도커 서버 : 실제로 컨테이너 생성, 실행, 이미지 관리 도커 엔진의 프로세스는 /usr/bin/dockerd 파일로 실행 도커 엔진은 외부에서 API 입력을 받아 도커 엔진의 기능을 수행 도커 프로세스가 실행되어 서버로서 입력을 받을 준비가 된 상태가 '도커 데몬’ 도커 클라이언트 : API를 사용할 수 있도록 CLI를 제공 유닉스 소켓을 통해 도커 데몬의 API를 호출, 입력된 명령어 전달 2. 도커 데몬 실행 service docker start service docker stop dockerd # 도커 데몬에 대한 정보 출력, 입력을 받을 수 있는 상태 3. 도커 데몬 설정 설정 파일의 DOCKER_O..

    [THE SOPT 도커 스터디] Week3 - 2.4. Dockerfile

    2.4 DockerFile Dockerfile을 사용하는 이유 Dockerfile을 사용하지 않고 이미지를 만드는 경우 컨테이너 생성 패키지, 설치 및 환경 세팅 소스코드 복제 컨테이너 커밋 Dockerfile을 사용 할 경우 Dockerfile에 이미지 생성을 위해 필요한 작업들 기록 build 위 처럼, Dockerfile을 사용하면 훨씬 덜 번거로움. 애플리케이션 빌드 및 배포 자동화 가능 Dockerfile 작성 ADD와 COPY ADD는 외부 Url, tar 파일에서도 파일 추가 가능 하지만 ADD는 권장되지 않음. 정확히 어떤 파일이 추가될 지 개발자가 미리 알 수 없기 때문 CMD 명령어 컨테이너가 시작될 때마다(생성된 이미지로 만들어 진 컨테이너 안에서) 실행할 명령어 설정 컨테이너를 실행..

    [THE SOPT 도커 스터디] Week2 - 2.3. 도커 이미지

    도커 허브 (Docker hub) 도커가 공식적으로 제공하고 있는 이미지 저장소. Github에 코드를 올리는 것 처럼 도커 허브에 이미지 업로드 가능 도커 허브 사이트에 직접 방문하거나, 도커 엔진에서 ‘docker search’ 명령어를 사용해 원하는 이미지 탐색 가능 도커 이미지 생성 사용자가 직접 특정 애플리케이션을 위한 개발 환경 구축 후 이미지 생성하는 경우 사용 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] docker commit \\ -a "hyositive" -m "docker image by commit!" \\ test_container \\ test_container:first 위 명령어를 통해 test_container 컨테이너를 ..

    [WE SOPT 회고] 열정 안에서 열정을 불태우다 - (2) 극락 세미나와 초보 개발자로의 성장

    이 글은 1부에서 이어집니다! [WE SOPT 회고] 열정 안에서 열정을 불태우다 - (1) 첫 만남에서 합격까지 1. 들어가며 얼마 전, SOPT 29기 'WE SOPT'의 공식적인 일정이 모두 종료되었다. 정말 많은 것을 느끼고 배우며 성장했던 소중한 시간이었고, 이 기억의 조각들이 더 희미해지기 전에 곱씹고 기록하고 blog.hyositive.com 6. 서버 파트 극락 세미나 SOPT의 회원들은 매주 토요일 진행되는 파트 별 세미나를 통해 지식을 쌓고, 추후에 참여 할 협업과 프로젝트를 위한 준비를 시작한다. 추후 이야기 할 앱잼이 SOPT의 꽃이라면, 세미나는 꽃을 피우기 위한 씨앗과 같은 역할이다. 세미나 커리큘럼은 파트장이 직접 정하는데. 이번 기수의 경우 Node.js, Express, F..

    [WE SOPT 회고] 열정 안에서 열정을 불태우다 - (1) 첫 만남에서 합격까지

    1. 들어가며 얼마 전, SOPT 29기 'WE SOPT'의 공식적인 일정이 모두 종료되었다. 정말 많은 것을 느끼고 배우며 성장했던 소중한 시간이었고, 이 기억의 조각들이 더 희미해지기 전에 곱씹고 기록하고자 회고를 작성하게 되었다. 2. SOPT와의 첫 만남 SOPT에 대해 처음 알게 된 것은 2020년이었다. 당시 나는 군인이었고, 벌써부터 전역 후를 꿈꾸냐는 선임들의 놀림에도 불구하고 미래 계획을 세우고 있었다. 제대로 개발을 시작해 프로젝트를 경험하고 싶었고, IT 계열 연합동아리나 대외활동에 대해 조사했다. 그러던 중 SOPT를 처음 만났다. 꽤 체계적이고 큰 동아리라는 생각이 들었다. 하지만 현실적으로 군인 신분으로 당장 지원할 수도 없었고, 나의 개발 능력도 턱없이 부족했기에 당장 큰 동기..

    [WE SOPT APPJAM 개발 아티클] Firebase Auth - Kakao Login (1)

    나는 현재 대학생 IT벤처창업 동아리 SOPT에서 3주 장기 해커톤인 Appjam(앱잼)에 참여하고 있다. 내가 속한 팀 HAVIT(해빗)에서는, 사용자가 기억하고 싶은 콘텐츠를 카테고리별로 아카이빙 할 수 있는 앱을 개발하고 있다. 사용자의 쉬운 사용과 보안 향상을 위해 최초 기획 단계에서는 소셜 로그인 구현을 계획했으나, 시간적 제한으로 인해 후순위로 미뤄 두었다. 당장 구현하지는 않지만, 내가 담당했던 기능이기도 했고 릴리즈까지 염두에 두고 있기에 소셜 로그인에 대해 공부한 내용에 대해 정리 해 보고자 한다. 사실 SOPT에 들어오기 전에도, Passport.js라는 라이브러리를 활용해서 페이스북과 구글 소셜 로그인을 구현해 본 적이 있었다. 하지만 이번 프로젝트에서는 서버를 FIrebase 환경에..

    WEBn (Fin.)

    가장 최근에 학습 한 WEB7 강의를 끝으로, 내가 계획했던 이고잉님의 WEBn 강의들을 모두 학습했다. 2020년 7월, WEB1을 처음 시작할 때에는, '군대라는 특수한 공간에서 꾸준히 공부를 이어나갈 수 있을까?'라는 의문이 들기도 했다. 실제로 중간에 다른 공부에 집중했던 탓에 긴 공백도 있었고, 제한적인 환경으로 인한 어려움도 많았고, 시간도 부족했다. 군대가 아닌 사회에서 WEBn을 학습했더라면, 훨씬 짧은 시간 내에 집중해서 학습을 마무리했을지도 모른다. 하지만, 열악한 환경에서 방법을 찾아가며 꾸준히 학습했던 지난 시간은 나에게 그 자체로 큰 의미가 있다. 앞으로 개발자로, 또 개발자이기 전에 한 사람으로 살아가면서, 나의 삶에는 분명 많은 어려움이 닥칠 것이다. 좋지 않은 환경에서 나태해..

    WEB7 - Login with Google / Facebook on Passport

    WEB7 - Login with Google WEB5와 WEB6에서는 Passport의 local strategy(전략)을 사용하며 Passport의 작동 원리와 인증 시스템 전반에 대해 공부했다. 이를 바탕으로 이번 WEB7에서는 각각 구글과 페이스북 계정을 연동해 웹 서비스에서 인증 기능을 구현하는 것을 배웠다. 우선 구글 전략(Google Strategy)을 먼저 진행했다. npm으로 passport-google-oauth 패키지를 설치했고, Passport.js 공식 홈페이지의 가이드 대로 구글 인증을 위한 코드를 추가했다. 다음으로는 Google Cloud Platform에 방문 해 'WEB7-Passport-Google'이라는 이름의 프로젝트를 생성했다. 이후 사용자 인증 정보(Credenti..