배워서 남 줄 건데요?

나의 첫 직장에서는 백엔드 개발자가 서비스 론칭을 위한 서버 세팅을 도맡아 하고 있었다. 그러다보니 프론트 개발자나 아이폰 개발자와 같은 다른 개발자들은 실서버 배포를 진행할 일이 거의 없었고, 있다고 하더라도 백엔드 개발자에게 요청을 넣고 기다리는 형태로 배포를 진행했었다. 그러다보니 프론트 개발자가 구문 오류를 확인하지 못하고 배포 요청을 진행할 경우 백엔드 개발자가 배포를 진행하다가 빌드 에러가 터져서 검토 요청을 다시 넣고, 프론트 개발자가 검토 요청을 확인하고 재검토를 진행하며 재배포 요청을 넣을 때 까지 상당한 시간이 소모 되는 경우가 많았다. 배포만이 문제가 아니다. 특이하게도 개발자 한 명이 프로젝트 하나를 도맡아 처리하는 성향이 강했던 기업이라 브랜치가 사실 의미가 별로 없었다. 어차피 ..

프로그램 개발을 할 때 단위 테스트라는걸 사용한다고 한다. 말 그대로 작성한 프로그램에 대한 테스트를 진행하는건데, 사실 얘를 들은게 이번이 처음은 아니다. 이런게 있다고 수도 없이 많이 들었고, 코테에서 단위 테스트를 진행하는 기업들도 있어서 낯선 이름은 아니다. 그런데 솔직히 얘를 왜 해야 하는지 100% 이해하는건 아니다. 어차피 프로그램 작성은 해야 하는 일이고, 프로그램이 동작하다가 원하는 흐름대로 되지 않으면 console.log나 break point 걸어두고 테스트 해보면 다 해결 되는 일 아닌가? 하지만 이름 있는 개발자들이 중요하다고 하는데는 이유가 있겠지. 한 번 해보기로 한다. 이번 프로젝트에서 사용해볼 단위 테스트 라이브러리는 Jest인데, 모든 단위 테스트 라이브러리가 그런건진 ..

대충 요렇게 생긴 그래프에 대해서 얘기해보겠다. 싸인, 코싸인, 탄젠트에 대해서는 아무리 수포자라고 하더라도 한번 쯤은 들어본 적이 있을텐데, 위 그래프가 그 중 하나인 싸인 그래프이다. 뜬금없이 싸인그래프를 왜 갖고왔냐면, Javascript Canvas를 가지고 놀다가 물결을 그리고 싶어져서 그리려고 하다가 위와 같은 방법이 있다는 사실을 알게 되었다. 사실 나도 수포자라서 수학적으로 위 그래프를 해석하지는 못하지만, 위 그래프의 모양을 나타내는 방법을 Javascript로 표현하자면 다음과 같다. let stack = 0; const speed = 0.1; function progress() { stack += speed; return Math.sin(stack); } window.setInterv..

올 해 가장 큰 걱정거리였던 산업기사를 취득했다. 2017년 개편 이후로 난이도가 올라갔느니 여전히 쉽다느니 말이 많았지만 기사나 기능사처럼 20년도를 기준으로 완전히 개편된게 아니기 때문에 문제은행의 도움을 받으면서 교재 해설 이해만 병행한다면 무리 없이 취득이 가능한 수준이라고 생각한다. 사실 시험 결과는 8월 28일에 나왔었지만 이제 와서 블로그에 포스팅을 하게 되는데, 딱히 할 말은 없고 공부 기간이나 교재 등 많은 사람들이 궁금해 할 법한 것들을 적어보겠다. 공부 기간 공부 기간은 필기 3주, 실기 2주, 하루 4시간 정도를 두고 공부했다. 실기보다 필기가 확실히 쉬운건 맞지만, 이 때 당시의 나는 올해 안에 산업기사를 따지 못하면 하늘이 무너질 정도의 절박함을 가지고 있었기 때문에 주변에서 아..

스키마 외부 스키마 사용자나 프로그래머가 필요로 함. 다른 말로 서브스키마 여러 사용자와 공유 가능 데이터베이스에 여러 개 존재 가능 내부 스키마 데이터베이스의 구조 데이터의 저장 방법을 기술 물리 장치와 밀접함 개념 스키마 한 개의 데이터베이스에 한 개만 존재 보통 스키마라고 하면 얘를 말함. 데이터베이스의 정의 데이터 모델 종류 개념적 데이터모델 E-R모델 속성으로 기술 된 개체 타입과 그 관계를 이용해서 현실 세계를 표현한 모델 논리적 데이터모델 필드로 기술 된 데이터 타입과 이를 이용한 현실 세계를 표현한 모델 데이터 관계에 따라서 관계, 계층, 네트워크 모델이라고 나뉘어 불림. E-R 다이어그램 모양 역할 사각형 개체 타입 다이아몬드 관계 타입 타원 속성 타입 밑줄 타원 기본키 속성 복수 타원..

개요 우리는 웹 사이트를 개발하건, 게임을 개발하건, 아무튼 뭘 개발하건 사용자로부터 어떤 특정한 값을 얻어야 할 때가 있다. 음식점에 배달을 시킬 때 집 주소를 입력하거나, 게임에서 캐릭터를 만들 때 닉네임을 정한다던지 말이다. 그런데 사용자가 정말 개발자의 의도대로 입력값을 넣어준다면 정말 좋을텐데, 사용자는 그렇게 착하지 않다. 주소지를 입력하는 창에 한 편의 소설을 적을 수도 있고, 닉네임에 불쾌감을 주는 단어나 무슨 뜻인지도 모르겠는 특수문자들을 남발하는 경우가 있을 것이다. (개발지식이 있는 유저들은 게임 닉네임으로 코드를 짜고 있겠지) 서비스 제공자는 이러한 사용자들의 똘끼(?)를 언제나 염두에 두고 있어야 하며, 사용자가 어떤 이상한 짓을 해도 프로그램이 개발자의 의도 하에서 제어가 될 수..

개요 아마 웹 개발자로 일을 했다면, 혹은 공부를 했다면 지나가는 길에 한 번 쯤은 Restful API가 무엇인지 들어봤을 것이다. 뜻이 뭔지 알고 있는 사람도 있을 것이고, 현재 본인이 만들고 있는 프로그램에 사용을 했음에도 불구하고 뜻을 적어보라면 못 적는 사람도 있을 것이다. 그래서 Restful API가 무엇인지 설명해보고자 한다. 자원과 행위의 표현 Restful API란 다시 말해, Resource, Verb, Representations을 말한다. 이렇게 말하면 잘 이해가 안 될 수도 있으니 예제를 보자. 예제 우리가 보통 프론트엔드를 개발하여 서버와 통신을 하고자 한다면, 해당 서버의 특정 자원을 요구하게 된다. 하지만 해당 자원을 어떤 형태로 사용할 것인지를 명시하기 위해 우리는 보통 ..

코드 #header { background: #EEE; padding: 20px 0; } .canvas_place .canvas_place__option { padding: 10px 0; text-align: right; font-size: .9em; } .canvas_place canvas { margin: auto; display: block; border: 1px solid #CCC; } .canvas_place .canvas_place__btnhome { padding-top: 20px; } .canvas_place .canvas_place__btnhome .title { padding-bottom: 10px; font-weight: bold; font-size: 1.2em; } .comment_..

포토샵 같은 그림판? 말 그대로다. 별도의 레이어로 관리 될 수 있는 캔버스 그림판을 만들어보자. 일단 포토샵은 도형을 실제로 그리거나 할 때 해당 도형이 실제로 어떻게 나올지 미리 보여주고, 마우스를 놓을 때 실제 도형이 나타나게 된다. 소스코드 실선 사각형 지우개 파란색 빨간색 분홍색 주황색 5px 10px 15px 20px 원리 원리는 간단하다. 캔버스를 누른 뒤, 마우스를 움직이게 되면 마우스가 이동한 경로를 currentRect의 coordinates 배열에 저장한다. coordinates에 저장 된 좌표 값을 바탕으로 현재 그리는 도형이 무엇인지에 따라 각기 다른 방식으로 캔버스에 그림을 그린다. 그렇게 그려진 도형은 currentRect 변수를 통해 rects 배열에 저장 되며, 추후에 캔버..

왜 갑자기 이런걸 신경쓰나? 갑작스레 신경쓰이게 된 건 아니고, 예전부터 상용 프로그램과 내가 만든 프로그램의 차이가 무엇이길래 이렇게 크게 사용감이 다른가 의아했었다. 사실 퍼포먼스에 대해서는 많은 프론트엔드 개발자들이 마음에 담아두는 부분일 것이다. 웹앱으로 유명한 노션을 보면 그렇게 좋을 수가 없는데 왜 내가 만든건 사용감이 이 모양일까. 버튼을 누르면 0.5초 정도 느리게 움직이는 것 같고, 로딩은 또 왜이렇게 긴지... 이 부분은 내가 다니는 회사에서도 고질적인 문제였다. 실력자들은 많았지만 작은 규모의 회사다보니 하나부터 열 까지 선임 개발자가 챙겨줄 수 없었다는 점. 그래서 내가 만든 앱이 왜 이렇게 구린지 나름대로 원인을 분석해 보고, 사내 행사 때 프레젠테이션을 했던 내용을 토대로 여기에..