키자드에 등록된 jscode-pro의 네이버 블로그 포스트 목록

jscode-pro의 등록된 링크

jscode-pro로 등록된 네이버 블로그 포스트 수는 90건입니다.

[DDD] Factory 개념 완벽 정리 ⑥ (최종) [내부링크]

드디어 마지막 편이다. DDD의 여러 개념 중 Factory 하나만 익히는 데도 이렇게 오래 걸린다. 하지만 이 개념 하나를 익힘으로써 객체지향과 클린 코드는 어떻고 책임을 나누는 것이 어떤지 등 여러가지를 배울 수 있다. 조금만 더 참고 유종의 미를 거둬보자. 불변식 로직은 어디에 위치하는 게 맞을까 ? FACTORY의 책임은 FACTORY가 만들어내는 객체 및 AGGREGATE의 불변식이 충족되도록 보장하는 것이다. 여기서 불변식 로직의 위치는 크게 2가지로 나뉜다. 불변식 로직을 FACTORY의 생성물(FACTORY가 생성하는 객체)에 둔다. 2. 불변식 로직을 FACTORY 자체에 둔다. 이 방식은 AGGREGATE 규칙(여러 객체에 걸쳐 존재하는)에는 특히 잘 맞다. ENTITY FACTORY vs VALUE OBJECT FACTORY ENTITY FACTORY와 VALUE OBJECT FACTORY는 두 가지 점에서 다르다. 1. ENTITY FACTORY는 불변적이지 않

[클린코드] 의미 있는 이름 짓기 ② [내부링크]

지난 글에 이어서 이름을 잘 짓는 방법 2탄 시작하겠습니다. 검색하기 쉬운 이름을 사용하라 IDE가 발달하면서 프로젝트 내의 코드를 검색하기가 매우 간편해졌습니다. 그렇기에 우리는 더더욱 검색하기 쉬운 이름을 사용해야 합니다. 이러한 관점에서 긴 이름이 짧은 이름보다 좋고 검색하기 쉬운 이름이 상수보다 좋습니다. 예를 들어 일주일과 관련된 코드를 작성한다고 했을 때 바로 7을 사용했고 그 값을 검색한다고 했을 때 7을 검색해서 코드를 분석후 찾아야 합니다. 그러나 7을 사용할 때 DAYS_PER_WEEK라고 이름을 지은 후에 사용했다면 바로 검색이 가능할 것입니다. 자신의 기억력을 자랑하지 마라 코드를 읽는 사람이 변수 이름을 변환해야 알 수 있다면 그 변수 이름은 적절하지 못한 것입니다. 쉽게 이야기해서 미국인이든 한국인이든, 주니어든 시니어든 누구든지 변수 이름을 봤을 때 쉽게 인지할 수 있어야 한다는 뜻입니다. 문자 하나만 사용하는 변수 이름은 각별히 주의해야합니다. 반복문에서

DTO 개념 완벽 정리 ① [내부링크]

이번에는 DTO에 대해 완벽 총 정리를 해보고자 한다. 차근차근 뿌셔나가보자. 한 번 배울 때 확실하고 제대로 배워보자. DTO를 왜 쓸까? 장점이 뭘까 ? DTO를 쓰는 이유는, DTO를 썼을 때 크게는 3가지의 장점이 있어서 사용한다. 그 장점이 무엇인지 하나씩 알아보자. 1. 호출 횟수를 줄여서 효율적인 통신을 하게 해준다. Martin Fowler의 저서인 P of EAA에서는 다음과 같이 얘기한다. 원격 인터페이스를 사용할 때는 각 호출의 비용이 상당히 부담스럽다. 따라서 호출 횟수를 줄여야 하며, 이를 위해서는 각 호출에서 더 많은 데이터를 전송해야 한다. 한 가지 방법은 다수의 매개변수를 사용하는 것이다. 그러나 이 방식은 프로그램을 작성하기에는 상당히 불편하며, 자바와 같이 단일 값만 반환할 수 있는 언어에서는 아예 불가능하다. 이 문제를 해결하는 방법은 호출에 필요한 모든 데이터를 저장하는 데이터 전송 객체(Data Transfer Object, DTO)이다. - P

DTO 개념 완벽 정리 ② [내부링크]

1편에 이어서 'DTO를 쓸 때 고려할 점'에 대해서 마저 이야기하겠다. DTO를 쓸 때 고려할 점 1. DTO의 속성은 생성자로 한 번에 추가해도 되고, 점진적으로 추가해도 된다. Martin Fowler의 저서인 P of EAA에서는 다음과 같이 얘기한다. 읽기 전용 데이터 전송 객체(불변 객체)를 선호하는 사람이 있다. 이 체계에서는 클라이언트로부터 데이터 전송 객체 하나를 받고 동일한 클래스라고 하더라도 다른 객체를 생성하고 전송한다. 반대로 변경 가능한 요청 데이터 전송 객체를 선호하는 사람도 있다. 필자는 두 방식에 대한 특별한 의견은 없지만 대체적으로는 응답에 대한 객체를 새로 생성하더라도 데이터를 점진적으로 넣을 수 있는 변경 가능한 데이터 전송 객체를 선호하는 편이다. P of EAA - Martin Fowler 읽기 전용 데이터 전송 객체(DTO)는 setter 함수 없이(= 데이터를 변경할 수 있는 메서드 없이) 오로지 생성자를 통해서만 객체를 생성하는 형태를 의

코딩 교육, JSCODE 교육생 배달의민족(우아한형제들) 합격 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 최근에 다시 JSCODE 멘토링, 스터디, 클래스를 준비하던 와중에, 이전 JSCODE 프로그래밍 스터디에 참가했었던 멘티 한 분에게 좋은 소식을 듣게 되었습니다. 연이어 합격 소식을 계속해서 들으면서 앞으로도 많은 사람들에게 긍정적인 영향을 끼치는 일을 해야겠다고 다짐을 하게 됩니다. 뿐만 아니라, 정말 성실히 노력하는 데도 원하는 목표와 결과를 이루지 못한 분들을 도와주고 싶다는 생각도 점점 강해집니다. 저 또한 머리가 좋은 편은 아니었고, 남들 5시간 공부할 때 10시간을 공부해야만 비슷한 성적이 나오기도 했습니다. 코딩도 마찬가지였습니다. 처음에는 통계학과 출신으로 대학교를 입학하다보니, 개발을 어떻게 시작해야 할 지도 막막했습니다. 그럴 때마다 주변 사람들에게 도움을 요청하기도 하고, 커뮤니티에 가서 무작정 질문을 해보기도 하고, 어떻게든 개발을 잘하고 싶었습니다. 많은 사람들의 조언과 도움을 받으며 차근차근 개발자의 길을 걸어가

개발자 이력서, 120개의 이력서에서 발견된 특징 5가지 [내부링크]

지금까지 약 500명의 취준생의 자소서, 이력서를 첨삭했습니다. 합격한 개발자 자소서와 이력서들을 쭉 펼쳐놓고 보니까 놀랍게도 약속이라도 한 듯이 5가지의 공통된 특징이 있었습니다. 1. 답정너 이론 2. 의심 본능 3. 오징어 게임 이론 4. 추상어의 저주 5. 다다익선의 역설 이렇게 5가지만 알면 됩니다. 이 원리만 알고 적용시키면 서류에서 떨어질 확률이 10%대까지 떨어집니다. 우리나라 교육에서는 글쓰기를 안 가르칩니다. 그래서 자소서나 이력서를 받아보면 기본조차 안 돼 있는 경우가 너무 많습니다. 앞으로 자소서나 이력서 쓸 때 5가지만 지켜서 쓰시기 바랍니다. 1. 답정너 이론 회사는 "우리 이런 이런 사람 뽑고 싶어요!"라고 답을 이미 정해놨습니다. 포트폴리오와 이력서는 나 자신이 어떤 사람인지 어필하는 게 아닙니다. 정확히 얘기하면 내 소개를 하는 게 아니라는 겁니다. 어떤 걸 어필해야 하고, 어떤 걸 소개해야 하는 지가 이미 정해져 있습니다. 한 마디로 내가 보여주고 싶

우테코 자소서, 수료생이 알려주는 합격하는 6단계 노하우 [내부링크]

우아한테크코스 3기를 합격하고 제리라는 닉네임으로 활동했습니다. 뿐만 아니라 경쟁률이 10:1이 훌쩍 넘는 멋쟁이 사자처럼, SOPT, NEXTERS에 한 번도 떨어지지 않고 전부 합격했습니다. 제가 가르치는 학생들한테 자소서 6단계 작성법을 알려줬습니다. 이 과정을 그대로 따라한 학생은 대부분 합격했습니다. 1. 답정너 이론 답정너 이론에 따라 우테코가 어떤 곳인지, 어떤 지원자를 뽑으려고 하는 지 분석해야 합니다. 답정너 이론이 뭔지 모르시는 분은 이 영상을 보고 오시기 바랍니다. 뭘 해야 하는 지 딱 정해드리겠습니다. 첫 번째로 우아한테크코스 홈페이지에 들어가서 나와있는 내용은 전부 샅샅이 읽으세요. 그러고 어떤 지원자를 뽑으려고 하는지 힌트를 얻으세요. 두 번째로 우아한테크코스 채용 설명회에 참석하세요. 참석할 수 없다면 유튜브 영상으로라도 채용 설명회를 다시 보세요. 어떤 사람을 뽑으려고 하는지, 어떤 사람은 안 뽑으려고 하는 지 힌트가 될만한 건 다 받아적으세요. 세 번째

비전공자 국비지원, 수료해도 취업 안 되는 학원 거르는 방법 3가지 [내부링크]

안녕하세요? JSCODE 대표 멘토 박재성입니다. 제가 가르치는 학생들 중에서 국비지원을 수료하고 취업이 안 된다고 찾아오는 학생이 많습니다. 학생과 상담을 하면서 국비지원에서 배운 내용과 커리큘럼을 보여 달라고 합니다. 배운 내용과 커리큘럼을 들어보면 속상한 경우가 많습니다. "국비지원 학원에서는 어떻게 이런 커리큘럼으로 취업시킬 생각을 한거지?" "요즘도 이런 기술을 가르치는 학원이 있는건가?" 개발에 대한 지식이 부족한 학생 입장에서는 어떤 수업 과정이 좋은 지 판단하기 어렵습니다. 제대로 된 개발자로 성장할 수 있는 국비 학원인지 판단하는 방법을 알려드리겠습니다. 여기서 제가 말씀드릴 판단 기준은 아래의 조건에 해당하시는 분에 한해서만 해당됩니다. 단순히 '아무 회사든 취업만 하면 돼'라고 생각하시는 분은 이 글을 더 이상 읽지 않으셔도 됩니다. SI 업체보다 IT 서비스 기업에 취업하고 싶은 분 개발 커리어를 취업 이후에도 잘 쌓아나가고 싶은 분 옛날 기술을 사용하는 회사에

클린 코드(Clean Code), 즉 깨끗한 코드란 무엇인가요? [내부링크]

클린 코드, 그대로 번역하면 깨끗한 코드라는 뜻입니다. 그러면 깨끗한 코드란 무엇일까요? 그 정의는 수없이 다양할 것입니다. 이번 포스트에서는 개발 서적 베스트 셀러인 클린 코드에서 소개하는 깨끗한 코드의 정의에 대해서 소개해보도록 하겠습니다. 나는 우아하고 효율적인 코드를 좋아한다. ... 깨끗한 코드는 한 가지를 제대로 한다. 비야네 스트롭스트롭, C ++창시자 첫 번째로 비야네는 효율을 강조하였습니다. 여기서 효율은 꼭 속도만을 의미하는 것이 아닌 CPU 자원 등 여러가지 측면에서의 효율을 의미하는 것이라고 생각합니다. 두 번째로 깨끗한 코드는 세세한 사항까지 꼼꼼하게 처리하는 코드라고 하였습니다. 마지막으로 깨끗한 코드는 한 가지를 잘한다고 말하였습니다. 나쁜 코드는 너무 많은 일을 하려다가 의도가 뒤섞이고 목적이 흐려진다고 비야네는 말하였습니다. 반대로 이야기하면 깨끗하고 좋은 코드는 한 가지 일만 잘한다는 것을 이야기하였습니다. 깨끗한 코드는 잘 쓴 문장처럼 읽힌다. 깨끗

[실서비스 운영] TypeORM 마이그레이션(migration) [내부링크]

이번 시간에는 실제로 운영하고 있는 서비스에서 DB의 테이블 또는 컬럼을 수정해야 할 때 어떻게 해야 하는 지 알아보자. (아래의 예제는 Nest.js 환경으로 구성되어 있다.) 마이그레이션을 하는 이유 배포를 하게 되면 DB의 구조가 변경됨에 따라 데이터베이스를 동기화해야 한다. 일반적으로 배포 환경에서 synchronize: true를 사용하는 것은 안전하지 않다. 왜냐하면 synchornize: true는 자체적으로 코드를 분석해서 DB의 변경 사항을 반영하는데, 이 때 코드를 완벽하게 분석해서 반영을 해주지 못한다. 예를 들면, 잘못된 DB 변경사항 반영으로 인해 DB의 데이터가 소실되기도 한다. 실 서비스에서 데이터가 소실된다는 건 치명적인 에러이다. 따라서 배포 이후라면 반드시 TypeORM의 migration 기능을 사용해야 한다.(DDL로 직접 DB의 스키마를 수정해도 상관없다. 확실한 건 배포 환경에서 synchornize: true 쓰면 절대 안 된다.) 마이그레이

[DDD] Factory 개념 완벽 정리 ① [내부링크]

DDD의 FACTORIES에 대한 개념을 찾아보는데, 애매하게 설명을 하거나 모순되게 설명해놓는 걸 종종 보게된다. 이 때문에 Eric Evans DDD의 원본을 직접 보는게 낫다고 판단했다. 여러분들도 특정 개념을 공부할 때, 국내 블로그에 없는 내용이거나 국내 블로그의 글 내용만 보고서는 헷갈린다면 원본 문서를 찾아보자. 꽤나 도움이 많이 된다. 그리고 Eric Evans DDD 원본을 번역한 책도 출판됐다. 도메인 주도 설계 저자 에릭 에반스 출판 위키북스 발매 2011.07.21. 하지만 가끔 원본을 번역한 국내 책을 읽다보면, 헷갈리게 번역이 된 경우가 있다. 이 때문에라도 원본 문서를 찾아서 확인해서 교차 검증 하는 습관을 들이자. 서론이 너무 길었다. FACTORIES에 대한 개념을 파헤치러 가보자. 먼저 Eric Evans DDD의 원본에 나온 내용을 기반으로 하나씩 Factory에 대한 개념을 차근차근 잡아보자. FACTORIES의 탄생 배경 객체를 만들거나 완전한

[DDD] Factory 개념 완벽 정리 ② [내부링크]

클라이언트 객체가 '객체를 생성하는 책임'을 가지면 안 된다. 책임을 분리하는 방법에는 여러가지가 있다. 그 중에서 애플리케이션에서 클라이언트 객체한테 '객체를 생성하는 책임'을 옮기지 않을 것을 추천한다. (여기서 '클라이언트 객체'라는 말이 생소할 수 있다. 나 또한 그랬다. '클라이언트'라는 말을 보고 프론트엔드를 의미하는 건지, 고객을 의미하는 건지 감이 안 잡혔다. '클라이언트'라는 말은 무언가를 사용하는 '주체'라는 의미를 가지고 있다. 즉, '클라이언트 객체'는 '무언가를 사용하는 주체인 객체'를 의미한다.) 그럼 애플리케이션에서 클라이언트 객체한테 '객체를 생성하는 책임'을 옮긴다는 뜻이 무슨 말인지 예시 코드로 알아보자. 그러면 조금 더 수월하게 이해할 수 있다. [원래 코드] 위 코드에서 Post와 PostImage가 하나의 Aggregate이고, Post가 Aggregate의 root라고 가정하자. 그리고 post.entity.ts에 있는 생성자의 코드가 위 코드

[DDD] Factory 개념 완벽 정리 ③ [내부링크]

FACTORY는 어떤 계층에 속하는가 ? FACTORY가 어떤 일을 하는 지, 어떻게 구성하는 지 알아보기 전에 FACTORY는 어떤 계층에 속하는 지 먼저 정리하고 넘어가자. 복잡한 객체를 생성하는 일은 도메인 계층의 책임이지만 그것이 모델을 표현하는 객체에 속하는 것은 아니다. 하지만 일반적으로 객체의 생성과 조립은 도메인에서는 아무런 의미가 없지만 구현 측면에서는 반드시 필요하다. 따라서 복잡한 객체를 생성하는 일은 도메인 계층에서 맡고 있는 책임의 일부를 구성한다고 봐야 한다. 도메인 주도 설계 - 에릭 에반스 그렇다. FACTORY는 도메인 계층(Domain Layer)에 속한다. FACTORY는 무엇인가 ? 모든 객체지향 언어(ex. 자바)에서 생성자를 제공하고 있다. 하지만 다른 객체와 분리된 좀더 추상적인 객체 생성 메커니즘이 필요하다. 다른 객체를 생성하는 책임을 가진 프로그램 요소를 FACTORY라고 부른다. 객체 지향의 인터페이스라는 개념을 활용하면, 클라이언트가

운의 영향을 많이 받는 취업, 합격률 높이는 과학적 방법 [내부링크]

최근에 머리도 식힐 겸 여수 여행을 갔다왔다. 여행 가는 길에 책 읽는 걸 좋아한다. 자기계발서를 주로 많이 읽는다. 아래 책을 읽으면서 JSCODE 제자들에게 해주고 싶은 얘기가 있어서 블로그 글을 쓰게 됐다. 마이클 모부신 운과 실력의 성공 방정식 저자 마이클 모부신 출판 에프엔미디어 발매 2019.09.20. 위 책에서는 어떤 분야를 볼 때, 운과 실력의 스펙트럼 사이에서 어떤 곳에 위치하고 있는 지 파악하라고 한다. 여기서 운에 치우쳐진 분야와 실력에 치우쳐진 분야에 따라서 성공하기 위해 효과적으로 노력하는 방법이 다르다. 이 책에서는 운에 치우쳐진 분야인지, 실력에 치우쳐진 분야인지를 구별하는 방법이 나온다. 만약 인과관계가 확실하고 일관되다면 실력의 영향을 많이 받는 분야라고 판단한다. 반대로 인과관계가 확실하지 않아서 피드백하기조차 어렵다면 운의 영향을 많이 받는 분야라고 판단한다. 어떤 회사에 지원을 하고나서 떨어졌을 때, 내가 왜 떨어졌는 지를 회고해보면 인과관계가

[DDD] Factory 개념 완벽 정리 ④ [내부링크]

FACTORY를 만드는 방법에는 여러가지 방법이 있다. 그 중 팩토리 메서드(Factory Method), 추상 팩토리(Abstract Factory), 빌더(Builder) 패턴이 있다. 우리는 FACTORY를 만드는 방법을 깊이 있게 다루지 않고, Domain 설계의 중요한 요소로써 FACOTRY를 살펴볼 것이다. FACOTRY를 적절하게 활용하면 MODEL-DRIVEN DESIGN으로 나아가는 데 도움될 수 있다. FACTORY를 잘 설계하기 위한 조건 2가지 FACTORY를 잘 설계하기 위한 2가지 필수요건이 있다. 1. 각각의 객체 생성 방법은 원자적이어야 한다. 그리고 생성된 객체 또는 AGGREGATE는 불변식을 모두 지켜야 한다. FACTORY는 일관된 상태에서만 객체를 생성할 수 있어야 한다. FACTORY로 ENTITY를 만든다는 것은, FACTORY는 AGGREGATE를 생성하는 것을 의미하고, 이때 모든 불변식을 충족하고 선택적인 요소도 추가(객체 내부에 값 또

[DDD] Factory 개념 완벽 정리 ⑤ [내부링크]

이번 시간에는 FACTORY를 사용하지 않고 생성자를 사용해야 하는 경우와 FACTORY의 설계 지침에 대해 알아보자. FACTORY를 사용하지 않고, 생성자만으로 충분한 경우 FACTORY를 도입하면 상당한 이점이 있는 경우가 종종 있다. 하지만 FACTORY를 도입하지 않고 생성자를 사용하는 것이 훨씬 더 좋은 선택일 때가 있다. FACTORY는 실제로 다형성을 활용하지 않는 간단한 객체를 이해하기 어렵게 만들 수 있다. 다음과 같은 상황에서는 생성자를 사용하는 편이 좋다. 다형성을 활용할 필요가 없는 객체 생성자가 복잡하지 않은 경우 FACTORY 설계 지침 1. 각 연산은 원자적이어야 한다. 복잡한 생성물을 만들어내는 데 필요한 것들을 모두 한 번에 FACTORY로 전달해야 한다. 또한 생성이 실패해서 특정 불변식이 충족되지 못하는 상황에서는 어떤 일이 일어날지 결정해야 하는데, 이 경우 예외를 던지거나 단순히 널(null) 값을 반환할 수도 있다. 일관성을 지키고자 FACT

반응형 웹과 적응형 웹의 차이점을 알고 계신가요? [내부링크]

현대 웹사이트는 모바일, 태블릿, 데스크탑 등 다양한 사이즈에서 볼 수 있도록 만들어지고 있습니다. 흔히 반응형 웹이라고 하는데요. 사실 모바일이나 태블릿에 맞춰진 웹을 제작하는 방법은 반응형웹만 있는 것은 아닙니다. 크게 반응형 웹과 적응형 웹으로 나뉘는데요, 이번 포스팅에서는 두 가지 방법에 대해서 각각 알아보겠습니다. 반응형 웹 반응형 웹은 화면의 크기에 따라서 웹사이트의 사이즈가 변화하는 웹을 말합니다. 유튜브 홈페이지를 보면서 어떻게 작동하는지 알아보겠습니다. 화면의 줄어들면서 각 영상의 사이즈가 줄어들다가 한 줄에 나오는 줄의 개수가 차례대로 줄어들고 있습니다. 위와 같은 것을 반응형 웹이라고 말합니다. 적응형 웹 적응형 웹은 각각의 기기에 맞는 템플릿을 만들어놓고 웹사이트를 이용하는 기기에 맞는 페이지를 제공하는 웹을 말합니다. 개발자 도구를 이용해 모바일 화면으로 변경한 후에 새로고침을 하면 url 주소가 youtube.com에서 m.youtube.com으로 변하면서

[클린코드] 의미 있는 이름 짓기 ① [내부링크]

개발 분야에 관계 없이 개발자의 가장 큰 고민거리 중 하나는 바로 '이름 짓기(작명)'일 것입니다. 변수, 함수, 클래스 등 코드 내부적으로 이름을 지어야할 뿐만 아니라 파일, 폴더 등에서도 이름을 지어야합니다. 좋은 이름을 짓는 것이 쉽지는 않습니다. 좋은 이름을 지으려면 시간이 걸리지만 좋은 이름으로 절약할 수 있는 시간이 훨씬 더 많습니다. 이번 포스팅에서는 이름을 잘 짓는 규칙을 몇 가지 소개해드리도록 하겠습니다. 의도를 분명히 밝혀라 변수, 함수, 클래스 이름은 다음과 같은 질문에 답할 수 있게 지어야합니다. 변수(함수, 클래스)의 존재 이유는? 수행 기능은? 사용 방법은? 이름을 봤을 때 위 세 가지 답변에 답하지 못하고 따로 주석을 달아야 한다면 의도가 분명히 드러나게 이름을 짓지 못한것입니다. 예시를 보면서 알아보겠습니다. int d; // 경과 시간(단위 : 날짜) 위의 이름 d는 아무 의미가 없습니다. 주석으로 작성한 내용을 변수명에 포함시키려고 노력해야 합니다.

[React] React Hooks③: useContext [내부링크]

리액트에서 데이터를 다루는 방법인 props와 state 두 가지에 대한 포스팅을 작성했었습니다. props란 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 값인데, 부모에서 자식으로 전달해주는 값인 props가 컴포넌트의 깊이가 깊어지게 되면 이 과정이 복잡해지고 번거로워질 수 있습니다. 이런 상황에서 사용할 수 있는 hooks가 useContext입니다. useContext를 사용하면 props를 2중 3중으로 넘겨주는 것 대신 데이터를 전역으로 공유해서 바로 사용할 수 있게 됩니다. 리액트 공식문서에 있는 예제를 하나씩 보면서 useContext의 사용법에 대해 차근차근 알아보도록 하겠습니다. useContext 사용법 useContext를 사용하기 위해서 createContext로 전역 객체를 생성해주어야 합니다. createContext로 전역 객체를 생성한 후에는 Provider 컴포넌트로 생성한 context를 하위 컴포넌트에 전달해줍니다. 이제 실제 데이터를 사용할 컴포

[React] React Hooks④: useMemo [내부링크]

useMemo hook은 리액트 컴포넌트가 리렌더링 될 때 기존 연산된 결과값을 캐싱(memoization) 하게 해주는 훅이라고 리액트 공식문서는 설명하고 있습니다. 위 설명을 이해하기 위해서는 함수형 컴포넌트의 중요한 특징을 한 가지 이해해야 합니다. 코드 예제를 살펴보면서 그 특징에 대해서 알아보겠습니다. 함수형 컴포넌트의 특징 const TodoList = ({ todos, tab, theme }) => { const visibleTodos = filterTodos(todos, tab); // ... return ... } TodoList라는 함수형 컴포넌트가 있습니다. 함수형 컴포넌트는 기본적으로 컴포넌트가 리렌더링이 될 때 컴포넌트의 모든 부분(자바스크립트 로직, UI)을 리렌더링합니다. 예를 들어 TodoList라는 컴포넌트에 있는 state나 부모 컴포넌트로부터 받은 props(해당 코드에서는 todos, tab, theme)가 update 될 때 TodoList 컴포

코딩 교육, JSCODE 교육생 야놀자 합격 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 이번에 또 한 번 기쁜 소식을 듣게 되어 같이 공유하고자 글을 쓰게 되었습니다. JSCODE 1:1 멘토링을 통해 만난 분이 있었습니다. 고민은 아래와 같았습니다. 위에서 글로 보내주신 고민은, 여러 고민 중 일부에 불과했습니다. 이직을 준비하려고 마음 먹고 주변 지인들에게 조언을 구했다고 합니다. 그런데 돌아온 말은..... 그냥 안정적인 금융권이나 공기업의 IT 분야로 들어가. 개발적인 성장은 조금 덜 되더라도 안정적이면서 훨씬 좋잖아. IT 스타트업 가면 지금보다 대우가 좋을 것 같아 ? 사서 고생하지마. 지금 회사가 편한 줄 알아야지. 이직 준비하면 잘 될 것 같아요? 왜 힘든 길을 가려고 하는 지 모르겠네요. 뿐만 아니라, 주변 친구들은 안정적인 은행권이나 공기업 쪽으로 취업을 해서 고연봉을 받고 있는 상태였습니다. 상대적 박탈감과 조급함이 느껴질 수 밖에 없었습니다. 이 이야기를 듣고 저는 너무 속상했고 답답했습니다. 왜 항상

[React] React Hooks⑤: useCallback [내부링크]

useMemo가 특정 결과값을 캐싱하게 해주는 훅이었다면 useCallback은 특정 함수 자체를 캐싱해서 사용할 수 있게 해주는 훅입니다. 바로 코드 예제를 보면서 사용법을 익혀보도록 하겠습니다. useCallback 사용법 const cachedFn = useCallback(fn, dependencies) useCallback의 첫 번째 인자는 함수입니다. 우리가 캐싱해서 사용하고자 하는 함수를 첫 번째 자리에 넣으면 됩니다. useMemo의 두 번째 인자는 배열입니다. useCallback은 배열 안에 들어온 값이 변할 때만 첫 번째 인자로 들어온 함수를 캐싱합니다. 즉, useCallback은 배열로 들어온 값이 변하지 전까지는 계속 같은 함수를 캐싱하고 있는 것입니다. useCallback 실제 사용 예제 import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { con

무언가를 빨리 잘하고 싶으면 기록해라. 예외는 없다. [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 많은 JSCODE 교육생들이 어떻게 하면 코딩 실력을 빨리 올릴 수 있는 지 궁금해합니다. 저 또한 코딩을 시작할 때 궁금했습니다. 그래서 오늘은 어떻게 하면 빠르게 코딩 실력을 올릴 수 있는 지 알려드리고자 합니다. 코딩 실력을 빠르게 올릴 수 있는 방법의 본질은 학습 방법에 있습니다. 어떤 분야든 공통적으로 학습을 잘하는 방법이 과학적으로 증명되어 있습니다. 이 방법을 한 번 깨달은 사람은, 제대로 된 방법으로 많은 시간을 투자해서 누구보다 빠르게 해당 분야의 전문가가 됩니다. 그 방법이 무엇이냐구요 ? 학습을 효율적으로 하는 데에는 대표적인 몇 가지 방법이 있습니다. 오늘 말씀드릴 방법은 "기록"입니다. 기록하세요. 글로 남기세요. 예외는 없습니다. 일반적으로 사람들은 특정 분야를 학습할 때, 단순 반복 읽기를 통해 제일 많이 학습합니다. 말그대로 그냥 책을 눈으로만 읽는 겁니다. 단순 반복해서 읽는 것이 학습을 하는 데 있어서 비효

DDD(도메인 주도 설계), Repository Pattern 완벽 정리 ① [내부링크]

많은 사람들이 Repository에 대한 개념을 잘못 알고 있어서 이 글을 쓰고자 한다. 나 또한 Repository에 대해 개념을 잘못 이해하고 있었다. Repository의 개념을 어떻게 이해하냐에 따라서, Repository의 개념 뿐만 아니라 전반적인 깔끔한 아키텍처와 코드 구조도 익힐 수 있다. 그럼 이제 Repository Pattern에 대해 정확하게 알아보자. Repostiory란 ? 리포지토리(Repository)를 직독직해하면 보관창고라는 의미를 가진다. 프로그램을 실행할 때 메모리에 로드된 데이터는 프로그램을 종료하면 그대로 사라져버린다. 그런데 실생활에서 쓰는 애플리케이션은 프로그램을 종료했을 때 데이터가 사라져버리면 안 된다. 예를 들어, 내가 게임을 통해 10만 포인트를 얻었는데, 게임을 껐다 켰는데 10만 포인트가 사라져있으면 안 된다. 프로그램을 종료하더라도 데이터가 사라지지 않게 하기 위해서 데이터스토어(DB, 데이터베이스, 물리적인 저장소, 퍼시스턴시

DDD(도메인 주도 설계), Repository Pattern 완벽 정리 ② [내부링크]

이전 편에서 Repository Pattern을 사용하면 도메인이 돋보인다고 설명했다. 이제 예시를 바탕으로 실제로 이 말이 무슨 의미인지 알아보자. Repository Pattern을 적용하기 전 위 getPostWithPostImgs()라는 메서드를 보면 데이터스토어를 조작하는 코드로 가득 차 있다. 위 코드 정도는 코드 줄 수가 몇 줄 안 되서 이해하기 쉬울 지도 모르겠다. 하지만 저 코드가 100줄이 넘어간다면 과연 이해하기 쉬울까? 이해하기 어렵다. 이해를 할 수 있다하더라도 시간이 오래 걸린다. 조금 더 코드를 가독성 좋게 만들기 위해, 데이터스토어에 관련된 코드를 추상적으로 뽑아내서 이 메서드의 의도를 좀 더 잘 드러내보자. 참고) Service Layer에서 DataSource에 의존하고 있다면 유연하지 않은 코드이다. 특정 데이터를 저장하는 로직을 TypeORM의 DataSource를 활용하는 것이 아니라, 로컬에 저장하는 식으로 바꾼다고 가정해보자. 그러면 Serv

DDD(도메인 주도 설계), Repository Pattern 완벽 정리 ③ [내부링크]

이번 편에서는 'Repository Pattern에서 DIP 적용시키는 방법'과 'Repository와 DAO의 차이'에 대해서 알아보자. Repository Pattern에서 DIP 적용시키기 Repository Pattern을 사용함으로써 도메인 계층과 영속성 계층을 분리할 수 있다는 사실을 알 수 있었다. 여기서 ‘분리할 수 있다’라는 말을 구체적으로 풀어서 설명하자면, 영속성 계층인 RDBMS를 NoSQL로 변경하더라도 Service 계층에는 영향을 끼치지 않는다(= Service 계층의 코드는 변경하지 않아도 된다)를 뜻한다. 위 그림을 보면 PostService 클래스가 인터페이스가 아닌 구현 클래스 TypeOrmPostRepository에 직접 의존하고 있다. 이렇게 되면 TypeOrmPostRepository를 다른 구현 클래스로 교체할 때 PostService 클래스의 코드를 수정해야 하는 경우가 발생할 확률이 높다. 이를 해결하기 위해 객체지향의 5대 원칙 중 SO

Domain 객체에 Repository 관련 코드가 있으면 안 된다. [내부링크]

코드 리뷰를 하다보면 Domain 객체에 Repository의 코드가 들어있는 걸 종종 발견한다. 그래서 왜 Domain 객체에 Repository 관련 코드가 있으면 안 되는 지 설명하고 넘어가려 한다. 아래의 코드는 Nest.js에서 TypeORM을 활용한 코드 중 Post의 Entity에 대한 코드이다. post.entity.ts 위 코드를 보면 도메인(Domain) 객체인 Post가 CustomerRepository에 의존하고 있다. 즉, Post 객체 코드 내부에 CustomerRepository라는 코드가 존재한다. 도메인(Domain)에서 레포지토리(Repository)를 다루는 것은 좋지 않은 코드라고 얘기한다. 왜 그럴까? 이 얘기에 대한 대답을 그나마 간단하게 설명하기 위해서, 로버트 C.마틴의 ‘클린 아키텍처’의 내용을 기반으로 설명하겠다. 그렇다고 ‘클린 아키텍처’의 내용을 너무 깊이 설명하게 되면, 한 편의 글로 끝나지 않게 된다. 따라서 왜 도메인(Domai

[타입스크립트] 타입스크립트의 타입은 변하지 않습니다! [내부링크]

자바스크립트에서는 한 변수가 다양한 타입을 가지고 다양한 목적으로 사용됩니다. // 자바스크립트 let id = "12-34-56"; fetchProduct(id); // id는 string id = 123456; fetchProductBySerialNumber(id); // id는 number 자바스크립트로 작성되었기 때문에 id는 string으로도 사용되었고 number로도 사용되었습니다. // 타입스크립트 let id = "12-34-56"; fetchProduct(id); id = 123456; // error: Type 'number' is not assignable to type 'string'. fetchProductBySerialNumber(id); // error: Argument of type 'string' is not assignable // to parameter of type 'number'. 타입스크립트는 id를 처음 선언할 때 "12-34-56"을 보고

웹 프론트엔드 개발을 꿈꾸는 비전공자라면 이대로 한 번 따라해보세요! [내부링크]

비전공자인데 개발을 공부하고 싶습니다. 어떤 것부터 해야할까요? 지금까지 JSSCODE 교육프로그램을 진행하면서 가장 많이 들은 질문 중 하나입니다. 어떤 것부터 해야하는지 정해진 정답은 없지만 JSCODE 교육프로그램을 통해 수많은 비전공자들을 교육하면서 쌓아온 노하우로 실제 JSCODE가 웹 개발자를 꿈꾸는 비전공자들을 교육하는 과정을 알려드리고자 합니다. 1. HTML & CSS 첫 번째로 학습할 것은 HTML, CSS입니다. 기본적인 HTML과 CSS 문법을 강의나 책을 통해서 학습한 후에 간단한 프로젝트를 통해 직접 웹 페이지를 만들어보는 것을 추천드립니다. 이 과정을 2주내로 끝내는 걸 목표로 잡으시는 것을 추천드립니다. 모든 HTML 태그와 CSS의 프로퍼티를 학습하기란 사실상 불가능합니다. 자주 쓰이는 태그와 프로퍼티를 먼저 학습하고 추후에 다양한 프로젝트들을 해보면서 그때마다 필요한 기술들을 익히시는 것을 추천드립니다. 2. 자바스크립트(JavaScript) 두 번째

VPC를 활용해서 ElasticBeanstalk 구성하는 방법 ① [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 이번에는 VPC를 활용해서 ElasticBeanstalk 구성하는 방법에 대해 알아보겠습니다. 전체 과정은 아래와 같이 이루어져 있습니다. 1. VPC 생성하기 2. VPC 서브넷 생성하기 3. VPC 인터넷 게이트웨이 생성하기 4. 라우팅 테이블 설정 5. NAT Gateway 만들기 6. ElasticBeanstalk에서 VPC 적용하기 7. ElasticBeanstalk의 보안그룹 설정하기 8. 정상 작동하는 지 테스트하는 방법 이번 편에서는 1~4의 과정에 대해서 먼저 알아보겠습니다. 1. VPC 생성하기 1) 2) 2. VPC 서브넷 생성하기 1) Public subnet 만들기 2) private 서브넷 만들기 위와 같이 가용 영역 ap-northeast-2a와 ap-northeast-2c 둘다(또는 ap-northeast-2b와 ap-northeast-2d)에 public 서브넷과 private 서브넷을 각각 만들어주어야 합니

VPC를 활용해서 ElasticBeanstalk 구성하는 방법 ② [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 지난 편에 이어서 VPC를 활용해서 ElasticBeanstalk를 구성하는 방법을 마저 알아보겠습니다. 5. NAT Gateway 만들기 6. ElasticBeanstalk에서 VPC 적용하기 7. ElasticBeanstalk의 보안그룹 설정하기 8. 정상 작동하는 지 테스트하는 방법 이번 편에서는 5~8의 과정에 대해서 알아보겠습니다. 5. NAT Gateway 만들기 1) NAT Gateway 생성 주의) NAT 게이트웨이는 Public Subnet에 셋팅해야 합니다. 주의) NAT Gateway는 public subnet이 존재하는 가용영역 2군데에 전부다 만들어주어야 하기 때문에, 2개의 NAT Gateway를 만들어야 합니다. 2) private 라우팅 테이블에서 '라우팅' 편집하기 6. ElasticBeantstalk에서 VPC 적용하기 기존에 Default VPC로 셋팅되어 있는 ElasticBeanstalk ‘환경’을 수

[React] React Hooks①: useState [내부링크]

React Hooks란? React Hooks는 React 16.8 버전에 새로 추가된 기능으로 쉽게 이야기하면 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능입니다. 기존의 함수형 컴포넌트는 클래스형 컴포넌트에서 상태(state)나 생명주기(life cycle)를 다룰 수 없는 문제가 있었지만 hooks가 출시되면서 문제가 해결되었습니다. 현재 리액트 공식문서에서는 클래스형 컴포넌트보다 함수형 컴포넌트로 새로운 리액트 프로젝트를 만들기를 권장하고 있습니다. 그래서 이번 글에서는 React Hooks에서 상태를 관리할 수 있게 해주는 useState를 소개해드리려고 합니다. 다른 React Hooks에 대해서는 추가 포스팅으로 다루도록 하겠습니다. useState 사용법 useState는 리액트 컴포넌트에 state 변수를 추가하는 훅입니다. 먼저 기본 사용법에 대해서 알아보겠습니다. const [state, setState] = useState(initia

[React] React Hooks②: useEffect [내부링크]

지난 글에서는 React Hooks에 대해서 간단하게 알아보았고 useState 사용법까지 알아보았습니다. 이번 글에서는 useEffect를 사용해서 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하는 방법에 대해서 알아보겠습니다. useEffect 사용법 위에서도 이야기했듯이 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행해야 할 때 사용하는 훅입니다. 먼저 기본 사용법에 대해서 알아보겠습니다. useEffect(function, deps) useEffect의 첫 번째 인자는 함수입니다. 컴포넌트가 렌더링 될 때 실행하고 싶은 함수를 넣으면 됩니다. 두 번째 인자는 배열입니다. 이 배열에 특정한 값을 넣게 되면 이 값이 업데이트 될 때에도 첫 번째 인자로 넣은 함수가 실행이 됩니다. useEffect는 보통 세 가지 상황에서 자주 쓰입니다. 각각의 예시 코드를 보면서 어떻게 사용할지 알아보겠습니다. 1. 컴포넌트가 처음 렌더링(생성)될 때 useEff

iOS 앱 심사, 이렇게 하세요. 진짜 빨리 통과합니다! [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 이번에는 iOS 앱 심사를 빠르게 통과할 수 있는 노하우를 알려드리고자 합니다. 모바일 앱 배포를 준비하고 있는 많은 분들이 iOS 심사에 리젝될까봐 많이 걱정합니다. 리젝을 신경써서 배포를 준비하다보면 예상보다 1~2달씩 원래 일정보다 밀리기도 합니다. 그렇다면 어떻게 해야 가장 효율적이고 빠르게 iOS 앱 심사를 통과할 수 있을까요 ? 결론부터 말씀드리자면, '리젝 두려워 할 시간에, 일단 심사부터 넣어라'입니다. 이 방법이 가장 효율적인 이유에 대해 하나씩 설명드리겠습니다. 앱 배포를 준비하는 대부분의 많은 사람들이 iOS 앱 심사를 넣기 전에, 네이버나 구글에 'iOS 앱 심사 통과하는 방법' 또는 'iOS 앱 리젝 사유'를 검색해봅니다. 그러면 정말 다양하고 수많은 리젝 사유를 발견하게 됩니다. 지레 겁먹기 좋을 정도로 아주 다양하고 많은 리젝사유가 나옵니다. 여기서 사람들은 이렇게 생각합니다. 여러가지 리젝 사유를 읽어보니, 우

Flutter에서 자유롭게 json 다루기 [내부링크]

API 통신을 하거나 많은 변수 데이터를 다룰 때 클래스를 만들어 한 번에 관리합니다. 이런 변수들을 다룰 때 보통 json 형식으로 통신을 주고 받습니다. 이번 시간에는 flutter에서 json을 다루는 방법에 대해 알아보도록 하겠습니다. Flutter에서 API 통신하기 Flutter에서 api 통신으로 가져온 데이터가 json이라 해봅시다. Flutter는 json 데이터 타입을 Map<String, dynamic>이라 인식합니다. json 데이터를 자유롭게 쓰기 위해서 파싱 작업이 필요합니다. import 'package:http/http.dart' as http; import 'dart:convert'; final response = await http.post('$url'); final data = jsonDecode(response.data); ### print(data); { "id": 1, "name": "jscode" } print(data.id); 위 코드와 같

맥(Mac) 기본 개발 환경 셋팅하기 [내부링크]

안녕하세요! 개발을 시작할 때 운영체제를 고민할 때도 있습니다. 예전에는 MacOS 환경이 안정적이라 MacOS를 선호하였는데 요즘은 Windows도 훌륭한 개발을 위한 운영체제입니다. 제가 MacOS(이하 맥) 운영체제를 통해 개발을 진행하면서 몇 가지 팁들을 알려드리겠습니다. 키보드 관련 설정 개발에 있어서 키보드 설정은 사소하지만 큽니다. 매일 키보드를 쳐서 코드 한자 한자를 쓰니 별 거 아닌거 같지만 중요한 부분입니다. 맥을 처음 설치하면 키보드 관련 설정이 개발에 있어서는 조금 불편한 설정이 되어있습니다. 맥 키보드 환경설정를 보면 key repeat, delay until repeat 항목이 있습니다. Key repeat는 키보드 문자를 하나 눌렀을 때 반복 시간을 설정하는 항목입니다. Delay until repeat는 키보드 문자 하나를 누르고 그 뒤 문자는 언제 나타날지에 대한 설정입니다. 개발을 하다보면 반복되는 문자를 쓰거나 vim을 쓸 때 동일한 키를 여러 번

프로그래밍 교육, JSCODE 교육생 카카오페이 합격 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 오늘은 기분 좋은 소식을 듣게 되서 공유하고자, 기억에 남기고자, 마음속에 되새기고자 이 글을 남깁니다. 21년 12월부터 22년 6월까지 'JSCODE 스터디', 'JSCODE 멘토링', 'JSCODE 자소서 첨삭' 프로그램을 진행했습니다. 기대보다 많은 학생들이 찾아주었고, 정말 도움이 많이 되었다고 얘기를 해주었습니다. 여러 교육생들 중, 'JSCODE 스터디 1기', 'JSCODE 자소서 첨삭 3기'에 참석했었던 박범근님이라는 교육생이 있었습니다. 스터디에서도 같이 얘기도 많이 나누었고, 제가 알고 있는 지식도 최대한 많이 알려주려고 했습니다. 범근님 입장에서는 도움이 많이 되었는지, JSCDOE 스터디를 통해서 많은 것들을 배울 수 있었다고 얘기해주었습니다. 각자 공부하러 나름 조금이지만 돈 내고 각자 시간 써서 하는 건데 다행히 서로 목표도 잘 맞고 원하는 바가 같앴어서, 일주일에 4시간을 알차게 잘 쓴 것 같아요. 그리고 저는

[React] Props 와 State [내부링크]

리액트 컴포넌트에서 다루는 데이터는 Props, State 두 가지가 있습니다. 이번 포스팅에서는 Props와 State에 대해서 알아보도록 하겠습니다. Props Props는 부모 컴포넌트가 자식 컴포넌트에 전달해주는 값입니다. props는 읽기 전용(readonly) 이기 때문에 props는 수정하면 안됩니다. props의 예시 코드를 보면서 어떻게 데이터를 넘겨주는지 알아보겠습니다. import React from 'react'; import Name from './Name'; const App = () => { return <Name name="JSCODE" age={1} />; }; export default App; App.js 파일입니다. Name 컴포넌트의 props로 name과 age를 넘겨주고 있습니다. import React from 'react'; const Company = (props) => { return ( <> <div>name: {props.name}

[타입스크립트] 타입스크립트 설정 중에서 이 두 가지가 제일 중요합니다! [내부링크]

타입스크립트 설정 파일(tsconfig.json)은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다. 현재 진행중인 프로젝트의 실제 tsconfig.json 파일 타입스크립트를 처음 사용할 때의 tsconfig.json 파일에서 어떤 설정을 할지 조금은 막막한데요. 이번 글에서는 타입스크립트에서 가장 중요한 두 가지 설정에 대해서 알아보겠습니다. noImplicitAny noImplicitAny는 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어하는 설정입니다. 코드 예시를 보면서 해당 설정이 어떤 역할을 하는지 살펴보겠습니다. function add(a,b){ return a + b; } 위 코드에서의 add 함수는 noImplicitAny가 false일 때 유효한 코드입니다. 타입스크립트가 추론한 add 함수의 타입을 보면서 자세히 알아보겠습니다. function add(a: any, b: any): any add 함수에 대한 타입을 지정해주지 않았기

아직도 ssh 접속을 비밀번호로 하시나요? [내부링크]

ssh는 원격 서버에 접속하기 위한 훌륭한 도구입니다. 가볍고 보안적으로도 우수하여 많은 곳에서 원격 접속으로 ssh를 쓰고 있습니다. ssh를 통해 서버에 접속하기 위해 크게 2가지 방법이 있습니다. 접속하려는 계정 아이디와 비밀번호를 통해 접속 public key를 통한 접속 별도의 ssh 설정을 하지 않았다면 1번의 방법이 기본으로 설정되어 있을겁니다. 접속하고 싶은 계정을 통해 로그인을 시도하면 비밀번호를 요구합니다. ssh jscode@[IP] Password: 별도의 설정을 하지 않아 편하긴 하지만 비밀번호 시도 제한을 설정하지 않으면 보안적으로 위험이 있습니다. 또한 ssh 접속할 때마다 비밀번호를 쳐야해서 귀찮기도 하며 다른 개발자들과 공유하고 보관하기에 번거로움이 있습니다. 이러한 문제를 해결하기 위해 public key를 통한 접속을 이용한다면 쉽게 접속을 할 수 있습니다. public key를 통한 접속을 하려면 먼저 public key와 private key를

VSCode 쓸 때 아주 유용한 단축키 6가지 [내부링크]

안녕하세요! 오늘은 vscode를 사용하는 분들에게 알아두면 유용한 단축키를 소개해드리려고 합니다. 실제로 제가 작성한 코드에서 단축키를 어떻게 사용하는지 하나씩 소개해드리겠습니다 1. Ctrl + d Ctrl + d 는 블락으로 선택된 것과 똑같은 코드를 블락해주는 기능입니다. 해당 예시처럼 함수의 이름을 바꾸는 것도 말고도 html 태그를 변경하는 등 다양한 곳에서 활용이 가능한 유용한 단축키입니다. 2. alt + click alt + click 은 클릭하는 곳마다 커서를 만들어주는 단축키입니다. 코드를 작성하다가 여러군데에 동일한 키워드를 추가해주어야 할 때 사용하면 아주 유용한 단축키입니다. 3. alt + 화살표 위 아래 alt + 화살표 위 아래는 해당 코드 라인을 위와 아래로 이동하게 해주는 단축키입니다. 코드를 작성하다가 코드를 위 아래로 이동하고 싶을 때 마우스를 이용하지 않고 위아래로 이동할 수 있게 해주는 유용한 단축키입니다. 4. alt + shift + 화살

터미널, 나만의 쉘(shell) 설정하기 [내부링크]

VSCode의 터미널을 통해 작업을 하거나 ssh를 통해 서버 작업을 종종 합니다. 개발자라면 터미널은 뗄 수 없는 프로그램입니다. 맥 터미널을 기준으로 기본 터미널은 크기도 작고 흰 바탕에 가독성이 떨어집니다. .bashrc PS1 설정을 하여 터미널을 꾸며보고 단축어(alias) 설정으로 터미널을 효율적으로 써보도록 합시다. .bashrc PS1 설정하기 터미널을 실행할 때마다 기본적으로 .bashrc, .zshrc와 같은 터미널 설정 파일을 적용합니다. 여기서 단축어 설정(alias), PS1 설정, 환경변수 설정을 할 수 있습니다. PS1을 설정하여 터미널을 보다 가독성있게 만들 수 있습니다. PS1을 가지고 터미널 글자 색상, 위치 등을 설정할 수 있습니다. 다음의 예시를 들어보겠습니다. vi ~/.bashrc # .bashrc 맨 마지막에 다음과 같이 추가 export PS1="\[\033[38;5;11m\]\u\[$(tput sgr0)\]@\[$(tput sgr0)\]\

AWS VPC(Virtual Private Cloud) 실전 만들기 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 이번에는 VPC를 구성하는 방법에 대해 알아보겠습니다. VPC를 사용하는 이유에 대해서는 설명을 생략하고, 이번 글에서는 VPC를 구성하는 실제 방법과 순서에 대해서 알아보는 시간을 가지겠습니다. 1. VPC 생성하기 1) 2) 이름 태그 : 여러 VPC들 중에서 식별하기 위한 용도이다. IPv4 CIDR : VPC는 Private 네트워크이므로 Private IP 대역을 사용해야 한다. 10.0.0.0 ~ 10.255.255.255 (10.0.0.0/8) 172.16.0.0 ~ 172.31.255.255 (172.16.0.0/12) 192.168.0.0 ~ 192.168.255.255 (192.168.0.0/16, 총 65,536개) - 제일 많이 사용 2. VPC 서브넷 생성하기 만약 192.168.0.0 ~ 192.168.255.255 (192.168.0.0/16)을 전체 VPC 범위로 잡았다면, 다음과 같이 서브넷을 잡기도 한다.

[React] Create React App(CRA)으로 리액트 시작하기 ① [내부링크]

이전에 '리액트를 사용하는 이유'에 대한 글을 작성했었습니다. 이번 글에서는 Create React App으로 리액트 프로젝트를 설정하는 방법에 대해 알아보겠습니다. 리액트를 사용하는 이유!! 여러분들은 알고 계신가요? 안녕하세요! 이전 썼던 글중에 '개발 외주, 웹 서비스는 되도록이면 jQuery로 만들지 마세요!'... blog.naver.com Creact React App(CRA) 리액트 프로젝트를 시작하기 위해서 개발 환경 설정을 할 때 설치하고 준비해야 하는 과정이 보통 쉽지는 않습니다. 웹팩(Webpack), 바벨(Babel) 등 학습해야 하는 기술도 한 두개가 아니고 다른 설정들도 많습니다. 이 때 사용할 수 있는 것이 바로 Creact React App(CRA)입니다. CRA란 리액트 프로젝트를 시작할 때 기본 개발 환경 설정을 간편하게 해줄 수 있는 방법입니다. CRA를 사용하면 웹팩, 바벨 등 복잡한 설정들을 다 해주고 필요한 기본 패키지 등을 다 설치를 알아서

[React] Create React App(CRA)으로 리액트 시작하기 ② [내부링크]

지난 글에서는 CRA로 리액트를 설치하고 개발 서버에서 실행까지 해보았습니다. 이번 글에서는 CRA로 설치한 프로젝트의 파일이나 폴더를 살펴보면서 각각 어떤 역할을 하는지 알아보겠습니다. 폴더 구조 my-app README.md node_modules package.json .gitignore public favicon.ico index.html logo192.png logo512.png manifest.json robots.txt src App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js CRA로 생성한 폴더에 위와 같은 파일들이 있으실 겁니다. 각각의 파일들을 하나씩 살펴보도록 하겠습니다. README.md README.md 파일은 깃헙 레퍼지토리에서 사용되는 파일입니다. 해당 프로젝트가 무엇을 할 수 있는가, 어떻게 사용하는가, 얼

Docker(도커), 무식하게 쓰지말고 효율적으로 사용해보자 [내부링크]

도커는 훌륭한 컨테이너 기술입니다. 도커는 정말 애용하는 프로그램 중 하나입니다. 이번 시간에는 도커를 쓰면서 알면 좋을 몇 가지 팁에 대해 공유하는 시간을 가져보겠습니다. 도커 볼륨 주의점 도커를 통해 서버를 구성하면 볼륨으로 호스트와 컨테이너 간에 볼륨을 설정하는 경우가 있습니다. 이는 호스트에서 코드를 수정하면 컨테이너에 바로 적용되도록 해서 개발을 보다 편하기 위함이 있습니다. 하지만 볼륨을 설정할 때 하나 주의할 점이 있습니다. 호스트에서 수정사항을 즉각적으로 반영하려면 파일이 아닌 디렉터리로 볼륨을 설정해야합니다. 이는 리눅스 파일 시스템의 특징 중 하나인 inode 값을 도커에서 관리하지 않기 때문입니다. 실시간으로 파일이 반영되어야하는 상황이라면 꼭 파일이 아닌 수정할 파일이 담겨져 있는 디렉터리로 볼륨을 설정해주셔야 합니다. # 파일 볼륨 설정 docker run -d -v ./file.txt:/home/file.txt -it ubuntu:18.04 bash # 디렉

개발 분야, 프론트엔드와 백엔드만 아셨나요? ① [내부링크]

발라드, 가요, 랩, 재즈, 블루스 등 많은 노래 장르가 있듯이 컴퓨터 개발도 또한 많은 장르가 있습니다. 개발자 구인 시장을 보면 가장 익숙하게 볼 수 있는 프론트엔드, 백엔드부터 데브옵스 개발자, 앱 개발자 등 다양하게 있는 것을 확인 할 수 있습니다. 이번 시간에는 대표적인 컴퓨터 개발 분야에 대해 정리하는 시간을 가져보도록 하겠습니다. 프로그래머는 컴퓨터 언어를 가지고 코드를 작성하고 프로그램을 만드는 사람을 말합니다. 프로그래머는 넓게 보면 서비스를 만드는 개발자, 컴퓨터 학문을 연구하는 개발자가 있습니다. 그리고 어떤 서비스를 개발하느냐, 어떤 분야를 연구하느냐에 따라 프로그래머가 하는 일이 달라집니다. 서비스를 만드는 개발자를 중심으로 살펴보겠습니다. 프론트엔드 개발자 프론트엔드 개발자는 '프론트'라는 이름에서 볼 수 있듯이 '앞'에서 개발하는 개발자입니다. 디자이너가 만든 디자인을 실질적으로 구현하는 사람을 말합니다. 쉽게 풀어보자면 글자 크기, 색깔, 위치와 같은 사

[타입스크립트] 타입(type)과 인터페이스(interface)의 차이를 알고 계신가요? [내부링크]

타입스크립트에는 타입을 정의하는 방법이 두 가지가 있습니다. 바로 타입과 인터페이스입니다. // 방법1: type type TState = { name: string; capital: string; }; // 방법2: interface interface IState { name: string; capital: string; }; 대부분의 경우에는 두 가지 방법 중 어느 것을 사용해도 됩니다. 그러나 두 가지 방법(타입, 인터페이스)에 대한 차이를 명확히 알고, 특정한 상황에서는 올바른 방법을 사용하여서 일관성을 유지해야 합니다. 타입과 인터페이스의 유사점 타입과 인터페이스의 차이점에 대해 알아보기 전에 먼저 유사한 점부터 알아보려고 합니다. 1. 타입을 정의해서 사용할 때는 차이가 없다. 타입을 정의해서 사용할 때는 타입으로 정의하든 타입으로 정의하든 차이가 없습니다. 위의 예시에서 TState와 IState 중 어느 타입을 사용해도 해당 객체의 상태에는 차이가 없을 것입니다. 또한

[타입스크립트] 타입 단언(as Type)보다 타입 선언(: Type)을 사용하기 [내부링크]

타입스크립트에서 변수에 타입을 부여하는 방법은 두 가지가 있습니다. interface Person { name: string }; // 첫 번째 방법 : 타입 선언 const alice: Person = { name: 'Alice' }; // 두 번째 방법 : 타입 단언 const bob = { name: 'Bob' } as Person; 첫 번째 alice: Person 방법은 변수에 '타입 선언'을 붙여서 값이 해당 타입임을 명시합니다. 두 번째 as Person 방법은 '타입 단언'을 수행합니다. 해당 방법을 사용하면 해당 변수에 대한 타입을 Person 타입으로 간주합니다. 이 때 우리는 의문점을 하나 가질 수 있습니다. 타입 선언과 타입 단언 중 어느 것을 사용해야 하나요? 제목에서도 이야기했듯이 두 가지 방법은 우리는 '타입 선언'을 사용하는 것을 권장합니다. 이유는 다음 코드를 보면서 알아보겠습니다. const alice: Person = {}; // Property '

AWS 보안 ②, MFA로 강화하기 [내부링크]

저번 AWS 보안에서 IAM 권한 분리에 대해서 다루었습니다. IAM 권한 분리도 좋은 보안 정책이지만 이보다 더 강력한 MFA가 있습니다. 이번 시간에는 MFA를 설정하여 aws 계정을 더욱 안전하게 만들어보겠습니다. MFA(Muti-Factor Authentication)는 다중 인증이라는 뜻으로 쉽게 생각하면 OTP(One-Time Password)랑 유사합니다. MFA를 설정하게 되면 aws를 로그인 할 때마다 아이디, 비밀번호 뿐만 아니라 MFA 키도 요구합니다. 이 MFA 키는 30초마다 갱신되므로 로그인할 때 해킹의 위험을 줄여줍니다. aws에서 MFA를 설정하려면 admin 권한 이상으로 로그인 후, MFA 설정하려는 IAM 사용자로 들어갑니다. 보안 자격 증명 탭으로 들어간 뒤 '할당된 MFA 디바이스' 목록에서 '관리'를 누릅니다. '가상 MFA 디바이스'를 선택 후 계속을 누릅니다. 2번의 MFA qr코드를 스캔하기 위해서는 1번의 설명처럼 MFA qr 스캐너가

하이브리드 앱 외주, 1달 만에 기존 웹 서비스를 앱으로 배포한 사례 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 오늘은 기존에 운영하던 웹 서비스를, 한 달 만에 앱으로 만들어서 배포한 사례를 소개하고자 합니다. 1달 안으로 기존 웹 서비스를 앱으로 확장시켜서 배포하고 싶습니다. 문의주신 대표님께서 원하는 바는 명확했습니다. 하지만 개발 측면에서 봤을 때 여러가지 어려운 점이 있었습니다. 기간이 촉박한 점 기존 웹 서비스를 구축하신 분들의 개발자가 퇴사한 점 웹 서비스의 코드 복잡도가 높았던 점 이러한 점들을 고려해서 대표님과 같이 상의하면서, 어떤 방식으로 개발을 진행하는 것이 효과적인지 논의했습니다. 특정 서비스를 개발하는 방법에는 수많은 방법이 있고, 사업의 상황과 기존 개발 진행 상황에 따라서 효과적인 개발 방법은 다 다릅니다. 제가 생각하는 외주는 단순히 서비스를 개발해서 완성하는 것을 넘어서는 그 이상의 서비스를 제공해야 한다고 생각합니다. 예를 들면, 클라이언트 분의 회사 재정 상황, 데드라인 상황, 사업적 상황, 서비스만의 특징 등 여

개발자 외주, 결과물이 가장 중요하다고 생각하시는 분은 다른 개발사를 알아보세요. [내부링크]

사람간의 신뢰보다 결과물이 더 중요하다고 생각하시는 분들은, 뒤로가기를 누르셔서 다른 개발사를 알아보시길 바랍니다. 안녕하세요. JSCODE 대표 박재성입니다. 저도 한 때 개발에만 몰두했었던 개발자였습니다. 개발 이외에는 잘 몰랐습니다. 그러다 여러 외주를 경험하게 되고, 여러 스타트업 대표님들을 만나게 되고, 여러 외주사들을 컨택하게 되었습니다. 가장 크게 느꼈던 점은 "신뢰를 저버리는 걸 당연하게 여기는 시장"이라는 점이었습니다. 여기서 신뢰라는 건 외주사에만 해당하는 것이 아니라, 클라이언트에도 같이 해당되는 영역이었습니다. 외주를 맡기시는 스타트업 대표님은 "앞과 뒤가 다르고, 개발도 제대로 해주지 않고, 약속도 잘 안 지키고, 소통도 잘 안 되고, 연락도 잘 안 받더라."라는 얘기를 하십니다. 반대로 외주사나 외주를 맡는 개발자분들의 얘기를 들어보면, "과업 범위에서 벗어나는 요구와, 중간중간 기획을 자주 변경하시고, 무리한 요구를 계속해서 하더라 ."라는 얘기를 합니다.

Terraform은 왜 쓰는걸까? [내부링크]

Terraform(이하 테라폼)은 hashicorp에서 만든 오픈소스 IaC(Infrastructure as Code) 도구입니다. IaC란 코드형 인프라라는 뜻으로, 인프라를 코드로 나타낸다는 의미입니다. 예를 들어봅시다. resource "aws_instance" "example" { ami = "ami-06ffa3c90d0eaa9d9" instance_type = "t2.micro" } 위 코드는 테라폼 형식으로 작성한 파일입니다. 코드를 살펴보면 ami는 ami-06ffa3c90d0eaa9d9를 쓰고 instance_type은 t2.micro를 쓰겠다는걸 알 수 있습니다. 코드를 실행하면 aws에 ami-0a93a08544874b3b7 이미지를 가진 t2.micro 사양의 ec2를 만들 수 있습니다. AMI는 Amazon Machine Image의 약자로 ami-06ffa3c90d0eaa9d9는 ap-northeast-2(한국 region)의 ubuntu 18.04 이미지를

[타입스크립트] any 타입을 지양해야 하는 이유 [내부링크]

타입스크립트는 변수, 함수의 매개변수, 함수의 return 값에 타입을 명시해서 사용합니다. 타입에는 number, string 등 다양한 타입이 있고 그 중에 특히 조심해서 사용해야 하는 any 타입이 있습니다. 타입을 지정할 때 일부 특별한 경우를 제외하고는 any 타입이나 타입 단언문(as any) 사용을 지양해야 한다고 하는데, 그 이유에 대해 몇 가지 알아보도록 하겠습니다. 1. any 타입에는 안정성이 없습니다. let age:number; age = '12' // error : Type 'string' is not assignable to type 'number' age = '12' as any; age += 1; // age는 '"121" 위 코드를 보면 age는 number 타입으로 선언하였습니다. 우리는 문자열 12를 할당하려고 하니 에러가 발생하였고 해결책으로 as any를 사용하였습니다. as any를 사용함으로써 에러는 해결되었지만 age에 숫자 1을 더하는

AWS 보안 ①, IAM으로 권한 관리하기 [내부링크]

종종 커뮤니티 글에 aws 계정이 해킹되어 몇 백만원, 몇 억원까지 청구가 됐다는 사실을 들을 수 있습니다. aws 해킹 피해 사례를 들어보면 해킹범들이 aws root 계정으로 로그인을 한 후, 여러 인스턴스를 만들어 코인 채굴 같은 무거운 작업을 돌려서 사용한 만큼 청구된 사례가 주로 보입니다. 이는 기본적인 aws 보안 설정인 IAM과 MFA 설정을 하지 않았기 때문입니다. 펌) AWS 해킹 당해서 사용료 3억이 넘게 나왔습니다. : 클리앙 원문입니다 >http://huv.kr/dump40710 대자에도 써보라고하셔서 여기에도 같은 내용으로 올립니다 ---------------------------------------------------------------------------------------------------------- 여기가 맞는 게시판인지 모르겠네요;; 저는 개발자 이구요.. AWS 계정하나 터서 이걸로 공부하고 있거든요. 근데 3월 말에 갑자기 제 계정을

VSCode 쓸 때 아주 유용한 Extenstion 5가지 [내부링크]

안녕하세요! 이번에는 알아두면 좋을 vscode extension을 공유하는 시간을 가져보도록 하겠습니다. vscode는 전 세계적으로 쓰는 훌륭한 IDE로 자동 완성, 코드 하이라이팅, split view 보기 등 많은 기능을 가지고 있습니다. vscode 자체적으로 제공하는 기능도 강력하지만 개발자가 추가적으로 만든 extension을 이용하면 개발을 보다 효율적으로 진행할 수 있습니다. material icon theme, gitlens, powermode, tabout, vim 5개의 vscode extension에 대해 설명하겠습니다. 1. material icon theme 첫 번째는 material icon theme 입니다. vscode의 유명한 extension입니다. 이 extension은 vscode 왼쪽 파일트리 아이콘을 material 스타일의 아이콘으로 변경해주는 extension입니다. material icon theme 적용 전<왼쪽>과 후<오른쪽> ma

리액트를 사용하는 이유!! 여러분들은 알고 계신가요? [내부링크]

안녕하세요! 이전 썼던 글중에 '개발 외주, 웹 서비스는 되도록이면 jQuery로 만들지 마세요!'라는 글을 썼었습니다. 개발 외주, 웹 서비스는 되도록이면 jQuery로 만들지 마세요! 안녕하세요. JSCODE 대표 박재성입니다. 스타트업 대표가 직접 개발에 대해 잘 알면 좋겠지만, 모르... blog.naver.com 그러면 웹 서비스 개발은 어떤 라이브러리나 프레임워크를 사용하여야 할까요? 각각의 기술마다 장단점이 있기 때문에 정답은 없습니다! 어떤 기술을 쓰는지에 대한 정답은 없지만 github starts 수를 비교해보면 angular는 약 6만, vue는 약 3만3천인 반면 리액트는 20만을 향해가고 있습니다. [출처]https://npmtrends.com/angular-vs-react-vs-vue 그렇다면 사람들이 이토록 리액트에 열광하는 이유에 대해서 몇 가지 알아보도록 하겠습니다. SPA(Single Page Application) 리액트로 만들어진 페이지를 사용하다

Elastic Beanstalk(Node 플랫폼)을 활용해서 Node.js 서버 배포하기 ③ [내부링크]

안녕하세요! 이번에는 2편에 이어서 3편을 시작하겠습니다! 3편에서는 서버 코드를 수정했을 때, 업데이트 된 코드를 어떻게 Elastic Beanstalk에 반영하는 지 알아봅시다. 1. 서버 코드 수정 express-project/app.js const express = require('express') const app = express() const port = process.env.PORT || 3000 app.get('/', (req, res) => { res.send('Update World!') // 이 부분 수정! }) app.listen(port, () => { console.log(`Example app listening on port ${port}`); console.log(`process.env.NODE_ENV : ${process.env.NODE_ENV}`); }) 2. 서버 업데이트 해당 프로젝트의 폴더 내에서 밑의 코드 실행 $ eb deploy [업데이트

Flutter, 안드로이드 웹뷰 성능 이슈 해결하는 방법 [내부링크]

안녕하세요! 이번 시간에는 저희 팀이 겪었던 flutter에서의 android webview scroll 이슈에 관련한 내용을 공유하고자 합니다. Flutter로 작성한 페이지말고도 웹뷰로 띄우고 싶은 경우가 있습니다. Flutter에서 웹뷰를 띄울려면 주로 webview_flutter나 flutter_inappwebview 플러그인을 사용합니다. webview_flutter는 flutter에서 공식적으로 관리하는 웹뷰 플러그인으로 안정적이고 신뢰성 있는 플러그인 입니다. flutter_inappwebview는 다른 개발자팀이 만들었지만 webview_flutter보다 강력한 기능들을 제공하며 빠른 피드백으로 업데이트가 많습니다. webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev flutter_inappwebview | Flutter Pa

타입스크립트를 모르고 있다고요? 당장 타입스크립트를 배우세요! [내부링크]

타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트는 동적타입 언어라서 런타임시 type이 결정되지만 typescript는 정적타입이라 변수에 미리 타입을 선언후 컴파일시 타입을 체크해줍니다. 컴파일 단계를 거치면 타입스크립트는 다시 자바스크립트가 되기 때문에 타입스크립트는 자바스크립트의 슈퍼셋(superset) 이라고 할 수 있습니다. [출처] https://chaeyoung2.tistory.com/62 결국 자바스크립트로 컴파일 되어 사용되어 사용되는데 어떤 장점이 있어서 타입스크립트를 사용하는 것일까요? 1. 에러의 사전 방지 타입스크립트는 에러를 사전에 방지할 수 있습니다. 몇 가지 코드 예시를 보면서 어떻게 에러를 방지할 수 있는지 살펴보겠습니다. // math.js function sum(a, b) { return a + b; } // math.ts function sum(a:number, b:number) { return a + b; }

Elastic Beanstalk(Node 플랫폼)을 활용해서 Node.js 서버 배포하기 ④ [내부링크]

안녕하세요! 이번에는 3편에 이어서 4편을 시작하겠습니다! 4편에서는 수동으로 배포하는 것이 아닌, Github Action을 활용해서 자동 배포 하는 방법에 대해 알아봅시다. 1. Procfile 수정하기 express-project/Procfile # web: {실행시키고자 하는 명령어} web: npm i && npm run start:deploy Github Actions에서 $ npm i 를 한 폴더를 EB로 보낼 것이기 때문에, EB에서 $ npm i를 따로 실행시켜줄 필요는 없다. 2. Github Actions 파일 작성 .github/workflows/deploy-dev.yml name: Deploy master on: push: branches: - master jobs: build: runs-on: ubuntu-latest steps: - name: Checkout source code uses: actions/checkout@v2 - name: 패키지 설치, 패

HTML, CSS, JavaScript만 알면 웹 사이트를 만들 수 있습니다! [내부링크]

웹 사이트를 개발할 때 HTML, CSS, Javascript(JS)라는 3가지 프로그래밍 언어만 알면 개발을 할 수가 있습니다. 세 개의 언어는 어떻게 다르고 어디서 사용되길래 3가지 언어를 모두 알아야 웹사이트를 만들 수 있을까요? 그러면 각각의 언어들이 어떻게 다르고 어디서 사용되는지 하나씩 알아보도록 하겠습니다! [출처] https://velog.io/@soso0/html-css 1. HTML HTML(Hyper Text Markup Language)은 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류입니다. 웹 페이지의 제목, 단락, 목록 등 내용과 구조를 만드는 데 사용되는데, 집이나 사람을 비유하자면 골격, 뼈에 해당한다고 볼 수 있습니다. HTML 구성요소들은 태그('<>')안에 표시되고 각각의 역할에 맞는 태그를 사용해서 페이지의 구조를 만듭니다. 2. CSS css(Cascading Style Sheets)는 웹 문서를 시각적으로 디자인하는 역할을 합니

[개발 컨설팅] 코드가 복잡해서 유지보수하기가 어려워요. 새로 만들어야 하나요? [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 최근에 컨설팅을 진행했던 분의 사례를 말씀드리겠습니다. 얼마 전 저녁 쯤에 스타트업 대표님의 연락을 받았습니다. 코드를 완전히 갈아 엎어야 하나요 ? 해당 스타트업의 회사 상황은 이러했습니다. 회사 내의 앱 서비스를 5년 동안 혼자서 개발을 진행했다. 현재 회사 내에 존재하는 개발자는 1명이다. 개발자 1명 혼자서 앱과 웹과 백엔드를 전부 개발한 상황이다. 원래 개발을 잘하시던 분이 아니라서, 코드가 복잡하고 옛날 기술이 많이 사용되어있다. 옛날 기술을 쓰고있고 코드가 너무 복잡해서, 입사하려는 개발자도 없다. 코드가 복잡해서 특정 기능의 수정이나 추가를 할 때에 너무 오랜 시간이 소요된다. 대표님이 여러 상황을 고려했을 때, 지금 현재 방식대로 개발을 계속 진행하다간 더 이상 서비스가 더 커지지 못할 것이라고 판단했습니다. 그래서 어떻게 하면 좋을 지 컨설팅을 요청했습니다. 대화 상황을 재구성해서 컨설팅한 내용 중 핵심만 요약해서 말씀드

언제 AWS EC2 대신에 AWS Lambda를 사용하는 것이 좋을까? [내부링크]

AWS EC2와 AWS Labmda 중 어떤 걸 사용하는 것이 좋을까요? "무조건 AWS EC2가 좋다", "무조건 AWS Lambda가 좋다"는 없습니다. 어떤 걸 사용하는 게 좋은 지 판단하는 근거는 AWS EC2와 AWS Labmda가 가지고 있는 장단점을 바탕으로 판단하는 것이 정확합니다. 그리고 자신이 처해있는 상황에 맞게 잘 분석해서 적용하는 것이 중요합니다. 그럼 언제 AWS Labmda를 사용하는 게 좋을까? Case 1. 서버 관리 및 환경 구성과 같은 인프라 구성에 대한 비용(시간적 비용, 인력적 비용 등)을 줄이고 싶은 경우 AWS Lambda를 사용할 경우, 인프라 구성 및 관리에 신경쓰지 않아도 돼서 코드 작성에 집중할 수 있습니다. Case 2. 하나의 요청에 대한 작업이 15분 이상 걸리지 않는 경우 Lambda 함수가 실행되는 Maximum Timeout 시간은 900초(15분)입니다. 따라서 하나의 요청을 처리하는 데 15분 이상 걸린다면, 처리 도중에

iOS 앱 심사, 회원가입 기능이 있다면 반드시 회원 탈퇴 기능이 있어야 한다. [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 최근에 iOS 앱 심사를 넣었습니다. iOS의 앱 심사는 Android에 비해 까다롭기로 유명합니다. iOS 심사를 받던 도중 반려 이유에 대해 공유하기 위해 이번에 글을 작성하게 됐습니다. 앱 심사를 넣었는데, 아래와 같은 이유로 반려당했습니다. 요약하자면, '회원 가입 기능은 있는데 회원 탈퇴 기능이 없다는 이유'로 반려당했습니다. 그래서 아래와 같이 추가 설명 파일을 첨부해서 재심사 요청을 하고 성공적으로 앱 출시를 할 수 있게 되었습니다. 혹시나 iOS 심사를 넣으셔야 하는 분이 있다면, 조금이나마 도움이 되셨길 바랍니다

Elastic Beanstalk(Node 플랫폼)을 활용해서 Node.js 서버 배포하기 ① [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 오늘은 AWS의 Elastic Beanstalk를 활용해서 Node.js 서버를 배포하는 방법을 공유하고자 합니다. 1. EB CLI 설치 (Mac) macOS에 EB CLI 설치 - AWS Elastic Beanstalk 쿠키 기본 설정 선택 AWS는 사이트 및 서비스를 제공하는 데 필요한 필수 쿠키 및 그와 유사한 도구를 사용합니다. 성능 쿠키는 익명 통계를 수집하여 고객이 사이트를 어떻게 이용하는지 파악하고 개선할 수 있게 해줍니다. 필수 쿠키는 비활성화할 수 없지만 성능 쿠키는 ‘쿠키 사용자 지정’을 클릭하여 거부할 수 있습니다. 귀하가 동의하는 경우, AWS와 승인을 받은 서드 파티가 유용한 사이트 기능을 제공하고, 기본 설정을 저장하고, 관련 광고를 비롯한 관련 콘텐츠를 표시하는 데 쿠키를 사용하게 됩니다. 이러한 쿠키를 허용하지 않고 계속... docs.aws.amazon.com 2. Elastic Beanstalk에 접근하기

Elastic Beanstalk(Node 플랫폼)을 활용해서 Node.js 서버 배포하기 ② [내부링크]

안녕하세요! JSCODE 대표 박재성입니다. 1편에 이어서 다시 쭉 설명하도록 하겠습니다. Elastic Beanstalk(Node 플랫폼)을 활용해서 Node.js 서버 배포하기 ① 안녕하세요. JSCODE 대표 박재성입니다! 오늘은 AWS의 Elastic Beanstalk를 활용해서 Node.js ... blog.naver.com 4. Node.js 프로젝트 폴더 만들기 $ mkdir express-project $ cd express-project $ npm init -y $ npm i express express-project/app.js const express = require('express') const app = express() const port = process.env.PORT || 3000 app.get('/', (req, res) => { res.status(200).send('Hello World! - ' + process.env.NODE_ENV) }) a

리팩터링은 무엇이고 중요한 과정인가요? [내부링크]

책 '리팩터링 2판'을 읽으면서 공유하고 싶은 내용이 있어서 공유합니다. 제 개인적인 견해도 담겨있으니 가볍게 읽어주시면 감사하겠습니다. 먼저 '리팩터링'이란 단어의 정의부터 살펴보겠습니다.(리팩터링은 명사로도 쓰이고 동사로도 쓰일 수 있다) 리팩터링 : [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 리팩터링(하다) : [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 이처럼 '리팩터링'이란 단어는 명사로도 쓰이고 동사로도 쓰입니다. 리팩터링을 정의할 때 '겉보기 동작'이란 표현을 쓴 이유는 사용자 입장에서는 리팩터링하기 전과 후의 코드가 똑같이 동작해야 하기 때문입니다. 여기서 한 가지 짚고 넘어가야 하는 것은 '리팩터링'과 '성능 최적화'는 비슷해보이지만 목적이 다르다는 것입니다. 리팩터링의 목적은 코드를 이해하고 수정하기 쉽게 만드는 것이기 때문

아직도 데드라인을 안 지키시나요 ? 약속에 늦는 것이 당연한가요 ? [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 회사를 운영하다보면 데드라인을 바탕으로 일을 진행해야 하는 경우가 많습니다. 많은 회사에서 너무나도 흔하게 데드라인을 지키지 못합니다. 데드라인(Deadline)이라는 말이 무색하게도, 우리가 정한 데드라인은 쉽게 지켜지지 않게 됩니다. 심지어 많은 외주 개발 업체에서도 납기일을 지키지 못하는 경우가 많습니다. 외주 개발을 맡긴 스타트업 입장에서는, 납기일로 인해 많은 일정들이 어그러지게 됩니다. 이는 곧 회사의 손해로 돌아옵니다. 약속이나 데드라인을 어기는 것이 왜 점점 당연시 될까요 ? 계약으로 엄격하게 맺어진 기간에 대해서도 어기는 경우는 물론, 미팅 약속도 늦는 경우도 다반사입니다. 각자 개개인이 바쁜 건 알겠으나, 늦을 예정이라면 미리 양해를 구하고 먼저 연락을 드리는 것이 상대방에 대한 예의입니다. 자신의 시간이 바쁘고 소중한만큼, 상대방의 시간도 소중히 여길 줄 알아야 합니다. 사소한 약속 시간조차 지키지 못한다면, 과연 그

개발자 팀 구성, 스타트업에 최적화된 개발자 팀 구성 방법 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 이번에는 많은 스타트업 대표님들이 물어보셨던 개발자 팀 구성에 대해 말씀드리겠습니다. 모바일 앱 또는 웹을 바탕으로 서비스를 운영하려는 스타트업은, 외주를 맡기는 형태도 있겠지만 개발자를 채용하는 경우도 많습니다. 개발자를 채용하시는 스타트업 대표님들이 아래와 같은 질문을 많이 하십니다. 개발자는 몇 명을 뽑아야 할까요? 프론트엔드와 백엔드는 각각 몇 명을 뽑아야 할까요? 풀스택 개발자를 뽑는건 어떨까요? 명쾌하게 정리해서 말씀드리겠습니다. 혹시 해당 분야에 대해 경험이 없으시다면, 그냥 아래의 방식대로 따라하실 것을 추천드립니다. 제가 직접 다 실제로 경험해본 팀 구성이고, 아래 방식으로 팀을 구성했을 때 효율이 가장 높았어서 추천드리는 방식입니다. 참고) 아래의 팀 구성은 초기 스타트업이 앱 또는 웹 서비스를 만들기 위한 구성에 최적화된 방식입니다. i) 앱 서비스를 만드는 경우 결론 먼저 말씀드리자면, 앱(Flutter 또는 Reac

앱/웹 개발, React와 React Native는 다릅니다. [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 스타트업 대표 또는 기획자라면 '리액트'라는 단어를 들어봤을 겁니다. 하지만 여기서 많이 혼동하고 있는 단어로 React(리액트)와 React Native(리액트 네이티브)가 있습니다. 이 둘을 반드시 구별할 줄 알아야, 개발자와 소통하는 데 있어 오해가 생기지 않습니다. 그렇다면 이 둘의 차이점은 무엇일까요 ? 리액트(React)는 '웹' 서비스를 만드는 데 사용하고, 리액트 네이티브(React Native)는 '앱' 서비스를 만드는 데 사용합니다. 리액트(React)와 리액트 네이티브(React Native)는 인도와 인도네시아 아예 다르다고 생각하시는 것이 낫습니다.(물론 기술적인 관점에서 봤을 때는 구조적으로 비슷한 점이 많으나, 비개발자 입장에서는 아예 다른 기술이라고 인지하는 것이 낫습니다.) 만약 아래와 같이 얘기하면 개발자나 외주사에서 혼란스러워 합니다. 앱 개발을 할 때 리액트(React)를 사용해서 만들어주세요. '앱 개

개발자 채용, 프론트엔드 개발자보다 백엔드 개발자를 신중하게 뽑아야 하는 이유 [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 웹 서비스 또는 앱 서비스를 기반으로 창업을 생각하고 계신 분이라면, 개발자 채용에 대해서 한 번쯤은 고민하실거라고 생각합니다. 개발 분야를 크게 나누자면 '앱 프론트엔드 개발, 웹 프론트엔드 개발, 백엔드 개발' 이렇게 3가지로 나뉘게 됩니다. 모든 분야의 개발자를 다 최상의 개발자를 채용할 수 있다면 너무 좋겠지만, 비용과 시간의 제약이 존재하기 때문에 차선을 선택해야 하는 경우가 많습니다. 그러면 지금부터 어떤 개발 분야에 비용과 시간을 더 들여서 개발자를 채용해야 하는 지 설명드리겠습니다. 결론부터 말씀드리자면, 백엔드 개발자 채용에 비용과 시간을 좀 더 들여 신중하게 채용하시길 바랍니다. 위의 얘기는 '개발 분야에서 프론트엔드 개발자가 중요하지 않다'를 말씀드리는 것이 아닙니다. 사업을 운영하시는 대표님 입장에서 우선순위를 매겨서 판단을 내리는 데 있어서, 도움을 드리기 위한 글입니다. 혹시 프론트엔드 개발자 분이 글을 읽고 계시

개발 외주, 웹 서비스는 되도록이면 jQuery로 만들지 마세요! [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 스타트업 대표가 직접 개발에 대해 잘 알면 좋겠지만, 모르는 경우가 훨씬 더 많습니다. 웹 서비스를 바탕으로 사업을 하기 위해서, 내부 개발자를 채용하거나 외주를 맡겨야 합니다. 이 때, 다양한 외주 개발사가 있을텐데 외주사마다 사용하는 프로그래밍 언어가 다 다를겁니다. 만약 외주사에서 웹 서비스를 만들 때 jQuery를 활용해서 만든다고 할 경우, 그 외주사에 맡겨야 하는 지 반드시 신중하게 고민해보시기 바랍니다. 자세한 이유는 아래의 링크를 참고해주세요. 웹사이트 외주, 이 프로그래밍 언어는 거르세요 안녕하세요, JSCODE 대표 박재성입니다. 웹 사이트를 기반으로 서비스를 운영하려는 대표님이시라면 ... blog.naver.com 위 글은 '기술적인 관점에서 jQuery보다 React가 무조건 더 좋아!'를 의미하는 것이 아닙니다. 개발 기술을 평가할 때에 자주 나오는 인용구로, 'No Silver Bullet(은탄환은 존재하지 않는

동영상 서비스를 운영하면 비용이 얼마나 나갈까요 ? [내부링크]

안녕하세요. JSCODE 대표 박재성입니다. 이번에는 자사 서비스에서 '동영상'에 관련된 서비스를 제공할 경우에 비용이 얼마나 나가는 지에 대해서 말씀드리려고 합니다. 많은 대표님들이 '동영상 서비스'를 운용하려고 하실 때 가장 크게 걱정하시는 부분이 요금입니다. 그럼 구체적으로 요금이 얼마나 나가는 지 차근차근 알아봅시다. 동영상 서비스를 운영할 때, 어떤 식으로 서버와 인프라를 구성하냐에 따라 비용은 천차만별입니다. 하지만 구성하는 방식에 따라 천차만별인 건 알겠으나, 스타트업 대표 입장에서는 비용을 대략적으로라도 계산할 수 있어야 자금 계획을 세울 수 있습니다. 그래서 제가 동영상 서비스를 구성하는 방식으로 예를 들어서 비용을 산정해서 보여드리겠습니다. 사용 기술 스택 및 비용 AWS의 클라우드를 활용해서 동영상 서비스 운영을 한다고 가정하고 비용을 계산해보겠습니다. 1. AWS Elemental MediaConvert : 동영상 파일 인코딩 2. AWS Cloudfront :

창업을 할 때, 개발을 직접 배우는 게 나을까요? [내부링크]

안녕하세요! JSCODE 대표 박재성입니다. 최근에 많은 스타트업 대표님들이 개발자 채용에도 어려움을 겪고 있고, 개발 외주를 통해 맡기는 것도 회의적으로 생각하는 경우가 많습니다. 이 때문에 다음과 같은 생각을 하게 됩니다. 내가 직접 개발을 배워서 서비스를 만드는 게 오히려 더 빠르지 않을까? 금방 배울 수 있지 않을까? 개발을 배우는 게 나은 지 안 나은 지 판단하실 수 있게, 냉철하면서도 적나라하게 말씀드리겠습니다. 웹 서비스 또는 앱 서비를 만들 때, 크게 역할이 '프론트엔드 작업'과 '백엔드 작업'으로 나뉩니다. 각 작업별로 학습해야 하는 부분에 대해 Case By Case로 알아보겠습니다. 웹 프론트엔드 HTML, CSS, Javascript라는 언어를 학습해야 합니다. 그 후에 React.js라는 프레임워크를 공부하면 됩니다. HTML, CSS, Javascript를 비전공 개발자가 고3 수험생처럼 학습한다고 가정했을 때, 2개월이면 어느 정도 익숙하게 사용할 수 있게

JSCODE 소개 / 서비스 [내부링크]

소개 JSCODE는 최상위 현업 개발자들의 컨설팅 및 파트너십 서비스를 제공합니다. 회사를 운영함에 있어서 개발에 관련된 모든 부분(개발, 유지보수, 운영, 모니터링, 컨설팅, 직원 교육, 멘토링 등)을 맡길 수 있습니다. 미팅을 통해 회사에서 필요한 부분에 맞춰서, 개발에 관련된 부분으로 도움을 드리는 서비스입니다. JSCODE가 추구하고자 하는 본질은 '개발에 대한 업무만 잘해드리자'가 아닌, '실제 대표님이 운영하시는 서비스 자체가 성공할 수 있게 도와드리자'입니다. 실제 회사에서 운영하는 서비스가 성공하려면, 같은 동업자의 마음으로 회사가 겪고 있는 문제의 본질을 파악해 해결할 수 있게끔 해결책을 같이 고민하는 것이 중요하다고 생각합니다. JSCODE는 개발 및 기술적인 지원 뿐만 아니라, 회사가 성장할 수 있는 방향으로 같이 고민하겠습니다. 설립 배경, 철칙 JSCODE 설립 배경 안녕하세요! JSCODE 대표 박재성입니다. 저는 예전부터 스타트업과 창업에 관심이 많아, 스

JSCODE 개발 외주, 외주 맡길 때 불필요한 문서는 준비하지 마세요! [내부링크]

안녕하세요, JSCODE 대표 박재성입니다! 저는 한 때 CTO로 활동하기도 했고, 한 때는 플랫폼 서비스를 창업한 CEO로 활동하기도 했습니다. 여러 스타트업의 경험을 하면서 느낀 점은, '불필요하게 문서화하는 데 시간을 낭비하는 것이 너무 아깝다'였습니다. 스타트업에서는 1분 1초가 너무 아깝고 할 일이 정말 태산같이 쌓여있습니다. 정부 지원 사업, 투자 유치 등 보여주기 식이라고 느껴질 만큼 정말 많은 양의 문서를 작성해야 했습니다. 이 외에도 개발에 대한 외주를 맡길 때도 정말 많은 문서를 제출해야 한다는 것을 알게되었습니다. 예를 들면, 외주 개발을 하나 맡길 때에도 서비스 기획서, 개발 기능 명세서, 와이어프레임, 화면 설계서, 플로우 차트, API 개발 명세서 등 정말 많은 문서가 필요했습니다. 하지만 실제로 제가 새로운 서비스를 수십 번 만들어보고 운영하면서 느낀 점은 앱 또는 웹을 개발할 때 생각보다 많은 문서가 필요하지 않다는 것이었습니다. JSCODE에 만약 개발

커뮤니케이션 방법, 커뮤니케이션이 중요한 지 모르는 사람과는 일하지 않습니다. [내부링크]

안녕하세요, JSCODE 대표 박재성입니다. JSCODE에서는 실력이 아무리 좋아도 커뮤니케이션을 잘 하지 못한다면 절대 채용하지 않습니다. 커뮤니케이션을 잘 하지 못할 경우 팀원들끼리의 갈등, 클라이언트와의 오해 발생 등 여러 측면에서 치명적인 문제가 발생합니다. 이 때문에 JSCODE에서는 커뮤니케이션을 최우선적으로 중요시하고 있습니다. 이번에는 어떻게 하면 커뮤니케이션을 더 잘할 수 있을 지에 대해서 얘기하고자 합니다. 1. 비언어적 요소를 신경써라. 커뮤니케이션에서 비언어적 요소는 정말 중요합니다. 언어적 요소 뿐만 아니라 비언어적 요소도 신경을 써서 커뮤니케이션 해야 합니다. 목소리, 표정, 몸짓(제스처), 듣는 태도, 자세 등의 비언어적 요소가 커뮤니케이션의 성공을 좌우합니다. 1) 눈을 마주치면서 상대방의 말을 경청하기 2) 긍정적 반응이나 표정을 통해 상대방의 이야기를 열심히 듣고 있다는 신호주기 3) 전화를 통해 의사소통할 경우 무뚝뚝하거나 화나있다고 오해하지 않게,

MVP 개발, 여러분은 정말 MVP답게 서비스를 만들고 계신가요 ? [내부링크]

안녕하세요, JSCODE 대표 박재성입니다. 웹 서비스나 앱 서비스를 기반으로 창업하시는 분들은 MVP를 먼저 제작해서 시장성을 테스트하려고 합니다. 여기서 MVP란, Minimum Viable Product의 약자로 고객의 피드백을 받아 최소한의 기능을 구현한 제품을 의미합니다. 많은 스타트업에서 '린(Lean)하게 가자', '애자일(Agile)하게 일하자'라고 얘기합니다. 린(Lean)과 애자일(Agile)의 방법론에서 MVP라는 말이 자주 등장합니다. 이러한 방법론의 핵심은 고객에게 필요한 기능을 빠르게 제공함과 동시에, 고객으로부터 피드백을 받아서 다시 기능을 수정 및 보완을 통해 제품을 개선해나가는 것입니다. 여러분들이 기획한 서비스는 과연 MVP라고 할 수 있을까요? 정말 애자일(Agile)하게, 린(Lean)하게 기획하셨나요? MVP를 통해 빠르게 개발을 해서 사용자의 반응과 시장성을 검증하고자 하는 것에 대해서는 이견이 없습니다. 하지만 처음 서비스를 기획해보신 대표님

개발자 채용, 왜 우리 회사에는 개발자들이 지원하지 않을까요? [내부링크]

안녕하세요! JSCODE 대표 박재성입니다. 최근 들어 스타트업에서의 개발자 수요가 점점 커지고 있음에 따라 개발자 공급도 많이 늘어나고 있습니다. 개발자의 수가 늘어남에도 불구하고, 여전히 스타트업에서는 개발자를 채용하기 어렵다고 얘기합니다. 어떻게 하면 개발자들이 일하고 싶은 회사로 만들 수 있을까? 지금까지 여러 개발자들과 협업하고 네트워킹하면서 느낀, 개발자들이 어떤 회사에 가고 싶어하는 지에 대해 말씀드리겠습니다. 지금부터 말씀드리는 내용에 대해 잘 숙지하고 회사에 녹여낼 수 있다면, 이전에 비해 훨씬 많은 개발자들이 '이 회사에서 일해보고 싶다'라는 생각을 하게 만들 수 있습니다. 개발자는 생각보다 단순합니다. 여러 개발자 분들의 얘기를 들어봤을 때, 회사를 선택할 때 보는 요소를 크게 3가지로 요약할 수 있었습니다. 1. 성장할 수 있는 환경인지 (중요도 : ️️️️️) 개발자의 입장에서 '성장'이라는 말은 여러가지의 의미를 내포하고 있습니다. 아래의 요소가 최대한 많이

모바일 앱 개발, 스타트업에 최적화된 어플리케이션 제작 과정 ① [내부링크]

안녕하세요. JSCODE 대표 박재성입니다! 구글이나 네이버에 '어플리케이션 제작 과정'이라고 검색해보면, 정말 자세하게 많은 글들이 나옵니다. 하지만 스타트업에서 따라하기에는 너무 복잡하고 불필요한 과정들이 많이 포함되어 있습니다. 어떻게 하면 불필요한 과정을 최소화하고 효율적으로 모바일 앱을 제작할 수 있을까요? 지금부터 효율적으로 빠르게 모바일 앱을 제작하려면 어떤 과정을 거쳐야 하는 지 알아봅시다. 1. 기획 아이디어 구체화, 경쟁 앱 분석, 사용자 분석, 시장 조사 등 여러 방법을 활용해 기획을 진행하실거라고 생각합니다. 기획 방법에 대해서는 구체적으로 설명드리지 않고, 기획 과정 중에 자주하는 실수에 대해서만 말씀드리겠습니다. 완벽주의에 빠지지 않게 조심하세요. 일단 시도하세요. 그리고 수정하세요. 문서에 집착하지 마세요. 초우량 기업의 조건이라는 책에서 이렇게 말합니다. '일단 해봐라! 안 되면 고쳐라! 시도해봐라!(Do it, Fix it, Try it)' 초우량 기업

모바일 앱 개발, 스타트업에 최적화된 어플리케이션 제작 과정 ② [내부링크]

안녕하세요, JSCODE 대표 박재성입니다! 1편(기획, 디자인)에 이어서 개발, QA/배포에 대해 설명드리겠습니다. 3. 개발 '이런 프로세스로 개발해야 한다'를 말씀드리는 것보다, '이렇게 개발하면 시간이 아주 오래 걸리고 비효율적이다'를 말씀드리겠습니다. 비효율적인 방법만 피하더라도 많게는 1~2달의 시간을 절약할 수 있습니다. 성능 걱정 하지 마세요. 스타트업에서 앱을 출시하자마자 성능으로 인해 문제가 되는 경우는 거의 없습니다. 대부분의 앱들은 한 번에 사용자가 유입되는 경우는 없고, 서서히 유입되기 때문입니다. 그리고 누적 다운로드 수가 10,000명이 되더라도 성능 문제가 발생하지 않는 경우가 대부분입니다. 그러니 성능을 미리 걱정하지 마세요. 일단 먼저 MVP를 출시하고 모니터링하면서 성능이 문제가 되는 부분이 보일 때, 그때 개선해도 전혀 늦지 않습니다. 문제가 터지기전에 미리 걱정해서 대비하지 마세요. 생각보다 서비스를 운영해보면 걱정하는 일들이 생각보다 터지지 않

스타트업에서 개발자가 떠나는 이유, 개발자한테 절대 하면 안 되는 말 [내부링크]

스타트업에서 왜 이렇게 개발자를 구하기가 힘든걸까요 ? 힘들게 개발자를 구했는데 왜 얼마 안 지나서 퇴사하는걸까요 ? 혹시 다음과 같은 말들로 개발자의 의욕을 꺾거나, 나도 모르게 개발자를 무시하는 발언을 한 건 아닌지 확인해보세요! 지금까지 개발자로서 여러 스타트업 대표님들과 기획자 및 디자이너분과 소통하면서 들었던 말들을 바탕으로 구성했습니다. 또한 제 개인적인 경험 이외에도 같이 협업을 한 개발자들, 네트워킹을 통해 만난 개발자들과 만나서 느꼈던 점을 바탕으로 구성했습니다. 1. 이 기능은 간단한 거라서 ~~~ 스타트업 대표님, 기획자, 디자이너분들과 만나면서 얘기를 나눴을 때, 생각보다 위의 문구를 많이 쓴다는 것을 느꼈습니다. 왜 이 문장을 들었을 때, 개발자가 어떤 생각을 하는 지 알아봅시다. 기획자, 디자이너 입장에서 정말 간단해보이는 기능일지라도, 실제 개발에서는 간단하지 않을 가능성이 높습니다. 왜냐하면 기능 하나를 수정했을 때, 다른 기능에 영향을 미치거나 버그가

개발자 채용, 초기 스타트업에서 이런 개발자는 뽑지 마세요! [내부링크]

안녕하세요! JSCODE 대표 박재성입니다. 수십개의 프로젝트 및 협업 경험, 스타트업에서의 개발자 채용 경험, 개발자들과의 네트워킹 경험을 바탕으로 배우게 된 개발자 채용 Tip에 대해서 공유드리겠습니다. 이번에는 개발자 채용 Tip 중에서도 '스타트업에서 뽑지 말아야 하는 개발자'에 대해서 설명드리겠습니다. 바로 본론으로 들어가겠습니다. 1. 자신이 개발한 내용에 대해, 상대방이 이해하도록 쉽게 설명하지 못하는 개발자 스타트업 뿐만 아니라 대규모 기업에서도 개발자는 커뮤니케이션을 해야 할 일이 정말 많습니다. 특히 스타트업이라면 훨씬 소통을 해야 하는 경우가 많습니다. 자신이 개발한 내용에 대해서 스타트업 대표님, 기획자, 디자이너 분에게 이해하기 쉽게 설명하지 못해서 오해가 생기는 경우가 너무 많습니다. 예컨대, 기획자가 개발자 분한테 "이 기능은 간단해보이는데 혹시 이번 기획에 추가가 어려울까요?"라고 물어봤을 때, 개발자는 이 부분에 대해서 기획자가 이해할 수 있게끔 자세히

웹사이트 외주, 이 프로그래밍 언어는 거르세요 [내부링크]

안녕하세요, JSCODE 대표 박재성입니다. 웹 사이트를 기반으로 서비스를 운영하려는 대표님이시라면 , 반드시 이 글을 읽기를 권장드립니다. 혹시나 오해하실 수도 있으니 먼저 전제를 깔고 설명드리겠습니다. 아래의 항목에서 1가지라도 해당된다면 제가 추천드리는 프로그래밍 언어로 제작해주는 외주 업체와 거래 하실 것을 추천드립니다. 사업을 운영함에 있어서 웹 사이트가 핵심 서비스이다. 운영할 웹 사이트가 1주일에 1회 이상 기능이 추가되거나 수정될 가능성이 높다. 처음에는 외주를 통해 웹 사이트를 제작하고, 추후에 회사 내부 개발자를 채용해서 유지보수를 진행할 예정이다. 웹 사이트를 만들기 위해 사용하는 프로그래밍 언어는 아주 다양합니다. '추천드리는 프로그래밍 언어'와 '추천드리지 않는 프로그래밍 언어'에 대해 설명드리겠습니다. [추천 프로그래밍 언어] React.js (Javascript 기반) Vue.js (Javascript 기반) Next.js (Javascript 기반) No

크로스 플랫폼 앱 개발, 스타트업이라면 제발 네이티브 앱으로 개발하지 마세요 [내부링크]

안녕하세요, JSCODE 대표 박재성입니다. 많은 대표님들이 앱으로 창업을 할 때 어떤 언어로 개발을 해야 할 지 판단을 내리기가 어려워 하십니다. 특히 크로스 플랫폼이 가능한 언어(Flutter, React Native)로 안드로이드와 iOS 앱을 동시에 개발할 지, 아니면 네이티브 언어(Swift, Kotlin, Java)로 안드로이드와 iOS 앱을 따로따로 개발할 지를 고민하는 경우가 많습니다. 단호하게 딱 잘라서 말씀드리겠습니다. 크로스 플랫폼(Flutter 또는 React Native)으로 모바일 앱 개발하세요! 크로스 플랫폼 언어로 개발해야 하는 이유에 대해서 크게 2가지로 요약해서 설명드리겠습니다. 첫 번째로, 네이티브 앱으로 모바일 앱을 제작할 경우, 인건비로 과도하게 많은 비용이 지출됩니다. 초기 스타트업은 자금이 충분치 않은 경우가 많습니다. 실력이 다소 부족하지만 인건비가 싼 월 300만원의 개발자를 채용한다고 가정해봅시다. 네이티브 언어로 개발할 경우 안드로이드

개발 인수인계, 외주 또는 개발자 퇴사 시 꼭 받아야 하는 인수인계 자료 [내부링크]

안녕하세요, JSCODE 대표 박재성입니다. 오늘은 외주사로부터 작업을 맡겼을 때나 내부 회사 개발자가 퇴사한다고 했을 때, 반드시 인수인계를 받아야 하는 자료에 대해서 설명드리겠습니다. 정말 필수적인 인수인계 자료를 잘 받냐 안 받냐에 따라서, 추후 개발자가 인수인계 받아서 유지보수를 할 때 소모되는 시간의 차이가 엄청나게 크게 벌어집니다. 극단적으로는 인수인계 자료가 부족할 경우, 새로 다시 코드를 짜야하는 상황도 발생합니다. 따라서 지금까지 개발에 투자한 시간과 비용이 물거품이 되지 않게끔, 인수인계 자료는 반드시 꼼꼼하게 잘 챙겨놓으시길 바랍니다. 지금부터 받아놓으셔야 하는 인수인계 자료에 대해 설명드리겠습니다. 1. 소스 코드 (중요도 : ️️️️️) 소스 코드를 인수인계 받지 않는다면, 추후에 유지보수를 할 수 있는 방법이 아무것도 없겠죠? 이 때, 주의해야 할 점이 소스 코드를 인수인계 받을 때, 반드시 아래와 같이 물어보시는 걸 추천드립니다. 제가 따로 인수인계 받아야

HTTPS 적용, 홈페이지에 설마 HTTPS가 적용되어 있지 않나요 ? [내부링크]

안녕하세요, JSCODE 대표 박재성입니다! 웹 서비스 또는 앱 서비스를 운영하신다면, 랜딩 페이지 또는 서비스 웹 페이지를 운영하고 계실겁니다. 이 때, 가끔 HTTPS 적용이 안 되어 있으신 웹 페이지가 보입니다. 먼저 HTTPS를 적용하지 않았을 때의 문제점에 대해서 알아봅시다. 기술적인 부분으로 심오하게는 다루지 않을 예정이며, 비전공자 또는 스타트업 대표님의 입장에서 쉽게 이해하실 수 있게 작성하겠습니다. 1. 사용자가 신뢰할 수 없는 사이트로 인식해서 이탈율이 증가한다. 아직 사용자들에게 많이 알려지지 않은 웹 서비스에 접속을 했을 때 아래와 같이 팝업창이 뜬다면, 개인정보에 민감한 사용자들은 쉽게 이탈하게 될 것입니다. HTTPS를 적용해서 아래와 같이 사이트가 떠야, 사용자들이 믿고 사이트를 이용할 수 있을겁니다. 2. 검색 엔진에 최적화되지 않는다. 네이버, 구글 검색 엔진은 HTTPS를 사용하지 않을 경우, 상위 노출에 대한 패널티를 부여합니다. 서비스를 운영하는

AWS 서버 비용 절약, 초기 스타트업이라면 190만원 공짜로 받으세요! [내부링크]

안녕하세요! JSCODE입니다. 혹시 앱 서비스나 웹 서비스로 창업한 지 얼마 안 되셨는데, 서버 비용에 돈을 쓰고 계신가요 ? 초기 스타트업에서는 한 푼 한 푼이 너무 아깝고 소중합니다. 앱 서비스나 웹 서비스로 사업을 시작하시게 되면, 고정적으로 나가는 서버 비용을 무시하지 못합니다. 출처 : https://aws.amazon.com/ko/blogs/korea/aws-bill-simplification-consolidated-cloudwatch-charges/ 웹 서비스나 앱 서비스를 개발하시는 분이라면 대부분 AWS의 클라우드 서버를 사용하고 계실겁니다! AWS를 사용하고 있으시다면, 대부분의 스타트업 대표님들이 AWS 가입 후 1년 동안 여러 서비스에 대해 무료로 제공해주는 프리 티어(Free tier)에 대한 혜택은 잘 받고 있으실 겁니다. 하지만 프리 티어는 1년 동안 완전히 무료로 사용할 수 있는 서비스가 아닙니다. 프리 티어는 특정 서비스에 대해서만 일부로 무료로 제공

JSCODE 설립 배경, 철칙 [내부링크]

안녕하세요! JSCODE 대표 박재성입니다. 저는 예전부터 스타트업과 창업에 관심이 많아, 스타트업과 창업에 대해 많은 경험을 할 수 있었습니다. 한때 스타트업의 CTO로 있었을 때, 창업 관련 네트워킹을 통해 알게 된 대표님들과 대화를 나눌 기회가 많았습니다. 개발자를 구하기가 너무 어렵다고 하소연하시는 대표님들도 많았고, 팀 내에 개발자는 있으나 실력이 부족해 서비스를 완성시키기까지 문제가 너무 많아 걱정이라고 말씀하시는 대표님들도 많았습니다. 앱 및 웹 개발 세미나 실제로 여러 개발자들과 네트워킹을 하면서 느낀 점은, 실력 있는 개발자들이 스타트업으로 도전하는 경우가 거의 없다는 것입니다. 개발자들은 대기업이나 유명한 IT 기업으로 취업을 하려고 했습니다. 왜냐하면 실력 있는 개발자 입장에서는 대기업이나 유명 IT 기업으로 가는 것이 커리어를 쌓는 데도 훨씬 유리하며, 복지도 좋고, 연봉도 높기 때문입니다. 그래서 고민하고 계신 대표님께 개발 외주를 맡기는 건 어떻겠냐고 제안을