Nerd

선언적 프로그래밍과 명령적 프로그래밍

Nerd — Sun, 20 Aug 2023 19:05:27 +0900

선언적 프로그래밍과 명령적 프로그래밍

명령형 프로그래밍은 어떤 일을 어떻게 할 것인가에 관한 것이고, 선언적 프로그래밍은 무엇을 할 것인가에 관한 것입니다.

example

식당에 갔습니다.

명령형 접근 (How) : 13번 이라고 적힌 표지판 아래에 있는 테이블이 비어있네요. 우리는 저기로 걸어가서 테이블에 앉도록 하겠습니다.
선언형 접근 : 2명 자리주세요.

명령형 방식은 실제로 자리에 어떻게 앉을지에 관심이 있습니다. 이를 위해서 어떻게 테이블을 잡아서 자리에 앉을지에 관해, 필요한 단계들을 절차적으로 나열해야 합니다.

반면, 선언형 방식은 오로지 내가 무엇을 원하는지에 관심이 있습니다.
자동차를 예로 들면 수동 스틱은 명령형 방식에 속하고 오토 스틱은 선언적 방식에 속합니다.

실제 코드로 예씨를 들기전에, 자리에 앉는 방법은 누가 알지와 같은 의문이 생길 수 있습니다.
이에 대한 대답은, 선언적 방식의 접근을 위해서는 명령형 방식으로 어떻게 접근하는가에 관한 내용이 먼저 추상화 되어있어야 합니다.

직원에게 사용했던 선언형 접근에는 직원이 테이블에 어떻게 앉는가에 관한 모든 명령형 단계들을 알고 있다는 가정이 뒷받침 되어 있습니다.
오토 스틱 자동차는 변속 기어에 대해 일종의 추상화 계층을 가지고 있습니다.
많은 선언적 접근 방식들의 기반에는 일종의 명령적 추상화가 존재합니다.

명령적 프로그래밍

function double (arr) {
const results = []
for (let i = 0; i < arr.length; i++) {
 results.push(arr[i] * 2)
}
return results
}

function add (arr) {
let result = 0
for (let i = 0; i < arr.length; i++) {
 result += arr[i]
}
return result
}

$('#btn').click(function() {
$(this).toggleClass('highlight')
$(this).text() === 'Add Highlight'
 ? $(this).text('Remove Highlight')
 : $(this).text('Add Highlight')
})

위 코드는 어떻게 처리하는지에 관해 묘사하고 있습니다.

명시적으로 배열을 반복하거나, 우리가 원하는 기능을 수행하기 위한 단계뜰을 명시적으로 나열하고 있습니다.

각각의 예시에서 상태의 일부를 변경하고 있습니다.

처음 두 예시에서는 result 라는 변수를 만들어 그것을 계속해서 수정하고 있습니다.

세 번째 예시에서는 아무런 변수도 없지만, 여전히 DOM 자체에 state가 존재하고 있고 DOM의 state를 수정하고 있습니다.

선언적 프로그래밍

function double (arr) { return arr.map((item) => item * 2) }

function add (arr) {  
    return arr.reduce((prev, current) => prev + current, 0)  
}

```
<Btn  
onToggleHighlight={this.handleToggleHighlight}  
highlight={this.state.highlight}
{this.state.buttonText}
</Btn>
```
처음 두 예제에서, 자바스크립트의 내장 함수인 map과 reduce를 활용한 것을 보면, 명령적인 코드를 작성하지 않고도 명령적인 코드를 작성한 것과 같은 결과를 얻을 수 있습니다.
가장 효율적인 선언적 프로그래밍 방법은 명령적으로 작성된 코드를 추상화하는 것입니다.

해당 예제들은 우리가 어떻게 처리할지보다, 무엇을 원하는지를 설명합니다.

우리는 map과 reduce가 어떻게 구현되어있는지는 전혀 알지도 못하고, 관심도 없습니다.

또한 아무런 state도 변경하지 않습니다.

모든 변경들은 map 과 reduce 내부에 추상화 되어있습니다.

참고 사이트

Imperative vs Declartive Programming

TIL]2023/01/28

Nerd — Sun, 29 Jan 2023 02:59:34 +0900

아침에 일어나 간단히 집안일을 한 후 오늘 어떤 공부를 할지 생각하는 시간을 가졌습니다.

최근 본격적인 재취업을 준비하면서 면접을 보거나 각 전형에 대한 것을 하는 날이 많아

TIL을 제대로 쓰지 못했습니다.

오늘은 이론적인 공부를 진행해야겠다는 생각에 그동안 공부하면서 정리했던 내용을

다시 복습하면서 읽어보고 제대로 알고 있는지 점검하는 시간을 가졌습니다.

확실히 복습을 하면 현재 놓치고 있는 부분에 대해 바로잡을 수 있어 좋은 것 같습니다.

복습은 꾸준히 하고 있지만 전체적인 복습을 하다보니 확실히 많은 도움이 된 것 같습니다.

복습이 끝난 후 잠시 개인적인 일정이 있어 외출을 했습니다.

집에 하루종일 있다가 잠시 외출을 하니 확실히 환기되는 느낌이 있었습니다.

집에 도착 후 내일 공부해야 할 것들을 계획했습니다.

우선 이론적인 부분을 전체적으로 한번 더 복습을 하고

웹 개발자를 위한 자바스크립트 스터디 준비를 진행하고 코어 자바스크립트를 읽을 예정입니다.

TIL]2022/01/11

Nerd — Thu, 12 Jan 2023 01:20:13 +0900

공부방에 도착 후 컴포넌트 상세 조회 작업을 진행했습니다.

현재 백엔드가 express에서 코틀린으로 이사 작업 중이라 api가 나오기는 힘든 상황이었고

msw를 통해 컴포넌트 상세 조회를 해야 하는데

어떤 데이터가 필요할지 설계하는 시간을 가졌는데

생각보다 시간이 오래 걸렸습니다.

우선 동적으로 suspack에서 받아오고 그 후 스타일을 수정할 수 있어야 했습니다.

스타일을 수정하려면 그에 맞는 Form이 나와야 했고 Form도 동적으로 생성해야 하기 때문에

api 호출로 받은 response가 중요했습니다.

따라서 시간이 걸리더라도 견고한 설계가 필요했습니다.

컴포넌트 상세조회 작업을 한 후 스터디를 진행했습니다.

String과 new String에 대해 알아보는 시간을 가졌습니다.

핵심은 다음과 같습니다.

String()과 new String()은 서로 다른 결과를 생성합니다.

String()은 문자열을 생성하지만 객체 생성 프로 스세인 new를 사용하면

String 유형의 인스턴스(객체)를 생성합니다.

let s_prim = String('foo');
let s_obj = new String(s_prim);

console.log(typeof s_prim); // string
console.log(typeof s_obj); // object
s_prime instanceof String; // is false
s_obj instanceof String; // is true

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

The String object is used to represent and manipulate a sequence of characters.

developer.mozilla.org

스터디가 끝난 후 알고리즘을 푸는 시간을 가졌는데 쉬운 문제임에도 시간이 오래 걸렸습니다.

알고리즘을 풀 때마다 알고리즘을 열심히 해야겠다는 생각이 드는 것 같습니다.

집에 도착 후 알고리즘 기초 문제를 푸는 시간을 가졌는데 한 문제를 여러 방식으로 풀며

고차 함수를 유연하게 쓰고 단순 반복문으로 푸는 것이 아닌 재귀 함수를 활용해서 문제를 풀다 보니

확실히 문제를 접근하는 시야가 넓어지는 것 같아 좋은 것 같습니다.

TIL] 2022/01/10

Nerd — Wed, 11 Jan 2023 01:31:29 +0900

오늘은 새로운 분이 공부방에 오셔서

오전에 온보딩을 진행했습니다.

온보딩을 진행하면서 느낀 점은 온보딩 자료가 전혀 없는 상태에서

갑작스럽게 온보딩을 진행하다보니 횡설수설하게 되었고

핵심적인 내용을 전달하고 싶었는데 제대로 전달하지 못한 것 같아 아쉬운 마음이 컸습니다.

점심을 먹은 후 프론트엔드끼리 티켓을 나누는 회의를 진행했습니다.

티켓을 나누는데 조금 애매한 부분이 있었고 해야 할 일을 명확히 정의하기 힘들어

윤석 님께 해야 할 일에 대해 한번 여쭤보는 시간을 가졌고

이번 주 해야할 일은 어제 세운 계획의 중점은 컴포넌트 미리 보기였지만

컴포넌트 미리 보기의 검증이 생각보다 일찍 끝났고

컴포넌트 미리 보기가 금방 끝날 것 같아 컴포넌트 예제를 만드는 게 중점이 되었습니다.

회의가 끝난 후 자바스크립트 스터디가 시작되었고

오늘은 지금까지 클래스에 대해 스터디한 부분을 정리하는 시간을 가졌습니다.

클래스에 대한 부분을 정리하면서 스터디를 진행하며 이해하지 못했던 부분들이

이해가 가는 부분들이 꽤나 생겼고 다시 봐도 이해가 되지 않는 부분들도 있었습니다.

스터디를 진행하면서 이해가 도저히 안 되었던 부분들도 복습을 진행하니 이해가 된 것에

복습의 중요성을 한번 더 깨달았습니다.

스터디가 끝난 후 컴포넌트 상세 미리 보기 작업을 진행했고

상세 페이지에서 수정도 가능하니 수정까지 검증하는 작업을 진행했습니다.

집에 도착 후 잠시 휴식을 취하다가 웹 개발자를 위한 자바스크립트의 모든 것 스터디가 시작되었고

클래스 부분에 대한 스터디가 시작되었습니다.

확실히 함께 공부하는 분들의 지식이 깊이감이 있어서인지

복습을 해도 이해가 안 갔었던 부분들도 스터디원 분들과 맹교수님의 설명을 들으니

이해가 가기 시작했습니다.

하지만 생각보다 깊은 토론 레벨에 분발해서 열심히 공부해 토론에 참가할 정도의 실력을 길러야겠다는 생각이 들었습니다.

TIL]2022/01/09

Nerd — Tue, 10 Jan 2023 01:25:44 +0900

아침에 공부방에 도착 후 오늘 해야 할 일을 계획하는 시간을 가졌습니다.

우선 미리보기 기능을 구현해야겠다는 생각이 들었고

미리 보기 기능을 구현하기 위해 웹팩 공식문서와 next 공식문서를 살펴보는 시간을 가지다 보니

어느덧, 점심시간이 되었습니다.

점심을 먹은 후 팀원들과 미리 보기를 어떻게 구현해야 할지 상의를 하는데

너무나도 쉽게 라이브러리를 업데이트하니 미리 보기가 정상적으로 동작했습니다...

주말 간 버전이 업데이트되면서 미리 보기가 컴포넌트를 정상적으로 불러올 수 있었고

미리보기 또한 컴포넌트를 불러오는 데 성공하여 정상적으로 잘 나오게 된 것이었습니다.

한 가지 컴포넌트에 대한 미리 보기를 구현한 후 스프린트 계획 회의가 진행되었고

이번 주 스프린트에 대해 이야기하는 시간을 가졌습니다.

이번 주 스프린트는 컴포넌트를 동적으로 가져와 미리보기를 정상적으로 나오게 하는 것으로 결정되었고

미리보기 뿐만 아니라 컴포넌트 수정작업까지 진행하기로 결정이 되었습니다.

하지만 현재 백엔드가 node에서 kotlin으로 이사 중이라 api가 나오기는 힘들어 보였고

프런트엔드끼리 회의를 한 결과 msw로 우선 수정기능까지 구현하는 것으로 결정되었습니다.

스프린트 계획 회의가 끝난 후 자바스크립트 스터디가 진행되었습니다.

클래스에 대해 공부한 내용들을 나눴는데 생각보다 어려운 내용이었지만

확실히 혼자 공부하는 것보다 다른 분들의 의견을 들어보니

이해가 잘 되지 않았던 부분들이 궁금증이 해소되었습니다.

스터디가 끝난 후 알고리즘을 푸는 시간을 가졌는데 알고리즘 문제를 푸는 데는 성공했지만

코드가 너무 마음에 들지 않아 난이도가 쉬운 문제들을 여러 방식으로 풀고

고차 함수를 유연하게 사용할 수 있도록 연습을 많이 해야겠다는 생각이 들었습니다.

알고리즘 문제를 푼 후 퇴근을 하였고 집에 도착 후

알고리즘 기초 문제들을 풀기 시작했습니다.

기초 문제는 매일 푸는 방식으로 풀면 정말 쉬워 고차 함수를 쓰는 연습을 하기에 정말 좋은 것 같습니다.

또한, 여러 방법으로 문제를 풀면서 문제를 보는 관점을 넓힐 수 있었습니다.

알고리즘 문제들을 푼 후, 코어 자바스크립트 책을 읽었습니다.

현재 코어 자바스크립트 책은 기초 부분이지만 얻어가는 부분이 정말 많은 것 같습니다.

앞으로는 오늘처럼 알고리즘 기초 문제 1시간 / 코어 자바스크립트 1시간을 공부하는 시간을 가져야겠다는

생각이 드는 하루였습니다.

TIL]2022/01/08

Nerd — Mon, 9 Jan 2023 00:12:15 +0900

아침에 일어나 오늘은 알고리즘을 풀어야겠다는 생각에 씻고 바로 자리에 앉아

알고리즘 문제를 풀기 시작했습니다.

Lv.0문제를 푸는 거라 어려운 문제는 없었지만

여러 방식으로 문제를 풀 수 있는 것은 여러 방식으로 문제를 풀었습니다.

고차함수를 다양하게 사용하고 여러 함수를 만들어 문제를 풀었습니다.

물론 너무 쉬운 문제여서 생각할 것이 많이 없기는 했지만

Lv.0문제를 푸는 것은 앞으로 다가 올 조금은 어려운 문제들을

다양한 방법으로 풀기 위한 초석을 다지는 느낌으로 풀었습니다.

항상 알고리즘을 풀면 풀기 편한 방식으로 매일 쓰던 고차함수만 쓰는 편이었는데

쉬운 문제를 여러 방식으로 풀다 보니 아 이렇게 접근할 수 있는데 나는 항상

이 방식만 고수했구나 반성하게 되었습니다.

알고리즘 문제를 풀고 화요일에 있을 웹 개발자를 위한 자바스크립트의 모든 것 스터디의

다음 주 분량 책을 읽기 시작했습니다.

클래스에 대한 부분을 읽는데 클래스는 조금 생소한 부분이 있어서 이해가 안 되는 부분이 좀 있어

검색을 하며 읽느라 시간이 조금 오래 걸렸습니다.

클래스를 우아하게 잘 사용할 수 있도록 열심히 노력해야겠습니다.

TIL]2022/01/07

Nerd — Sun, 8 Jan 2023 02:31:12 +0900

오늘은 약속이 있어 약속을 다녀왔습니다.

약속을 다녀온 후 알고리즘 문제를 풀어야겠다는 생각에

알고리즘 문제를 풀었는데

프로그래머스 lv.0이 생겨서 lv.0부터 다시 풀어봐야겠다는 생각에

문제를 풀어나가기 시작했는데 lv.0은 난이도가 너무 낮아 집중이 잘 되지 않았습니다.

하지만 프로그래머스에 있는 문제들을 하나씩 다 풀어봐야겠다는 생각이 있어

문제의 난이도가 낮더라도 겸손한 마음으로 풀 예정입니다.

현재는 난이도가난도가 낮지만 난이도가 낮은 만큼 속도가 금방 나오기 때문에

금방 수준에 맞는 문제들이 나올게 기대되기 때문입니다.

내일은 긴 시간은 아니지만 10 포모도로를 목표로 공부를 할 예정이기 때문에

10포모도로동안 알고리즘만 하지는 않겠지만 프로그래머스에 있는 문제들을 열심히 풀어

제 수준에 맞는 문제들이 나올 정도로 문제를 풀 예정입니다!

TIL]2022/01/06

Nerd — Sat, 7 Jan 2023 04:15:59 +0900

오랜만에 TIL을 작성합니다.

바빠도 TIL을 작성했어야 했는데..

최근 며칠간 이런저런 일이 있었습니다.

프로젝트를 진행하며 이력서를 수정하고 면접도 보고

과제도 진행을 했습니다.

이력서를 수정하면서 그전 이력서에 비해 지금 이력서에

쓸 말이 많아진 것을 느꼈고 공부를 진행했던 부분들을 이력서에 녹여내는 것이 어려웠지만

이력서를 수정하고 나니 그동안 성장을 많이 했구나라는 것을 느꼈습니다.

과제를 진행하는 부분에 있어서는 과제가 너무 재미있었습니다.

하지만 TIL을 통해 회고를 하지 못했던 것이 너무 아쉽습니다.

바빠도 TIL을 작성했어야 했는데...

TIL을 작성하지 못한 것에 반성을 하고 있습니다.

다시 TIL을 열심히 작성하며 제가 부족한 점을 찾으며

부족한 점을 채우기 위해 노력을 하고 성장에 더욱 속도를 붙여야겠다는 생각이 들었습니다.

오늘은 Suspack 미리보기 기능을 구현하는 작업을 진행했습니다.

현재는 웹팩 설정 부분에서 오류가 발생하여 원인을 파악하고 있습니다.

당장 직면한 에러로그만 확인하고 문제를 해결하려 하니 문제 해결이 오히려 더딘 느낌이 들었습니다.

따라서, 월요일에 다시 웹팩 공식문서를 확인하면서 근본적인 문제를 파악해야겠다는 생각이 들었습니다.

항상 당장의 문제를 해결하려고 당장의 에러 로그만 확인하다 보면 근본적인 부분을 놓치는 것 같아 아쉬운 것 같습니다.

그래서 채택한 방법은 당장의 문제를 해결하고 주말이나 프로젝트 진행 코어 타임이 끝난 후 근본적인 부분을 채우는 방식을 택했는데

이번 문제는 당장의 문제를 해결하려해도 근본적인 문제를 모르면 해결이 되지 않기 때문에

근본적인 문제를 해결하기 위해 웹팩 공식문서를 통해 공부가 필요할 것 같습니다.

알고리즘 문제를 푸는 시간을 가졌는데 오랜만에 알고리즘을 풀다 보니

조금은 문제 접근이 어려웠습니다.

주말 간 다시 알고리즘 기초부터 하나씩 다 풀 예정입니다.

문제를 풀 때, 단순히 문제를 많이 풀면서 양적으로 도전을 하기보다는

한 문제를 여러 방향으로 바라보고 여러 방식으로 풀 예정입니다.

시간이 오래 걸리더라도 단순 취업을 위한 알고리즘 풀이가 아닌

문제 해결 능력을 기르기 위해 알고리즘 문제를 풀 예정입니다.

최근에 정말 바쁘게 살다 보니 시간이 너무 빨리 흐른 것 같습니다.

밤새 과제를 하고 밤새 면접 준비를 하고 밤새 이력서를 수정하고

밤을 새우는 날이 많아 컨디션 조절에 실패하고

계획대로 살아가지 못한 것 같아 반성하고 있습니다.

불안한 마음에 자꾸 밤을 새우면서 열심히 하고 있다고 위안을 삼으며

정작 중요한 것들을 놓친 것 같습니다.

다시 TIL을 통해 회고를 진행하고 해야 할 일들을 정리하며

계획적인 삶을 살 수 있도록 해야겠습니다!

TIL]2022/12/24

Nerd — Sun, 25 Dec 2022 02:54:02 +0900

아침에 일어나 개인적인 일정이 있어

개인적인 일정을 처리하고 집으로 돌아왔습니다.

집으로 돌아오니 오후 4시가 넘은 시간이 되었고

씻고 집안일을 하니 5시가 넘는 시간이 되었습니다.

모든 일들을 처리한 후 웹 개발자를 위한 자바스크립트의 모든 것을

읽기 시작했습니다.

우선은 복습을 먼저 진행했는데

복습을 진행하면서 확실히 전에 읽었던 내용 중 내용이 잘 기억이 나지 않는 부분들을

다시 보며 복습의 중요성을 다시 깨닫게 되었습니다.

복습이 끝난 후 진도를 나가는데 많이 어려운 내용은 아니었지만

내용을 읽을수록 이해가 안 가는 부분이 있어서

다시 앞에 부분을 보고 다시보고를 반복하다 보니 확실히 시간이 오래 걸렸습니다.

이번 주는 생각보다 바쁜 것 같습니다.

처리해야 할 일도 많았고 처리할 일을 하느라

공부를 평소처럼은 하지 못한 것 같아 아쉽습니다!

다시 정상 페이스를 찾고 열심히 공부해야겠습니다!

TIL]2022/12/21

Nerd — Thu, 22 Dec 2022 03:10:25 +0900

아침에 일어나 공부방에 갈 준비를 하며

오늘 하루를 어떻게 보내야 할지 계획을 했습니다.

우선은 랜딩 페이지 작업을 진행하고 스터디 시간이 되면

스터디에 참여하고 기술 블로그에 글을 작성해야겠다는 생각이 들었습니다.

공부방에 도착 후 랜딩 페이지 작업을 진행했습니다.

템플릿을 구매해서 사용을 하는거라 우선 템플릿에서

컴포넌트를 받아와 화면에 사용해야하는 템플릿의 컴포넌트를

불러오는 데 성공했습니다.

어려운 작업은 아니어서 금방 끝낼 수 있었고

스터디 시간이 되었습니다.

스크럼 스터디가 시작되었고 오늘 내용은 기존에 공부방에서 실제로

실행했던 내용이 많아서 와닿는 게 많았습니다.

데일리 스크럼을 하는 이유가 스프린트의 현재 상황을 알 수 있으며

스프린트가 잘 진행되고 있는지 점검하는 과정이라는 것을 알게 되었고
데일리 스크럼에서 가장 중요한 것은 스프린트 목표를 달성하는데 방해되거나 도움이 필요한 일을

파악하는 게 가장 중요하다는 것을 배웠습니다.