본문 바로가기

전체 글147

Props 와 State Props와 State는 리액트에서 정말 중요한 개념이다. 리액트에서 데이터를 다룰 때 사용된다. Props는 부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용된다. 값을 직접 바꿀 수는 없고 부모 컴포넌트로부터 받아오기만 할 수 있다. State는 컴포넌트 내부에서 선언하며 setState로 내부에서 값을 변경할 수 있다. Props import React, { Component } from 'react'; class ChildClass extends Component { render(){ return( 이 컴포넌트는 {this.props.name} 컴포넌트 입니다. ); } } export default ChildClass; import React, { Component } from 'react.. 2021. 1. 27.
JSX 리액트는 JSX를 사용해야 한다. JSX 자바스크립트를 확장한 문법이다. 자바스크립트의 모든 기능이 포함되어 있다. 1. JSX에서 태그는 꼭 닫혀야 한다. 아래의 예제에서 input에 close가 되지 않는다면 에러가 발생한다. import React, { Component } from 'react'; class App extends Component { render() { return( ); } } export default App; 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸 져있어야 한다. Fragment를 이용하면 된다. 를 사용해도 되지만 Fragment를 사용하는 것이 더 효율적이다. import React, { Component, Fragment } from 'react';.. 2021. 1. 25.
Webpack과 Babel 리액트를 사용하려면 Webpack 과 Babel이라는 것을 알아야한다. Webpack Webpack은 오픈소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러지만 호환 플러그인을 포함하는 경우 HTML, CSS, IMAGE와 같은 프론트엔드 자산들을 변환할 수 있다. Webpack은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생산한다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 즉, 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 Webpack이라고 한다. 이전에는 페이지마다 html을 요청해서 뿌려주는 방식이었지만 요즘은 SPA라는 하나의 html 페이지에 여러.. 2021. 1. 22.
React란? 리액트는 프론트엔드 라이브러리이다. 더보기 프론트엔드 라이브러리는 다양한 유저 인터페이스와 인터랙션을 제공할 때 이를 수월하게 해주는 것이다. HTML, CSS로 정적인 '페이지'로 동작시킬 수 있으며, Javascript를 더해주면 동적인 '페이지'로 동작시킬 수 있다. 그럼에도 불구하고 React나 Vue의 도움으로 *DOM 관리와 상태 값 업데이트 관리를 최소화하고 오로지 기능 개발과 사용자 인터페이스 구현해 웹 '애플리케이션'으로 개발에 집중할 수 있도록 해준다. * DOM(Document Object Model) : 문서 객체 모델이다. 웹 페이지에 대한 프로그래밍 인터페이스이며 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다. 즉 .. 2021. 1. 21.
Cannot truncate a table referenced in a foreign key constraint mysql에서 외래키 설정 후 5.5.7 부터 FOREIGN KEY 설정이 된 테이블을 TRUNCATE 하려면 FOREIGN_KEY_CHECKS을 0으로 지정해야한다. 그렇지 않으면 외래키 때문에 진행할 수 없다고 나온다. SET FOREIGN_KEY_CHECKS = 0; TRUNCATE TABLE User; -- Truncate 할 테이블 SET FOREIGN_KEY_CHECKS = 1; 2021. 1. 20.
[Sangle 2편] 나의 🌟첫 솔로(?)🌟 서버 개발 이야기 [Sangle 2편] 나의 🌟첫 솔로(?)🌟 서버 개발 이야기 Sangle의 기능1편에 작성했던 내용처럼 생글에는 흥미로운 기능 이 많다.IA 기준으로회원가입 (앱 자체 가입, 소셜 로그인)매일 주어지는 3개의 랜덤 글감글 작성, 수정, 삭제좋아요, 스크랩, 검색 (유저, 글감, 게시글 내용)글감별 피드, 지난 글감유저 정보 관련 (프로필, 정보 수정 등)캘린더 (주별 달성률, 달별 기록)명예의 전당 (어제의 가장 인기있었던 글감 별 게시글)푸시 알림활동 배지공지사항회원탈퇴가 있다. 여기에다 당연히 만들어야 하는, 그리고 개인적인 욕심으로도 만들고픈 관리자 웹 개발도 진행했다. 이렇게 개발하다 보니 세세한 부분까지 하나하나 캐치하다 api가 약 70개 정도가 나오게 되었다, 물론 sql 쿼리는 기능상 비.. 2021. 1. 4.
[Sangle 1편] 나에게 가장 큰 성장을 가져다 준 'sangle'을 하기까지 Sangle을 처음 접했을 때, 본가를 다녀오면서 김포공항에 도착했을 때 폰을 켜보니 앱잼을 같이 했던 안드로이드 파트 팀원에게 연락이 와있었다. 진행하고 있는 프로젝트가 있는데 서버 개발을 해 볼 생각이 있냐고 물어봐주었다. 이 팀은 최소한의 인원으로 구성되었었다. 기획 1명, 디자인 1명, 안드로이드 1명, iOS 1명, 그리고 빈자리의 서버도 1명으로 구성할 생각이었다고 한다. 원래 서버 담당하는 개발자분이 계셨는데 너무 바쁘셔서 그만두게 되었다고 하셨다. 덕분에 (?) 그 때문에 (?) 내가 들어갈 수 있게 되었다. 처음 제의를 받았을 때, 기능이 흥미로웠다. 우리가 아는 글쓰기 플랫폼은 일기처럼 글을 써내려 간다거나, 메모, 회고 등을 써내려가는 서비스들이 많다. 그 기능에 여기는 '3분'이라는.. 2021. 1. 2.
[MARU 2편] 2020.10 나의 첫 앱 출시 미루고 미루던 'MARU' 출시 후기를 작성하러 왔다. 너무나도 미뤘던 것일까. 출시한다고 설레고 걱정 많았던 그때가 벌써 몇 달이 지났다. 사실 인턴생활을 한다고 '출근-퇴근-다른 프로젝트-잠-출근'을 반복했던 일상이어서 이래저래 시간이 빠르게 지나가버렸다. 지금이라도 마루의 회고를 작성해보려 왔다. 내 생애 첫 앱스토어에 올라간 온라인 독서 플랫폼 'MARU' 개발할 때도 웹소켓을 처음 사용해보면서 애를 많이 먹었는데 지금와서 생각해보니 정말 좋은 경험이었다. 왜냐하면 내가 몰랐던 부분을 알 수 있게 되었기 때문이다. (요즘 새로운 기술 스택을 배우면서 세상에는 정말 배울 것이 많고, 배우고 나면 다시 또 공부해서 더 배워야겠다는 생각을 자주 하게 된다.) 다시 출시했을 때 시점으로 돌아오면 출시 직.. 2021. 1. 2.
[스프링부트(springboot)] 타임리프 리다이렉트(thymeleaf redirect) spring boot로 web을 만들 때, thymeleaf를 이용하면서 게시글 삭제 후 원래 게시글 목록 리스트로 리다이렉트 시킬 때 이전처럼 return "redirect:/userInfo"로 하면 뷰에 String으로 나타나고 리다이렉트가 제대로 되지 않았다. 한참 헤맸는데 검색하다 보니 2.x버전부터는 @RequestMapping("/userDelete/{userIdx}") public RedirectView userDelete(@PathVariable int userIdx) { webMapper.userDeleteByIdx(userIdx); return new RedirectView("/userInfo"); } 이렇게 RedirectView를 이용한다고 한다. 적용시키니 바로 잘 되었다ㅠ 그래도.. 2021. 1. 1.

티스토리툴바