코딩정비소 코딩정비소

소프트웨어에서 이름은 어디나 쓰인다. 이름을 잘 지으면 여러모로 편한다. 의도를 분명히 밝혀라 그릇된 정보를 피하라 의미 있게 구분하라 발음하기 쉬운 이름을 사용하라 검색하기 쉬운 이름을 사용하라 인코딩을 피하라 자신의 기억력을 자랑하지 마라 기발한 이름은 피해라 한 개념에 한 단어를 사용해라 해법 영역에서 가져온 이름을 사용해라 문제 영역에서 가져온 이름을 사용해라 의미 있는 맥락을 추가하라 불필요한 맥락을 없애라

우리 모두는 자신이 짠 쓰레기 코드를 쳐다보며 나중에 손보겠다고 생각한 경험이 있다. ...중략... 다시 돌아와 정리하겠다고 다짐했었다. 나중은 결코 오지 않는다. 맞다... 구현하기에 급급해 쓰레기 코드를 양산해 냈다. 어쩔수 없었다. 이렇게 해야만 했다. 다른 방법은 보이지 않았다. 나중에 고치기로 마음먹었었다. 다른 소스코드들을 통해 좋은 소스코드를 발견했고 수정하고 싶었다. 하지만 QA중이기에 함부로 고치기가 무서웠다. 분명히 체크했는데 왜 안되죠? 라는 소리를 듣기 싫었다. 어떻게 하면 한번에 좋은 코드를 작성할수 있을까? 시간을 들여 깨끗한 코드를 만드는 노력이 비용을 점감하는 방법일 뿐 아니라 전문가로써 살아남는 길이라는 사실을 인정하리라. "깨끗한 코드를 어떻게 작성할까?", 깨끗한 코드..

문제 이해하기 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 데이터 추상화 0 ~ 9 까지 들어있는 배열을 만들어 선택되지 않는 값이 무엇인지 발견하도록 하자. let list = [0,1,2,3,4,5,6,7,8,9]; 알고리즘 정수 배열 numbers를 순환하면서 list의 선택된 값은 0을 할당 list 값을 더한 값을 리턴한다. function solution(numbers) { let list = [0,1,2,3,4,5,6,7,8,9] var answer = 0; numbers.forEach( ele => { list[..

문제 이해하기 크레인을 모두 작동시켜 사라진 인형의 개수를 return 해야한다. (필자는 몇번 사라졌는지로 잘못이해하여 뻘짓했다.) 데이터 추상화 크레인을 작동시키는 함수로 먼저 추상화하자. 매개 변수인 moves를 활용하자. 자료구조 stack에 크레인으로 잡은 값을 넣자. - stack의 pop을 이용하여 쉽게 구현을 할수 있기에.. 알고리즘 moves.forEach()를 사용하여 크레인을 작동시킨다. 크레인은 board를 가로가 아닌 세로로 동작하기 하기 때문에 세로로 반복문을 돌려준다. 크레인으로 뽑힌 값, stack에서 pop() 한 값을 비교한다. 같지 않으면 push 하고, 같다면 리턴하여 무시하자. function solution(board, moves) { var answer = 0; ..

문제 이해하기 키패드를 누른 엄지손가락이 왼손인지 오른손인지를 나타내야한다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락(Left)을 사용. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락(Right)을 사용. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락(Left, Right)을 사용. 만약 두 엄지손가락의 거리가 같다면, 오른손잡이는 오른손 엄지손가락, 왼손잡이는 왼손 엄지손가락을 사용합니다. 데이터 추상화 *, 0, # 을 10, 12, 13으로 추상화 함 각 번호 별로 어떤 손으로 ..

event.preventDefault? event.stoppropagation? 자바스크트립에서 이벤트 바인딩 시에 많이 보이던 함수였다. 저 둘을 이전부터 많이 사용되었고, 앞으로도 많이 사용될 거라 생각되어. 나중에 시간 되면 분석해보기로 했었던 찰나. 오늘 개발하면서 저 둘의 개념을 혼동하여, 30분 동안이나 삽질을 했다. 이참에 다시 정리해보기로 했다. event? 먼저 event가 뭘까? 모든 동작은 event를 받아서 동작한다고 생각하면된다. 이벤트에도 종류가 있는데 tag별로 이벤트가 다르다. form event, click event, 특정 이벤트가 발생하면, 이벤트를 구독(참조)하여 동작을 지시하는 방식으로 되어있다. 쉽게 말해서 발생한 이벤트를 코드에 알려줘서, 동작하는 것을 이벤트라고..

목표 JS 클래스 추가/삭제를 알아야하는 이유 JS 클래스 추가/삭제 하는 방법 JS 클래스 추가/삭제를 알아야하는 이유 실무에서는 UI 개발자가 UI를 class 형식으로 전달하여 사용하기 때문 특정 상황에 class를 추가, 삭제하여 UI를 변경 해야하기 때문 JS 클래스 추가 - 클래스 추가시에 사용 // 클래스 추가 div.classList.add('good', 'love'); JS 클래스 삭제 - 클래스 삭제시에 사용 // 클래스 삭제 div.classList.remove('love'); JS 클래스 덮어쓰기 - 기존에 있는 클래스를 다지우고 새로 등록시에 사용 // 클래스 덮어쓰기 div.className = 'good'; JS 특정 클래스 변경 - on/off로 클래스 변경시에 많이사용 //..