윤민상 블로그

리팩터링 원칙 리팩터링 리팩터링 하는데 정의가 무엇일까? 정의는 다음과 같다. 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 여기서 겉보기 동작은 그대로 유지한 채. 라는게 중요하다. 성능을 개선하고 기능을 추가하는 거은 리팩터링이 아니다. 우리는 커밋을 할때도 기능 추가와 리팩터링 두 개의 모자를 구분해서 바꿔써야한다. 대부분의 회사에서 하는일은 유지보수다. 그리고 기능추가를 하려고 하는데 코드가 지저분할 경우가 있을 것이다. 그럴때는 먼저 리팩터링을 하자. 대단한 리팩터링을 얘기하는 것이 아니다. 함수가 좀 크다면 함수를 나누고 변수명이 모호하다면 변수명을 바꾸고 이런 기본적인 것들이라도 먼저 적용하면 훨씬 깔끔해진다. 이 이후에 코드를 보면..

배경 라이브러리없이 밑바닥부터 개발하는 경험은 정말 소중하다. 1년전 우아한테크캠프를 통해서 이를 배웠으며 한번씩 기회가 될때마다 공부해왔다. 그리고 이제 좀 쓸만한? 리액트 비스무리한 라이브러리를 만든것 같아서 글을 적는다.(참고로 컴포넌트에 관한 3번째 글이다...) 사전지식 리액트를 만들어야하는데 리액트의 동작방식을 몰라서는 안된다. 최소한 공식문서는 정독하고 혼자서 가볍게라도 만들어보는 걸 추천한다. 이미 나와있는 자료들을 보고 내가 새롭게 만들어보는것도 좋은 방법이지만 아무것도 머리속에 넣지 않고서 머리를 쥐어뜯으면서 생각해보는 것이 더 도움이 된다고 생각한다. best practive를 찾아서 공부하는 건 좋은 방법이지만 그것만 쫓아서는 좋은 개발자가 될 수 없다고 생각한다. 혼자서 코딩해보고..

배경 리팩터링2라는 책을 예전부터 알고 있었다. 개발바닥의 이동욱님을 통해서 알게되었고 꼭 스터디를 열어서 공부해야겠다고 생각했다. (클린코드, 함께 자라기, 객체지향의 사실과 오해, 오브젝트 등도 기회가 있다면 하고싶다.) 친구랑 우연히 얘기하다가 둘다 이 책으로 스터디를 하고 싶어한다는 것을 알게 되었고 스터디를 시작하게 되었다. 그리고 회사에서도 이 얘기를 하자 같이 하고 싶다고 한 두분이 있었고 회사 동료분의 친구까지 합쳐서 5명이 스터디를 하게 되었다. 이 책을 읽는 이유 사실 할 공부도 책도 너무 많다. 그 많은 책중에서 리팩터링이라는 책을 선택했다. 그 이유는 모두가 리팩터링이라는 것이 꼭 필요하다고 생각하기 때문이다. 특히 회사를 다니면 엄청 공감하게 된다. 작은 프로젝트에서는 그냥 하면 ..

컴포넌트란 프론트엔드 개발자라면 컴포넌트라는 말을 들어봤을 것이다. 컴포넌트가 뭘까?? 간단하게 말하면 컴포넌트는 독립적인 단위 모듈이다. 리액트를 예시로 들면 컴포넌트를 여러개 만들고 이걸 조합해서 하나의 페이지를 만든다. 이게 기본적인 설명의 전부다. https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/ 컴포넌트를 만드는 방법 간단하게 생각해보기 정책, 디자인, 백엔드 등의 사전작업이 모두 이루어졌고 새롭게 프론트엔드 프로젝트를 시작한다고 가정해보자. 이제 컴포넌트 관점에서 어떻게 진행을 해야할지 생각해보자. 아무리 작은 규모의 프로젝트라고 할지라도 버튼, 인풋, 모달 등은 존재한다. 그리고 이것들은 많은 화면에서 비슷..

강의 내용 이번 강의는 테트리스 게임로직을 만들거라는 생각과 달리 처음부터 다시 구현한다. 당연히 시간이 부족하기 때문에 이전 강의에서 설명했던 것들은 메소드명만 적거나 대충 넘어가고 개선할부분을 알려준다. 그리고 디자인패턴도 조금씩 얘기한다. 템플릿 메소드 패턴 템플릿 메소드 패턴이란 특정 작업을 처리하는 일부분을 서브 클래스로 캡슐화하여 전체적인 구조는 바꾸지 않으면서 특정 단계에서 수행하는 내용을 바꾸는 패턴이다. 쉽게 말해서 추상클래스를 만들고 상속받은 하위 클래스에서 오버라이드를 하면 된다. 그런데 자바스크립트에서는 이걸 언어적으로 지원하지 않는다. 추상클래스는 딱히 만들방법이 없고(?) 오버라이드는 자식메소드앞에 _를 붙여서 구현하기도 한다. 그런데 이는 명시적이지 않다. 언어에서 지원을 하지..

강의 내용 컴마 연산자 1. 함수의 인자를 구분하는 구분자 2. 지연 연산자. a,b,c의 결과는 c 3. var, let, const에서 구분자 테트리스 패널을 어떻게 나눌것인지. 자바스크립트는 안정화가 끝나면 c로 내려간다. 결국 표준을 쓰는게 이기는거다. ex) proxy, 생성자함수 즉 for문이 forEach보다 빠르니까 for문을 쓴다?? 말도 안되는 소리다. 지금 우리 레벨에서는 그 둘의 성능을 고려한 프로젝트를 하지도 않고 결국 내부 엔진이 발전되면 표준(foreach)이 빠르다. map쓰면 객체만드니까 느리다고?? 그냥 써라. 어차피 표준이 결국 빠르다. 그리고 너넨 이거 고민할 레벨이 아니다.(라고 강사님이 말했다) 스터디 일단 나는 객체지향에 대해서 생각했다. 각자 스터디에 임하는 마..

배경 사이드프로젝트를 하고 싶은 마음이 항상 있었다. 그러던와중에 만들고 싶은 프로젝트가 생겨버렸다. 그건 바로 모든 개발자들이 처음에 만드는 투두리스트다. 회사에서 이것저것 일을 하고 멘션을 보다보면 내가 뭘 하고 있는지 오늘 뭘 했는지 잊어버리는 경우가 많았다. 그래서 회사에 데일리 리뷰를 올렸는데(우리 회사에서는 각자 데일리 리뷰를 올리면 동료들이 의견을 제시하기도 하고 응원을 하기도 한다. 강요아님) 투두리스트를 작성하는게 어떠냐는 제안을 받았다. 오늘 적어봤는데 생각보다 만족스러웠다. 그런데 노트에 적다보니 조금 아쉬워서 사이트를 찾아볼까 하다가 그냥 내가 만들기로 했다. 대략적인 계획 일단 투두리스트를 그냥 대충 만들 생각은 없다. 시중에 나와있는 것들이 디자인이며 기능이며 여러가지로 더 좋을..

객체지향 설명 본론에 앞서 객체지향에서 필수적으로 알아야할 것 세가지를 설명한다. 1 . 추상화 1. 카테고라이즈 : 분류를 일정한 기준을 통해 묶는 것 분류.. classification, 예전에 쓴 프로토타입글이 생각난다. 객체지향에서 절대 빠트릴 수 없는 것 중 한가지다. 어른과 아이, 여자와 남자, 초급자와 중급자처럼 말이다. 이렇게 예시를 드니 좀 감이 안올수 있어서 실제 코딩할 때 예시를 들어보겠다. 블로그에는 관리자와 참여자로 나눌 수 있다. 너무 쉬워보이나?? 개인적으로는 주니어기준으로 쉽지 않은 일이라고 생각한다. 실제 회사에서 코딩을 하다보면 분류를 하는 방법이 굉장히 다양하게 나오고 어떻게 분류를 하느냐에 따라서 코드 퀄리티가 달라진다. 절대 쉬운일은 아니다. 무의식중에 사용하고 있지..