전체 글 썸네일형 리스트형 <Spring boot>@Controller, @RestController 간단하게 내가 이해한 식으로 정리를 해보자면 @Controller : 페이지를 반환 @RestController : 데이터를 반환 물론 일반 Controller 에서도 데이터를 조작하긴 하지만 결국엔 조작한 데이터를 model 에 담아서 페이지를 반환해주는 반면 @RestController 에서는 필요한 데이터`만` 반환해준다. 실제 내 프로젝트에 적용된 사례를 보고 예를 들어보겠다. 위 사진은 'detail' 로 매핑을 해주고 tiles에 camp.detail 이름을 넘겨줘서 해당하는 페이지를 불러오는 곳의 코드다. (tiles 라이브러리를 쓰지 않고 있다면 직접 그 페이지를 불러주면 되곘다!) **결국 return 해주는 것이 tiles라이브러리를 통해 페이지를 불러와주기 위한 이름을 전달하고 있다... 더보기 <ReactJs> CSS Module (styles) 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 을 사용하면 클래스이름이 중복되는 것을 완전히 방지 할 수가 있다. 언제 CSS module 을 사용해야 유용한가 1. 기존에 존재하는 프로젝트에서 특정 부분에 리액트를 도입할 때 클래스명이 겹쳐서 이상한 결과를 초래할 일이 없다. 2. 클래스 네이밍 규칙을 무시 할 수 있다. ('-'를 써주어야 하거나 대문자 소문자로 약속이 되어 있는 상태일 때) 단순하게 CSS module 을 사용해주려면 확장자를 .module.css 혹은 .module.scss 등으로 우선 작성해준 뒤에 컴포넌트에서 import 해줄 때 import styles from '~~경로 및 이름.module.css'; 위와 같이 작성해주면 CSS module을 가져다가 .. 더보기 <ReactJs> SASS 버튼에 여러 옵션 주기 (@mixin, @include) 버튼의 크기와 색상을 입혀주는 작업을 해보장> 더보기 <ReactJs>컴포넌트 스타일링하기 (SASS,버튼스타일링) SASS 는 Syntactically awesome stylesheets의 약자로서 리액트에서 뿐만 아니라 다른 웹프론트엔드 프로젝트에서도 자주 사용되는 기술이다. 아래 링크에서 더 자세하게 정보를 얻을 수 있을것이다. https://sass-guidelin.es/ko/ SASS는 CSS preprocessor(전처리기) 로써 사용하면 좋은 점들 1. 복잡한 작업을 보다 쉽게 해줄 수 있다. 2. 스타일 코드의 재사용성을 높여준다. 3. 코드의 가독성도 높아진다 (유지보수에 편하다) SASS를 사용할 때는 2개의 확장자를 사용할 수 있다. (.scss / .sass) 간단하게 코드의 차이점을 알아보자 .sass 확장자 nav ul margin:0 padding:0 li list-style:none .sc.. 더보기 <javascript> 비동기 처리 (Promise, async, await) 자바스크립트에서 비동기 처리란 동기적 처리와 비교해서 얘기를 할 수 있겠는데 위 사진은 동기적처리에서의 작업연산 방식과 비동기적으로 처리 했을 때의 작업 연산 방식에 대해 나타내고 있는 사진이다. 동기적으로 작업을 처리하려 할 떄는 1번이 끝날 때 까지 2번은 대기 후 실행, 2번이 끝날 떄 까지 3번이 대기 후 실행식으로 이루어지게 된다. 하지만 비동기적으로 작업을 처리하게 되면 우리가 코드를 실행하면서 흐름이 끊기지 않게 된다. 1번실행이 안끝나도 2번,3번, 4번 작업이 이루어지게 된다. 위 사진으로 예를 들어 정리하면 동기적 처리 : 4명이 한팀인 계주 달리기 (바통주자가 와야지 다음주자가 뛰기 가능!!) 비동기적 처리 : 4명이서 100m 달리기 (요이 땅 하면 동시에 출발가능!!) 정도로 생각.. 더보기 <javascript>텍스트 에디터, 텍스트 편집기 만들기 지금 내가 사용하고 있는 이 블로그에 글을 작성 할 때도 보면은 텍스트 편집기를 쓰고 있다. 이런식으로 되어있는데 굵게, 이탈리체, 밑줄, 색깔 등등을 정해 줄 수가 있다. 현재 학원에서 진행중인 프로젝트에서 게시판 부분에 후기를 작성하는 부분을 맡아서 해보려 하는데 그냥 글만 적는건 밋밋할 것 같아서 편집기의 기능도 넣어주고 싶어서 열심히 구글링 해가면서 만들어 보았는데 한번 정리해 보겠다. 당신의 후기를 모아모아 *후기 입력란* 제목 : 글자 크기 10px 12px 16px 20px 30px 사진 업로드 등록 실제 우리 프로젝트에 사용되었는데 우선 포인트는 document.execCommand() 라는 함수와 contenteditable 이 두가지로 볼 수 있을것 같다. https://develope.. 더보기 <javascript>객체 (비구조화 할당, 함수) 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dogName = '멍멍이'; const dogAge = '7'; console.log(dogName); console.log(dogAge); 이런식으로 한 대상에 관해 여러가지 값들을 선언 해 줄때 한번에 선언을 해 줄수 있는데 중괄호로 감싼 뒤에 '키 값: 원하는 값' 형식으로 정의해주면 된다. const dog = { name : '멍멍이', age : '5', family : { parent : '2', child : '1', } } console.log(dog); 이런식으로 중괄호를 이용해서 객체를 선언해줄 수 있으면 객체 안에 또 다른 객체를 생성해 줄 수가 있겠다. 간단하게 함.. 더보기 <javascript>함수 !함수! 함수는 특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능 이라고 정리 할 수 있다. 그 기능이 물론 간단한 덧셈부터 복잡하게는 데이터베이스에서 값을 불로오고 불러온 값을 변수 혹은 배열에 담아주고 특정 블록에 붙여주는 기능을 담당 할 수도 있는것이다. 아주 기초적이고 너무도 많이 봐왔을 더하기 함수 랑 인사하기 함수를 보면서 정리해보겠다. function add(a,b){ // 요기부분의 (a,b) 저 부분이 parameter로 외부에서 값을 전달 받는 부분 return a+b; // return 은 함수가 실행되면 값을 넘겨주기 위해 사용 } let sum = add(1,2); console.log(sum); 위 코드가 간단하고도 쉬운 부분인데 개인적으로 정리해보자면 이 함수의 이름은 .. 더보기 이전 1 ··· 18 19 20 21 22 23 24 다음
