동탁의 개발자취

* 엘리스 수강 중 2차 스터디에서 조사한 객체 지향 프로그래밍에 대한 발표 자료 정리 블로깅 입니다. 객체 지향 프로그래밍이란? 우선 객체 / 지향 두 가지 단어의 뜻을 한번 확인해 보면 지향 : 객체(컴퓨터 과학에서) : 따라서 객체 지향 프로그래밍이란 간단하게 라고 볼 수 있다. 객체 지향 프로그래밍이란 컴퓨터 프로그래밍의 패러다임 중 하나로 그동안의 사람들이 컴퓨터 프로그래밍에 대해서 정해 놓은 견해나 사고들을 다르게 바꾼 패러다임 중의 하나이다. 기존의 컴퓨터 프로그래밍에서는 프로그래밍을 각각의 다른 명령어들의 나열로 보는 것과 다르게 각각의 객체가 메세지를 주고 받고 데이터를 처리 할 수 있으며, 이 독립적인 객체들의 모임으로 프로그래밍을 파악하는 것이 객체 지향 프로그래밍으로의 패러다임 변화..

엘리스 트랙 2차 스터디로 만든 엘리스 취업 스터디 엘취스에서의 1차 CS스터디 발표 자료 입니다. 해당 발표는 엘리스 트랙 스터디 중에서 제가 준비한 발표 자료로 정확하게 일치하는 정보가 아닐 수 있습니다. 내용은 실행 컨텍스트 (Execution Context)로 실행 컨텍스트에 대한 이해가 있어야 JavaScript에서의 로직 읽기, 로직 짜기가 가능하다고 생각하여 준비하게 되었습니다. 실행 컨텍스트란? 자바스크립트 코드가 실행되는 환경으로 크게 전역 실행 컨텍스트 , 함수 실행 컨텍스트가 있습니다. 전역 실행 컨텍스트는 해당 브라우저를 닫을 때까지 유지가 되며 함수 실행 컨텍스트는 함수가 호출 될 때마다 새롭게 실행됩니다. 저는 실행 컨텍스트에서의 적용 범위를 해당 방법으로 이해를 하고 생각을 하..

SQL : RDB (관계형 데이터베이스)에서 데이터를 다루고 관리하는데 사용하는 데이터베이스 질의 언어 SQL을 쓰는 이유 : 엑셀은 최대 104.8만 행을 지원하지만 데이터가 커지면 급격하게 느려진다. SQL 구문으로 엑셀과 같은 결과를 도출할 수 있으며 Python, R에 상관없이 데이터를 쉽게 전처리 하는 것이 가능하다. ! Database란 : 구조화 된 데이터의 집합, 여러 사람들과 실시간으로 공유하여 사용이 가능하다. 1. DBMS DataBase Management System 1) 데이터 베이스의 데이터 조작과 관리를 극대화한 시스템 소프트웨어 2) 여러 목적으로 사용할 데이터의 접근, 관리 등의 업무를 DBMS가 전담 3) 응용 프로그램이 필요한 데이터 작업을 DBMS에 요청하면, DBM..

1. Props Props 란? 기본적으로 component에 원하는 value를 넘겨줄 때 사용하며 넘길 수 있는 value는 변수, 함수, 객체, 배열 등 JS의 요소라면 상관이 없다. 주로 component의 재사용을 위해 사용된다. // props의 생성 const Sayhello = (props) => { return Hello, {props.name}; } // component로의 사용 const App = () => { return ; } // Sayhello component안에 name tag로 동탁 value 전달 ! 단 props의 값은 임의로 변경해서는 안된다. // 안 좋은 예시 (값을 임의로 변경) props.name = props.name + '님' // 좋은 예시 (새로운 ..

1. 엘시코기 스터디 엘리스로 시작한 코딩 기초 스터디 엘리스 AI 6기 과정을 수강 중 좀 더 효율적인 강의 수강을 위한 방법을 고민하던 중, 오프라인 스터디를 통하여 집중력을 향상 시키기 위하여 스터디장을 자처하여 해당 스터디를 구상하고 스터디원을 모집하게 되었다. 또한 처음으로 코딩을 접하는 나 자신과 팀원들의 코딩하는 습관을 위하여 1. 매일 기상 후 오늘의 계획 공유 2. 매일 취침 전 오늘의 성과 공유 3. 주 3회 이상 블로그 업로드 및 공유 다음과 같은 규칙을 세우고 직접 디스코드 채널 및 노션 페이지를 개설하여 운영하였고 전체 스터디원들이 성실하게 따라와 준 결과 성공적으로 6주 간의 스터디 일정을 마칠 수 있었다. 최종적인 스터디 종료 후 스터디 발표를 위하여 해당 PPT를 제작하였고,..

Component 1. Component 란? - React에서 페이지를 구성하는 최소단위 - Component의 이름은 대문자로 시작 - Class Component / Function Component로 나뉨 const NewComponent = ({Test}) => { return {Test} } // Tip : padding 등 style을 사용시에는 px를 생략 가능하다. // NewComponent의 object에 {Test}를 넣어서 사용 const Test = () => { return ( 이건 TEST 입니다. ) } Component를 만든 후 다른 Component에서 자유롭게 활용 할 수 있다. ! Component의 이름은 항상 대문자로 시작한다. 2. Class Component..

JSX 1. JSX 란? JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 HTML과 비슷하게 생겼으나 JavaScript로 HTML과 다른 부분이 있다. const App = () => { return ( Hello World ) } JSX를 실제 사용하게 되면 JS형식으로 Transcompile 된다. 2. JSX의 장점 1. 개발자의 편의성 향상 2. 협업에 용이 / 생산성 향상 3. 문법 오류와 코드량 감소 ! HTML과의 차이점 1. HTML 태그 내에서 JavaScript 연산 2. class = className 3. style은 Object로 4. 닫는 태그는 필수로 사용 5. 최상단 element는 반드시 하나여야 한다. // style을 objec..

최신 JS 문법 알아보기 React를 사용하기에 앞서 최신으로 사용하는 유용한 JS 문법을 정리 하였다. 1. var에서 let , const로 그동안의 변수 선언에서는 var를 많이 사용해 왔으나, 이제는 var를 사용하지 않고 let, const를 사용한다. const 는 한 번 값을 선언하면 값을 바꿀 수 없으며, 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다. let은 선언과 변경이 자유롭다. 만약 error가 생길 경우 const는 값이 다르면 error를 뱉지만 let은 error를 뱉지 않는다. 따라서 특수한 경우가 아니면 이제는 변수 선언에서 const를 사용하는 것이 좋다. 2. Array 메소드 1) forEach Array.forEach 는 배열의 요소를 이용해 순차적으로 ..

1. Express.js Express.js는 Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크이다. 필요에 따라 유연하게 구조 설정이 가능하며, 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 할 수 있다. 모든 동작이 명시적으로 구성되기 때문에 웹 프레임워크의 동작 방식을 이해하기 가장 좋다. 2. express-generator 사용하기 // 1. 프로젝트 생성 $npm i -g express-generator $express my-web // 프로젝트 생성 $cd my-web $npm i $npm start // 프로젝트 실행 // express-generator // 2. npx로 생성 $npx express-generator my-web // 프로젝트 생성 $cd my-web $..

1. 웹이란 World Wide Web, 인터넷상에서 동작하는 모든 서비스 일반적 의미 - 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트 참고 : 2022.11.29 - [ELICE AI6/HTML&CSS] - ELICE) HTML & CSS ELICE) HTML & CSS 1) 인터넷 == 웹 ?? 웹이 자동차라면 인터넷은 도로, 웹이 건물이라면 인터넷은 건물 팀 버너스 리는 World Wide Web(WWW)의 창시자로 WWW관련 기술들을 만들어 인터넷을 대중에게 가져다준 인물이다. 스 ursamajor0104.tistory.com 2. 웹 서비스 동작 방식 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐 1. 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달 2. 서버는 사..