전체 글 91

[React/JS] 얉은 복사(Shallow Copy), 깊은 복사(Deep Copy) 그리고 React의 리렌더링

Javascript의 데이터 타입 얉은 복사와 깊은 복사에 대해 이해하기 위해서는 먼저 데이터 타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문이다. Javascript에서 사용되는 데이터들은 크게 원시타입과 객체타입으로 나뉜다. 원시 타입 원시 값 = 변경 불가능한 값 (immutable value) number, string, boolean, undefined, null, symbol 객체 타입 객체 = 변경 가능한 값 (mutable value) 객체, 함수, 배열 등 원시 값을 제외한 모든 것 변수에 값을 저장한다면? const a = 10; // a에는 10이 담긴다. 변수에 원시 값을 담는다면 값 자체가 담긴다. const a = { // a에는 주소가 담..

공부노트/React 2022.02.20

리액트를 다루는 기술 - JSX

해당 내용은 velopert님이 작성한 리액트를 다루는 기술 책을 요약하여 작성하였습니다. 리액트를 다루는 기술 - 김민준(velopert) 번들러 번들러란 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 주는것이다. 번들러 도구: 웹팩, Pracel, browserify 등 리액트 프로젝트에서는 웹팩을 사용하는 추세이다. 웹팩을 사용하면 SVG파일과 CSS파일도 불러와서 사용할 수 있다. 웹팩의 로더(loader)가 파일들을 불러오는 기능을 담당하고 있다. css-loader 는 CSS파일을, file-loader 는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다. babel-loader는 자바스크립트파일을 불러올 때 최신 자바스크립트 문법으로 작성된 커드를 ES..

공부노트/React 2022.02.16

[React] Hooks - useState 사용

Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. https://reload0213.tistory.com/94 React hooks 리액트 훅 useState란? 1. React hooks이란? 아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다. 리액트와 리액트 훅은 다른 라이브러리가 아닙니다. 같은 라이브러리이며 단지 클래스형으로 코드를 작 reload0213.tistory.com 이전에 살짝 어떤 녀석인지, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은..

공부노트/React 2022.02.14

React hooks 리액트 훅 useState란?

1. React hooks이란? 아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다. 리액트와 리액트 훅은 다른 라이브러리가 아닙니다. 같은 라이브러리이며 단지 클래스형으로 코드를 작성하느냐, 함수형으로 작성하느냐의 차이입니다. 그렇다면 왜 함수형을 사용하는 게 더 좋고, 모던하며, 효과적인지 알아보겠습니다. 클래스형? 함수형? - 클래스형 처음 리액트는 클래스형으로 등장하였습니다. 하지만 로직이 비교적 복잡하여 컴포넌트 재사용에 용이하지 않았고, 코드가 불필요하게 길어지기도 했습니다. 그러하여 Facebook은 조금 더 실용적이고 코드도 줄일 수 있는 함수형의 리액트 훅을 발표하였습니다. - 함수형 함수형의 리액트 훅은 컴포넌트를 재사용하기 정말 쉽습니다. 또한 제공되는 함수들..

공부노트/React 2022.02.14

[ React ] 리액트 설치 및 기본 세팅

1. nodejs 설치 node.js 설치 링크입니다. https://heytech.tistory.com/199?category=521346 Node.js 설치 방법 공유!(+설치 에러 해결 방법) 💡학습목표 Node.js 설치하는 방법과 환경 변수 설정하는 방법에 대해 학습한다. Node.js 설치여부 확인 cmd 창에 아래 명령어를 입력해 봅니다. (cmd 창 키는 방법: 키보드 내 윈도우 버튼 + cmd 입력) n heytech.tistory.com 2. IDE 설치(VS Code) VS Code 설치 링크입니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code..

공부노트/React 2022.02.13

JavaScript - 화살표 함수(Arrow function)

화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다. // 일반 함수 var foo = function () { console.log("foo") }; // foo // 화살표 함수 var bar = () => console.log("bar"); // bar 1. 화살표 함수의 기본문법 // 매개변수가 없는 경우 var foo = () => console.log('bar'); foo(); // bar // 매개변수가 하나인 경우 var foo = x => x; foo('bar'); // bar // 매개변수가 여려개인 경우 var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{..

[Node.js] 개념 이해하기

⚡️ Node.js란? 노드 공식 사이트에는 노드를 다음과 같이 설명하고 있다. Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되..

초보자를 위한 필수 맥 단축키 모음 (Mac shortcut)

생각해보니 맥을 사용한지 어느덧 8년이 넘어가고 있다. 처음 맥북프로 13인치를 샀을때는 껐다 켰다만 해보고 크롬만 깔아서 써보고 했는데 이젠 나도 당당히 중급(?) 정도는 되지 않을까? 라는 생각이 해보면서 포스팅을 해보고자 한다. 처음 맥을 산 이유는 바로….1. 이뻐서 2. 이뻐서…. 하지만 지금은 업무의 100%를 다 맥으로 처리하고 있고 맥에서만 쓸수 있는 유용한 프로그램(APP)들도 정말 만족스럽고 게임 말고는 딱히 윈도우 환경으로 돌아갈 일은 없을 것 같다. 정말 쓰면 쓸수록 더 편해지고 강력한 OS 라는 생각이 드는데 가장 큰 장점 중 하나는 안정성은 갈수록 조금 떨어지는 것 같아 애플만의 장인정신이 사라지고 있어 좀 안타깝다. 이제 자칭 중급 유저가 되었으니 단축키 몇개 정도는 쓰고 그래..

etc 2022.02.10

Maven 과 Gradle의 차이 [JAVA, SPRING, GRADLE, ECLIPSE]

빌드? 빌드 툴? 먼저 빌드란 소스코드 파일을 실행 가능한 소프트웨어 산출물로 만드는 과정을 말합니다. 실생활로 예를 들면 '윈도 95'를 개발하는 것까지가 '개발'이며, 이것이 개인의 컴퓨터에 설치되어서 실행되기까지의 단계 (window를 포장 -> 배송 -> 설치 -> 우리가 실행)를 모두 '빌드(Build)'라고 생각하시면 됩니다. (빌드의 단계 중 컴파일이 포함되어 있는데 컴파일은 빌드의 부분집합이라고 생각하시면 된다.) 그리고 빌드 툴이란 빠른 시간 속에 기술의 발전하여 계속해서 늘어나는 라이브러리의 추가, 프로젝트를 진행하면서 라이브러리의 버전 동기화의 어려움을 해소하고자 등장된 도구입니다. 대표적으로 메이크, 엔트, 메이븐, 그레이들이 있습니다. Maven이란? 메이븐은 자바용 프로젝트 관리..

공부노트/Spring 2022.02.08

[ Java ] 자바에서 alert 창 띄우며 경로(+ location.href)로 보내기

팀프로젝트를 진행 중 로그인이 필요한 페이지 이동에서 프론트쪽이 아닌 백앤드 로직 작동 중 경고창을 띄워주며 로그인 창으로 이동키시는 방식이 필요하여 찾아보고 실행해 보았다. 프론트단인 자바스크립트에선 정말 간단히 할수 있었던 alert을 띄워주는게 생각 보다 쉽지 않았지만 다음과 같은 방식으로 할 수 있었다. 로그인 페이지로 다시 이동 - location.href=user/login response.setContentType("text/html; charset=UTF-8"); PrintWriter out = response.getWriter(); out.println(""); out.flush(); 이전 페이지로 이동 - history.go(-1) response.setContentType("text/..

공부노트/Java 2022.02.06