shine의 개발 노트

1. 학습목표 자바 코드 컨벤션을 지키면서 프로그래밍하는 경험 JUnit 사용법을 익혀 단위 테스트하는 경험 학습테스트를 하면서 JUnit 사용법을 익히는 경험 메소드를 분리하는 리팩터링 경험 2. 미션 진행한 Github https://github.com/binna/java-baseball-playground.git 3. 추천서적 1만 시간의 재발견

1. 객체 지향 프로그래밍을 잘하기 위한 9가지 원칙(소트웍스 앤솔러지) ① 한 메서드에 오직 한 단계의 들여쓰기만 한다. ② else 예약어를 쓰지 않는다. ③ 모든 원시 값과 문자열을 포장한다. ④ 한 줄에 점을 하나만 찍는다. ⑤ 줄여 쓰지 않는다(축약 금지). ⑥ 모든 엔티티를 작게 유지한다. ⑦ 3개 이상의 인스턴스 변수를 가진 클래스를 쓰지 않는다. ⑧ 일급 컬렉션을 쓴다. ⑨ getter/setter/프로퍼티를 쓰지 않는다. 2. 클린코드는 왜 중요한가(클린코드)? https://www.youtube.com/watch?v=FSte4ht7jII 3. 레거시(legacy) : 정보·통신 정보 시스템에서 낡은 하드웨어나 소프트웨어를 통틀어 이르는 말. 새로 제안하는 방식이나 기술을 부각하는 의미로..

1. 학습목표 : GitHub을 활용해 미션 기반으로 학습하는 경험을 한다. 컨벤션을 지키고, 읽기 좋은 코드 구현에 대한 필요성을 느끼고, 구현하는 경험을 한다. 테스트 기반으로 리팩터링을 통해 점진적으로 클린코드를 구현하는 경험을 한다. [모집사이트] https://edu.nextstep.camp/c/9WPRB0ys 2. 미션별 학습목표 1) 숫자 야구 게임 - 자바 코드 컨벤션을 지키면서 프로그래밍하는 경험 - JUnit 사용법을 익혀 단위 테스트하는 경험 - 학습테스트를 하면서 JUnit 사용법을 익히는 경험 - 메소드를 분리하는 리팩터링 경험 2) 자동차 경주 게임 - TDD 기반으로 프로그래밍하는 경험 - 매소드 분리 + 클래스를 분리하는 리팩토링 경험 - 점진적으로 리팩토링하는 경험 3) 좌..

1. 색상 변경 "workbench.colorCustomizations": { // "editor.lineHighlightBackground": "#2d9b33", //선택된 라인 전체의 백그라운드 색상 "editor.selectionBackground": "#f0102e", //선택된 영역만의 배경 색상 "editor.wordHighlightBackground": "#ffffff", //선택된 영역만의 글자 색상 "editorCursor.foreground": "#f10808", //선택된 영역에서의 커서 색상 }, 2. JWT(JSON Web Token) : 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의된 기술이다. 3. ..

1. 다른 주소로 이동시키기 : import {Route, Link} from 'react-router-dom'; content [파라미터] /profile/apple [쿼리] /profile?name=apple * 쿼리를 문자열로 받아 처리 가능하지만 객체 형태로 변환하려면 qs 라이브러리를 사용 └ yarn add qs * 서브라우트 : 라우트 내부의 라우트를 만드는 것을 의미한다. ** app.jsx import React from 'react' import {Route, Link} from 'react-router-dom'; import Home from './home'; import About from './about'; import Profiles from './profiles'; const ..

1. useReducer : 상태를 업데이트 로직을 분리할 때 사용 └ state : 컴포넌트에서 앞으로 사용할 수 있는 상태 └ dispatch : 액션을 발생시키는 함수 2. 저번시간에 만든 할일 메모장 만들기에서 Context API를 활용한 상태관리 추가 ** /components/todoContext.js import React, {useReducer, createContext, useContext, useRef} from 'react'; const initialTodos = [ { id: 1, text: '프론트엔드 프로젝트 만들기', done: false }, { id: 2, text: '밥 잘 챙겨먹기', done: true }, { id: 3, text: '운동하기', done: true..

1. 새롭게 강사님이 주신 압축파일로 실습 환경 세팅, 시스템 응급 복구 : 관리자 비밀번호 되찾은 뒤, 그래픽 모드로 복구해서 작업하기 ** 재부팅(단축키 Ctrl + Alt + Insert) + 커널모드 e → rw와 init=/bin/bash로 변경 후 Ctrl + X** bash 모드, bash 모드는 관리자 비밀번호 몰라도 들어갈 수 있음! → passwd → exec /sbin/init** 비밀번호는 잘 바뀌었으나 현재 부팅모드는 우리가 사용하기 어려운 부팅모드로 그래픽 모드로 변경 필요!** 재부팅(단축키 Ctrl + Alt + Insert) + 커널모드 e  → single로 변경후 Ctrl + X** 그래픽 모드로 설정 완...!  2. /etc/inittab  3. 부팅모드1) Cent..

1. classnames 모듈 사용 ** /component/button.jsx import classNames from 'classnames'; import React from 'react'; import './button.scss'; /* HTML에서 CSS class 적용 2가지 class 적용 */ function Button({children, size, color, outline}) { // return {children}; // classnames 사용시 return {children}; } Button.defaultProps = { size: 'medium', color: 'blue' } export default Button; ** /component/button.scss $blue: #..

1. useRef의 기능 ① DOM에 직접 접근하는 방법 ② 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 2. useRef로 컴포넌트 안의 변수 만들기 └ 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 └ setTimeout, setInterval을 통해서 만들어진 id └ 외부 라이브러리를 사용하여 생성된 인스턴스 └ scoll 위치 1) 배열의 항목 추가 ** /component/userlist2.jsx import React from 'react'; function User({user}) { return ( {user.username} ({user.email}) ) } function UserList({users}) { return ( {users.map(user => ( ))} )..

1. JSX 1) 태그에 style과 CSS class를 설정하는 방법 ① css 파일을 만들지 않는 경우 : background-color → backgroundColor ② css 파일을 별도로 만드는 경우 : import 후 className 속성으로 등록 2) 주석을 작성하는 방법 : { /* */ } 3) props ** props를 통해 컴포넌트에게 값 전달하는 방법 ① function 컴포넌트명(props) { "props.속성명" 으로 사용 } ② function 컴포넌트명({속성명1, 속성명2}) { "속성명1" 으로 사용 } ** 기본값을 설정하는 방법 컴포넌트명.defaultProps = { 설정할 내용 } [예] 기본값을 설정하지 않는다면 [예] 기본값 설정 후 ** 컴포넌트 태그 ..