기술면접(Redux이외의 전역상태관리 - Recoil) Redux외 다른 전역 상태 관리 Redux를 제외하고 많은 전역 상태 관리들이 존재하지만 에 대해 알아보려고 한다. : Facebook에서 개발한 React 상태 관리 라이브러리로, 컴포넌트 간에 상태를 공유하고 관리하기 위한 강력한 기능을 제공한다. Redux와 Recoil의 차이점 Redux Recoil 접근 방식과 복잡성 Redux는 액션, 리듀서, 스토어 등의 개념을 사용하여 엄격한 단방향 데이터 흐름을 구현합니다. 이에 따라 초기 학습 곡선이 높을 수 있습니다. Recoil은 컴포넌트 기반 아키텍처에 더 가까운 방식으로 동작합니다. 원자와 선택기를 사용하여 비교적 직관적인 코드를 작성할 수 있으며, 초기 학습 곡선이 Redux보다 낮을 수 있습니다. 데이터 흐름 Redux는 엄격한 단방향 데이터 흐름을 강조하며, 상태 변화를 불변 객체를 통해 관리하고 액션-리듀서 구조로 데이터 흐름을 제어합니다. Recoil은 …

기술면접(Redux가 무엇이고 사용하는 이유) Redux란? 는 JavaScript 애플리케이션의 전역 상태 관리를 위한 라이브러리입니다. 리액트(React)와 함께 많이 사용되며, 복잡한 상태를 효율적으로 관리하고 예측 가능한 데이터 흐름을 구현하는 데 도움을 줍니다. 주요 개념과 동작 방식은 다음과 같습니다. Redux 주요개념 : 애플리케이션의 전역 상태가 저장되는 곳으로, 앱 내부 어디에서나 접근 가능한 중앙 데이터 저장소입니다. : 상태 변화를 나타내는 객체입니다. 어떤 변화가 필요한지를 나타내며, 타입(type)과 데이터(payload)로 구성됩니다. : 액션의 타입을 기반으로 상태를 어떻게 변화시킬지 정의하는 함수입니다. 이전 상태와 액션을 받아 새로운 상태를 반환합니다. : 액션을 발생시켜 상태 변화를 일으키는 메소드입니다. 디스패치된 액션은 리듀서에 의해 처리되어 상태가 업데이트됩니다. : 스토어의 상태가 변경될 때마다 호출되는 함수를 등록하는 메소드입니다…

기술면접(상태관리를 하는 이유) 상태관리란? 서비스의 규모가 커질수록 관리해야할 데이터가 많아지고 이를 체계적으로 관리하기 위해 상태 관리라는 라이브러리를 사용한다. 부모 컴포넌트에서 props로 자식 컴포넌트로 데이터가 전해지게 되는데 깊이가 길어지면 어디서 전해지는 데이터인지 알 수 없기 때문에 현상을 막기 위해 상태관리를 사용한다. 상태관리란?

KPT 한 일 프로젝트 명 : CHEERS (칵테일 레시피 공유 사이트) 프로젝트 소개 : 일상에 지친 여러분들에게 한줄기 취기를 선물해주는 치얼스! 필수 작업 : CRUD, 설문조사 구현 추가 작업 : 로딩 중 페이지, 404 페이지, 배포 느낀 점 김채현 K: 팀원들과 상시 소통이 잘 되었던 점, 문제가 있으면 바로바로 대화하며 해결할 수 있었던 점이 좋았습니다. 또, 팀원 모두가 각자 맡은 역할은 책임감 있게 마무리하려고 노력해서 원활하게 끝난 것 같습니다! P: 데이터 api를 가져오는 과정에서 시간을 생각보다 많이 썼고, 기능 구현도 생각보다 시간이 오래 걸려서 처음 기획했던 구현을 다 하지 못한 것이 아쉬웠습니다. T: 최종프로젝트 전까지 개인 공부를 통해 부족한 부분을 채워넣어보려고 합니다. 또 레이아웃 구성 시 리액트 렌더링 순서를 조금 더 고려해보고자 합니다! 정봉호 K: 맡은바 역할을 끝까지 진행한 것, 문제 해결을 위해 여러 자료들을 참고하면서 노력한 것, 원활…

KPT 한 주의 흐름 한 일 프로젝트 명 : MoodFood (설문조사를 이용한 음식 추천 사이트) 필수 작업 : CRUD, 설문조사 구현 추가 작업 : 로딩 중 페이지, 404 페이지, 배포 느낀 점 인재 : 그래도 협업을 몇 번 해봤다고 조금 더 부드럽게 진행이 된 것 같아서 달성감을 느낄 수 있었다. 어려움에 맞서 모두와 같이 고민할 수 있어서 좋았다. 혜인 : 설문조사라는 새로운 프로젝트 경험을 하게 되어 좋은 시간이었고, 많은 오류들을 마주하며 리액트 라이프사이클에 대한 이해도를 높여야겠다는 생각이 들었습니다. 지원 : 이번 프로젝트를 통해 배웠던 개념들을 한번 더 습득할 수 있었고, 팀원분들과 함께 문제들을 해결하며 협업하는 과정과 문제해결 방법을 배울 수 있었습니다. 대현 : 새로운 유형의 프로젝트를 경험하고, 배웠던 것들을 다시 한번 정리하는 시간을 갖게 돼서 좋았습니다. Keep 적극적으로 참여하는 모습 열정을 가지고 끝까지 이뤄냈던 점 긍정적으로 생각하며 발전을 …

기분에 따른 음식 추천 설문을 통해 가장 많이 나온 기분에 대한 음식을 추천해주기 위해서 최빈 값을 구한다. Js Map 객체 ES6부터 새로 도입된 개념이다. 키와 값을 연결하기 위해 사용하는 데이터 유형이다. 프로토 타입은 . 기존 객체와 달리 다양한 타입, 심지어 객체로도 키를 설정할 수 있다. 객체와 달리 자료를 반복할 수 있어 나 스프레드 연산자를 사용 가능하다. 배열처럼 삽입된 순서나 크기를 구하기 쉽다. 실행 시까지 키를 알 수 없고, 모든 키와 값들이 동일한 type일 경우 사용하기를 추천한다. 메서드 : 일반 생성자 함수와 같이 변수처럼 사용 가능하다. : 객체와 비슷하게 키와 값을 한 번에 선언할 수 있다. : 객체와 비슷하게 인자에 키를 넣어 값이나 Undefined를 반환한다. : 데이터 존재 유무를 Boolean 값으로 반환한다. : 키로 값을 제거한다. : 모든 데이터를 삭제할 수 있다. : 데이터 갯수를 반환한다. : 키에 대해 반복 가능한…

Pinfo 1. Pinfo 프로젝트 소개 메인페이지 - 자유 / 질문게시판의 최신 / 인기글을 확인할 수 있음 자유게시판 - 반려동물에 대한 자유로운 주제로 소통할 수 있음 질문게시판 - 반려동물에 대한 궁금한 점들을 묻고 답할 수 있음 마이페이지 - 본인이 작성한 게시글과 댓글들을 확인할 수 있고, 프로필 이미지를 설정할 수 있음 회원가입 - 회원정보를 등록할 수 있음 로그인 - 소셜 로그인이나 회원가입되어 있는 정보로 로그인할 수 있다 역할분담 임선우(팀장): 회원가입, 소셜 로그인, 프로필 이미지 설정 노진철: 글 작성 기능, 댓글 기능, 로그인 양지원: 자유게시판에 글 목록 보여주기, 무한스크롤 임설빈: 회원가입, 마이페이지 전대현: 질문게시판에 글 목록 보여주기, 페이지네이션 API 명세 스크린샷 2023-07-03 오전 9.45.38.png 2. 시연 3. 트러블슈팅 페이지네이션 오류사항: 데이터 검색할 때 해당 검색데이터 양과 페이지가 일치하지않는 현상…

Component React Component란? React 컴포넌트를 표현하는 두 가지 방법 함수형 컴포넌트 클래스형 컴포넌트 Component 보는 방법 코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다. 컴포넌트 밖에서는 내가 필요한 파일을 import하거나, 또는 export default라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다. 컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있다. retur을 기준으로 아래부분에서는 Jsx(=HTML)을 작성할 수 있다. JSX JSX란? 로 Js안에 HTML 태그를 사용할 수 있다. JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다. JSX 실습 태그는 꼭 닫아야한다. 무조건 1개의 엘리먼트를 반환하기 JSX에서 javascript를 사용하려면 Class 대신 className JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용한다. …

필수문법 상수와 변수 ES6로 넘어오면서 var키워드 보단 const, let 변수를 많이 사용하게 됩니다. cosnt vs let : 둘 다 block level scope({})를 가진다. const : 재할당이 안되고 내부 속성값은 수정 가능하다. let : 재할당이 가능하다. Object 선언, 단축 속성, 객체 복사 객체를 선언 하는 방법 생략해서 표현하는 방법 얕은 복사 Template Literals 배열/객체 비구조화 (Array/Object Destructuring) 이라고도 한다. 객체의 비구조화(구조분해 할당) 배열의 비구조화(구조분해 할당) 전개 연산자(Spread Operator) Arrow Function ES6에서 자주 사용되는 문법 중에 하나로 라고도 불린다. CRA CRA란? 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법이다. CRA로 프로젝트 생성하기 명령어 ls : 현재 내가 위치하고 있는 폴더의 하위 폴더들…

한 주 요약 팀 과제(상세페이지 구현) 새로 알게 된 사항 알고 있었다고 생각했던 부분의 개념 부족하다는 것 Git Rebase을 통해 충돌 해결 한 주를 되돌아보며… Git Rebase를 개념이 잡혀있지 않은 상태로 시도했다가 파일들이 많이 꼬였던 경험들이 있었는데 이번에도 충돌이 생겨 겁이 너무 많이 났다. 팀원들과 협업을 통해 그 부분을 해결하고 나니 다시 한 번 협업에 대한 중요성을 깨달았고, 처음부터 겁 먹지 말자는 생각이 들었습니다. 또, 가볍게만 알았던 git add commit push pull에 대한 개념들이 이번 프로젝트를 통해 확실히 알게 되었습니다. 한 주 요약 새로 알게 된 사항 한 주를 되돌아보며…

팀프로젝트를 시작하기 전 팀프로젝트를 시작 전에는 내가 팀에 도움이 될 수 있을까? 걱정을 많이 했지만 이 프로젝트를 통해 많이 배우자라는 생각을 했습니다. 팀프로젝트를 진행하면서 프로젝트를 진행하면서 같은 코드여도 다르게 접근할 수 있는 것을 보았고, 제가 몰라서 해결하기 힘들었던 부분을 알려주는 팀원들이 없었으면 어땠을까? 생각을 해보게 된 프로젝트였다. 팀프로젝트를 마치고 나서 내가 누군가에게 알려줄 수 있다는 것이 너무 행복했고, 같은 과제인데 다르게 접근하는 것을 보고 내가 알고 있는 방법 말고도 다양한 방법으로 해결할 수 있다는것을 배웠다. 앞으로 더 열심히 공부해서 더 많은 것에 대한 생각을 나누고 배우고 싶다는 생각이 들었던 프로젝트였다. 시연 img/til-13day-video.gif 팀프로젝트를 시작하기 전 팀프로젝트를 진행하면서 팀프로젝트를 마치고 나서 시연

구상 원하는 영화에 하트를 누르면 버튼이 활성화 되고 메인 페이지 이동하거나 다른 영화를 보고 다시 돌아와도 초기화가 되는 것이 아니라 선택된 그대로 있도록 저장하도록 한다. 소스코드 HTML font-awesome 외부 라이브러리를 통해 하트 이미지를 가져온다. onclick 함수를 이용해 하트를 선택할 때 활성화가 될 수 있도록 한다. JS 상단에 선언해놓은 id값을 String타입으로 변환 후 localStorage에서 가져온다. 조건문을 활용해서 저장된 값이 문자열 true이면 html에서 선언한 버튼 id값에 선택이 되면서 색이 변경이 되면서 저장되고, 페이지 이동시에도 저장되어있어 다시 들어가도 좋아요 버튼이 활성화 된 것을 확인할 수 있다. 함수 heartLight를 통해 html에서 하트를 클릭할 때 문자열 참, 거짓 값을 비교해서 버튼 활성화 여부를 판단한다. CSS 결과 구상 소스코드 HTML JS CSS 결과

LocalStorage와 SessionStorage Web Storage는 데이터 지속성과 관련하여 두 가지 용도의 저장소를 제공한다. LocalStorage 사용자 세션 데이터를 유지할 수 있다. 브라우저 닫았다가 다시 열어도 데이터가 유지된다. 탭을 여러개 열어도 공유된다. 명시적으로 삭제될 때까지 지속된다. 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다. SessionStorage 브라우저 세션 기간 동안만 사용할 수 있으며 탭이나 창을 닫으면 삭제된다. 새로고침을 해도 유지된다. 변경 된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다. 탭이 닫히면 저장된 데이터가 삭제 된다. 출처 🔗 https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 🔗 https://dev-syhy.tistory.com/39 LocalStorag…

Commit 컨벤션 Git commit 메세지의 중요성은 개발자라면 대부분이 알고 있다. 다른 팀원들과의 협업으로 프로젝트를 할 때, 코드 스타일과 더불어 커밋 메세지 컨벤션을 정해 놓기 위해 협의를 한다. 어떻게 기준을 잡으면 좋을지 소개하려고 한다. Commit 메세지 구조 기본적인 구조는 세가지로 나누고, 영문으로 작성하는 경우를 기준으로 하며 유형 ✔️ 타입은 태그와 제목으로 구성되고, 태그는 영어로 써야하며 첫 문자는 대문자로 한다. Feat : 새로운 기능 추가 및 기능 업데이트 Fix : 버그 또는 에러 수정 Docs : 문서 수정, 블로그 포스트 추가 Style : 코드 포맷팅, 코드 오타, 함수명 수정, 세미콜론 누락, 코드 변경이 없는 경우, 스타일 수정 Refactor : 코드 리팩터링(기능은 같지만 코드만 개선) Test : 테스트(테스트 코드 추가, 수정, 삭제, 비지니스 로직에 변경이 없는 경우) Chore : 위에 걸리지 않는 기타 변경사항 (빌드 스…

한 주 요약 개인 과제(영화 API를 통해 리스트 구현) 새로 알게 된 사항 바닐라 자바스크립트로 API를 불러올 수 있다는 점 깃허브에 올릴 때 폴더 많이 넘어지며 배워야겠다는 점 한 주를 되돌아보며… 개인과제를 마치면서 개념과 응용력이 많이 부족하다고 느꼈고, 구글에서 모르는것에 대한 검색 능력도 키워야겠다고 느꼈습니다. 제출기간은 다가오고 학교 시험 보는 주라서 마음이 급해지면서 더욱 집중이 되지 않았던 한 주였다. 다시 리셋하고 처음부터 다시한다는 생각으로 마음 다 잡고 다음 주에 있을 팀 프로젝트에 임해야겠다고 생각했다. 한 주 요약 새로 알게 된 사항 한 주를 되돌아보며…

Git Rebase ✔️ Git에서 한 브랜치에서 다른 브랜치로 합치는 방법으로는 두 가지가 있다. Rebase는 이름 그대로 브랜치의 base를 다시 설정한다는 의미이다. Rebase의 기초 두 개의 브랜치로 나누어진 커밋 히스토리 ✔️ 두 브랜치를 합치는 가장 쉬운 방법은 merge 명령어를 사용하는 것이다. 두 브랜치의 마지막 커밋 C3, C4와 공통 조상 C2을 사용하는 3-way-Merge로 새로운 커밋을 만들어 낸다. 나뉜 브랜치를 Merge하기 ✔️ 비슷하지만 다른 방식으로 C3에서 변경된 사항을 Patch로 만들고 이를 다시 C4에 적용시키는 방법이 있다. Git에서는 라고 한다. rebase 명령으로 한 브랜치에서 변경된 사항을 다른 브랜치에 적용할 수 있다. 브랜치가 나뉘기 전 공통 커밋으로 이동한다. 공통 커밋부터 지금 checkout 한 브랜치가 가리키는 커밋까지 diff를 차례로 만들어 어딘가에 임시로 저장한다. Rebase할 브랜치가 합칠 브랜치가 가리키는…

Git Merge ✔️ git branch를 다른 branch로 합치는 과정이다. Fast Forward Merge ✔️ 가장 기본적인 merge는 바로 Fast Forward Merge이다. 는 이다. ✔️ main 브랜치의 HEAD를 feature branch의 HEAD까지 옮기고 싶다면 아래와 같은 과정을 거쳐야한다. 을 이용해 main 브랜치로 전환한다. 를 이용해 main 브랜치의 HEAD를 feature브랜치의 HEAD로 옮긴다. ✔️ main 브랜치의 HEAD가 feature 브랜치의 HEAD인 thrid branch로 옮겨진다. Fast Forward Merge의 한계점 ✔️ 중간에 변경이 없을 때만 동작한다. 만약 중간에 다른 커밋이 있다면 충돌이 발생해 제대로 동작하지 않는다. 해결방안 Merge Commit으로 Merge Conflict 제어하기 ✔️ fourth commit과 fifth commit이 같은 부분을 수정했을 경우에 main 브랜치와 feature 브랜…

Git CLI 설치 장점 : 별도의 GUI 툴이 필요하지 않다는 것이다. 깃허브 사이트와 작업할 PC에 네트워크만 연결 되어 있으면 별도의 툴을 설치할 필요 없이 커맨드 창이나 터미널에서 커맨드를 실행하여 이용이 가능하다. Homebrew 설치 Mac OS에서 제공되지 않는 여러 패키지를 사용할 수 있도록 도와주는 패키지 관리자이다. Git 설치 아래 명령어를 통해 git을 설치한다. Git 계정 설정 git config 명령어를 사용해 Git 계정 설정을 해야 한다. 계정 설정이 잘 되었는지 확인하는 방법 gh 설치 mac의 경우 sudo를 앞에 입력해서 설치해야한다. gh 깃허브 로그인 명령어를 통해 gh 깃허브 홈페이지에 권한 로그인을 해야한다. merge전에 pr로 확인 main branch로 merge전에 gh명령어를 통해 pr로 테스트 해보고 문제 없으면 merge를 한다. Git CLI 설치 Homebrew 설치 Git 설치 Git 계정 설정 gh 설치 gh 깃허브 로…

동기와 비동기의 개념 1. 동기 : sync 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드이다. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드이다. 2. 비동기 : async 실행 중인 코드의 즉시 다음 코드로 넘어가는 방식이다. setTimeout, addEventListner등이 있다. 별도의 요청, 실행 대기, 보류등과 관련된 코드는 모두 비동기적 코드이다. 가 올라갈 수록 비동기적 코드의 비중이 늘어난다. 콜백 지옥의 예시와 해결방안 를 통해 콜백 지옥의 간단한 예시 코드이다. 해결방안 1. 기명함수 변환 가독성이 좋은 장점이 있지만 한 번만 사용할 코드에 이름을 다 부여한다는것은 비효율적 코드이라서 근본적인 해결책은 아니다. 자바스크립트에서는 비동기적인 작업을 동기적으로 처리해주는 방법을 계속 마련해주고 있다. 비동기 작업의 동기적 표현 1. Promise ✔️…

한 주 요약 등 자바스크립트 문법 한 주를 되돌아보며… 짧은 시간에 너무 방대한 양의 자바스크립트 문법을 알게 되었고, 다음 주가 학교 기말고사라서 병행하는게 너무 힘들어 미루고 미뤘던 한 주였던거 같다. 다음 주에는 개인 과제도 있기 때문에 적어도 이번 주만큼 시간 흘려보내지 않고 앞을 향해 나아가야겠다고 생각이 들었다. 한 주 요약 한 주를 되돌아보며…

개인과제를 시작하기 전 개인과제를 시작 전에는 너무 막막하고 걱정을 많이 했지만, 걱정하면 아무것도 못한다는 생각에 메인 페이지 화면 구상하면서 시작해보았습니다! 개인과제를 진행하면서 아직 배워야하고 이해 해야할 것들이 너무 많다라는 것을 느꼈습니다. 개인과제를 마치고 나서 개인 과제 끝났다고 긴장 풀지 말고 다시 차근차근 공부를 해야겠다고 생각을 많이 했습니다. 시연 img/til-5day-video.gif 개인과제를 시작하기 전 개인과제를 진행하면서 개인과제를 마치고 나서 시연

Quiz1. 나이든 유저 문제 가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요 생각해보기 새로운 나이 값을 어떻게하면 저장할까? user1, user2를 다르게 해서 둘이 같지 않다고 증명할까? 해결 새로운 객체(result), 변수(prop)를 선언한다. 반복문을 통해 user 객체를 살펴본 후, result 객체에 똑같은 정보를 저장한다. result.age값과 agedUser에 있는 인자 6를 passesTime에 넘긴 값을 저장하고 다시 result.age에 저장한다. 조건문을 통해 user2와 user1이 같은지 비교한다. 작성답안 출력 결과 Quiz2. 어떤 매치가 성사될까? 문제 출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요 주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행) 생각해보기 과 의 개념을 이해해야한다. 작성답안 출력 결과 느낀점 아직 …

230523 내일배움캠프 3일차 ✔️ 이번주부터 본격적으로 내일배움캠프가 시작되었다. 오늘 2주차 강의를 듣고 숙제로 간단한 알고리즘이 주어졌다. 오늘도 새로운 도전을 해보려고한다. Quiz. 문자열 연습하기 문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 [“sun”, “bed”, “car”]이고 n이 1이면 각 단어의 인덱스 1의 문자 “u”, “e”, “a”로 strings를 정렬합니다. 제한 사항 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 해결 문자열 앞에 인덱스에 해당하는 문…

230523 내일배움캠프 2일차 ✔️ 이번주부터 본격적으로 내일배움캠프가 시작되었다. 오늘 1주차 강의를 듣고 숙제로 간단한 알고리즘이 주어졌다. 처음이라 많이 낯설지만 배운거 복습한다고 생각하고 문제를 풀었다. Quiz1. 문자열 연습하기 문제 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. ‘p’, ‘y’ 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 “pPoooyY”면 true를 return하고 “Pyy”라면 false를 return합니다. 제한 사항 문자열 s의 길이 : 50 이하의 자연수 해결 대문자와 소문자 혼합되어 있는 것을 먼저 대문자로 통일시킨다. 반복문을 사용해 str에 ‘p’와 ‘y’이 있다면 카운트를 하고 그 값들을 비교해 같으면 true 다르면 …

프로그래밍 언어란? 사람과 0,1만 이해하는 컴퓨터와 소통하기 위해 사용되는 것이 프로그래밍 언어입니다. 대표적인 프로그래밍 언어로는 등이 있습니다. JS의 역사 1995년 가 탄생했습니다. 으로 사용 되고 있다가 당시 의 인기로 인해 사람들이 많이 사용하자 이름을 지금의 로 변경했습니다. 브라우저 동작 스크립트 언어로 동적인 액션을 만들 수 있고, 제어하기 위해 사용되고 있습니다. 2005년 등장으로 기존에는 데이터를 수정하면 반드시 전체 페이지 새로고침을 통해 확인을 해야했지만, 수정된 부분이 새로고침 되어 반영된 것을 확인할 수 있다. 폭발적인 UX(User Experience - 사용자 경험) 향상 2008년 구글에서 V8 엔진 출시했습니다. 2009년 등장으로 서버 개발이 활성화 JS 언어의 특징 1. 객체 지향 프로그래밍 지원 객체지향 vs 절차지향 ▶︎ 절차지향 프로그래밍 : 첫 번째 일을 처리한 다음에 두 번째 일을 처리 ▶︎ 객체지향 프로그래밍 : 객체라는 그룹으로 …