윤코딩 윤코딩

📌장점 1. 높은 자유도 태생 자체가 프레임워크가 아니라 Javascript언어 기반의 라이브러리이기 때문에 개발자가 때마다 필요한 기능을 골라서 사용할 수 있음 컴포넌트 제작 단계에서도 하나의 파일에 여러 개의 컴포넌트를 만들어서 사용할 수 있고, 파일 내에서 함수를 export만 해주면 모두 컴포넌트로 가져다 쓸 수 있음. (Vue와 Svelte의 경우 하나의 파일 당 하나의 컴포넌트만 정의 가능) 2. 컴포넌트 기반의 아키텍처 재사용 가능한 컴포넌트 제작으로 생산성과 유지보수가 용이 파일 내에서 새로운 함수형 컴포넌트를 생성하는 방법으로 컴포넌트 분리가 가능 3. 성능 최적화 Virtual DOM을 사용하여 렌더링을 최적화 컴포넌트 레벨에서 useMemo, useCallback를 이용한 최적화를 제..

React의 특징 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리로, Javascript를 기반으로 함. JSX(JavaScript XML) 문법 사용. 가상 돔(Virtual DOM)을 사용하여 UI렌더링을 최적화. 단방향 데이터 바인딩의 특성. 선언형 프로그래밍 컴포넌트 기반의 UI관리. 그렇다면 지금부터 위에서 설명한 React의 특징을 하나씩 살펴보자. JSX(JavaScript XML) HTML 요소에 유효한 자바스크립트 객체를 내장할 수 있는 자바스크립트 확장이다. Vanilla JS에서는 html과 script를 나누어서 작성했지만, React환경에서는 자바스크립트에서 HTML을 작성할 수 있도록 해주는 것이 큰 장점 📌XML이란 eXtensibla Markup..

브라우저(Browser) 브라우저란, 인터넷에 접속할 때 사용하는 Crome, Edge, Firefox과 같은 도구 브라우저의 렌더링 과정 1. 서버에 리소스 요청 서버에 html, css, javascript, 이미지 등 렌더링에 필요한 리소스 파일을 요청하여 다운로드 받는다. 2. html과 css를 파싱(parsing)하여 Object Model을 생성 html → DOM(Document Object Model) css → CSSOM(Cascading Style Sheets Object Model) 파싱 과정 바이너리 코드의 형태로 온 서버의 응답을 읽고, meta태그의 charset에 의해 지정된 인코딩 방식을 기준으로 이진수를 문자열로 변환 문자형태의 html을 토큰화(토큰화 알고리즘에 따라 의..

Javascript의 정의 Web기술의 기반이 되는 언어로, html문서의 컨텐츠를 동적으로 변경할 수 있게 해주는 언어 버튼 클릭, 내용 입력, 알림창 출력 등등.. 자바스크립트 엔진 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터. 주로 웹 브라우저에서 사용됨(크롬의 V8, 엣지의 Chakra 등) ❓자바스크립트 엔진의 구조 메모리 힙 메모리 할당이 일어나는 곳 객체, 배열, 함수 등 참조타입의 데이터가 저장됨 참조타입의 데이터가 저장된 주소값은 콜스택의 변수 식별자의 값으로 각각 저장됨 -> 함수 실행 시 주소값을 통해 어떤 참조타입인지 찾아감 콜 스택 코드를 한 줄씩 읽으면서 수행할 작업들을 쌓아나가며, 메모리 힙에서 작업 수행에 필요한 것들을 찾아내서 작업을 수행 선입후출(Last In F..

px(pixel) 모니터나 스마트폰에서 하나의 화소에 해당하는 부분. 화면에 표시되는 가장 작은 단위 고정된 단위로, 크기가 변하지 않음 em 상대적인 단위로, 해당 단위가 사용되고 있는 요소에 의해 사이즈가 결정 요소에 font-size 속성이 정의되어있지 않다면 부모 요소의 사이즈를 따라감 개발자 도구로 보면 h1 태그의 폰트 사이즈가 2em으로 되어있다. 2em이 32px로 표현되어 있는데, 이는 h1태그의 부모요소인 body태그가 기본적으로 16px의 사이즈를 갖기 때문. rem 상대적인 단위로, 최상위 엘리먼트인 Root의 사이즈를 기준으로 사이즈가 결정 html에서 최상위 요소는 html태그(기본적으로 16px의 사이즈를 가짐) body태그의 폰트 사이즈를 32px로 바꾸고 em과 rem 비교..

src폴더에는 사용자가 java의 문법에 맞추어 작성한 파일이 저장되고 bin폴더에는 이클립스에서 컴파일된 실행 파일이 저장된다. 우선 패키지 설정이란걸 해줘야 한다. 패키지는 다른 개발자들과 디렉토리명이 겹치지 않도록 해주는 역할을 한다. *보통은 이름에 겹칠 가능성이 없는 도메인 주소를 적는다고 한다. 패키지 내에서 소스코드를 만들어보자 패키지 우클릭 -> New -> Class *클래스는 자바 프로그램의 가장 기본적인 단위 UI를 통해 소스코드를 만들 수 있다. 이름을 입력하고 "public static void main" 체크해주자 UI의 설정값들이 의미하는 것은 대략적으로 이렇다... 이 다음에는 출력을 해줄 명령어를 써주고 Run을 눌러 실행시키면 콘솔 창에 문자열이 출력 된다. **추가 처음..

Hello world 라는 문자열을 출력해주는 코드를 메모장으로 만들어 이클립스 작업공간에 추가하자 켤 때 마다 귀찮지만 cmd는 관리자 권한으로.. "cd" 명령어로 경로를 eclipse실행시 설정한 작업공간(workspace)로 바꿔주자 이렇게 바꿔주고 "dir/w"라는 명령어로 현재 디렉토리를 확인해보면 아까 만들어놓은 Helloworld.java라는 파일을 확인할 수 있다. 이제 이 Helloworld.java라는 파일을 컴파일 해야되는데 ???컴파일 오류가 뜬다. 왜냐하면 이 자바 파일은 사람만 이해할 수 있는 형식으로 작성되어 있기 때문이다. 따라서 이 파일을 버추얼 머신이 이해할 수 있도록 Byte Code의 형태로 바꿔주는 작업이 필요한데 "javac"명령어를 이용하여 작성한 파일을 cla..

OpenJDK 8 검색해서 나오는 링크나 깃 허브에서 윈도우, 맥 버전에 맞게 다운로드 경로 설정 방법은 다른 블로그에도 많이 나와있으니 참고 이후 cmd명령어로 자바 설치 확인 시 경로를 제대로 설정했는데도 안된다면 cmd를 관리자 권한으로 열어보기 이후 이클립스 설치하고 실행하면 또 오류가 나는데 설치폴더의 eclipse.ini 파일을 메모장으로 켜서 openFile --launcher.appendVmargs 바로 다음 줄에 -vm C:\[자신이 설치한 OpenJDK 경로] 입력해주면 해결 가능 eclipse standard 4.3.1 버전으로 깔았을 때 eclipse.ini파일 이렇게 바꿔도 오류 계속나서 4.4버전으로 다시 깔아서 해결함