프로그래머처럼 생각하기

현재 가맹점과 테마를 파라미터로 힌트리스트를 조회해오는 정도로 완성했습니다. 이제 해야할건 윗쪽 '번호' 에 힌트리스트 마지막번호+1이 나오고 '키'부분엔 랜덤한 키값이 들어가게끔 해야합니다. 또 아래에 있는 힌트리스트의 Key, 힌트1, 힌트2를 누르면 값을 복사하거나 수정할수있게 그리고 오른쪽엔 x버튼을 만들어 삭제 기능도 만들게끔 해야합니다. 로그인해서 점주가 자신의 가게 힌트를 관리할수있도록 분기처리도 해야합니다.. 아직 갈길이 멀지만 조만간 완성해보겠습니다 !!

https://lemontia.tistory.com/912 [react, springboot] react 와 spring boot 로 구성하기, 묶어 build 하기 Springboot 프로젝트를 생성한다. 여기서는 Intellij 를 이용해 생성했고, Gradle과 Java 버전 11을 사용했다. 이 과정은 생략하겠다. ​ ​ react를 설치하는 방법은 다양하지만 여기서는 Create react app 을 lemontia.tistory.com

https://kojoo112.tistory.com/entry/React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 React 시작하기 📕 React는 무엇일까? 컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체 kojoo112.tistory.com 기본적으로 React 앱 만드는 방법입니다. 앱을 만드셧으면 https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io ..

지금 스프링부트 프로젝트 진행하면서 백엔드는 얼추 정리된거같아서 프론트작업을 하고있는데 이왕 프론트 하는거 html, css, javascript말고 새로운 React로 하는게 재밌을거같아서 시작하게 됐습니다. 또 그냥 React보다 bootstrap과 합치면 재밌을거같아서 검색해봤는데 두개가 다르더라구요. https://stackoverflow.com/questions/56061590/what-is-difference-between-reactstrap-and-react-bootstrap What is difference between reactstrap and react-bootstrap? I found two different bootstraps for reactjs npm install --save..

오랜만입니다. 주말 잘 쉬셧나요? 제가 프로젝트를 시작했습니다. 🌈 XCAPE란?? http://xcape.co.kr/ 방탈출카페 엑스케이프 건대 건대방탈출카페/건대엑스케이프/강남방탈출카페/잠실방탈출카페/신천방탈출카페/미제사건추리/서울방탈출카페 xcape.co.kr 방탈출카페입니다. 뒷광고아닙니다. 전 방탈출 가본적도 없습니다. 힌트를 CRUD할수있는 Restful API를 만들어서 웹엔 어드민 페이지, 앱은 키값을 입력했을때 해당 힌트를 알아내는 구조입니다. 절 많이 도와주던 친구에게 기회좋게 얻어낸 프로젝트 입니다. 전에하던 Instagram 스프링 프로젝트는 내팽겨치고 알고리즘 공부하던 저를 반성하면서 시작하게됐는데 Spring Boot, gradle로 시작했습니다. 📕 왜 SpringBoot? S..

동적인 값 할당을 하기 위해선 useState를 해야합니다. 전에 했던 let data = '데이터'; . . . { data } 에서 data = '데이터123';으로 변경하면 새로고침을 해야 값이 바뀌지만 useState를 한다면 새로고침없이 동적으로 화면이 변할수있습니다. function App() { let [사용하기, 변경하기] = useState('useState'); let data = '데이터'; let fontBlack = {color : 'black', fontSize : '50px'} return ( { 사용하기 } { data } { data } { data } { data } ); } 이렇게 useState를 사용할 수 있습니다. []대괄호 안에 왼쪽은 사용을 할수있는 메소드의 이..

📕 데이터바인딩(Data Binding)이란? 화면에 있는 객체와 데이터를 일치시키는 것입니다. data라는 변수에 '데이터'라는 변수를 담고 사용하는 방법은 중괄호 {} 사이에 해당 변수를 넣어주는 것입니다. 요런식으로 굳이 '데이터'라는 말을 쓰지않아도 '데이터'라는 글자를 볼 수 있습니다. 이것이 데이터 바인딩입니다. 근데 className?? 처음보지않나요? HTML에서는

📕 React는 무엇일까? 컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다. -출처 : 위키백과 새로고침없이 화면을 변환시키고 마치 app같은 화면이라해서 web-app 이라고도 불립니다. 장점 1. 모바일 앱으로 발행이 쉬움 2. 앱처럼 뛰어난 UX 3. 비즈니스적 강점 사용방법 node.js를..

문제 N×N 크기의 정글에 토끼 M마리와 어린 사자 심바가 있다. 정글은 1×1 크기의 격자로 이루 어져 있다. 각 격자칸에는 토끼 1한마리가 있거나 또는 없을 수 있다. 어린 사자 심바는 주어 진 정글에서 토끼를 잡아먹고 덩치를 키워 삼촌 스카에게 복수를 하러 갈 예정이다. 어린 사자 심바와 토끼는 모두 몸 크기를 가지고 있고, 이 크기는 자연수이다. 가장 처음에 어 린 사자 심바의 크기는 2이고, 심바는 1초에 인접한 상하좌우 격자칸으로 이동할 수 있다. 어린 사자 심바는 자신보다 크기가 큰 토끼가 있는 칸은 지나갈 수 없고, 나머지 칸은 모두 지 나갈 수 있다. 심바는 자신보다 크기가 작은 토끼만 잡아먹을 수 있다. 크기가 같은 토끼는 먹 을 수는 없지만, 그 토끼가 있는 칸은 지날 수 있다. 어린..

문제 현수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림 과 같이 격자 모양 상자의 칸에 하나씩 넣어서 창고에 보관한다. 창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토의 인접한 곳은 왼쪽, 오른쪽, 앞, 뒤 네 방향 에 있는 토마토를 의미한다. 대각선 방향에 있는 토마토들에게는 영향을 주지 못하며, 토마토 가 혼자 저절로 익는 경우는 없다고 가정한다. 현수는 창고에 보관된 토마토들이 며칠이 지나 면 다 익게 되는지, 그 최소 일수를 알고 싶어 한다. 토마토를 창고에 보관하는 격자모양의..