본문 바로가기
728x90

전체 글200

리액트 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.
Spring Boot🍃 스프링부트 프로젝트 생성, 스프링부트 프로젝트 구조 Spring Boot 🍃 스프링부트 프로젝트 생성하는 법과 스프링부트 프로젝트 구조 (src/main/java, src/main/resources, src/test/java, build.gradle) 에 대해 알아본다. ​ ​ 1. 스프링부트 프로젝트 생성 [New Project] [ Spring initializr ] ​ ​ 위와같이 설정 하고 Next, ​ Next, ​ Next, ​ 마지막으로 앞에 입력했던 프로젝트 이름을 입력하고 Finish를 클릭하면 스프링부트 프로젝트가 생성된다. ​ ​ ​ 2. 스프링부트 프로젝트 구조 프로젝트를 생성했다면, 이제 스프링부트 프로젝트의 구조에 대해 알아보자. 다음 네 파트로 나누어 설명한다. ​ (1) src/main/java (2) src/main/reso.. 2021. 8. 4.
📦 MSA 아키텍처 프로젝트 (MSA 아키텍처, MSA 적용사례, Netflix OSS, Spring Cloud Netflix) 해당 포스팅은 마이크로서비스 아키텍처(MSA 아키텍처)를 활용하여 커피 주문(가입, 주문, 상태) 시스템을 구축하는 프로젝트의 보고서의 서론 부분(MSA 아키텍처란 무엇인가)을 요약한 것 입니다. 본론에 해당하는 MSA 프로젝트 구축 글은 곧 업로드 예정입니다. 목차 : 1. IT 업계의 트렌드, MSA 2. MSA, 무엇인가? 3. MSA 적용사례 🚖 우버, MSA 아키텍처 VS 모놀로식 🍿 넷플릭스, 넷플릭스 OSS 1. IT 업계의 트렌드, MSA 넷플릭스가 서버를 1,000조각으로 쪼갠 이유, 왜 MSA? "암스트롱." 프로젝트를 선정한 이유와 관련이 있는 단어입니다. 암스트롱(AMstrong)이란, ‘애플리케이션 현대화’ 프로젝트를 강하게(strong) 추진하자는 신조어인데요, 애플리케이션 현대.. 2021. 7. 23.
728x90

티스토리툴바