본문 바로가기
728x90

전체 글202

리액트 : 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 React 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 ✅ React.forwardRef forwardRef는 부모 컴포넌트로부터 ref 속성을 받는 한 컴포넌트를 만든다. 그리고 그 속성을 받은 컴포넌트로부터 또 자식에게 그 속성을 전달하게 한다. 아래 그림을 보면 이해하기 쉽다. ✅ React.useImperativeHandle useRef를 사용하면 컴포넌트의 instance value가 생성된다. 그리고 그 instance value는 DOM 요소를 조작할수 있게 한다. ✅ 코드 예제 Parents.js import React, { useRef } from "react"; import { useState } from "react/cjs/react.development"; import Chil.. 2022. 3. 2.
스프링부트 검색기능 구현 : Get방식으로 넘긴 Param 받기, 검색 쿼리문(where 컬럼명 like) 스프링부트, 리액트로 검색 기능 구현하는데 가장 먼저 한 부분을 정리한다. (Spring Boot로 Parameter 전달 받는 방법, Spring Boot Get방식으로 넘긴 값 받기) 검색은 get 방식이다. get 방식으로 검색어를 입력하면 입력된 단어를 받는다. 스프링부트 get 방식으로 넘긴 값을 전달 받아보자. java 클래스에 아래와 같이 추가한다. @GetMapping("/search") public void getSearchProducts( @RequestParam(value = "search") String search) { try { List getProductResList = productService.getSearchProducts(word); return new BaseRespo.. 2022. 3. 2.
리액트 key 할당해도 해결 안되는 문제. Warning:Each child in an array or iterator should have a unique"key"prop. 리액트에서 key를 할당해도 해결 안되는 문제. Warning: Each child in an array or iterator should have a unique “key” prop. 보통 react에서 위 에러가 뜨면 key를 할당해 해결해 주면 된다. 흔하기도 하고 간단하게 해결할 수 있는 워닝이다. 그런데 key를 할당해도 여전히 같은 에러가 떴다. key 값을 map의 index를 줬다가, index는 쓰지 말라고 해서 유니크한 값을 줬는데도 해결되지 않았는데.. 결국 아래처럼 해서 해결했다. [해결] 내용 [원인] 감싸는 코드 가 key보다 더 상위로 인식되어서 제대로 인식 되지 않아 발생한 문제였다. 대신 같은걸로 바꿔서 key를 할당해 주면 해결된다. 내용 2022. 2. 28.
리액트 Component, render,constructor(props), props와 state 차이점 React 리액트 Component, render, constructor(props), props와 state 차이점 1. Component Component란, 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위다. Component를 파일 단위로 작성한 후, 필요한 위치에서 import로 사용할 수 있다. (클래스형 component와 함수형 component가 있지만, 일단은 클래스형에 대해서만 다룬다. ) Component를 작성해보자. 좌측 탭에서 src 안에 이렇게 여러가지가 있는데, 우선 여기 src에 components 라는 이름의 폴더를 생성한다. 여기에 TestComponent1.js 라는 이름의 파일을 만들어 아래와 같이 입력한다. import React, {.. 2022. 2. 12.
비동기방식 promise, await, async, axios 정리 리액트에서 비동기 통신 라이브러리 axios를 사용하며 작성한 글. 0. 동기, 비동기? 자바스크립트에서 동기, 비동기 작업의 대표적인 예시는 다음과 같다. 동기 작업은 일반적으로 우리가 작성하는 코드. 이 코드들은 순차적으로 실행된다. 서버에 요청 완료 후 실행 할 함수 동기 작업은 이전 실행의 결과가 나올 때까지 기다렸다가, 결과가 나오면, 그다음 실행을 하는 차근차근 구조이기 때문에 작업의 순서를 정하고 싶다면 순차적으로 코드를 적기만 하면 된다. (동기와 비동기에 대한 개념은 아래 링크에 잘 정리되어 있다.) 비동기 통신과 AJAX (동기 비동기의 개념, 차이,장단점, 예시, 콜백함수, 콜백지옥) 비동기 통신과 AJAX (동기 비동기의 개념, 차이,장단점, 예시, 콜백함수, 콜백지옥) 데이터를 받.. 2022. 2. 12.
masOS 맥 실행중인 포트 확인, 포트 죽이기 맥 실행중인 포트 확인 명령어는 lsof -i :8080 [예시] lsof -i :8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 1234 비타민찌 IPv6 0t0 TCP *:http-alt (LISTEN) 실행 중인 포트 죽이기 명령어 kill -9 PID번호 [예시] kill -9 1234 2022. 1. 17.
스프링부트, MVC 패턴 View의 역할과 생성 Spring Boot 🍃 View(뷰)의 역할과 생성 Thymeleaf ​ MVC 패턴은 애플리케이션의 역할을 모델(Model), 뷰(View), 컨트롤러(controller)로 나누어, 이들 사이 상호작용을 통제하는 아키텍처 패턴이다. 이번 포스팅에서는 View의 역할과 생성 방법을 알아본다. 컨트롤러에 대한 포스팅 링크 ​ 📍 View (뷰) 뷰는 사용자가 보는 화면, 즉 컨트롤러가 사용자에게 보내주는 것에 해당한다. 그러나 뷰를 만들 수 있는 것은 여러가지가 있다. 전통적으로는 html, jsp. 그리고 '템플릿엔진'이다. ​ '템플릿엔진' 이란? 템플릿엔진이란, 동적 컨텐츠를 생성하는 방법이다. ​ view만 만드는데 사용하는 것이 아니다. 여러 가지 용도(code generation, email.. 2021. 8. 4.
스프링부트, MVC 패턴 Controller(컨트롤러)의 역할과 생성 (URI) Spring Boot 🍃 Controller(컨트롤러)의 역할과 생성 ​ ​ 🧐 MVC 패턴 애플리케이션의 역할을 모델(Model), 뷰(View), 컨트롤러(controller)로 나누어, 이들 사이 상호작용을 통제하는 아키텍처 패턴이다. 1. 모델(Model) : 비즈니스 규칙을 표현 2. 뷰(View) : 프레젠테이션을 표현 3. 컨트롤러(Controller) : 위 두가지를 분리하기 위하여 양측 사이에 배치된 인터페이스. ​ 이번 포스팅에서는 MVC 패턴의 개념과 Controller의 개념, 그리고 스프링 부트에서 Controller 생성 하는 방법을 알아본다. ​ ​ 1. Controller의 두가지 역할 Controller는 MVC 패턴의 C에 해당하고, 주로 사용자의 요청을 처리 한 후 지정.. 2021. 8. 4.
인텔리제이(IntelliJ) 프로젝트와 깃(Git) 연동하기 인텔리제이(IntelliJ) 프로젝트와 깃(Git) 연동하기 GitHub에 새로운 remote repository를 만들고 기존 IntelliJ 프로젝트(모듈)을 연동하는 방법에 대해 다룬다. 과정은 다음 순서로 진행된다. ​ 1) IntelliJ에 GitHub 계정 연동 2) Git에서 새 레포지토리 만들기 (GitHub Remote Repository 생성) 3) 리모트 레포지토리 등록하기 4) 로컬 레포지토리 만들기 5) commit, push ​ 1. IntelliJ에 GitHub 계정 연동 깃 계정 연동 맥에서의 Preferences, 윈도우에서 Settings 를 클릭한다. ​ 좌측의 GitHub 탭을 클릭하고, 계정 정보를 입력 후 [Log In]을 클릭한다. ​ 버튼을 눌러 깃에 로그인 혹.. 2021. 8. 4.
728x90

티스토리툴바