365kim

Recent Posts

• [클린 코드] 서문, 0장 들어가면서 최근 좋은 기회로 당근마켓 개발자분들과 우아한형제들 개발자분들이 함께하는 클린 코드 북스터디에 함께하게 되었다. 느슨한 코드에 한 줄기 긴장감이 되어줄 책 읽기와 북스터디 활동이 기대된다. 앞으로 매 장 스터디하며 인상깊은 구절을 정리해보려고 한다. (원래는 1장부터 적어보려했는데, 서문에도 인상 깊은 구절이 많아서 따로 적어보았다.) 서문 옮긴이 서문 (박재호님) 이 책은 로버트 C. 마틴이 40년 이상의 개발 경험을 토대로, 프로 개발자가 어떤 마음가짐으로 개발에 임해야하는지를 다루고 있다. 이 책을 읽고 나면, 왜 전문가 정신, 그리고 장인 정신이 강조되어야 하는지 이해할 수 있다. 이 글은 Java 언어를 베이스로 하지만, 언어나 프레임워크에 관계 없이 우리가 얻어가야할 원칙과 기본은 변하지 않았.. 더보기
• [오브젝트] 2장 객체지향 프로그래밍 사내 오브젝트 스터디에 중간에 합류하게 되었다. 객체지향이 무엇인지 아직 잘 모르지만 내가 작성한 코드를 다른 분이 이어서 작업하시는 상황이 생겼을 때, "이해하기 쉽다. 변경하기 쉽다"라고 여길 수 있는 좋은 코드 작성하고 싶다는 욕심에 참여하게 되었다. 스터디에서 활용하는 교재 는, "객체에게 적절한 역할과 책임을 부여하는 방법과, 유연하면서도 요구사항에 적절한 협력을 설계하는 방법"을 전달하는 것을 목적으로 한다. 현재 스터디 진도는 10장 이지만, 교재 전체의 흐름을 이해하고, '결합도', '응집도', '캡슐화' 등 낯선 용어에 익숙해지기 위해 2장만 따로 정리해보려고 한다. 2장에서 다루는 영화 예매 시스템 예제는 교재 전반에 이용된다고 소개되어 있어서, 그래도 2장은 미리 봐가야겠다 싶었다. .. 더보기
• [리팩터링 2판 - 기초편] 01장 ~ 04장 몰아보기 마틴파울러 리팩터링 2판 정주행 스터디 - 기초편 서론 처음부터 완벽한 설계를 갖추기보다는 개발을 진행하면서 지속적으로 설계한다. 시스템을 구축하는 과정에서 더 나은 설계가 무엇인지 배우게 된다. 1장은 설계가 조금 아쉬운 작은 프로그램을 리팩터링해서 더 나은 객체지향 프로그램으로 만드는 과정을 보여준다. 2장은 리팩터링의 일반 원칙, 정의, 당위성을 설명한다. 3장은 코드에서 나는 악취를 찾아내는 방법과 리팩터링을 통해 문제의 부분을 말끔히 제거하는 방법을 설명한다. 4장에는 테스트를 작성하는 방법을 수록했다. 특수한 예시 몇 개를 제외하고는 이 책에 등장하는 '클래스', '모듈', '함수' 등의 용어는 (자바스크립트 언어 모델이 아닌) 일반적인 프로그래밍 언어에서의 의미로 사용했다. + 마틴 파울러와.. 더보기
• [이펙티브 타입스크립트] 5장 any 다루기 이펙티브 타입스크립트 정주행 스터디 5주차 다른 프로그래밍 언어들과는 달리, 타입스크립트의 타입시스템은 점진적으로(gradually) 프로그램의 일부분에만 적용할 수 있다. 부분적이고 점진적인 마이그레이션을 위해 any 타입은 꼭 필요하다. any는 그만큼 강력하기 때문에 남용하게 될 여지가 있다. 이번 장에서는 any 타입을 어떻게 사용해야 현명하게 사용하는 것인지 알아보자. 38 좁은 범위에서만 쓰기 any를 사용하더라도 가능한 한 좁은 범위 내에서만 사용하면, 의도치 않게 타입 안정성을 잃는 일을 최소화할 수 있다. const config1: Config { a: 1, b: 2, c: { key: value // 에러, Foo 타입에 foo 프로퍼티가 필요하지만 Bar 타입에는 없습니다. } } c.. 더보기
• AWS 배포 가이드북 - EC2 편 들어가면서 아마존의 클라우드 서비스 AWS(Amazon Web Services)는 시장 점유율 32%에 달하는 클라우드 컴퓨팅 분야 1위 IaaS 서비스이다. (2위: Microsoft Azure 19%, 3위 Google Cloud 7%, 출처) AWS는 현재 시점으로 컴퓨팅, 스토리지, 네트워킹, 데이터베이스, 배포, 머신러닝 등 다양한 분야에서 무려 200개가 넘는 제품과 서비스를 제공하고 있다. 시장 점유율이 높은 만큼, 채용공고를 보다 보면 기술 스택을 이들 중 하나로 소개하거나, 혹은 아예 이를 사용한 경험을 우대사항으로 기록한 공고를 찾아볼 수 있다. github pages나 netlify, vercel 등의 SaaS 서비스로 편하게 배포할 수도 있지만, 편한 만큼 디테일하게 조작하기에는 한.. 더보기
• nestjs 네스트 서버 기초 하루 만에 끝내기 코드 작성에 필요한 딱 '기초'만 정리해보자. 시작하기 다음 명령어를 통해 쉽게 nest 프로젝트를 세팅할 수 있다. $ npm i -g @nestjs/cli $ nest new project-name 그러면 세팅 후 아래와 같은 파일들이 자동으로 생성된다. 각 모듈을 자체적인 전용 디렉토리에 보관하는 방식의 이 구조는 네스트에서 개발자들에게 권장하는 규칙이다. src app.controller.ts // route가 하나인 기본 컨트롤러 app.controller.spec.ts // 유닛테스트용 app.module.ts // 앱의 루트 모듈 app.service.ts // 메서드 하나인 기본 서비스 main.ts // 네스트 앱 인스턴스를 생성하기 위해 네스트의 핵심 함수 NestFactory를 사용하.. 더보기
• 2022 카카오 블라인드 공채 최종합격 후기 카카오 공채에 최종합격했다. 이후 지원하시는 누군가에게 조금이나마 도움이 되기를 바라면서 코딩테스트 준비 과정 및 면접 과정을 기록으로 남겨본다. 채용 접수 카카오 블라인드 채용 프로세스의 시작은 '프로그래머스'에서 코딩테스트 응시 신청부터 시작한다. 프로그래머스를 통해 지원했다. 이 단계에서 1순위와 2순위를 기입하게 되어있는데, 코딩테스트 결과에 따라 1순위 또는 2순위로 배정되어 본인의 희망순위를 잘 고려해서 적으면 된다. 나는 평소 가장 좋아하는 프로덕트인 카카오페이를 1순위로 쓰게 되었다. 1차 코딩테스트 전반적인 코딩테스트 준비 차원에서 7월부터 알고리즘 스터디를 시작했다. 프로그래머스 LEVEL2 문제를 매주 3문제 풀었다. 다 풀고 나서 LEVEL3 문제를 매주 2문제씩 풀었다. 같이 학습.. 더보기
• 엑셀 자동화 - 구글 스프레드시트 매크로로 데일리 플래너 만들기 + 2022.07.30.글 하단에 시트제작 강의안내 및 쿠폰코드 추가해두었습니다.  일정관리 플랫폼 유랑자로서 작년에도 이리저리 떠돌다 하반기에는 구글 스프레드시트를 위클리 플래너로 활용했었다. 월요일부터 일요일까지 한눈에 볼 수 있고 스크롤해서 전주랑 다음 주 일정을 볼 수 있어서 좋았다. 역시 뭔가 아쉬웠지만 나름대로 쓸 만했다. 이따금씩 반복적인 복붙이 필요했지만 신경 쓰일 정도는 아니었다. 올해 초, 우연히 이지영 스타강사님의 '30분 시간관리법'에 대해 듣고 흥미를 갖게 되었다. 사전기록은 최대한 러프하게 하고, 30분 단위로 시간을 어디에 썼는지 사후기록을 해서 낭비되는 시간을 점검하고 또 최소화할 수 있는 시간관리법이다. 내 일상에는 30분보다 호흡이 짧은 일들이 많아서 20분으로 적용해보고.. 더보기
• [성능최적화] 요청 사이즈 다이어트 프로젝트의 요청 크기 최적화 방법을 정리한 글입니다. 1. 이미지 요청 크기 줄이기 평균적으로 웹 페이지 용량에서 이미지가 차지하는 비율은 60% 이상인 점을 고려하면, 이미지 요청 사이즈를 개선하는 것도 요청 사이즈를 줄이는데 효과적인 방법일 수 있다. 프로젝트에서는 총 28개의 이미지 파일을 사용하고 있었다. 9월 이전까지는 이 이미지 파일들에 대한 최적화가 하나도 되어있지 않았었고, 이 때문에 사용성에도 문제가 있었다. 특히 로그인 페이지의 일러스트처럼 용량이 큰 이미지를 불러올 때면, 이미지를 받아오는데 너무 오래걸려서 깜-빡하고 이미지가 나중에 뜨는 현상이 나타났다. 최초에 이미지 파일을 준비할 때, '혹시나' 화질이 안좋아 보일까봐 원본 이미지에 2배 크기로 저장했는데, 이렇게 저장할 때 원본.. 더보기
• 웹 성능 핵심개념 - 크리티컬 렌더링 패스 🖐 버벅임(Jank) 멈춰! 대부분의 기기들은 1초에 60번 화면을 업데이트한다. 이 주기를 60Hz 라고 표현하고, 초당 프레임 60 즉, 60 fps(frames per second)라고도 표현한다. 브라우저가 프레임을 60번보다 적게 가져오면 사용자는 화면이 '버벅이고 있음'을 알아채고 시각적 불편함을 느끼게 된다. 그렇다면 1초에 60개의 프레임을 준비하려면, 얼마만큼의 시간동안 한 프레임을 준비해야 하는걸까? 1000ms 를 60개로 나누면 약 16ms이다. 그렇지만 브라우저가 이런저런 잡일도 처리해야해서 실제로는 10 ~ 12ms 만에 준비해야 한다. 🖼 프레임은 이렇게 만들어요 나의 앱의 프레임속도를 최적화 하기 위해서는, 브라우저가 프레임을 어떻게 렌더하는지부터 이해해야 한다. 브라우저의 .. 더보기
• 웹 접근성(Web Accessibility) 4대 원칙 웹 접근성(Web Accessibility)은 '장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장한다'는 개념이다. 누구나 정보를 공유할 수 있는 정보 공간, '월드 와이드 웹'에서 웹 접근성이란, 내가 창조하는 인터넷 공간이 차별적인 공간이 되지 않기 위해서는 신경 써야 하는 부분일 것이다. 웹 접근성은 법적 의무사항으로 보장되어 있기도 하다. 한국형 웹 콘텐츠 접근성 지침(KWCAG: Korean Web Content Accessibility Guidelines) 중 가장 최근에 개정된 2.1 버전에 소개된 4가지 대원칙이 제시되어있다. 이 내용들을 눈여겨봄으로써 앞으로 어떤 것을 신경 써야 하는지 간단하게나마 살펴보자. 원칙 1 인식성 (perceivab.. 더보기
• 순수(?) 리액트 앱에 webpack 설정하기 (without CRA) 레벨 3 팀프로젝트를 시작하면서 가장 먼저 맞닥뜨린 과제는 CRA 없이 개발환경을 setting 하는 것이었다. 레벨 2 기간 내내 편하게 써온 CRA를 사용하면 안 된다는 과제가 던져졌다. 🤔 CRA, 편한데 왜? CRA는 Create React App의 약자로, 초보자들도 쉽고 빠르게 개발환경을 세팅할 수 있도록 리액트 팀에서 제공하는 보일러 플레이트이다. 터미널에 아래와 같이 명령어 한 줄만 치면 기본적으로 필요한 패키지를 모두 포함한 프로젝트의 기본 뼈대를 만들어준다. npx create-react-app --use-npm 코치님들께서 CRA 사용을 제한하신 이유는 무엇일까? CRA를 사용하면 편하긴 하다. CRA 편한 것을 즐기려면 적어도 CRA가 무엇을 얼마나 해주는지는 알아야 할텐데 실상 그.. 더보기
• [React] 함수 컴포넌트를 위한 리액트 훅(hook) '리액트 훅(hook)'은 지금으로부터 2년 전('19)에 새로 추가된 리액트 API이다. '훅'이 무엇인지, 어떻게 사용하면 좋은지 정리해보자. (feat. 로이드의 수업!) hook의 등장배경 클래스 컴포넌트가 외면받은 이유 클래스 컴포넌트는 인스턴스의 프로퍼티로 상태를 갖도록 할 수 있고, 컴포넌트의 라이프사이클에 따라 생명주기 메서드도 활용할 수 있다는 확실한 장점이 있다. 그럼에도 클래스 컴포넌트가 외면 받은 이유는 클래스가 함수보다 복잡하기 때문이다. this 바인딩만 생각하더라도 클래스가 함수보다 복잡하다는 것은 반박할 수 없는 사실이다. 클래스의 복잡성은 컴포넌트 활용 및 재사용에 장벽이 되었다. 함수 컴포넌트, hook이라는 날개를 달다 사람들은 단순한 함수 컴포넌트를 찾기 시작했다. 함.. 더보기
• [번역] 성급한 추상화에 관하여 - AHA Programming (Kent C. Dodds) 번역 안내 이 글은 원본 영상을 @ysm0622 님의 추천으로 알게된 후, 발표자 Kent C. Dodds 님의 허락을 받고 번역하였습니다. AHA Programming 오늘은 당신이 이미 알고 있는 DRY 프로그래밍 원칙, WET 프로그래밍 원칙은 제쳐두고 AHA 프로그래밍에 대해서 얘기해보려고 합니다. 주) DRY: Don't Repeat Yourself WET: Write Everything Twice AHA: Avoid Hasty Abastraction 우리는 추상화(Abstractions)가 어떻게 시작되고 어떻게 끝나는지 라이프사이클을 살펴보고, 추상화를 신중하게 하는 것이 왜 중요한지에 대해 생각해볼 것입니다. 만들어진 예시이지만 그래도 충분히 공감하실 수 있을 거라 생각됩니다. 또, San.. 더보기
• [프로젝트매니징] 이슈 관리 & 일정 추정 도전기 이 글은 캡틴 포비의 강의 내용을 정리하고, 적용해본 경험을 담은 글입니다. 💬 여기서부터는 포비(박재성 개발자님)의 목소리로 읽어주세요 :) 우아한테크코스에서는 본과정 시작 전 입문 테스트 단계인 프리코스 때부터도 To Do List(a.k.a 구현기능목록)를 만드는 연습을 하게 된다. To Do List를 만드는 작업은 바로 이슈를 만드는 작업이라고도 할 수 있다. 이렇게 기능 목록을 작은 단위로 쪼개고 그들의 우선순위를 정하는 것은 상당히 중요한 '설계' 과정이다. 이슈를 어떻게 관리하는지는 굉장히 핵심적인 부분이고, 이슈관리를 잘하는 것은 후속작업을 위해서도 중요하다. 그러나 개발자들은 이슈를 제대로 관리하지 않고 바로 개발에 들어가는 경향이 있다. 프로젝트 시작에 앞서 어떻게 이슈를 관리하고 일.. 더보기
• [UX 발견하기] 화면 구성의 원칙 '아는 만큼 보인다'라는 말이 있다. 레벨 1 미션을 진행하면서 느낀 점은 UX(User Experience, 사용자 경험)에 대해 아는 것이 너무 없다는 것이었다. 내 의견은 너무 주관적이고, 내 경험은 너무 제한적이었다. 제품의 가치를 올리는, 좋은 UX를 만들려면 일단 뭐라도 좀 알아야겠다 싶었다. 매주 정해진 주제에 대해 심리 요소 또는 인지 과학 요소를 파악하고 유스케이스를 공유하는 스터디가 있으면 참 좋겠다 싶었다. 그리고 만들었다. 앞으로 11주간의 스터디를 통해 33가지 디자인 관점에서 세상을 다시금 바라보고 싶다. 그리고 단련된 습관과 근육으로 레벨3 프로젝트에 조금은 적용해볼 수 있기를 기대해본다. [1] 효율적인 계층구조를 고민하자. 인지과학 Insight 💫 마인드맵을 개발한 알란 .. 더보기
• 쉽게 쓰인 유튜브 API 튜토리얼 유튜브에서 제공하는 API를 이용하면 내가 만든 웹페이지에서 유튜브와 관련된 다양한 기능을 추가할 수 있다. '영상 검색하기'를 기준으로 유튜브 API 기본 사용법을 익혀보자. 1. API 키 발급부터 KEY 없이는 API를 쓸 수 없다! API를 사용하기 위해서는 먼저 key를 발급받아야 하고, key를 발급받기 위해선 구글 계정이 필요하다. 인증 없이는 대부분의 API를 사용할 수 없어서 구글 계정이 반드시 필요하다. 구글 계정이 준비되었다면 구글 개발자 콘솔(Google Dev Console) 로 접속하고 하단 왼쪽 그림과 같이 새 프로젝트를 생성한다. 만들기 버튼을 누르면 잠시의 로딩 끝에 하단 오른쪽 그림과 같이 프로젝트 생성이 완료된다. 'API 및 서비스 사용 설정'을 클릭하자. 'API 및.. 더보기
• 입력 폼(Form)에서 유의해야할 UI/UX 디자인 요소 프론트엔드에서 입력 폼(Form)을 넣을 때 고민해보면 좋을 UI/UX 디자인 요소를 간단히 정리해보자. 올바른 입력을 유도하려면 레이아웃을 잘 짜자 우선 사용자에게 몇 가지 데이터나 입력받는지, 그 데이터의 형식이 무엇인지 고려한다. 그리고 각 입력 데이터의 예상 너비까지 종합적으로 고려해서 레이아웃을 결정하도록 한다. tab키로 이동했을 때 흐름이 일관적이어야만 사용자가 더 쉽게 폼을 완성할 수 있다는 점에 유의한다. 왼쪽 위부터 입력 칸을 채우는 사용자에게 2 x 3 과 같은 레이아웃은 혼란을 줄 것이다. 따라서 입력받을 데이터가 여러 개라면, 입력필드를 한 줄로 정렬해야 한다. 정렬은 세로로 한 줄이 되도록 하는 것이 일반적이지만, 상황에 따라 가로로 정렬하기도 한다. 로또 당첨번호와 같이 항상 .. 더보기
• 협업을 위한 HTTP 기초 데이터를 주고받기 위해 다 같이 약속 🤙 월드와이드웹(www) 상에서 컴퓨터와 컴퓨터 간에 데이터를 주고받기 위해 전 세계적으로 약속한 방식이 있다. 이 과정은 다음과 같이 요약할 수 있다. 1. 클라이언트가 'HTTP 요청메세지'를 만든다. 2. Socket 라이브러리를 통해 IP와 포트를 연결한다. 3. 요청메세지에 제어정보를 더해 '패킷'이라는 단위로 포장을 마친다. 4. LAN 카드를 통해 패킷을 내보내, 지정한 IP 주소 및 포트에 패킷을 전달한다. 5. 패킷을 받은 서버는 요청 패킷 포장을 풀어 요청 메세지를 확인하고, 'HTTP 응답메세지'를 만든다. 6. 서버에서 클라이언트로 응답 패킷을 보낸다. 7. 응답 패킷을 받은 클라이언트는 포장을 풀고 응답 메세지를 확인한다. 이러한 약속을 네 가.. 더보기
• SQL 기초 & 자주쓰는 쿼리문 정리 SQL을 배워야하는 이유 데이터베이스와 SQL 우리는 일상 속에서 'DB' 또는 '데이터베이스'라는 단어를 어렵지 않게 접한다. 보통 '관리 목적으로 데이터를 모아놓은 것'을 의미할 때 사용한다. 이 '데이터베이스'는 언제부터 우리의 일상 속에 녹아들었을까? 1970년으로 거슬러 올라가 보자. 당시 대기업과 엔지니어들은 누구나 쉽게 데이터를 정리 정돈할 수 있는 전문적인 소프트웨어가 필요로 했다. 이러한 수요에 발맞춰, 영국의 컴퓨터 과학자, 에드거 테드(1923~2003)는 IBM에서 일하는 동안 데이터베이스 관리를 위한 모델을 만들었다. 그리고 그의 이론에 기반해서 여러 가지 관계형 데이터베이스가 등장하기 시작했다. 데이터베이스의 가장 핵심적인 기능은 'CRUD'이다. 각각 생성(Create), 조회.. 더보기
• JavaScript - 정규표현식(Regular Expression) 맛보기 오늘의 주제는 ✨정규표현식✨. 다른 사람들이 자유자재로 사용하는 것을 보니 정말 정말 유용해보였다.... 언제 한 번 날 잡고 정규표현식 구문을 학습해보려고 했는데 방학 첫 날을 맞이한 오늘이 그 날인가 보다! 정규표현식을 맛보기로 익혀보자. 정규표현식이란? 정규표현식(Regular Expression)은 문자열의 패턴을 편리하게 다룰 수 있도록 도와주는 '형식 언어'라고 한다. 여러 텍스트 편집기와 프로그래밍 언어에서 정규표현식을 지원한다. regexr.com/ 이 사이트에서 편하게 테스트해볼 수 있다. JavaScript는 ES3부터 정규표현식을 지원하고 있다. 정규표현식은 문자열의 특정 패턴을 찾아 추출하거나 치환할 수 있도록 도와주기 때문에, 잘 활용하면 코드를 더 깔끔하게 작성할 수 있다. 적재.. 더보기
• JavaScript - 값(value), 식(expression), 문(statement) 코치님(포코)의 추천키워드, 값 식 문. 많이 들어봤고 알고있다고 생각했지만 막상 설명하려고 하면 어려운 개념이다. 값, 식, 문의 기초개념을 정확히 이해하고 더 나은 코드를 작성해보자. 값 Value a value is the representation of some entity that can be manipulated by a program. '값'이란 프로그램이 조작할 수 있는 어떤 표현이다. '값'은 문자열, 문자, 숫자 처럼 어떤 데이터 형식도 가질 수 있다. '값'을 L-Value와 R-Value로 나누기도 한다. 대입연산자 (=)를 기준으로 왼쪽에 있는 L-Value, 오른쪽에 있는 R-Value로 나누는 것이다. L-Value는 메모리 주소을 가지고 있어 식별자를 통해 프로그래밍으로 컨트.. 더보기