프로그래밍언어

자바스크립트(JavaScript) - 변수

자바스크립트(JavaScript) - 변수 변수 변수란? 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 쓰임. 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이는 이름이다. 값의 위치를 가르키는 상징적인 이름. 예를 들어 1+2=3 이라는 연산을 통해 3이라는 숫자를 생성하였다. 이 생성된 3은 메모리의 임의의 위치에 저장되는데, 이 값을 다시 읽어들여 재사용할 수 있도록 값이 저장된 메모리 공간에 그 값을 상징하는 이름을 붙인 것을 변수 라고 한다. * 할당 : 변수에 값을 저장하는 것. * 참조 : 변수에 저장된 값을 읽어 들이는 것. 식별자란? 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 값이 아니라 ..

자바스크립트(JavaScript) - 스코프(Scope)란?

자바스크립트(JavaScript) - 스코프 스코프는 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서도 중요하게 여겨지는 개념이다. 스코프는 "식별자가 유효한 범위" 를 말하는데, 모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 따라 다른 코드에서 식별자를 참조할 수 있는 유효한 범위가 정해진다. 스코프의 종류 구분 설명 스코프 변수 전역 코드 가장 바깥쪽 영역 전역 스코프 전역 변수 지역 함수 내부 지역 스코프 지역 변수 다음과 같은 코드가 있다. 이 코드의 지역코드와 전역코드를 구분해보면 다음과 같겠다. 출력은? 이와 같이 된다. 만약 numChangeIn 함수 내에 있는 var num = 100; 코드를 지운다면? 한단계 상위 스코프에 선언된 num=10이라는 값을 출력시킨다...

자바스크립트(JavaScript) - 이벤트 버블링이란?

자바스크립트(JavaScript) - 이벤트 버블링이란? 이벤트 버블링이란 무엇일까? - 어떤 하나의 요소에 이벤트가 발생하게 되면, 해당 이벤트가 동작한 뒤에 부모 요소의 이벤트 핸들러가 이어서 작동하게 되는데, 이 현상은 부모요소를 계속 거슬러 올라가 윈도우 객체를 만날때까지 진행되고, 자식요소부터 부모요소, 그 부모요소의 부모 요소 로 계속 올라가는 현상이 마치 거품이 올라가는 현상과 비슷하여 이것을 이벤트 버블링이라고 한다. 한 번 확인해보자. 다음과 같은 html 코드와 js 코드가 있다. 여기서 빨강,주황,노랑,초록,파랑 버튼을 클릭하게 되면 콘솔에 어떻게 나타날까? 이렇게 세개의 텍스트가 출력되는 것을 확인할 수 있다. 아니 item Event 가 출력되는건 이해하겠어. 근데 list Eve..

React 잘못된 경로 페이지 만들기 (Router)

React 잘못된 경로 페이지 만들기 (Router) 프로젝트를 구현하면서 사용자가 잘못된 경로를 입력했을때 이런 페이지가 뜬다. 이대로 냅둬도 상관없긴하지만, 만약 이렇게 사용자가 주소를 잘못입력했을때 내가 원하는 화면을 보여주게 하고 싶다면 어떻게 해야할까? 바로 Router를 사용하면 된다. 이렇게 Router 경로를 * 로 설정하게 되면, localhost에서 지정한 경로들 외의 모든 경로들은 지정한 페이지로 이동하게 된다. 여기서 element에 있는 NotFound는 내가 따로 만든 NotFound.js 페이지이다. 사용자가 경로를 잘못입력하면 이 NotFound.js 페이지로 이동시켜라 라는 뜻이된다. NotFound.js 는 다음과 같이 만들었다. 참고해보시길. 사용자에게 보여지는 페이지는..

Object 를 Array로 바꾸기 (React, JS)

Object 를 Array로 바꾸기 (React, JS) 졸업 프로젝트를 진행하면서 머신러닝 쪽을 통해서 데이터 받을 일이 생겼었다. (원래는 머신러닝 > 백엔드 > 프론트엔드 순으로 전달했어야 했지만, 백엔드팀에서 기한내 구현을 못해가지고 프론트인 내가 직접 데이터를 받아 처리했다.) 대충, JSON 형식으로 캠핑장 데이터들을 전달 받는거였는데, 내가 짜둔 로직은 map 을 사용해서 JSON id 값에 따라 처리하는 코드이다. 근데 이 과정에서 머신러닝 파트 분이 Object 형식으로 데이터를 그대로 전달을 하였고, 내가 이걸 Array로 바꿔서 처리를 해야하는 상황. 대충, { { "id": 1, ... }, { "id": 2, ... }, .... ,{ "id": 50, ... } } 이런식으로 데..

React, Spring Boot연동 로그인 정보 불러오기

React, Spring Boot연동 로그인 정보 불러오기 이전 게시물 참고 https://bmy1320.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-Spring-Boot-%EC%97%B0%EB%8F%99-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드) React, Spring Boot 카카오 소셜..

React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드)

React, Spring Boot 카카오 소셜 로그인 , 리액트 카카오 로그인 먼저, 이 글을 작성하는 이유를 조금 써볼려고 한다. 관심없으면, 그냥 바로 밑의 코드를 확인하면 된다. 현재 나는 학교 졸업프로젝트를 진행중이고, 그 과정에서 소셜로그인을 구현하게 되었다. 저번주22일부터 구현을 시작했는데, 진짜 생각보다 너무 어렵게 느껴졌다. 구글링을 해봐도 React와 spring boot를 연동하는 글을 별로 없었고, 거기다 우리는 백엔드 설정상 좀 더 코드를 간단하게 작성가능한 카카오 라이브러리를 사용하지 않아서 더더욱 어렵게 느껴졌다. 최종 발표가 얼마남지 않은 시점에서 이 로그인 구현이 되지않으면 프로젝트 진행이 일절 되지않는 구조였기 때문에, 압박감과 스트레스는 생각보다 엄청났다... 내가 팀장..

React - Router, useLocation 를 통해 상세페이지 구현

React - Router, useLocation 를 통해 상세페이지 구현 졸업프로젝트 중 상세페이지를 구현하는 과정에서 router랑 useLocation에 대한 이해가 필요했다. 생각보다 구글링해서 바로 해답을 얻지 못했고 어제 저녁부터 계속 고민하다가 방금 해결하여 기록을 남긴다. 같은 고민을 하고 있는 사람들에게 조금이라도 도움이 되었으면 한다. * 프로젝트 구성 1. 게시판 페이지 ( 경로 : localhost/posting ) - 글쓰기 기능을 통해 임시로 추가한 게시물이고 해당 게시물의 제목을 클릭하면 해당 게시물에 부여된 id 값에 맞는 페이지를 이동 한다. 이때 App.js 에 만들어둔 Route를 통해 해당 게시물의 id 값으로 이동할 수 있게 path 경로를 설정해준다. path ="..