모던 자바스크립트란? 모던 자바스크립트 딥 다이브, 모던 자바스크립트 입문.. 모던 자바스크립트라는 말을 많이 접하게 되는데, 모던 자바스크립트가 의미하는 게 대체 뭔지? 가 궁금해져서 이번 주차 스터디 주제를 정하게 되었다. 모던 자바스크립트에서 언제를 기준으로 모던으로 봐야 하는 지에 대한 정확한 기준은 없으나, 일반적으로 모던 자바스크립트라고 말할 때는 다음과 같은 특징을 꼽는다. 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리나 프레임워크를 사용한다. npm이나 yarn 등 패키지 관리자를 사용한다. 주로 ES6 이후의 표기법을 사용한다. 웹팩 등 모듈 핸들러를 사용한다. 바벨 등 트랜스 파일러를 사용한다. SPA(Single Page Application)으로 작성되어 있다. 그렇다면..
📚 2022년 정리했던 글을 옮겨둔 포스팅입니다. Spring, Mybatis, Oracle을 기준으로 작성되었으며 프로젝트 경로, 프로젝트 명은 가려두었습니다. MVC 패턴 이해를 위해 코드를 뜯어보며 정리했던 글이라 틀린 내용이 있을 수 있습니다. MVC(Model, View, Controller) 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있으며, 로직을 분리해 두어 유지보수에 유용하다. 디자인패턴이란? 객체 지향 프로그래밍 설계 시 특정 문맥에서 공통적으로 발생하는 '문제'에 대해 재사용 가능한 해결책으로 사용되는 서술이나 템플릿 Model 정의 애플리케이션의 정보, 데이터를 나타낸다...
Flux 패턴의 등장 배경 Flux 패턴은 페이스북(현 메타)에서 MVC 모델의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처이다. 페이스북은 기존에 MVC 모델을 사용하였다. MVC 모델에서는 View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View를 업데이트할 수 있는데, 새로운 기능이 추가되거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 예측 불가능한 코드를 만들게 되고 버그가 발생하게 되었다. 따라서 페이스북은 대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높일 수 있도록, 단방향 데이터 흐름을 가진 Flux를 고안하게 된다. Flux 패턴이란? Flux 패턴은 단방향 데이터 흐름을 유지하는 ..
SPA와 MPA 표로 간단하게 정리하기 구분 SPA (Single Page Application) MPA (Multi Page Application) 정의 한 개의 페이지로 구성된 어플리케이션 여러 개의 페이지로 구성된 어플리케이션 특징 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운된다. 렌더링 CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행 SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행 장점 리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다. 유저가 보는 화면 방식이 웹 크롤러가 보는 방..
데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것을 말한다. 즉, HTML에서 변경된 내용이 데이터에 영향을 미치는 가를 말하는데, 이에 대한 차이를 기준으로 '양방향', '단방향' 바인딩으로 나눌 수 있다. 양방향 바인딩 양방향 데이터 바인딩의 대표인 AngularJS는 엘리먼트에 데이터를 바인딩하면 JS 코드로 데이터를 변경할 수도 있고, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있다. 단방향 바인딩 React와 같은 단방향 바인딩은 JavaScript에서 HTML로만 데이터 바인딩이 가능하다. 즉, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 JS..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.2, 3 과제 제출하기 🤔 리덕스 이해하고 리코일과 비교해보기 ✅ 리액트 Lv.2, 3 과제 제출하기 리액트 Lv.1 과제는 useState로 투두리스트 만들기, Lv.2 과제는 redux로 투두리스트 만들기, Lv.3 과제는 스타일드 컴포넌트 연습하기였다. 4월 14일 금요일에 리액트 공부를 시작해 4월 23일인 오늘까지 과제 세 개를 끝낸 것에 대해서는 박수!👏🏼 Lv.5에 있는 JWT 토큰 로그인을 온보딩주차 미니 프로젝트 때부터 해보고 싶었는데 기한 내 끝내지 못할 것 같아 접어뒀었다. 로그인 여부와 유저의 권한에 따라 화면 요소를 달리하는 것도 재밌는 작업이고 일반 로그인, SNS 로그인이 아닌 JWT 토큰 로그인 방식은 ..
문제 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수입니다. 예를 들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 제한사항 n은 2 이상 100,000 이하인 자연수입니다. 입출력 예 n return 3 2 5 5 입출력 예 피보나치수는 0번째부터 0, 1, 1, 2, 3, 5, ... 와..
📚 코어자바스크립트 (정재남, 2022) 책과 인프런의 코어자바스크립트 강의를 보고 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 객체 지향 언어에서의 this 이번주 면접 스터디 발표 주제는 this! 기술매니저님들 말씀에 따르면 현업에서는 잘 쓰지 않지만 면접에서는 꼭 나온다는 this를 그렇다면 왜 중요하게 생각하고 왜 쓰는 것일까? 부터 찾아보았다. 객체 지향 언어에서 클래스는 하나의 큰 모듈이라고 할 수 있다. 위와 같이 이름, 체력, 마력이 지정되어있고 스킬 사용 시 이 캐릭터의 마력을 50만큼 깎는다고 지정할 때 this를 사용해 이 클래스 내부의 변수를 지칭할 수 있다. 조사해 본 자료에 따르면 자바스크립트는 맨 처음 개발할 때 이러한 객체 지향 개념 없이 만들고 싶었는데, 당시 객..
문제 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해 주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자 영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 siz 7 se..
요구사항 정의 구현해야 할 기능Create TodoRead Todos, TodoUpdate TodoDelete Todo 요구사항[공통]todos 데이터는 리덕스를 사용해 전역으로 상태 관리todos 모듈은 Ducks 패턴으로 구현 [메인 페이지]디자인과 화면 구성은 자유롭게 구현Todo의 상태에 '완료' 그룹과 '진행 중' 그룹을 나뉘어서 보이도록 구현Todo 추가 시 제목 input과 내용 input은 다시 빈 값이 되도록 구현input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value 초기화Todo의 완료상태가 true면 상태 버튼의 라벨을 취소, false면 라벨을 완료로 보이도록 구현Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운..
