코드를 위한 기록

인터넷 : 전세계적으로 연결되어있는 컴퓨터 네트워크 통신망 (웹, 온라인 게임, 모바일 앱, 이메일 등) 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람과 공유할 수 있는 '공간' 2000년 초에는 브라우저 호환이 되지 않아, 다른 브라우저에서는 기능을 사용하지 못하거나 화면이 정상적으로 보이지 않았음 -> 브라우저별로 개발을 해야했으며 이에 웹 개발 형식을 통일시키게 됨 = 웹 표준 웹 표준 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙. 사용자가 어떤 운영체제나 브라우저를 사용하더라도, 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있게 하는 웹 페이지 제작 기법 (크롬, 사파리, 엣지, 오페라, 파이어폭스 등 최신 브라우저는..

redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어. 이 미들웨어를 사용하면 액션 객체뿐만 아니라 함수도 디스패치 할 수 있음 import { useDispatch } from 'react-redux' const dispatch = useDispatch() // 기존 dispatch(Action객체) // redux-thunk dispatch(함수) 내부 구조 action이 함수면 함수의 인자로 dispatch와 getState 전달, 아니면 next(action객체) 호출 const thunk = store => next => action => typeof action === 'function' ? action(store.dispatch, sto..

Data type 데이터 타입을 구분하는 이유 - 처리하는 방식이 다르기 때문에 - 타입별로 사용하는 연산이 다르기 때문에 // 출력. js의 console.log() system.out.prinln(); // sout으로 입력할 수 있음 public class Datatype { public static void main(String[] args){ System.out.println(6); // 6 // Number System.out.println("six"); // six // String System.out.println("6"); // 6 System.out.println(6+6); // 12 System.out.println("6"+"6"); // 66 } } Number(숫자) 사칙연산(+-..

기존 상태의 비효율성으로 인해 상태 관리 라이브러리가 필요하게 됨 1. 불필요하게 관여된 컴포넌트들도 상태를 가지게 됨 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀐다면 기존의 데이터 흐름을 완전히 바꿔야 할 수도 있음 * Redux는 React의 하위 라이브러리가 아님 React 없이도 사용할 수 있는 상태 관리 라이브러리 Redux의 구조 Action -> Dispatch -> Reducer -> Store 1. 상태가 변경되어야하는 이벤트 발생 시, 변경될 상태에 대한 정보가 담긴 Action 객체 생성 {type: 'INCREASE'} 2. Action 객체는 Dispatch 함수의 인자로 전달됨 ..

상태(state): UI에 동적으로 표현될 데이터 Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 - Side Effect를 최대한 배제하고 컴포넌트를 만들어야 함 (API요청 없이도 컴포넌트가 작동하도록 로딩 화면 구현 = presentation표현 컴포넌트) 상태를 구분하는데 절대적인 기준이나 법칙이 있는 것은 아님 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태 ex) 다른 컴포넌트와 데이터를 공유하지 않는 form폼 데이터(input box, select box 등) 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 ex) 테마(다크모드), 국제화(Globalization, 사용자 언어), 포토샵/일러스트의 히스토리 기능과 Undo/Red..

Java 설치 // 터미널 // 버전 확인을 통해 자바가 설치되어있는지 확인 java -version sudo apt update sudo apt install default-jdk // jdk는 java development kit java editor intellij, eclipse, vscode 등 vscode 사용 소스 파일은 src 폴더 컴파일한 파일은 bin 폴더에 저장됨 소스 파일(원인을 부르는 방식) : source, code, language 컴파일한 파일(결과를 부르는 방식) : application, program 파일 실행 // 터미널 java 파일이름 파일 이름과 파일 내부의 클래스 이름을 같게 설정하기 전체적인 흐름 Java Source code .java 사람이 이해할 수 있는..

CDD를 지원하는 도구인 Component Explorer(컴포넌트 탐색기) StoryBook 컴포넌트 탐색기의 UI 개발 도구 중 하나 컴포넌트들을 따로 볼 수 있게 구성하여 한 번에 하나의 컴포넌트에서 작업할 수 있음 특징 1. 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 시각화함 - 다양한 테스트 상태를 확인할 수 있음 - 버그를 사전에 방지 - 테스트 및 개발 속도 향상 - 의존성을 걱정하지 않고 빌드할 수 있음 2. 독립적인 개발 환경에서 실행됨 - 다양한 상황에 구애받지 않고 UI 컴포넌트를 개발할 수 있음 회사 내부에서 UI 라이브러리로 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용 주요 기능 - UI 컴포넌트를 카탈로그화 - 컴포넌트 변화를 stor..

XOR 연산(^) 두 피연산자를 32비트의 정수로 변환(2진법)하여 각 자리의 값(0 또는 1)이 같으면 그 자리를 0, 다르면 1로 바꿔 10진법의 정수로 리턴 const a = 5; // 00000000000000000000000000000101 const b = 3; // 00000000000000000000000000000011 console.log(a ^ b); // 00000000000000000000000000000110 // expected output: 6 두 피연산자와 결과값까지 세 값은 한 쌍임 const a = 5; const b = 3; const c = a ^ b console.log(c); // 6 console.log(c ^ a) // 3 console.log(b ^ c) /..

구조적인 CSS 작성 방법의 발전 CSS -> SASS -> BEM -> CSS Modules -> CSS-in-Js(Styled Components) 구조화된 CSS가 필요하게 된 이유 - 프로젝트의 규모와 복잡도가 커지며 함께 작업할 팀원들이 많아짐 - 모바일이나 태블릿 등 다양한 디스플레이 등장 CSS 전처리기(CSS Preprocessor) 컴파일을 통해 CSS문서로 변환(각 CSS 전처리기에 맞는 Compiler를 사용해야 함) CSS의 문제(유지관리 어려움)를 프로그래밍 개념(변수, 함수, 상속 등)을 활용해 해결 반복적인 작업 번거로운 작업(Color 찾기, Tag 닫기 등) 클래스와 상속 등으로 인한 CSS 문서 양 증가 SASS(Syntactically Awesome Style Sheet..

클라이언트/서버 예제 서버는 소켓을 열어놓고 클라이언트가 연결하길 기다리고, 클라이언트는 소켓에 연결해 요청을 보냄 서버 시스템 작업 처리량을 검증하는 전형적인 예( @Test(timeout = 10000) public void shouldRunInUnder10Seconds() throws Exception { Thread[] threads = createThreads(); startAllThreads(threads); waitForAllThreadsToFinish(threads); } 시스템이 클라이언트 요청을 10초 내에 처리해야 한다는 의미 테스트가 실패한다면 - 단일스레드 환경에서 속도를 끌어올릴 방법은 거의 없음(이벤트 폴링 루프 구현) - 다중스레드를 사용한다고 성능이 높아진다는 보장은 없음 ..