판수개발자

1. SSR의 정의와 설명 "Server Side Rendering"의 약자로 서버쪽에서 렌더링 준비를 마친 상태로 완전하게 만들어진 HTML파일을 클라이언트에 전달하는 방식이다. CSR에 비해 초기 로딩 속도가 빠르다. 그래서 사용자가 컨텐츠를 빠르게 볼 수 있다. 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 매번 페이지를 요청할 때마다 새로고침 되기 때문에 UX가 다소 떨어진다. 페이지를 이동할 때마다 매번 서버에 요청을 하기 때문에 서버의 부하가 커진다. 2. CSR의 정의와 설명 "Client Side Rendering"이란? 전통적인 방식으로는 SPA가 사용하는 렌더링 방식 최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, JS 등 각종 리소스들을 받아오는 방식 -> HTML을..

react를 사용하기 위한 기본 라이브러리(react+babel+webpack) 기본 라이브러리 npm init npm i react react-dom react: 리액트 라이브러리 react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다. react-scripts: 리액트 프로젝트 초기 셋업을 쉽고 간편하게 해준다. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 자동으로 옛날 브라우저들을 지원한다. babel-preset-react: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면..

npm : 자바스크립트 언어를 위한 패키지 관리자로 Node.js의 기본 패키지 관리자 - package.json을 사용해 패키지를 확인하고 버전을 기록할 수 있다. yarn : facebook에서 만든 자바스크립트 패키지 매니저npm의 단점(속도, 안정성, 보안성)을 해결하기 위해 제작 속도(performance) yarn은 다운받은 패키지 데이터를 캐시에 저장하여 중복된 데이터는 다운로드 하지 않고, 캐시에 저장된 파일을 활용함으로써 이론적으로 npm에 비해 패키지 설치속도가 매우 빠르다. 또한 패키지 설치시 병렬처리 구조이기 때문에 performance와 speed가 증가된다. 안정성(stability)/보안성(security) npm은 패키지가 설치될 때 자동으로 코드의 의존성을 실행할 수 있도록..

개념적으로 컴포넌트는 JS함수와 유사하다. props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JS함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터이다.) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다. class Welcome extends React..

엘리먼트는 React앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술함 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. 컴포넌트와 엘리먼트를 혼동하지 말 것! 엘리먼트는 컴포넌트의 구성요소이다 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 본다면 const element = Hello, world; 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 '루트'DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재, ..

REACT 공식문서를 토대로 학습한 내용을 정리하기 위해 작성하였다. 빠른 시일내에 공식문서를 익혔으면 좋겠다. JSX(표현식)란 JavaScript에 XML을 추가한 문법이다. 그러므로 JS의 모든 기능이 포함되어 있음. 작성 코드는 브라우저에서 실행되기 전에 번들링 과정에서 바벨을 사용해 일반 JS 형태의 코드로 변환된다. React에서는 본질적으로 렌더링 로직이 UI로직과 연결된다. 컴파일이 끝나면 JSX표현식이 정규 js 함수 호출이 되고 js객체로 인식된다. 즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다. JSX 문법규칙 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. function App..

문제 정수 X에 사용할 수 있는 연산은 다음과 같이 세 가지 이다. X가 3으로 나누어 떨어지면, 3으로 나눈다. X가 2로 나누어 떨어지면, 2로 나눈다. 1을 뺀다. 정수 N이 주어졌을 때, 위와 같은 연산 세 개를 적절히 사용해서 1을 만들려고 한다. 연산을 사용하는 횟수의 최솟값을 출력하시오. 첫째 줄에 1보다 크거나 같고, 106보다 작거나 같은 정수 N이 주어진다. DP 문제를 풀이하면서 이해가 잘 가지 않는 부분이 있어 정리해보았다. DP란 문제를 더 작은 단위의 문제들로 나눈다. 작게 나누어진 문제들의 풀이들을 재귀적인 방식으로 최적화 솔루션을 찾음 Tree 형태의 탐색 방식이라고 보아도 무방 모든 상태에 대해 최적의 결과를 모두 어딘가에 ‘저장’ 하고 있다는 사실도 잊지 말자. 즉 모든 ..

Vue.js 와 React.js의 초기설치 방법에 대해서 정리했습니다. 1) vue 2.0 node.js를 다운로드 받고 npm install vue를 통해 vue를 설치한다. vue install -g @vue/cli vue init webpack 프로젝트명 2.0 버전과는 다르게 vue 3.0버전에서는 vue create 프로젝트명 으로 vue 프로젝트를 설정할 수 있다. 3.0버전에서도 2버전의 vue init webpack 프로젝트명 를 사용 할 수 있다. cli는 전역으로 설치하는 vue전용 npm패키지로서 reacte appr과 비슷한 초기세팅을 도와주는 패키지이다. vue init webpack은 사용자가 직접 원하는 설정을 지정해 프로젝트를 만들지만 3.0버전은 이 과정이 생략된다. 2) ..

- 22 동계 대학생 S/W 알고리즘 특강 사전문제 1. JAVA언어로 알고리즘 3문제 풀이 시작 2. 난이도 자체는 어렵지 않아 보이는데 해설이 너무 장황해서 이해하는데 시간이 걸렸다..

최대공약수를 활용하여 대각선으로 선이 그어진다면 선에 겹치는 영역을 제외한 나머지 정사각형들의 개수를 구하는 문제이다. - 첫 시도시 최대공약수가 아닌 w와 h의 크기별로 비교를 하여 해결하려 했는데 44.4에서 정답률이 올라가지 않아 최대공약수를 사용해 해결하였다. def check(w, h): # w와 h중 max=a, min=b a, b = max([w, h]), min([w, h]) while True: # 최대 공약수 구함 r = a % b # 최대공약수를 구한다면 return b if r == 0: return b # b에는 현재 r의 결과값이 들어가있으므로 max의 값은 필요없고 b의 min값을 비교해야함 a = b # r의 현재 값을 b에 넣어줌 b = r def solution(w,h):..