devSeung0v0.log

TIL_Vue #3 Router

Wed, 11 May 2022 12:55:33 GMT

뷰 라우터

페이지 이동을 위한 Vue.js 라이브러리
Vue.js 의 공식 라우터

1️⃣ Vue 객체의 router 속성 정의

new Vue({ el : '#app', router: router })

2️⃣ VueRouter 객체 만들기

new VueRouter 객체에는 페이지의 라우팅 정보가 들어간다.
- routes라는 배열 안에 객체로 페이지마다 지정

  const router = new VueRouter({
             //URL에 해시 없애기
            mode: 'history',
            // 페이지의 라우팅 정보
            routes: [
                {
                    //path: 페이지 urL
                    path: '/login',
                    //component: 해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        })

//⭐️ VueRouter의 routes 속성에 들어가는 값에는 component,
//Vue 인스턴스에 등록하는 컴포넌트는  components 's' 주의하기

const LoginComponent = {
            template: 'login',
        }

        const MainComponent = {
            template: 'main'
        }

📌 router-view

설정한 URL에 들어갔을 때, 태그를 통해 해당 url의 컴포넌트를 화면상에 뿌려준다.

📌 router-link

화면 상에서 해당 url로 바로 접속할 수 있는 태그

상단의 router-link 태그는 브라우저 상에서 하단의 a 태그와 같이 보여진다.
```
Login
Main
```

📌 웹서비스에서 클라이언트와 서버 간의 HTTP 통신 구조 (요청과 응답)

(1) 브라우저(클라이언트)에서 서버에 HTTP 요청(request)을 보내면, (2) 서버의 내부적인 백엔드 로직을 통해 DB에서 데이터를 꺼내온다. (3) 그 데이터를 HTTP 응답(response)으로 브라우저에 전송

📘 참고자료

Vue_TIL #2 컴포넌트간 통신 방법 props&event

Wed, 11 May 2022 12:37:18 GMT

컴포넌트 통신

📌 상위 컴포넌트와 하위 컴포넌트 간에 통신은 어떻게?

상위에서 하위로는 데이터를 내려준다, 프롭스props 전달 하위에서 상위로는 이벤트를 올려준다, 이벤트 발생(이벤트 버블링)

1️⃣ props 로 데이터 내려주기

v-bind 메서드
- app-header라는 하위 컴포넌트에 상위 컴포넌트의 message라는 데이터를 내려준다.
프롭스 이름은 하위 컴포넌트에서 설정한다.
- props: ['프롭스 이름 짓기'] `
```
const appHeader = {
    template: 'header',
    props: ['propsdata']
}
```
  `

바디 태그 내 전체 코드

상위 컴포넌트에서 data 변경하면 props로 data를 내려준 하위 컴포넌트에도 반영(⭐️ Reactivity) data 속성의 message를 'hi'에서 'hi merong'으로 변경 app-header 컴포넌트의 props 에도 'hi merong'으로 변경된 것을 확인

2️⃣ 이벤트로 올려주기 (Event emit)

v-on 메서드 ⭐️ v-on:click="passEvent" 와 같이 메서드 쓸 때 따옴표 들어가는 부분은 큰 따옴표로 써야함

const appHeader = {
            template: '',
            methods: {
                passEvent: function(){
                    this.$emit('pass')
                }
            }
        }

app-header(하위 컴포넌트)에서 발생한 이벤트를 Root 인스턴스(상위 컴포넌트)로 전달하기
- pass라는 이벤트가 app-header에서 내려왔을 때 Root 인스턴스에서 logText라는 메서드를 실행
바디 태그 내 전체 코드

3️⃣ 같은 레벨에서의 컴포넌트 전달

상위 컴포넌트에 먼저 이벤트 전달 후, 다시 props로 같은 레벨의 하위 컴포넌트에 전달해준다 (app-content 의 클릭 이벤트 -> root에 v-on 메서드로 전달 -> 같은 레벨의 하위 컴포넌트인 app-header에 v-bind 로 props 전달)

Vue_TIL #1 MVVM 패턴, 인스턴스와 컴포넌트

Tue, 10 May 2022 14:55:27 GMT

📘 교재

👀 Vue.js?

SPA(Single Page Application) 개발을 위한 JAVASCRIPT 프레임워크

Vue는 MVVM 패턴을 이용하는 프레임워크이며, 이 중 View만을 위한 Model인 VM(ViewModel)에 집중
뷰View 는 사용자에게 보여지는 브라우저 화면(html) 을 의미 ➡️ DOM을 통해 자바스크립트를 조작
ViewModel에 해당하는 뷰Vue 인스턴스는 DOM Listners(이벤트 핸들링) / Data Bindings(데이터 변환)를 통해 자바스크립트 코드를 실행하고 화면 View에 반영

💡 Vue.js 사용하기

📌 데이터가 변경될 때, 그 값을 적용하기

📘 참고자료

자바스크립트 내장 메서드

Object.defineProperty() : 객체의 동작을 재정의하는 메서드

   Object.defineProperty(대상 객체, 객체의 속성, { 새로 정의 또는 수정하려는 속성, get : , set : })

📌 Reactivity ➡️ 데이터 바인딩 구현

⭐️ Reactivity, 반응성

Vue를 사용하면 변경된 데이터를 화면에 적용해주기가 용이하다.
Reactivity 코드 라이브러리화 하기

📘 즉시 실행 함수 표현 (IIFE, Immediately Invoked Function Expression)

[📘 참고자료] (https://okayoon.tistory.com/entry/%EC%95%84%ED%8B%B0%ED%81%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-058-%EC%A6%89%EC%8B%9C-%EC%8B%A4%ED%96%89-%ED%95%A8%EC%88%98-IIFE-Immediately-Invoked-Function-Expression)

📌 인스턴스 생성하기

new Vue() -> 생성자 함수로 인스턴스를 만든다.
미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용(재사용)하여 화면을 개발

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)

template : 화면에 표시할 요소 (HTML, CSS 등)

data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성

methods : 화면의 동작과 이벤트 로직을 제어하는 메서드

created : 뷰의 라이프 사이클과 관련된 속성

watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

인스턴스 안에 들어가는 객체는 따로 변수로 지정하지 않고 리터럴 형식으로 바로 값을 대입해주는 것이 가독성이 높다.
인스턴스를 생성하면 Root 컴포넌트가 된다. ( crome extenstion - Vue Devtool 화면 )

📌 컴포넌트 생성하기

vue를 사용해 화면의 영역을 나누어 개발할 수 있다.
전역 / 지역 컴포넌트를 만들 수 있는데, 실무에서 전역은 거의 사용하지 않는다(⭐️ 지역 컴포넌트로 만들었을 때 하위 컴포넌트 조회가 가능).
전역 컴포넌트는 플러그인, 라이브러리 등 전역에서 사용이 필요할 때만 만든다.

지역 컴포넌트 등록하기 ⭐️ 속성 이름이 components! s 붙이는 것 주의 ( 보통 여러 개의 컴포넌트를 만들기 때문 )

  new Vue({
      el: '#app',
      //지역 컴포넌트 등록
      components: {
       // '컴포넌트 이름': 컴포넌트 내용,
      'app-footer' : {
          template: 'footer'
      }
      }
  })

📌 컴포넌트와 인스턴스

💡 배경지식으로 알고 있기 : 전역 컴포넌트는 인스턴스를 생성할 때마다 자동으로 등록이 되어있고, 지역 컴포넌트는 새로 등록해줘야함 (콘솔 에러메세지 캡처 -지역 컴포넌트로 만든 app-footer)
그러나 앞서 말했듯 실제 서비스를 개발할 때는 인스턴스는 하나를 생성하고 그 안에서 컴포넌트를 더해나가는 식으로 진행된다!

[리액트 쇼핑몰 만들기] useEffect, Ajax

Fri, 08 Apr 2022 13:48:45 GMT

🍎 코딩애플 리액트 기초 강의를 통해 쇼핑몰 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

📌 컴포넌트의 lifecycle

⭐️ 컴포넌트는 등장(mount) - 업데이트(재렌더링) - 퇴장(unmount) 이라는 생명주기(life cycle)을 가진다.

lifecycle 의 중간 중간에 컴포넌트에게 훅을 통해 명령을 걸 수 있다. Ex) oo 컴포넌트 퇴장 전에 이것 좀 해주세요~.

📌 useEffect

useEffect 훅 사용 1️⃣

컴포넌트 mount / update 될 때 특정 코드 실행 Ex) Detail 페이지 방문 후 alert 창이 2초 후에 사라지게 하기
형태 useEffect(()=>{ 실행할 코드 })

useEffect 훅 사용 2️⃣

컴포넌트 unmount 될 때 (사라질 때) 특정 코드 실행
형태 useEffect(()=>{ return ()=>{실행할 코드} })

useEffect 훅 사용 3️⃣

여러개 사용하고 싶을 때 -> useEffect를 여러 개 적으면 적은 순서대로 실행

💡 useEffect 주의점

컴포넌트 mount 시 뿐만 아니라 update(재렌더링)될 때마다 실행된다.

Input 에 입력할 때마다 update가 발생함
mount 시에만 실행하고 싶은 useEffect 어떻게?
두번째 매개변수인 실행조건을 넣어준다. 특정 state가 변경될 때만, 혹은 mount 시에만 실행하게 해 줄수 있음!

➡️ 두 번째 매개변수 [alert] -> alert라는 state가 변경될 때만 useEffect 실행한다~ [] -> 실행조건에 부합하는 게 없으니 update시에 useEffect 실행 안한다~(mount 시에만 한 번 실행하고 끝)

💡 setTimeout 주의점

설정한 타이머 시간보다 빠르게 컴포넌트 상태 변경 시에 버그 발생 가능성 있음!

컴포넌트 unmount 시 타이머 해제 스킬 필요 -> clearTimeout()

📌 Ajax

서버에 새로고침 없이 페이지 요청을 할 수 있게 도와줌

1️⃣ 요청의 종류

GET 요청 : 특정 페이지 / 자료 읽기 POST 요청 : 로그인 정보 같이 서버로 중요 정보를 전달 -> 요청 시에 항상 새로고침 된다. (기존 브라우저 작동 방식)

2️⃣ Ajax 사용 방법

제이쿼리 라이브러리

$.ajax()

axios 라이브러리

axios.get()
react.js, vue.js에서 많이 사용

바닐라 자바스크립트 문법

fetch()

2번째 방법인 axios 설치하고(npm install axios) import axios from 'axios'

3️⃣ 더보기 버튼 만들기

더보기 버튼 눌렀을 때 상품 3개 더 보이게 하기

axios 문법 axios.get(데이터 요청할 url) .then() -> 요청 성공 .catch() -> 요청 실패
Ajax로 가져온 데이터 출력하기 .then((가져온 데이터)=>{}) 💡 Axios는 json으로 가져온 데이터를 보기 좋게 object로 바꿔줌

➡️ 데이터 요청이 성공하면 shoesCng 함수를 통해 shoe 복사본과 함께 ajax를 통해 가져온 데이터인 result.data 복사본도 더해준다.

[노개북] 실용주의 프로그래머 #13

Tue, 05 Apr 2022 08:27:59 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.04.05

오늘 읽은 범위

9장. 실용주의 프로젝트

책에서 기억하고 싶은 내용을 써보세요.

cp.41 실용주의 팀

팀을 기능 중심으로 조직하라.

팀 전체가 깨진 창문(아무도 고치려고 하지 않는 사소한 결점imperfection)을 용납하지 않아야 한다. 팀은 상품의 품질에 대해 책임을 져야만 한다. (p.353)

cp.42 유비쿼터스 자동화

수작업 절차를 사용하지 말라.

어떤 식으로든지 웹 콘텐트content 는 저장고의 정보에서 자동으로 생성되어 사람의 개입 없이 웹에 올라와야 한다. 이는 실로 DRY 원칙의 또 다른 적용이다. 정보는 체크인된 코드와 문서의 두 가지 형태로 존재한다. 웹브라우저에서 보이는 뷰는 단순히 뷰일 뿐이다. 그 뷰를 손으로 일일이 관리할 필요는 없다. (p.367)

cp.43 가차 없는 테스트

모든 테스트가 통과하기 전엔 코딩이 다 된 게 아니다.

어떤 코드를 만들었다는 이유만으로 여러분의 보스나 클라이언트에게 완료되었다고 말할 수 있는 게 아니다. 그렇지 않다. 무엇보다도 코드는 결코 완료 될 수 없다. 더 중요한 것은 코드가 모든 가능한 테스트를 통과하기 전까지는 누구에게건 사용가능하다고 주장할 수 없다는 것이다.(p.372)
어떻게 테스트할까
- 테스트 데이터
  - 테스트들을 실행하는 데이터에는 실세계 데이터와 합성 데이터 두 종류가 존재
  - 실세계 데이터는 현실에서 온다. 기존 시스템, 경쟁사의 시스템 혹은 어떤 종류의 프로토타입 등에서 자료를 수집한다. 이는 전형적인 사용자 자료이다. 요구사항을 분석할 때 어떤 결함과 오해가 있었는지 알게 된다. 합성synthetic 데이터는 어떤 통계적 조건하에서 인공적으로 생성된다. (p.378)

cp.44 결국은 모두 글쓰기

문서document 가 애초부터 전체의 일부가 되게 하고, 나중에 집어넣으려고 하지 말라.

프로젝트에서 생산되는 문서에는 기본적으로 내부, 외부의 두 종류가 있다. 내부 문서에는 소스코드, 주석, 설계와 테스트 문서 등이 포함된다. 외부 문서에는 사용자 매뉴얼 같이 외부 세계로 출간되거나 출하되는 모든 것이 포함된다. 하지만 누구를 독자로 생각하는지, 또는 작가의 역할(개발자 혹은 테크니컬 라이터)이 무엇인지 불문하고, 모든 문서는 코드의 거울이다. 불일치가 있다면 중요한 것은 코드다. 좋건 나쁘건. (p.386)
소스 파일에 나타나야만 하는 가장 중요한 정보 중 하나는 저자의 이름이다. 꼭 최종 수정자일 필요는 없고 소유자면 된다. 소스코드에 대한 책임감은 사람들이 정직해지도록 하는데 놀라우리만큼 효과적이다. (p.389)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

벌써 실용주의 프로그래머의 마지막 챕터. 마지막 챕터가 끝난 후 부록 시작 페이지에서, 저자들은 이 책의 주제가 이렇게 많을 수 있었던 건 그만큼 내용을 간략화했기 때문이라는 말을 한다. 이번 챕터를 읽고난 후 그것이 체감되었다. 실용주의 프로그래머로서의 자세, 프로젝트 내에서의 올바른 방향성, 도구와 전략 등을 액기스로 담아낸 이 책은 그야말로 이정표의 역할을 할 뿐, 앞으로 실전에서 부딪히며 배울 길이 무한히 뻗어있다는 것을 느끼게 해주었다.
짧았던 한 달간의 팀 프로젝트를 진행하며 기능 구현 측면에서 역할을 분담한 것은 잘한 선택이라는 생각이 든다. 이번 9장에서 '결국은 모두 글쓰기'를 읽으면서, 지난 프로젝트를 돌이켜보며 아쉬움을 느꼈던 지점은 서로가 서로의 코드를 설명하고 면밀히 리뷰하는 시간이 없었다는 것이다. 프로젝트로서 하나의 웹을 구현해내는 것이었고 목적에 맞는 결과물을 만들어냈지만, 그 이전에 팀원들이 기능 구현을 어떤 방식으로 했는지 상세히 기술하고, 소스코드를 들여다볼 시간이 충분했다면 이후 프로젝트를 문서화하는 데에도 도움이 되었으리라 생각한다.

[리액트 블로그 만들기] props와 Input

Tue, 05 Apr 2022 04:16:24 GMT

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

📌 Props

부모 컴포넌트의 state 를 받아오고 싶다면? 부모 컴포넌트의 state 값을 자식 컴포넌트에 전달해주기 -> props 사용

1️⃣ props로 자식(Modal)에게 state 전달하기

Blog.js <자식컴포넌트 props작명={ state명 }/> 💡 보통 props명은 state명과 동일하게 작성함
Modal.js 자식컴포넌트에서 Props 파리미터 입력 후 사용한다. (부모에게 전달받은 props를 모두 저장하는 일종의 변수)

{props.title[0]}
➡️ h2에 들어가는 값은 props 중에 title이고, title의 인덱스 0번째 값을 가져온다.
구현화면

2️⃣ 클릭한 글 제목으로 모달창 띄우기

Blog.js
- 몇번째 제목 눌렀는지 상태정보를 state에 저장 state가 0일 때는 0번째 제목, 1일 때는 1번째 제목… 초기값은 0으로 설정
  
  let [modalTitle,modalTitleCng] = useState(0)
  - Modal 컴포넌트에 props 내려준다.
  modalTitle={modalTitle}
Modal.js Title의 인덱스값을 modalTitle로 받아준다.
Blog.js
- Map 함수의 두번째 파라미터는 반복문 돌 때마다 0,1,2... 즉 1씩 증가한다. (인덱스) 제목을 클릭할 때 해당 제목으로 모달창 제목이 바뀌도록 h3의 onClick 이벤트로 modalTitleCng 함수를 통해 modalTitle에 인덱스 값을 넣어준다.
⭐️ Map 반복문으로 돌린 html에는 key 값이 필요하다. 반복문 돌 때마다 증가하는 정수 -> map 함수 내의 최상위 html 요소인 divi에 key={idx} 달아주기

📌 Input

1️⃣ 리액트에서 사용자의 input 받기

Blog.js
- input 값을 저장할 빈 state 만들기
  
  let [inputData,inputDataCng] = useState('')
- 입력받은 input값을 onChange 이벤트로 저장하기 (입력이 될 때 이벤트 함수가 실행됨) 💡 사용자가 입력한 값은 e.target.value 로 받아올 수 있다. e.target 은 이벤트가 동작된 곳을 의미 (바닐라 자바스크립트 문법)
  
  inputDataCng(e.target.value)}/>

2️⃣ 글 발행 기능 만들기

⭐️ 핵심 : input에 입력한 글제목을 title State에 추가해준다.

📝 내가 짠 코드

Publish 라는 styled.div를 만들어서 input 과 button을 집어 넣었다. Input에는 앞서 했듯이 onChange 이벤트로 변경된 input 값을 저장해준다. button에는 onClick 이벤트로 함수 하나를 호출하고, props로 사용자가 입력한 input 값을 저장한 inputData를 불러와준다.
onClick으로 호출한 titleAdd 함수
```
const titleAdd = ()=>{
  const newTitle=[...title]
  newTitle.unshift(inputData)
  titleCng(newTitle)
}
```
➡️ titleAdd 함수는 발행 기능의 핵심인 inputData를 title state에 저장하는 작업을 수행한다. title을 수정하기 위해 스프레드 연산자로 newTitle 변수에 값을 복사해주고, newTitle의 첫번째 값으로 inputData를 넣어주기 위해 unshift 메소드를 사용했다. 마지막으로 이렇게 변경된 값을 적용하기 위해 newTitle을 titleCng 함수에 전달한다.
- 구현화면

✏️ 피드백

해결 코드를 보니 OnClick의 함수는 동일하게 작성하였다.👍 하지만 inputData를 props로 내려줄 필요는 없었다! 지워도 잘 작동함. (부모-자식 관계가 아니기 때문에 바로 state에 접근할 수 있음)

[노개북] 실용주의 프로그래머 #12

Mon, 04 Apr 2022 05:48:14 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.04.04

📌 연습문제 33

다음 문장들이 진정한 요구 사항인가? 가능하다면 진정한 요구사항이 아닌 것을 좀 더 유용하게 고쳐 써 보라.

1. 응답시간은 500ms 이하여야 한다.

📖 책의 해답

이 문장은 진짜 요구 사항처럼 보인다. 환경 때문에 애플리케이션에 제약을 추가해야 할 수 있다.

💡 나의 해답

요구사항이라고 생각한다. 궁극적으로 응답 속도 감소라는 목적을 내포하고 있다는 것이 응답시간의 허용 범위를 정하는 해당 요구사항에서 명확하게 드러난다. 그러나 진정한 요구 사항이 되려면 응답시간이 왜 500ms 이하여야만 하는지에 대한 기술이 덧붙여지는 것이 좋겠다는 생각이 든다. 또한 응답시간을 줄이기 위해 다른 제약조건이 붙는다면 무엇이 우선시되어야하는지에 대한 파악도 필요할 것이다.

2. 모달 창의 바탕색은 회색이다.

📖 책의 해답

회사의 표준이 이렇더라도, 이것은 요구사항이 아니다. 이 문장은 '모달 창의 바탕색은 최종 사용자가 변경할 수 있어야 한다. 출시할 때에는 회색으로 맟주어둔다.'라고 고치는 것이 더 낫다. 더 좋은 문장은 '애플리케이션의 모든 시각 요소(색상, 글꼴, 언어)는 최종 사용자가 변경할 수 있어야 한다.'이다.

💡 나의 해답

요구사항이 아니다. 바탕색이 회색이여야 하는 이유는 무엇인가? 회색이 아니라면 어떤 문제가 발생하는가? 모달 창과 기존 창의 상호작용에서의 문제인가? 등을 먼저 파악해야한다. 어째서 바탕색에 대한 조건이 만들어진 것인지 그 배경을 살펴보아야 할 것이다. 회색이라는 구체적인 조건보다는 기존 창과 대비되는 색상, 중복되지 않는 색상 등의 추상화도 필요하다는 생각이 든다.

3. 애플리케이션은 프론트엔드 프로세스 몇 개와 백엔드 서버로 구성된다.

📖 책의 해답

이 문장은 요구사항이 아니다. 이것은 아키텍쳐다. 이런 것과 비슷한 것과 마주칠 경우, 사용자가 무슨 생각을 하는지 알아내기 위해 깊게 파고들어야 한다.

💡 나의 해답

이 문장은 요구사항이라기보다 기술 명세에 가깝다고 생각한다. 요구사항이 되기 위해서는 어째서 다수의 프론트엔드 프로세스, 하나의 백엔드 서버가 필요한 것인지, 해당 구성으로 무엇을 달성해야하는지가 드러나야 한다. 요구사항은 사용자 입장에서 전달받는 것이기 때문에 애플리케이션이 어떤 기능을 필요로 하며, 어떤 작동 방식을 거치게 되는지를 파악하고 -> 따라서 프론트엔드 프로세스 몇 개와 백엔드 서버 하나로 구성되어야 한다는, 해당 문장이 결론이 되는 흐름이 자연스럽다.

4. 사용자가 숫자가 아닌 글자를 숫자 필드에 입력하면 시스템은 입력 필드를 깜빡이고 입력을 거부한다.

📖 책의 해답

밑에 깔린 요구사항은 아마 '시스템은 사용자가 필드에 올바르지 않은 값을 입력하는 것을 막는다. 그리고 사용자가 그렇게 했을 경우 경고를 보낸다.'라는 문장과 더 가까울 것이다.

💡 나의 해답

요구사항은 맞지만 지나치게 구체적이라는 생각이 든다. '사용자는 숫자 필드에 숫자만 입력해야한다'는 것으로 명료화할 수 있겠다. 추가로 시스템이 입력 필드를 깜빡이고 입력을 거부한다는 것을 사용자에게 알려야할 필요가 있다. 따라서 '사용자가 숫자 필드에 숫자를 입력하지 않으면 사용자에게 잘못된 입력임을 알린다'라고 다시 작성해볼 수 있겠다.

5. 이 임베디드 애플리케이션의 코드와 데이터 크기는 32Mb 이내여야 한다.

📖 책의 해답

이 문장은 아마도 꼭 지켜야 하는 요구사항일 것이다.

💡 나의 해답

1번 문장과 마찬가지로 요구사항은 맞지만 해당 요구사항이 어떠한 맥락에서 필요한지를 파악해야한다고 생각한다. 32Mb 라는 크기는 기준을 무엇에 두고있는 것인지, 임베디드이기 때문에 만들어진 요구사항인건지, 요구사항의 우선순위는 어떻게 되는지 등의 구체적인 기술이 필요하다는 생각이 든다.

[노개북] 실용주의 프로그래머 #11

Sun, 03 Apr 2022 07:56:49 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.04.03

오늘 읽은 범위

8장. 코딩하는 동안

책에서 기억하고 싶은 내용을 써보세요.

cp.36 요구사항의 구렁텅이

요구사항을 수집하지 말고 채굴하라.

사용자들이 어떤 작업을 현재 어떻게 하느냐는 것을 알아내는 것보다, 왜 그걸 하는지 그 내재적 이유를 알아내는 것이 더 중요하다. 개발을 통하여 마지막에는 그들이 진술한 요구사항을 충족하는 것이 아니고, 그들의 실질적 비즈니스 문제를 해결해야 하는 것이다. (p.321)

사용자처럼 생각하기 위해 사용자와 함께 일하라.

프로젝트 용어 사전을 사용하라.

프로젝트 용어 사전을 만들고 유지하라. 그것은 프로젝트에서 사용되는 모든 용어와 어휘를 모아 놓은 단일한 장소여야 한다. 최종 사용자에서 보조 직원까지 프로젝트에 참가하는 모든 사람이 일관성을 위해 동일한 용어 사전을 사용해야 한다. (p.330)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

이전까지 읽었던 챕터보다 현실적이고 실무적인 조언들이 있던 8장이었다. 지구 반대편의 대선배 개발자가 인자한 부처 미소를 지으며 인생 팁을 전수해주는 느낌이랄지? 특히 사용자 입장에서 어떤 것을 달성해야 하고, 그것이 프로젝트의 목표와 일치하는지, 실제적으로 사용자가 해결을 원하는 문제가 무엇인지를 파악하는 일의 중요성을 강조하는 단락이 공감이 되었다. 아직 실무에서 개발을 진행해본 것은 아니지만 현재 내가 생각했을 때 개발의 이유와 목적에도 가장 먼저 전제되는 중요 요소는 사용자이기 때문이다.

[노개북] 실용주의 프로그래머 #10

Sat, 02 Apr 2022 14:50:09 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.04.02

오늘 읽은 범위

7장. 코딩하는 동안

책에서 기억하고 싶은 내용을 써보세요.

cp.31 우연에 맡기는 프로그래밍

우연에 맡기는 프로그래밍을 하지 말라.

마침내 컴포넌트가 화면에 나타나더라도 프레드는 이제 코드로 돌아가 여기서 불필요한 호출을 제거하려고 하지 않는다. "이제 돌아가는 거니까, 그래도 놔두는 것이 좋을거야.."(...) 지금 잘 작동하는 데 괜히 건드렸다 일을 만들 필요가 있을까? 우리는 그래야 할 몇 가지 이유를 생각해낼 수 있다. (p.275)
- 정말로 제대로 돌아가는 것이 아닐지도 모른다. 우리에게만 그런 것처럼 보일 수도 있다.
- 여러분이 의존하는 조건이 단지 우연인 경우도 있다. 다른 상황(예를 들어 화면 해상도가 다른 경우 등)에서는 이상하게 작동할지도 모른다.
- 문서화되지 않는 동작은 라이브러리의 다음 릴리스에서 변경될 가능성이 있다.
- 불필요한 추가 호출은 코드를 더 느리게 만든다.
- 추가로 호출한 루틴 때문에 새로운 버그들이 코드에 들어올 가능성이 있다.

cp.33 리팩터링

일찍 리팩터링하고, 아주 리팩터링하라.

코드를 다시 작성하기, 다시 작업하기 다시 설계하기는 총괄해서 '리팩터링'이라고 알려져 있다. (p.292)
여러분의 코드를 리팩터링하는 것 - 기능을 이러저리 옮기고 이전에 내린 결정을 갱신하는 것 - 은 사실 고통 관리pain management 를 실천하는 것이다. 현실을 피하지 말자. 소스코드를 이곳저곳 변경하는 것은 굉장히 고통스러운 작업일 수도 있다. (p.293)

cp.34 테스트하기 쉬운 코드

테스트를 염두에 두고 설계하라.

모듈을 설계할 때는, 심지어 루틴 하나를 설계할 때도 그것이 지켜야 할 계약과 계약을 지키는지 테스트하는 코드도 함께 설게해야 한다. (p.304)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

우연에 맡기는 프로그래밍 챕터에서 많이 뜨끔했다. 프로젝트 진행하면서 이게 어떻게 돌아가는 건지 의문스러운 코드들이 있었으나 일단 화면 상에서 작동은 되니, 제대로 뜯어볼 생각을 하지 않았었다. 애써 오류 가능성이나 다른 상황에서의 작동이 어떻게 달라질 지는 외면했던 과거의 나를 반성한다..
이번 7장에서는 말로만 듣던 리팩토링의 개념을 배웠다. 프로젝트에서도 새로 코드를 작성하는 것보다, 기존에 작성해둔 코드를 유지보수하는 것이 더 힘들겠다는 것을 어렴풋이 느낄 수 있었는데 리팩토링은 그만큼 중요하고, 따라서 그 어려운 것을 정면돌파 해야함을 의미한다. 작성한 코드에 책임을 져야한다는 이전 챕터의 어느 구절이 떠오르기도 하는 대목이다.

[알고리즘] 정수 내림차순으로 배치하기

Mon, 28 Mar 2022 11:25:35 GMT

프로그래머스 lv1. 정수 내림차순으로 배치하기

1️⃣ 문제설명

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

2️⃣ 제한조건

n은 1이상 8000000000 이하인 자연수입니다.

3️⃣ 입출력 예

💡 나의 풀이

function solution(n) {
    const numToStr =  n + '' //정수를 문자열로 변환(빈 문자열 더해주기)
    const arrTostr = numToStr.split('').sort((a,b)=>b-a).join('') //문자열을 배열로 변환, 내림차순 정렬 후 다시 문자열 변환
    const strToNum = arrTostr * 1 //문자열을 정수로 변환
    return strToNum;
}

💡 다른 사람의 풀이

function solution(n) {
    // 문자풀이
    return parseInt((n+"").split("").sort().reverse().join(""));
}

👍 parseInt로 전체를 감싸서 문자열을 정수로 변환 👍 내 풀이처럼 한 과정씩 변수를 지정하지 않고 코드를 한 줄로 작성

[노개북] 실용주의 프로그래머 #9

Mon, 28 Mar 2022 10:04:01 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

💡 연습문제 풀기

2장 직교성 - #2

모드리스modeless 대화상자와 모달modal 대화상자 가운데 어떤 것이 더 직교성이 좋은 설계를 만들까?

풀이

일단 모드리스와 모달 대화상자가 무엇이고, 어떤 차이점이 있는지를 알아보았다. 검색 결과 모달은 대화 상자가 실행되어 새로운 뷰가 열리면, 그 대화상자가 종료되기 전까지는 기존 뷰에 접근하거나 제어할 수 없는 방식을 말한다. 자바스크립트의 alert, confirm이 이에 해당한다. 뷰를 관리하는 컨트롤은 새로운 상태(mode)에 들어선 것이고, 새로운 뷰에만 이벤트를 전달해준다. 모드리스는 모달리스라고도 불리며, 즉 모달 대화상자의 반대 개념이다. 따라서 모드리스 방식에서는 대화 상자가 실행되더라도 기존 뷰를 제어할 수 있다. 즉 기존 뷰와 새로운 뷰 모두에게 이벤트를 전달할 수 있다. 새로운 뷰가 열리더라도 새로운 상태에 진입한 것은 아니며, 따라서 modeless 라는 이름이 붙었다는 해석이 있다. 그렇다면 문제로 돌아와, 모드리스 대화상자와 모달 대화상자 중 어떤 것이 더 직교성 높은 설계일까. 책에 따르면 직교성이란 일종의 독립성을 말하고, 결합도를 줄이는 것을 의미한다. 하나가 바뀌어도 나머지에 영향을 주지 않는 설계에 직교성이 있다고 말할 때, 이를 모달과 모드리스의 실행 방식에 적용해보자. 먼저 모달의 경우, 대화상자가 열리면 기존 뷰에는 접근하지 못하는 제한이 생긴다. 이는 새로운 모드로의 진입이 기존 뷰에 영향을 미친 것으로, 결합도를 높이는 방식이라고 해석할 수 있다. 반면 모드리스는 대화상자를 열어 새로운 뷰가 열리더라도 기존뷰에는 제한이 없으며 이벤트의 전달도 양쪽에게 가능하다. 따라서 나는 모드리스 대화상자가 직교성 높은 설계를 만든다고 판단하였다.

참고링크

[C#] 늘 헛갈리 Modal vs Modeless [프로그래밍] 모달과 모달리스는 무엇이고 어떤 차이가 있을까?

책의 해설

제대로만 한다면, 아마 모드리스일 것이다. 모드리스 대화상자를 사용하는 시스템은 어떤 특정한 시점에 어떤 일이 일어나고 있는지 신경을 덜 쓰게 된다. 이런 시스템은 시스템의 상태에 대해 기본적인 가정을 가지고 있는 모달 시스템보다 더 발달된 모듈간 의사소통의 인프라를 가질 가능성이 높다. 모달 시스템이 가진 가정은 결합도를 높이고 직교성을 떨어뜨리게 된다.

[노개북]실용주의 프로그래머 #6~8

Sat, 26 Mar 2022 07:54:05 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.03.26

오늘 읽은 범위

4장. 실용주의 편집증 ~ 5장. 구부러지거나 부러지거나

책에서 기억하고 싶은 내용을 써보세요.

cp21. 계약에 의한 설계

계약에 따른 설계를 하라.

정확한 프로그램이란 무엇인가? 스스로 자신이 하는 일이라고 주장하는 것보다 많거나 적지도 않게 딱 그만큼만 하는 프로그램을 말한다. 이 주장을 문서화하고 검증하는 것이 계약에 의한 설계(Design By Contract, DBC)의 핵심이다. (p.185) 
DBC를 사용하는 최고의 장점은 요구사항과 보증의 문제를 전면으로 내세운다는 것이다. 입력 도메인 범위가 무엇인지, 경계 조건이 무엇인지, 루틴이 뭘 전달한다고 약속하는지(...)하는 것들을 설계 시기에 나열하는 것만으로도 더 나은 소프트웨어를 작성하는 데에 엄청난 도움이 된다.(p.189)

cp24. 언제 예외를 사용할까

예외는 예외적인 문제에 사용하라.
예외에 문제가 있다면 하나는 이걸 언제 사용할지 아는 것이다. 우리는 예외가 프로그램의 정상 흐름의 일부로 사용되는 일이 거의 없어야 한다고 믿는다. 예외는 의외의 상황을 위해 남겨두어야 한다. (p.208)

cp26. 결합도 줄이기와 디미터 법칙

모듈간의 결합도를 최소화하라.

코드를 세포(모듈, module)로 구성하고, 이들 간의 상호작용을 제한하라. 그러면 한 모듈이 변경되거나 교체된다 하더라도 다른 모듈들은 변경 없이 수행될 수 있을 것이다. (p.227)
-> 3장의 직교성, 4장의 계약의 의한 설계와 연결 *

디미터 함수 법칙은 프로그램에서 모듈간 결합도를 최소화하려 시도한다. 이 법칙은 한 객체가 제공하는 메서드에 접근하기 위해 또 다른 객체들을 통하는 것을 허용하지 않는다.

디미터 함수 법칙

class Demeter {
private:
A *a;
Int func();
pubilc:
//...
void example (B&b);
}
void Demeter:: example (B&b){
C c;
Int f = func(); // 자신
b..invert(); // 메서드로 넘어온 인자
a = new A();
a->setActive(); //자신이 생성한 객체
c.print(); // 직접 포함하고 있는 객체

디미터 법칙은 코드를 더 적응성 있고 강하게 만들어 주지만 '주계약자 general contractor'로서의 대가를 치러야 한다. (...) 실제로 이는 위임자에게 단순히 요청을 전달하는 역할만을 하는 간단한 위임 메서드를 상당수 만들어야 함을 의미한다. (p.231)

cp27. 메타프로그래밍

통합하지 말고 설정하라.

메타데이터는 애플리케이션을 기술하는 모든 데이터다. 애플리케이션이 어떻게 실행되어야 하고, 어떤 자원을 이용해야 하는지 등을 기술한다면 메타데이터라 할 수 있다. (p.236)

코드에는 추상화를, 메타데이터에는 세부 내용(구체화)을.

우리의 목표는 (어떻게가 아닌 무엇을 해야 하는지를 명시함으로써) 선언적 declarative으로 생각하는 것이고, 이로써 더 동적이고 적응가능한 프로그램을 만드는 것이다. 이를 위해서 다음의 일반 규칙을 따른다. ** 일반적 경우에 대해서 프로그램을 만들고, 특별한 것들은 컴파일된 코드 밖 어딘가에 내놓는다. **(p. 159)

cp.29 단지 뷰일 뿐이야

모델에서 뷰를 분리하라.

모델을 표시하는 뷰, 그리고 뷰를 관리하는 컨트롤러에서 모델을 분리해 내는 것. 바로 이것이 모델-뷰-컨트롤러 Model-View-Controller, MVC 이디엄의 핵심 개념이다.

모델 : 대상 객체를 나타내는 추상 데이터 모델. 모델은 어떤 뷰나 컨트롤러에 대해서도 직접적인 지시글 지니지 않는다.

뷰: 모델을 해석하는 방법. 뷰는 모델의 변화 그리고 컨트롤러가 보내는 논리저 사건을 구독한다.
컨트롤러: 뷰를 제어하고 모델에 새로운 데이터를 제공하는 방법. 모델과 뷰 둘 모두에 이벤트를 보낸다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

4장은 낯선 용어와 개념들이 많이 등장했다. 자바나 C 기반 언어를 배워보지 않은 나에게는 중간중간의 예제 코드들 또한 이해하기가 어려웠다. 하지만 계약에 의한 설계, 단정적 프로그래밍, 예외와 리소스 사용의 균형이라는 각 소챕터에서 말하고자 하는 것은 3장에서 나온 직교성, 가역성 등과 같은 실용주의 프로그래밍의 원칙에서 뿌리를 찾을 수 있었다.
책 초반에서부터 느낀 점 중 하나로서 이 책의 주제는 프로그래밍이지만, 실용주의라는 관점에서 해석할 때 삶의 전반에 적용하기에도 무리가 없는 내용이라는 것이 와닿는 챕터였다.

코드의 의존성이나 상호 영향에 대해 생각해보지 못했는데 새로운 깨달음을 주었다. 스파이나 비밀 조직에서 세포라는 작은 단위의 그룹을 만들고, 그룹 간의 정보 공유 등 상호 작용을 철저히 통제하는 방식을 코드에서 적용할 수 있다고 비유한 점이 이해에 도움이 되었다. 시스템 내에서 동떨어진 것처럼 보이는 변화가 코드에 영향을 주지 않길 원한다면, 독립성을 확보해야 한다. 이는 유지보수 차원에서도 중요한 원칙이다.
MVC의 개념은 리액트를 처음 배울 때 들어보았었다. 리액트는 View에만 집중한 자바스크립트 라이브러리라는 것. 그래서 리액트에서는 필요에 따라 상태관리 시스템으로 Redux라는 라이브러리를 사용한다. 이 책에서는 MVC 개념의 원론적인 이해와 모델과 뷰가 분리되었을 때의 장점을 알게 되었다. 이는 유연한 설계를 가능하게 하고, 결합도를 줄여 가역성까지 유지할 수 있는 방법이다.

[노개북] 실용주의 프로그래머 #5

Wed, 23 Mar 2022 13:44:01 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.03.23

오늘 읽은 범위

3장. 기본적인 도구

책에서 기억하고 싶은 내용을 써보세요.

cp15. 조개놀이

명령어 셸의 힘을 사용하라.

모든 작업을 GUI로만 한다면, 여러분이 가진 환겨의 전체 능력을 이용하지 못하게 된다. 일반적인 작업을 자동화할 수 없고, 쓸 수 있는 도구의 풀파워를 만들 수가 없다. (p.139) 
셸에 익숙해지면 생산성이 급상성하는 걸 알게 될 것이다. 자바 코드에서 명시적으로 import하는 패키지 이름의 합집합 목록을 만들 필요가 있는가? (p.142) -> 명령어 셸을 활용하는 예시(목록을 'list'라는 파일에 저장) 

cp16. 파워 에디팅

하나의 에디터를 잘 사용하라.
도전해 볼 것 : 올해에 새로 배울 언어 중 하나로 여러분의 에디터가 사용하는 언어를 배워보라. (p.150) 

cp17. 소스코드 관리

언제나 소스코드 관리 시스템을 사용하라.
소스코드 관리 시스템 Source Code Control System, SCCS (p.152) 

cp18. 디버깅

비난 대신 문제를 해결하라.
불행하게도 지금의 컴퓨터 시스템은 아직까지도 여러분이 무엇을 명령하는가에 좌우되지, 무엇을 원하는가에 좌우되지 않는다. (p.157) 
디버깅을 할 때 근시를 조심하라. 표면에 보이는 증상만 고치혀는 욕구에 저항하라. 실제 문제는 여러분이 관찰하고 있는 것에서 몇 단계 떨어져 있고, 또 다른 여러 가지와 연관되어 있을 확률이 다분하다. (p. 159)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

이번 파트는 실질적인 팁들이 가득했다. 개발자에게 주어진 도구와 그것이 어떻게 손의 연장이 되는지에 대한 과정에서 숙달해야 할 것들. 도구에 의존하는 것도 경계해야 한다는 점을 놓치지 말자. 터미널에서 명령어를 통해 직접적인 컨트롤을 하는 것은 여전히 어렵지만, 그것 또한 익숙해져야 할 부분!
디버깅은 아직 실무 경험이 없는 나에게 익숙치 않은 개념이지만, 언젠가 필드에서 버그를 맞닥뜨리게 된다면 문제가 되는 코드 자체가 아니라, 상황 자체를 좀 더 거시적으로 바라볼 필요가 있다는 것을 배웠다.

[노개북] 실용주의 프로그래머 #4

Tue, 22 Mar 2022 12:45:44 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 Mission: 나의 최애 북틸

1️⃣ pleed0215님의 TIL

소단원 별로 내용 정리를 꼼꼼하게 잘 해주셔서 TIL 를 읽는 것만으로도 좋은 복습이 되었다. 책 속의 팁 부분을 눈에 잘 들어오도록 포인트를 주셔서 핵심이 짚어지는 것이 좋았다.
도메인 언어에 대한 생각도 공감이 되었다. 읽으면서도 단번에 이해가 안가는 알쏭달쏭한 내용.

2️⃣ hyuuny님의 TIL

기억하고 싶은 구절과 함께 본인 생각을 덧붙인 아이디어가 좋았고, 자신의 코드에 어떻게 반영할 지를 그려보신 점 또한 인상 깊었다.

3️⃣ coppersoon님의 TIL

2장에서 말하고자 하는 실용주의 프로그래머의 태도를 본인만의 표현 방식으로 정리해주신 것이 좋았다.
책 속의 용어들을 직접 찾아보고 정리해두신 것이 읽는 사람에게도 도움이 되었다.

[노개북] 실용주의 프로그래머 #3

Mon, 21 Mar 2022 15:29:46 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.03.21

오늘 읽은 범위

2장. 실용주의 접근법

책에서 기억하고 싶은 내용을 써보세요.

프로그래머들은 늘 유지보수 모드에 있다. 우리가 이해하고 있는 것은 날마다 바뀐다. 설계를 하거나 코딩을 하는 중에 새로운 요구사항이 도착한다.(p.65) 
여러분이 조성해야 할 환경이란 뭔가를 직접 만드는 것보다 기존의 것을 찾아내고, 또 재사용하기 쉬운 환경이다. 만약 그게 쉽지 않다면 사람들은 하지 않을 것이다. (p.75) 
프로토타입은 나중에 버릴 수 있는 코드를 만든다. 예광탄 코드는 기능은 별로 없지만 완결된 코드이며, 최종 시스템 골격의 일부를 이룬다. (p.102)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

프로젝트 과정 속에 실용주의 개발이 어떤 방식으로 접근되는 지를 보여주는 챕터였다. 지식 혹은 정보의 중복을 피하고, 컴포넌트간의 직교성을 유지하고 유연한 코드를 작성하는 것.
예광탄 코드는 이 챕터의 많은 부분이 그랬지만 역시 처음 들어보는 개념이었는데, 프로토타입과의 비교를 통해 차이를 이해할 수 있었다. 들여놓은 설비나 가구는 아직 없더라도, 골격을 탄탄히 잡아놓은 후 보강을 시작한다는 건축적인 비유가 떠올랐다.

[노개북] 실용주의 프로그래머 #2

Sat, 19 Mar 2022 15:07:29 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

📝 TIL 2022.03.19

오늘 읽은 범위

서문 ~ 1장.실용주의 철학

책에서 기억하고 싶은 내용을 써보세요.

실용주의 철학의 초석 중 하나는 경력 향상, 프로젝트, 일상 업무의 면에서 자신과 자신의 행동에 책임을 지는 것이다. 실용주의 프로그래머는 경력에 대해 책임을 지고, 자신의 무지나 실수를 인정하기를 두려워하지 않는다. (p.31) 
'깨진 창문'(나쁜 설계, 잘못된 결정, 혹은 형편없는 코드)을 고치지 않는 채로 내버려 두지 마라. (...) 더 이상의 손상을 예방하기 위해 어떤 조치든 취하고 현 상황을 잘 관리하고 있다는 것을 보여 줘라. (p.35) 
깨진 창문 이론에서는 다른 누구도 주의를 기울이지 않는다는 걸 알기에 사람들의 엔트로피에 대항해 싸울 의지를 잃는다고 한다. 개구리는 단지 변화를 감지하지 못하는 것이다. 그런 개구리처럼 되지 마라. 큰 그림에 늘 주의를 기울여라. (p.41) 
오늘의 훌륭한 소프트웨어는 많은 경우, 내일의 완벽한 소프트웨어보다 낫다. 사용자들에게 뭔가 직접 만져볼 수 있는 것을 일찍 준다면, 피드백을 통해 종국에는 더 나은 솔루션에 도달할 수 있을 것이다. (p.44)

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

직관적이면서 근본적인 팁들이 좋았다. 실용주의 프로그래머는 결국 기본 토대가 탄탄한 개발자를 말하는 것이라는 생각이 들었다. 실수를 외면하거나 변명 거리를 늘어놓지 않는 것, 협업 과정의 의사소통 방식을 고려하는 것, 사용자 입장에서의 더 나은 소프트웨어는 무엇인지 고민하는 것.
5절 - 지식 포트폴리오에서 자산 포트폴리오와 같이 지식을 어떻게 구축하고 발전시켜 나갈 것인지에 대한 그림이 있어야 한다는 비유가 인상적이었다. 특히 포트폴리오 관리 방식에서 투자를 주기적으로 행해야한다는 점, 기술 변화 주기가 굉장히 빠른 컴퓨터 분야에서 잘 적응하기 위해서는 더 많은 기술에 다각화된 투자가 필요하다는 점이 와닿았다.

[노개북] 실용주의 프로그래머 #1

Fri, 18 Mar 2022 12:30:19 GMT

📚 노마드 개발자 북클럽 aka. 노개북 - 실용주의 프로그래머 3주 완독 챌린지의 기록을 남긴다. 챌린지 이동

Day1. 책 인증

[리액트 블로그 만들기] useState와 onClick

Sun, 13 Mar 2022 03:58:06 GMT

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

useState

데이터는 하드 코딩하지 않고 변수에 넣거나, state를 이용해서 저장해야 한다.

1️⃣ 변수 저장보다 state 를 쓰는 이유

웹이 app 처럼 부드럽게 동작하게 만들고 싶어서(값이 변경이 될 때 html이 자동으로 재렌더링(새로고침 x)
변수로 데이터를 저장하면 변수가 바뀌어도 자동 재렌더링이 되지 않고 새로고침해야한다.

➔ ⭐️ 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 써야함

2️⃣ 쓰는 방법

Let [현재값, 변경함수] = useState(초기값)

* **변경함수를 통해** 현재값을 바꿔야 재렌더링으로 제대로 변경됨
- 기존 state에서 값을 가져와 바꾸고 싶을 때는 바로 state를 건드는 것이 아니라, 복사본을 하나 만들어서 그걸 state 변경함수에서 바꿔주기 (💡 spread operator 쓰기!)
1. 기존 state 복사본 만들기
2. 복사본에 수정사항 반영하기
3. State 변경함수에 집어넣기

3️⃣ 구현하기

(1) 버튼 클릭 시 제목 문자열 일부를 변경하기 (‘에어’ -> ‘프로’)

useState 구문

let [title,titleCng] = useState(['서울 근교 여행지 추천','맥북 m1 에어 구매후기','힐링하기 좋은 서울 전시회 추천'])

onClick fnc (titleFnc)

const titleFnc = () => {
    const newTitle = [...title]
    // 1. 기존 state 복사본 만들기
    // Deep copy
    //spread operator 값 공유 x, 서로 독립적인 값을 가지는 복사

    newTitle[1] = '맥북 m1 프로 구매후기'
      //2. 복사본에 수정사항 반영

    titleCng(newTitle)
      //3. state 변경함수에 집어넣기
  }


          { title[1] }
          { date }

⭐️ spread operator를 사용한 Deep copy const newTitle = title // 복사가 아니라 값 공유 const newTitle = […title] // 값 공유가 아닌 새로운 배열로 복사

(2) 버튼 클릭시 발행일 변경하기

버튼 클릭시 ‘1월 26일 발행’의 인덱스 0번인 ‘1’ -> ‘2’ , 또 그 반대로 바꾸기
useState 구문

let [date, dateCng] = useState('1월 26일 발행')

onClick fnc (dateFnc)

  const dateFnc = () => {
    //인덱스 0번의 값을 바꿔주기
    const newDate = [...date]
    // 1. 기존 state 복사본 만들기
      if(newDate[0]= '1'){
        newDate[0] = '2'
       //2. 복사본에 수정사항 반영
        dateCng(newDate)
       //3. state 변경함수에 집어넣기 
      }else{
        newDate[0]= '1'
        dateCng(newDate)
      }
}

(3) <나의 응용> 버튼 클릭시 발행일 오늘 날짜로 변경하기

useState 구문

let [date, dateCng] = useState('1월 26일 발행')

onClick fnc (dateFnc)

const dateFnc = () => {
  const today = new Date();
  const todayM = today.getMonth() + 1;
//getMonth() 메서드는 0부터 11까지를 반환하므로 +1
  const todayD = today.getDate();
  dateCng(`${todayM}월 ${todayD}일 발행`)
}

* JSX


* 🧚‍♂️ 작동



---
#### (4) 버튼 클릭시 모달 열고 닫기

* Modal 컴포넌트 분리하여 Import



<내가 짠 코드>

 state 초기값은 false로 주었다.
 온클릭 함수( modalOpen )에서 삼항연산자로 modal이 true이면 변경함수로 false로 바꿔주고, 아니라면(modal 이 false이면) true 로 바꿔주는 식으로 작성


* useState
```javascript
let [modal,modalCng] = useState(false)

onClick fnc

  const modalOpen = () => {
    modal === true
    ? modalCng(false)
    : modalCng(true)
  }

JSX (삼항연산자 사용)

{ title[2] }
{
modal === true
? 
: null // 빈 html
}

<개선>

💡 따로 온클릭 함수 만들 필요도 없이, modal 변경함수 (modalCng)에 modal 값과 반대 (!modal) 값을 넣어준다. 쏘 심플!

🧚‍♂️ 작동

(5) <나의 응용> Nav 바에서 메뉴 클릭시 이모지 선택하기 (ing)

네비바에 what's up? 메뉴를 만들고,클릭시 감정 상태를 표현할 수 있는 이모지들이 나오도록 만들었다. 선택한 이모지가 what's up? 옆에 출력될 수 있도록 구현해보려 한다.

컴포넌트를 분리하면서 css 파일을 만드는대신 최근에 배운 styled-component를 사용해보았다. 🤓

Emojis.js

import React from 'react'
import styledComponents from 'styled-components'

const EmojiModal = styledComponents.divwidth: 100px; border-radius: 20px; background-color: aliceblue; margin-top:10px; z-index: 1; position: absoulte;

const Emojis = styledComponents.spanpadding: 10px; cursor: pointer; font-size:20px

export default function Emoji(){ return( <> 😄 😍 😢 😡 😱 ) }




* Blog.js의 useState문과 Nav 부분

useState의 기본값을 false로 주고,
삼항연산자로 Emoji 컴포넌트를 보여줄 조건을 달았다.

```jsx
let [feel, feelCng] = useState(false)

      
        DevSeung's Blog
         feelCng(!feel) }>What's up?
        {
          feel === true
          ? 
          : null // 빈 html
        }

🧚‍♂️ 작동

[SeSAC DT 과정] REACT - CSS Module, Styled-component 사용하기

Fri, 11 Mar 2022 16:00:43 GMT

css 클래스명의 중복을 막아주는 css-module 과 css 관련 리액트 라이브러리인 styled-component 에 대해서 학습해보자.

1️⃣ css-module

브라우저로 컴파일링 시 클래스명에 임의의 해쉬를 붙이는 방식으로 스타일 중첩을 막아준다.
리액트에 기본 세팅되어있어서 설치할 필요가 없다.

기존 상황 : css 파일을 다르게 적용했지만 클래스명이 중복되어 스타일 속성이 겹쳐써지는 문제 발생 ( 나는 일일이 클래스명을 바꿔주는 방식을 택했었다. 😂)
Browser

💡 사용하기

(1) css 파일명 뒤에 ⬇️ .module 을 붙여준다.

(2) css을 적용하는 js 파일에 import, className 형식을 변경해준다.

Button1.js, Button2.js import styles from'./button1.module.css'; 에서 styles는 임의의 변수

Browser 클래스명 바뀌어서 컴파일 되므로 더이상 중첩이 되지 않는다.

2️⃣ styled-component

CSS in JS 관련 리액트 라이브러리

⭐️ 참고자료

공식문서대로 설치 npm install --save styled-components

💡 특징

변수로 컴포넌트를 만들어서 바로 사용할 수 있다.
css 파일을 따로 만들지 않아도 되므로 파일 관리가 용이, but 가독성은 떨어진다.
만든 컴포넌트에 속성을 내려줄 수 있다.

💡 사용하기(1)

기본 사용법을 연습해보자.

App.js import styled from 'styled-components';

⬇️ SelectionBox 라는 컴포넌트를 변수로 선언, styled된 div로 만들어준다. styled.div`` (백틱 안에 스타일 속성 넣어주기)

⬇️ Props 받아와서 특정 스타일 속성 값으로 내려주기 (⭐️ styled-component를 사용하는 가장 큰 이유라고 할 수 있다.)
- Browser

💡 사용하기(2)

이번에는 속성 값을 삼항연산자로 처리해보자.

App.js

⬇️ Circle 이라는 styled.span 를 만들고, 컴포넌트로 4개 생성한다. backgroundColor 를 prop 로 전달하고, 마지막 Circle 컴포넌트에서는 전달하지 않았다.

background : ${(props) => props.backgroundColor || 'skyblue'} ➔ props에 backgroundColor가 있다면 그 값을 background로 지정하고, 없으면 'skyblue'로 지정한다. 따라서, 마지막 Circle 컴포넌트는 background : 'skyblue'가 전달된다.
- Browser

App.js

⬇️ 두번째 circle 에만 box 라는 props 내려주고, 이를 styled 에 전달

Box 라는 props가 있으면 css``의 형태로 css 속성 적용
styled-components 에서 css 도 임포트 해줘야함 import styled, { css } from 'styled-components';
* Browser

[SeSAC DT 과정] REACT - SCSS 사용하기

Thu, 10 Mar 2022 13:12:26 GMT

css를 더 편리하게 사용할 수 있는 css 전처리기(preprocessor) 중 하나인 scss에 대해서 학습해보자.

scss? 👀

💡 웹브라우저는 css 만 읽을 수 있으므로 sass, scss 쓰려면 css 전처리기가 필요하다.
설치는 공식 홈페이지 참고

sass의 버전 3에서 새롭게 등장한 scss는 css와 거의 동일한 형식의 문법을 사용한다. css에 비해 scss 가 가진 장점은 무엇일까?

### 1️⃣ 변수 사용 가능 ⬇️ main, sub 등의 변수로 스타일 값을 지정해서 변동이 생기면 변수만 바꿔주면 된다.
test.scss
Test.js
App.js 에 import 해주고 npm start로 브라우저 확인
💡 css 에서도 변수 처리가 가능하긴하지만, 불편하다.

### 2️⃣ 중첩 (nesting) 가능
구문을 중첩해서 사용이 가능하다.
하위요소, 자식요소 모두 동일하게 사용

⬇️ 클래스 box3 요소 안에 h3, p 태그

Test.js
test.scss
Browser

⭐️ 가상 선택자 중첩으로 쓸 때는 자기자신을 가리키는 & 연산자 필요

3️⃣ Extend

스타일 속성 상속 받기가 가능하다.

@extend .클래스명 (@extend %클래스명 도 가능하지만 리액트에서는 x)

⬇️ box1-2 에 box1의 스타일 상속 받기

test.scss

.box1 {
  width: 500px;
  height: 200px;
  background: $main;
}

Browser

4️⃣ @mixin

scss에서 함수와 유사한 문법을 사용할 수 있게 해준다.
매개변수를 받아올 수 있다!

@mixin 이름(prams){

}

⬇️ 버튼 2개를 @mixin 으로 스타일 주고, props로 $color 값 받아오기

Test.js
test.scss
호출

@include 이름();
$font: #fff; 라고 변수 지정한 상태!
Browser

5️⃣ @mixin 과 클래스 중첩

⬇️ box4 라는 공통 클래스와 색상명을 각각 클래스로 받은 div 4개, 이를 감싸는 container 클래스 div 생성

Test.js
```
     
     
     
     
```

⬇️ 사이즈를 변수로 지정하고, 매개변수로 $wh 에 곱해지는 값을 받는 @mixin 만들기 / box4 클래스 내에서 각 색상명 클래스로 스타일 중첩

Test.scss ⭐️ box4 내의 하위요소(또는 자식요소)가 아닌 자기자신의 클래스이므로, &.색상명
- Browser

devSeung0v0.log

TIL_Vue #3 Router

뷰 라우터

1️⃣ Vue 객체의 router 속성 정의

2️⃣ VueRouter 객체 만들기

📌 router-view

📌 router-link

📌 웹서비스에서 클라이언트와 서버 간의 HTTP 통신 구조 (요청과 응답)

Vue_TIL #2 컴포넌트간 통신 방법 props&event

컴포넌트 통신

📌 상위 컴포넌트와 하위 컴포넌트 간에 통신은 어떻게?

1️⃣ props 로 데이터 내려주기

header

2️⃣ 이벤트로 올려주기 (Event emit)

3️⃣ 같은 레벨에서의 컴포넌트 전달

Vue_TIL #1 MVVM 패턴, 인스턴스와 컴포넌트

👀 Vue.js?

💡 Vue.js 사용하기

📌 데이터가 변경될 때, 그 값을 적용하기

📌 Reactivity ➡️ 데이터 바인딩 구현

⭐️ Reactivity, 반응성

📌 인스턴스 생성하기

📌 컴포넌트 생성하기

📌 컴포넌트와 인스턴스

[리액트 쇼핑몰 만들기] useEffect, Ajax

📌 컴포넌트의 lifecycle

📌 useEffect

useEffect 훅 사용 1️⃣

useEffect 훅 사용 2️⃣

useEffect 훅 사용 3️⃣

💡 useEffect 주의점

💡 setTimeout 주의점

📌 Ajax

1️⃣ 요청의 종류

2️⃣ Ajax 사용 방법

3️⃣ 더보기 버튼 만들기

[노개북] 실용주의 프로그래머 #13

📝 TIL 2022.04.05

오늘 읽은 범위

책에서 기억하고 싶은 내용을 써보세요.

cp.41 실용주의 팀

cp.42 유비쿼터스 자동화

cp.43 가차 없는 테스트

cp.44 결국은 모두 글쓰기

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

[리액트 블로그 만들기] props와 Input

📌 Props

1️⃣ props로 자식(Modal)에게 state 전달하기

{props.title[0]}

2️⃣ 클릭한 글 제목으로 모달창 띄우기

📌 Input

1️⃣ 리액트에서 사용자의 input 받기

2️⃣ 글 발행 기능 만들기

📝 내가 짠 코드

✏️ 피드백

[노개북] 실용주의 프로그래머 #12

📝 TIL 2022.04.04

📌 연습문제 33

1. 응답시간은 500ms 이하여야 한다.

📖 책의 해답

💡 나의 해답

2. 모달 창의 바탕색은 회색이다.

📖 책의 해답

💡 나의 해답

3. 애플리케이션은 프론트엔드 프로세스 몇 개와 백엔드 서버로 구성된다.

📖 책의 해답

💡 나의 해답

4. 사용자가 숫자가 아닌 글자를 숫자 필드에 입력하면 시스템은 입력 필드를 깜빡이고 입력을 거부한다.

📖 책의 해답

💡 나의 해답

5. 이 임베디드 애플리케이션의 코드와 데이터 크기는 32Mb 이내여야 한다.

📖 책의 해답

💡 나의 해답

[노개북] 실용주의 프로그래머 #11

📝 TIL 2022.04.03

오늘 읽은 범위

책에서 기억하고 싶은 내용을 써보세요.

cp.36 요구사항의 구렁텅이

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

[노개북] 실용주의 프로그래머 #10

`{props.title[0]}`