DalpangLOG

Vue3에서 웹 화면에 변경 되는 반응형 값에 ref, reactive를 사용하듯이,React에서는 useState를 사용해 변경감지를 한다.useStateimport {useState} from 'react';function ExampleApp() { const [selectedTopic, setSelectedTopic] = useState('Initial Value'); fuction handleUserSelect(selectedValue) { setSelectedTopic(selectedValue) } ... {selectedTopic}}React에서 앞에 'use' prefix가 붙은 것들은 react hooks에 속한다.useState Rule..

Programming/코테 공부 2024. 12. 23. 18:13

프론트 페이지는 index.js 파일로부터 로딩 되기 시작한다.React 프로젝트의 경우, index.html 파일에서, 리액트 파일 확장자인 jsx로 만들어진 index.jsx 파일을 임포트 하며 시작된다.Index.jsx 파일은 웹 어플리케이션을 export 하고있는 App.jsx 파일을 import 하고 있다.Index.jsx 파일이 앱의 진입점.  개발자가 추가하는 커스텀 컴포넌트는 결과적으로 html 태그로 변환되어 사용된다.때문에, 커스텀 컴포넌트를 만들어서 사용할때는 이름 충돌이 일어나지 않도록, Uppercase로 시작하도록 해야한다.Props리액트 함수에서는 하나의 prop만 받으며 일반적으로 props라는 명칭으로 사용한다.단, 하나의 값만 받을수 있는게 아니라 prop이라는 객체로 ..

Programming/FrontEnd 2024. 12. 17. 02:41

JavaScript - Rest Param?- Required로 입력하는 파라미터 이외에 추가로 가변적인 길이의 파라미터가 입력 될 수 있는 경우 활용 가능한 파라미터https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest parameters - JavaScript | MDNThe rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.developer.mozill..

Programming Languages 2024. 8. 28. 22:36

Q: 1부터 6까지 숫자가 적힌 주사위가 세 개 있습니다. 세 주사위를 굴렸을 때 나온 숫자를 각각 a, b, c라고 했을 때 얻는 점수는 다음과 같습니다.세 숫자가 모두 다르다면 a + b + c 점을 얻습니다.세 숫자 중 어느 두 숫자는 같고 나머지 다른 숫자는 다르다면 (a + b + c) × (a2 + b2 + c2 )점을 얻습니다.세 숫자가 모두 같다면 (a + b + c) × (a2 + b2 + c2 ) × (a3 + b3 + c3 )점을 얻습니다.세 정수 a, b, c가 매개변수로 주어질 때, 얻는 점수를 return 하는 solution 함수를 작성해 주세요.딱히 큰 이유는 없지만 Stream를 써서 풀고싶어서 적용시켜본 답안.import java.util.Arrays;class Solut..

Programming/코테 공부 2024. 5. 1. 16:38

VUE 환경변수에 대해 간단하게 알아보기Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.(출처 : https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)Vue에서 환경변수는 'NODE_ENV', 'BASE_URL', 'VUE_APP_' 으로 시작하는..

Programming/FrontEnd 2024. 4. 28. 16:21

기초 트레이닝 문제 풀기문제1) 문자열 겹쳐쓰기- 기본 풀이방식class Solution { public String solution(String str1, String str2) { String result = ""; char[] strArray1 = str1.toCharArray(); char[] strArray2 = str2.toCharArray(); for(int index = 0; index  - StringBuilder를 사용한 풀이방법class Solution { public String solution(String str1, String str2) { StringBuilder result = new St..

Programming/코테 공부 2024. 4. 25. 23:11

목차 1) Teleport 기능 2) Composition API 1) Teleport 기능 react의 portal과 비슷한 기능. child component를 teleport 태그로 감싸, 어떤 태그(css 셀렉터)안에 렌더링 될지 정할 수 있다. 기존 vue2에서 부모 컴포넌트 내부에 어느 위치에 컴포넌트를 놓았는지에 따라 그 위치에 바로 적용 되었었지만, teleport기능을 사용하면, 실제 자식 컴포넌트를 부모컴포넌트 파일 내 어디에 놓던지 크게 상관없게 됨. => 이로 인해 nested 되어 생성되던 기존 자식 컴포넌트 렌더링 방식 보다, 좀 더 semantic 하게 코드를 짤 수 있다고 한다. 고로, multiple root component를 내부에 추가할 수 있게 되었다. 2) Comp..

Programming/FrontEnd 2024. 1. 28. 17:19

Vue 2 to Vue 3 migration 정리 더보기 주요 변경사항. - Vue Instances/apps, Router, Vuex의 생성을 각각 : createApp(), createRouter(), createStore()으로 하게 됨 - data를 method안에 작성한다. directives & third-party 모듈을 "App"안에 작성한다, 기존에는 global object안에 작성함. 새로 추가된 사항. teleport component fragments (Optional) composition API - watch, computed 대신 사용 가능. Better Typescript 목차 1) App.vue의 'el'이 사라지고 mount를 사용 2) Data를 Object가 아닌 M..

Programming/FrontEnd 2024. 1. 28. 15:22

TypeScript 기본정리 - 자바스크립트의 특징은 타입선언이 유연하다는 것이다. 그러나 이 특징으로 인해, 특정 타입으로 지정할 생각으로 만든 변수에 대해 작업되는 메서드를 만들었을 때, 다른 타입의 데이터가 입력되는 경우, 해당 변수가 새로 입력된 타입의 변수로 변경되므로 이전 타입기준으로 작성된 메소드에 오류가 일어나는 등의 문제를 일으키기도 한다. 이 경우 자바스크립트는 런타임에러를 반환하게 되는데, 런타임에러가 나면 정확히 어느 부분이 문제인지 알기 힘들때가 많다.... 이런 문제들을 줄이기 위해 사용하는게 TypeScript! Java와 같이 타입을 지정해줄수 있다. 단, 실제 브라우저는 TypeScript 가 아닌 JavaScript만 인식하므로, 실제 실행되는 파일은 .js파일이라는 것 ..

Programming Languages 2024. 1. 22. 23:38

Vue 기능 관련 검색을 하다가 한국 커뮤니티 사이트를 찾았는데 (https://vuejs-kr.github.io/meetup/#/) 현재는 활동하지 않는 것 같다. 둘러보던 중 Vue Playground를 찾게 되서 시간 있는 김에 간단한 실습을 해봄! 일반적으로 처음에 많이 하는 게시판이지만, 사실 게시판도 아니고 그냥 데이터 입력, 삭제만 구현함. 생각보다 실습하기 쾌적하게 되어있어서 좋았다. Vue SFC Playground : https://play.vuejs.org/Vue SFC Playgroundplay.vuejs.org {{ msg }} register {{ content }} del 짧은 시간동안 뚝딱뚝딱 만든 코드라 조잡할순있지만 실무 코드 보다가 이걸 만드니까 머리도 가벼워지고 재밌당..

Programming/FrontEnd 2024. 1. 10. 16:20

Builder Pattern자바 에서 객체를 생성하는 다양한 방식 중 최근 알게된 방식이다.좀더 이해하기 위해 찾아보며 작성함!객체를 여러 곳에서 재사용할 경우, 경우에 따라 생성되는 객체에서 사용할 파라미터가 다르다면기존의 방식으로는 새로운 생성자를 만들어야 했다.하지만 Builder패턴을 사용하면 더 이상 생성자를 여러 개 만드는 번거로움을 줄일 수 있다.예를 들어 다음과 같은 Person 클래스를 만드는 경우.@NoArgsConstructor@AllargsConstructor Public class Person { private String name; private String genter; private String ethnicity; private int age..

Programming/BackEnd 2023. 5. 7. 23:17

Repository를 통해 전달받는 값 Vo를 담은 List를, List로 변경하고 싶을 때 사용. List voList = new ArrayList(); List entityList; entityList = voList.stream().map(Vo::toEntity).collect(Collectors.toList()); - stream() : 기존 for, foreach를 통해 하나씩 요소를 꺼내 사용하던 방식을 람다로 변경한 것. - Vo::toEntity : Vo 객체의 toEntity 메서드를 사용하겠다는 의미. - map(Vo::toEntity) : Vo::toEntity로부터 반환받은 값을 다시 stream으로 반환. - collect(Collectors.toList()) : 스트림을 List..

Programming/BackEnd 2023. 4. 10. 15:49

코드 테스트 시 데이터 입출력이 있는 경우, 매번 코드 실행 시 기존 입력했던 데이터를 삭제시켜 줘야 하는 번거로움이 있다. => 데이터 베이스에 기존에 입력한 값이 남아 있는 경우 에러가 나기 때문. 스프링 부트에서는 이런 상황을 쉽게 해결하기 위해 @Transactional 어노테이션을 제공한다. 테스트 클래스에 @Transactional을 사용하면, 테스트 실행시 Transactional이 실행되고, 데이터 입력을 포함한 모든 동작을 실행 시킨 뒤, 테스트가 끝날때 모든 작업을 rollback 시킨다. 때문에, 데이터 베이스에 해당 작업들이 commit 된 상태가 아니므로 데이터 베이스를 매번 clear 시켜 줄 필요가 없음! ** 테스트 클래스가 아닐때 @Transactional 어노테이션은, 데..

Programming/BackEnd 2023. 3. 5. 00:02

자바에서는 JUnit이라는 프레임워크를 통해 테스트를 수행할 수 있다. 테스트는 test 디렉터리 안에서 생성하여 사용. 디렉토리 : main에 작성한 디렉토리와 통상적으로 동일하게 작성 테스트 파일명 : main에 작성한 현재 테스트하려는 파일명 + 'Test'라는 이름으로 파일 생성. 위와 같이 생성하는 것이 관례. 테스트 하려는 기능 이름으로 메소드를 만들고 위에 @Test어노테이션을 붙여준다. 다음과 같은 형식으로생성됨. class MemoryMemberRepositoryTest { MemberRepository repository = new MemoryMemberRepository(); @Test public void save(){ Member member = new Member(); membe..

Programming/BackEnd 2023. 2. 22. 23:06

웹 애플리케이션 계층 구조 Controller: 웹 MVC의 컨트롤러 역할 Service : 핵심 비즈니스 로직 구현 Repository : 데이터 베이스 접근, 도메인 객체를 DB에 저장하고 관리 Domain : 비즈니스 도메인 객체. Entity와 Repository Entity : 저장되는 객체의 각 값들의 정의를 담고 있음. 예) Student 라는 entity는 String name, int Id_number; 등을 갖고 있을 수 있다. Repository : 데이터 베이스에서 행할 작업들에 대해 input, output 값과 작업 명칭을 지정해 놓음. 예) StudentRepository에는 Student save(Student student)를 통해 Student 객체를 저장할 수 있음. 즉..

Programming/BackEnd 2023. 2. 20. 06:06

정적 컨텐츠 (Static) : 작성된 HTML 파일 형식 그대로를 사용자에게 보여주는 것. 웹브라우저가 요청을 보내면 내장 톰캣 서버는 1) 매핑명이 동일한 컨트롤러를 찾음 2) 컨트롤러가 없는 경우, Static 폴더에서 동일 명칭의 static html파일을 찾아서 보여준다. MVC : Model, View, Controller로 나누어 작성하는 것. html파일(view)과 비즈니스 로직이 담긴 컨트롤러를 나누어 Model을 통해 이 데이터를 전달받아 사용자에게 보여주는 방식. 관심사를 분리해야 한다는 말이 MVC패턴을 적용해야 한다는 의미. 웹브라우저가 요청을 보내면 내장 톰캣 서버가 1) 매핑명과 동일한 컨트롤러를 찾음. 2) 컨트롤러에 return값이 String일 경우 해당 명의 templ..

Programming/BackEnd 2023. 2. 19. 22:40