FIF's 코딩팩토리

자바스크립트에서 배열을 다룰 때 자주 사용하는 map, filter, some, every 함수에 대한 정리 map()map 함수는 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.원본 배열은 변경되지 않습니다. 사용법const newArray = array.map(callback); 매개변수callback: 배열의 각 요소에 대해 호출할 함수. 이 함수는 세 가지 인수를 받습니다.currentValue: 처리할 현재 요소index (선택적): 처리할 현재 요소의 인덱스array (선택적): map을 호출한 배열 자체예제const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console..

CSR은 Client Side Rendering의 약자이고, SSR은 Server Side Rendering 의 약자이다. 말 그대로 웹 페이지가 화면이 보여질 때 CSR은 클라이언트(브라우저: 크롬, 엣지등) 에서 렌더링하고 SSR은 서버측에서 렌더링 한다. CSR과 SSR에 들어가기 앞서 SPA와 MPA개념에 대해 먼저 알아야 한다. 1. SPA와 MPA의 차이점부터 톺아보기 오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. SPA SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면..

자바 개발자로 면접을 준비하시는 분들이 한번쯤 보시면 도움이 될만한 내용을 준비해봤습니다. 스스로 얼마나 자바/스프링/웹에 관해 알고있는지 확인해보세요! (1) Java Foundation 에 관한 인터뷰 1. JDK와 JRE의 차이점은 무엇입니까? JDK(Java Development Kit)는 Java 개발을 위해 필요한 도구들의 집합입니다. 컴파일러, 디버거, 개발 도구 등을 포함하고 있습니다. JRE(Java Runtime Environment)는 Java 애플리케이션을 실행하기 위한 런타임 환경입니다. JVM(Java Virtual Machine), 클래스 라이브러리, 실행환경 등을 포함하고 있습니다. JDK는 JRE를 포함하고 있으므로, JDK는 개발자용으로 JRE를 포함한 모든 도구를 제공합..

뷰엑스란 뷰의 상태 관리 패턴이자 라이브러리입니다. Vue.js에서 컴포넌트끼리 데이터 양방향 통신을 위해 props나 event-emit을 사용할 수 있지만, 컴포넌트들이 많아지면 공유되는 데이터들을 관리하기 어려워질 수 있습니다. 그래서 나온 뷰의 상태관리 라이브러리가 Vuex입니다. Vue3에서는 pinia를 권고하고 있지만 Vuex도 아직 많이 사용되고 있으므로 알고 있으면 좋습니다. (vuex와 pinia의 가장 큰 차이점은 아래 vuex의 기술요소에도 나오겠지만, pinia에서는 mutations가 없습니다.) 상태 관리란 현대 프런트엔드 프레임워크에서 모두 사용하는 개발 패턴입니다. 뷰에서는 뷰엑스(Vuex)라는 상태 관리 패턴을 사용합니다. 상태 관리가 필요한 이유는 컴포넌트의 숫자가 많아..

Spread Operator - ... 연산자 스프레드의 사전적인 뜻은 '펼치다' 정도 이다. 스프레드 오퍼레이터는 자바스크립트 표현식을 확장(펼칠 수 있는)할 수 있는 연산자 이다. 배열이나 객체에서 주로 사용하고 표현은 점3개 ... 로 한다. 아래는 사용 예이다. array1 배열에 1,2,3 값이 있다. array2 배열요소 안에 ...array1 이라고 하면 [1,2,3] 값을 일일이 쓸 필요 없이 사용할 수 있다. array1를 콘솔에 출력해보면 [1,2,3,4,5] 가 나온다. 펼치다(spread)는 것은 객체 혹은 배열의 속성을 가져올 수 있다는 것을 의미한다. const array1 = [1, 2, 3]; const array2 = [...array1, 4, 5]; console.log(..

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 ..

최근 다양한 프론트엔드 기술이 나오게 되면서 무조건 트렌드를 따르기보다 현재 기술을 왜 사용하고 그와 비교해 다른 기술의 특징과 장단점은 뭘까? 라며 왜? 라는 의문을 해결해보고자 합니다. Vue.js란? Vue.js는 Google Creative Laps에서 근무하던 Evan You가 개발하였으며, “AngularJS 에서 내가 좋아하는 특성만 담은 가벼운 라이브러리를 만들 수 있지 않을까?” 라는 점과 좀더 쉽게 접근할 수 있는 웹 프레임워크를 만들고자 탄생하게 되었습니다. Vue의 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하며, 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도..

와스..와쓰...WAS... 많이 들어봤지만 'WAS가 뭐야?' 라고 누군가에게 질문이 들어온다면 잘 설명할 수 있을까요? 지금 당장 생각나는 대답은 "그 있잖아요...스프링 프로젝트 만들고 웹에서 실행시킬라고 톰캣 붙이잖아요 그 톰캣이 WAS에요!" 이정도의 형편 없는 대답일뿐... 그럼 웹서버는 뭐야? 라고 질문이 들어오면 어떻게 대답 하겠습니까? -> "웹서버랑 WAS랑 똑같은말 아닌가요" 알것같으면서도 막상 물어보면 대답하기 힘든 개념 지금부터 웹 서버와 WAS에 대해 정리를 해보겠습니다. java와 spring을 다루는 개발을 처음 시작할 때면 웹 애플리케이션을 만들어야 할 때 아무런 고민 없이 spring으로 만든 다음 tomcat을 띄워 연결하는 경우가 있습니다. spring boot를 사용..