Quiz1

// 본인이 가장 잘하는 언어로(JS, Python 등등) 더러운 코드를 깨끗한 코드로 
// 리팩토링하는 예시를 만들어보세요. 현재 파일은 JS 로 되어있지만. 자유롭게 다른 언어로 변경해주세요. 

// 원칙 1. 함수는 한가지를 해야 한다


// Before 😣
function changeBackgroundColor(){
    const timeSliderPosition = 0;
    document.getElementById("timeslider").onchange = function () {
      timeSliderPosition = event.srcElement.value;
      let upperBgColor='', downBgColor='';
      
      if (timeSliderPosition < 100) {
        upperBgColor = 'pink';
        downBgColor = 'blue';
      }
      else if (timeSliderPosition < 200) {
        upperBgColor = 'orange';
        downBgColor = 'green';
      }
      else if (timeSliderPosition < 300) {
        upperBgColor = 'yellow';
        downBgColor = 'tomato';
      }
      
      document.body.style.setProperty("--upper-bg-color", upperBgColor);
      document.body.style.setProperty("--down-bg-color", downBgColor);

      
      if (buttonpressed)
        light.color.setHex(0xFFFFFF);
      else
        light.color.setHex(0xAAAAFF);
      
      // set light position
      light.position.set(x, 30, 25);
  };
  render();
}

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.
바탕색을 바꾸는 기능과 rendering하는 기능으로 분리한다. light와 관련된 변화는 다른 함수로 뺀다
  

// After 😎
function changeBackgroundColorAndRenderForTimeSliderPosition(){
	backGroundColorChangeForSliderPosition()
    render()
}

function backGroundColorChangeForSliderPosition(){
	const timeSliderPosition = 0;
    document.getElementById("timeslider").onchange = function () {
      timeSliderPosition = event.srcElement.value;
      
      let [upperColor, lowerColor] = selectUpperLowerColor(timeSliderPosition);
      
      document.body.style.setProperty("--upper-bg-color", upperColor);
      document.body.style.setProperty("--down-bg-color", lowerColor);
  };
}

function selectUpperLowerColor(position){
	let upperColor = '', lowerColor = ''
    
	if (position < 100){
    	upperColor = 'pink'
        lowerColor = 'blue'
    }else if (position < 200 ){
    	upperColor = 'orange'
        lowerColor = 'green'
    }else if (timeSliderPosition < 300) {
        upperColor = 'yellow';
        lowerColor = 'tomato';
    }
    return [upperColor, lowerColor]
}

  
// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// 바탕색을 바꾸는 기능과 rendering하는 기능이 다르기 때문에 다른 함수를 쓰고 
같은 level로 맞추기 위해 각각 함수로 묶었다. 그리고 ligth color 변경은 다른 함수로 뺐다

Quiz2

// 본인이 가장 잘하는 언어로(JS, Python 등등) 더러운 코드를 깨끗한 코드로 
// 리팩토링하는 예시를 만들어보세요. 현재 파일은 JS 로 되어있지만. 자유롭게 다른 언어로 변경해주세요. 

// 원칙 3. 한 개념에 한 단어를 사용하라, 불필요한 맥락을 없애라


// Before 😣
class NomadCoderUser {
  private String ncuId;
  private String ncuPwd;
  private String ncuNickname;
  private String ncuEmail;

  public NomadCoderUesr() {};
  
  public void updateNcuPwd(String ncuPwd) {
    this.ncuPwd = ncuPwd;
  };
  public void modifyNcuNickname(String ncuNickname) {
    this.ncuNickname = ncuNickname;
  };
  public void changeEmail(String ncuEmail) {
    this.ncuEmail = ncuEmail;
  };
}

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.

  

// After 😎
class nomadCoderUser {
	private String id;
    private String password;
    private String nickname;
    private String email;
    
    public NomadCoderUser(){};
    
    public void setPassword(String password){
    	this.password = password;
    }
    
    public void setNickname(String nickname){
    	this.nickname = nickname;
    }
    
    public void setEmail(String email){
    	this.email = email;
    }
}

  
// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

Quiz3

// 본인이 가장 잘하는 언어로(JS, Python 등등) 더러운 코드를 깨끗한 코드로 
// 리팩토링하는 예시를 만들어보세요. 현재 파일은 JS 로 되어있지만. 자유롭게 다른 언어로 변경해주세요. 

// 원칙 3. 오류코드보다는 예외를 사용하자

// Before 😣
public Status deletePage(Page page) {
    if(deletePage(page) == E_OK) {
        if(registry.deleteReference(page.name) == E_OK) {
            if(configKeys.deleteKey(page.name.makeKey()) == E_OK) {
                log.info("page deleted");
                return E_OK;
            } else {
                log.error("config key not deleted");
            }
        } else {
            log.error("reference not deleted");
        }
    } else {
        log.error("page not deleted");
    }
    return E_ERROR;
}

// 무엇을 고치려고 하는지, 고치려는 문제가 무엇인지 알려주세요.

  

// After 😎
public Status deletePage(Page page) {
	try {
    	deletePage(page);
        registry.deleteReference(page.name);
        configKeys.deleteKey(page.name.makeKey());
    }catch(Exception ex) {
    	log.error(ex.getMessage());
    }
    
    
}


  
// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.

'노마드 코더' 카테고리의 다른 글

클린코드 Mission01  (0) 2024.10.18

QUIZ 01.

blastOFF는 로켓 발사를 의미. 86400000은 하루의 밀리초 (milliseconds) 의미

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

// GOOD 😎
// 위 코드를 깨끗하게 다시 작성해 주세요.
const MILLISECOND_FOR_DAY = 86400000;
setTimeout(blastOff, MILLISECOND_FOR_DAY);



// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// 큰 숫자를 MILLISECOND_FOR_DAY로 변경했다.
// 숫자 자체가 무엇을 의미하는지 바로 알 수 없어서 
// 숫자가 의미하는 것이 무엇인지 변수로 표현해주었다

QUIZ 02.

const yyyymmdstr = moment().format("YYYY/MM/DD");

// GOOD 😎
// 위 코드를 깨끗하게 다시 작성해 주세요.
const CurrentDate = moment().format("YYYY/MM/DD");




// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// yyyymmdstr의 변수명을 통해서 Date를 나타내는 문자열이라는 것은 알 수 있지만
// 변수명을 통해서 무엇을 의미하는지 알 수 없었다.
// 코드를 보다가 변수명으로 이해가 되지 않아 선언부로 돌아와야 할 것 같아서
// 변수명을 변경했다.
// 그리고 str이라고 표현할 필요성을 느끼지 못했다.

QUIZ 03.

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

// GOOD 😎
// 위 코드를 깨끗하게 다시 작성해 주세요.
const Car = {
  maker: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(color) {
  Car.color = color;
}



// 어떻게 고쳤는지, 사례에서 무엇을 배워야 하는지 설명해주세요.
// Car 내부의 요소들에서 car를 없앴고 paintCar의 인수에서 car를 제거했다.
// Car 내부에 있는 요소들은 결국 Car에 대한 것이어서 접근할 때 Car. 와 같이 사용할 것이라
// 중복해서 사용할 필요성을 느끼지 못해서 변경했다.
// 전역변수로 선언되어 있어서 paintCar에서 인수로 받을 필요가 없을 것 같았다.

'노마드 코더' 카테고리의 다른 글

클린코드 Mission2  (1) 2024.10.31

+ Recent posts