🥬 상추의 공간

프로그래밍컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션프로그래밍 언어는 구문과 의미 조합으로 표현 요구되는 것문제 해결 능력문제(요구사항)를 명확히 이해복잡함을 단순하게 분해자료를 정리하고 구분순서에 맞게 행위를 배열⇒ 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업, 그 결과물이 코드컴퓨팅 사고: 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 사고 해야 한다.논리적, 수학적 사고 필요해결 과제를 작은 단위로 분해하고 패턴화해서 추출프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 함 프로그래밍 언어문제 해결 능력을 바탕으로 정의된 문제 해결 방안은 컴퓨터에게 전달돼야 함명령을 수행할 주체는 컴퓨터 → 컴퓨터가 이해할 수 있는 언어인 ..

기본적으로 js 코드를 불러오는 법html코드에 js파일을 다 불러온다.function hello1() { console.log("Hello 1!");}function hello2() { console.log("Hello 2!");}hello1();hello2(); 모듈을 사용하여 js 코드를 불러오는 법만약 불러올 js파일이 10개 이상이면 다 html에 연결을 해줘야하지만,모듈을 사용한다면 main이 되는 파일 하나만 html에 연결해준다.js내에서 다른 js를 포함 시킬 수 있기 때문이다.html에서 script type을 module로 지정해줘야 한다.export function hello1() { console.log("Hello 1!");}export function hello2() {..

props는 부모에서 자식 Component로 데이터를 전달하고자 할 때 사용할 수 있다. 일반적으로 고정적인 데이터 값을 전달할 때 사용한다. state는 고정적인 데이터가 아닌, 변경될 수 있는 데이터를 처리할 때 효율적으로 사용된다. 다른 말로, 하나의 웹 사이트가 구상된 이후에도 내부적인 데이터가 계속해서 변경될 수 있는 경우(내부 객체 값이 변경될 여지가 있는 경우)에 효과적으로 사용된다. state 값을 변경해서 화면(view)이 변경되면 render() 함수가 다시 실행되어 실제 화면에 적용해준다. props만 이용하고자 한다면 함수형 컴포넌트를 사용했다. 그러나 state를 사용한다면 Class형 컴포넌트로 사용해야한다. 아래 코드는 3강에서 사용한 시계 코드이다. function tick..

React에서 Component는 JavaScript 함수와 흡사하다고 보면 된다. 어떠한 내용을 화면에 그려줄 지에 대해 정의하고 있는 JavaScript 함수 같은 거라고 이해하면 된다. 이러한 Component는 Props를 부모로부터 입력받아서 결과적으로 화면에 어떤 내용을 그릴지 React Element를 반환하는 형태로 동작한다. Props는 Property(속성)의 약자다. 객체 지향 프로그래밍에서 사용하는 '속성'의 의미와 동일하다. 부모 Component에서 자식 Component로 다양한 속성들을 정의해서 보내줄 수 있다. Props를 이용하여 React Component는 계층적으로 본다. 아래 두 코드는 동일한 기능을 수행한다. Component를 변수로 저장해서 render시켰냐의..

JSX JavaScript 문법의 확장판 react에서의 요소(Element)를 제공 요소는 tag 같은 것들을 모두 포함하는 HTML 단위이다. 마치 js와 html을 한 번에 합쳐 놓은 것 같은 문법 코드1 분석 function formatInfo(student){ return student.name + "["+student.id+"]"; } const student = { id: "20212195", name: "Lee Sanghee", color: "blue", } const element = ( {formatInfo(student)} ); element 변수에는 HTML 태그와 문자열이 포함되어 있는데, 이들이 JSX이다. html 코드 안에서 어떤 부분이 js코드임을 알리기 위해 중괄호를 사용..

코드펜(Codepen) 로컬이 아닌, 웹 상에서 빠르고 효과적으로 코드를 테스트 할 수 있는 사이트 코드펜에서 React 사용하는 법 먼저 파일을 만들고(New Pen) 다음 단계를 따라가면 된다. setting 클릭 JS 클릭 JavaScript Preprocessor에서 'Babel' 선택 Add External Scripts/Pens 에서 'react', 'react-dom' 검색하여 추가 Save & Close 버튼 클릭 babel: jsx 등의 기능을 이용할 수 있음 react: component 같은 기능 처리하도록 도와주는 라이브러리 react-dom: 웹 문서의 dom에 렌더링을 진행하는 라이브러리 기본적으로 웹 문서는 dom을 갖고 있다. > dom에 접근해서 다양한 웹사이트 화면을 그리..

React란? 개발하고자 하는 웹 사이트의 UI(화면, view)를 효과적으로 만들 수 있도록 도와주는 JavaScript 기반 *라이브러리 **라이브러리 : 프로그래밍을 작성하는 과정에 있어서 특정한 기능을 도와주는 함수들의 집합, 각각 함수들은 독립적으로 작동하므로 필요한 함수만 호출하여 쓸 수 있다. 특징 선언적 - 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컴포넌트 기반 - 캡슐화된 컴포넌트가 상태관리 및 UI 구성 재활용에 굳 장점 *클라이언트 렌더링과 *서버 사이드 렌더링 지원 **클라이언트 렌더링: 웹사이트에서 어떠한 데이터를 받아옴에 있어서, 필요할때 그때그때 데이터를 받아오는 방식 **서버 사이드 렌더링: 미리 웹사이트 화면에 필요한 요소들을 서버 쪽에서 미..

nvm use로 Node.js버전을 변경하려니 아래와 같은 문구와 함께 거부가 되었다. exit status 5: Access is denied 관리자 권한으로 실행한 cmd 이용 필자는 git bash를 이용하고 있었다. cmd를 관리자 권한으로 실행해서 하면 된다고 해서 그렇게 해봤다. 관리자 권한으로 어떻게 여는 지 몰라서 일단 나는 아래와 같이 했다. nvm use {변경할 버전} 으로 버전을 바꿔보았다. 버전 바꾸는데 성공했다. - 그냥 궁금해서 관리자 권한으로 실행한게 아닌, 그냥 cmd로도 되는지 테스트 해봤다. 결론: 관리자 권한으로 실행한 cmd를 이용하자 ㅎㅎ.. 몇몇 프로그램을 실행하려고 할때 이렇게 관리자 권한을 요구하는 경우가 있다고 한다. ------ 혹시나 안되는 분은 윈도우 ..