전체 글

[ 파이널 프로젝트 ] 스터디 모집 화면 구현하기 (SELECT박스 / 위치 조회) ① 🔮 출력 화면 🤍 JSP 코드 스터디 같이 해요🤔 나에게 맞는 프로젝트나 스터디/ 모임을 찾아 참여하세요! 모집글 작성하기 역할 프론트앤드 백엔드 디자인 기획 기타 목적 포트폴리오/직무역량 jnaa.tistory.com 스터디 모집을 위해 내가 원하는 구에서 스터디를 같이 진행했으면 좋겠다는 생각으로 인해 위치를 확인하는 것을 변화를 주기로 했다! 근데..... 어떻게 전체 구를 보여줘야하지...? 결과는 해냈다. 정말 하루종일 이것만 했고 어떻게 하는지몰라서 블로그를 몇개를 본지 모르겠다. 심지어 개발자인 동생한테 엄청 멘탈케어를 받으면서 완성한 나의 화면....😥 하면서 정말 신기한 QGIS도 다운 받아서 사용해봤..

프로젝트하다가 새로운 오류인 'Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING'이 떴다. 읭? 이런 오류는 전 본 적이 없습니다. 일단 침착하고 개발자의 기본소양인 구글을 켜서 찾아봤다. 오류는 말그대로 화면이 멈췄다는 뜻이며, 인코딩하면서 오류가 발생한 것이라고 한다. 그렇담 일단 어디서 오류가 났는지 하나하나 돌아가보기로 했다. ❓ 문제 발견 jsp에서 boardNo을 js로 가져가기 위해서 input태그에 hidden넣어 가져가려고 했는데 값을 담아온 변수가 studyList가 아니라 study였다. ❗ 문제 해결 내용을 바꾸고 다시 실행해보니 잘 실행되는 것을 확인할 수 있었다. 🤔 실행화면 만약 이런 오류가 발생했다면, 코드를 확인해..

🔮 출력 화면 🤍 JSP 코드 스터디 같이 해요🤔 나에게 맞는 프로젝트나 스터디/ 모임을 찾아 참여하세요! 모집글 작성하기 역할 프론트앤드 백엔드 디자인 기획 기타 목적 포트폴리오/직무역량 강화 창업/수익 창출 네트워킹 인원 전체인원 - 1 + 완료 검색 인기 있는 스터디 TOP 10 🔥 Hello World 웹 개발 같이해요! 개발자를 위한 커뮤니티를 만들고 싶은데 같이 만들어봐요! Hello World 웹 개발 같이해요! 개발자를 위한 커뮤니티를 만들고 싶은데 같이 만들어봐요! Hello World 웹 개발 같이해요! 개발자를 위한 커뮤니티를 만들고 싶은데 같이 만들어봐요! Hello World 웹 개발 같이해요! 개발자를 위한 커뮤니티를 만들고 싶은데 같이 만들어봐요! Hello World 웹 개발..

오늘은 아이디중복 검사를 진행해보자. 관련되어 이전 내용을 참고 하고 싶다면 아래 포스팅을 확인하고 오자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com [ React ] 회원가입 ( 로그인 / 로그아웃 ) ② 오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 jnaa.tistory.com 📚 React 📘 App...

오늘은 이어서, 회원가입 시 로그인 / 로그아웃 및 아이디 중복 검사를 구현해보자 먼저 로그인/ 로그아웃 먼저 구현하기로 하자 [ React ] 회원가입 구현 ① 이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습 jnaa.tistory.com 📚 React 📘 App.js import React, { useState, createContext } from 'react'; import './App.css'; import SignupContainer from './Signup'; import Login from './Login'; export..

React를 공부하다가 REST API를 처음 접해서 찾아보다보니 면접에도 많이 나온다고 해서 정리를 해보기로 했다. 간단하게 REST를 기반으로 만들어진 API를 의미 한다고 하는데 그럼 API가 뭔지 부터 공부하고 가자 🤔 API 란 ? 소통할 수 있는 창구 a소프트웨어가 b라는 소프트웨어로부터 지정된 형식으로 요청,명령을 받을 수 있는 수단 더 쉽게 말해보면, 어떤 학원에 정보를 알고 싶다! 그럼 약속된 형식이 있어야지 정보를 주고 받고 할 수 있다! 이게 바로 API이다 ! API는 알아봤는데 그럼 REST는 무엇일까 ? 🤔 REST 란 ? HTTP URI을 통해 자원을 명시하고 HTTP Method(POST,GET,PUT,DELETE,PATCH)를 통해 해당 자원(URI)에 대한 CRUD를 적용..

이번 시간은 이전시간에 했던 TodoList를 좀 더 업그레이드 시켜보자! Spring을 이용해서 BACK단을 구성해볼거고, React를 이용해서 Front 화면을 구현해보자. 이전에 했던 내용이 기억이 안나거나 실습하고 싶다면 아래 포스팅을 확인해보자! [ React ] TodeList 실습하기 ⑤ 오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components jnaa.tistory.com 🤔 실습하기 앞서 세팅하기 ① 터미널에 npx create-react-app todo-list : todo-list 폴더를 생성해준다. ② DB 세팅 ③ Spring..

📝 Context API 이란 ? Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지 할 수 있습니다. 부모 자식1 자식2 자식3 자식4 자식5가 있다면 자식5만 값을 가지고 싶은데, 자식1 ~ 자식5까지 모두 받아야하기 때문에 매우 불필요하기때문에 context api를 이용하자 🤔 Context API 사용하기 contexts폴더에 새로운 js 만들기 createContext 함수사용해서 객체 만들기 이후 Context.Provider 컴포넌트를 이용해서 데이터 전달 데이터는 Provider는 value prop을 이용 이 개념을 가지고 오늘 만들어 볼 ..