Apex Predator
본문 바로가기

전체 글

 (165)
REST api를 이용한 리액트 로그인 구현 소프트웨어 설치 Node.js NPM 리액트 앱 만들기 먼저 create-react-app을 실행하여 새로운 리액트 프로젝트를 시작해준다. npx create-react-app frontend 생성한 폴더로 접근한다. cd frontend 패키지추가하기 (yarn 또는 npm) Material UI react-router-dom Sweetalert npm i @material-ui/core @material-ui/icons react-router-dom sweetalert 예제에서는 로그인에서 프로필 화면으로 전환되도록 라우터를 걸어주고 있다. 더보기 ReactJS: REST API를 통해 로그인 및 프로파일 페이지 만들기 ReactJS : REST API 를 통해 로그인 LOGIN 및 프로파일 PROF..
[스프링] 회원가입 암호화기능 분석 스프링에서 암호화 설정을 하는 법 설정하기 1단계: pom.xml에 spring security DI 주입 org.springframework.security spring-security-core 4.1.0.RELEASE org.springframework.security spring-security-web 4.1.0.RELEASE org.springframework.security spring-security-config 4.1.0.RELEASE 2단계: spring-security.xml 3단계: web.xml contextConfigLocation /WEB-INF/spring/root-context.xml /WEB-INF/spring/spring-security.xml 스프링 암호화 설정코드 작성법..
인터랙티브 웹 개발 제대로 시작하기-자바스크립트 이벤트 다루기 자바스크립트 이벤트의 기본 동작 자바스크립트를 다루면서 간단하게 이벤트를 주는 법을 학습해보자. 이벤트(event)란? 특정 버튼을 클릭했거나 DOM 로드가 완료되었을 때, 동적인 행위로 사용자와 웹페이지의 상호작용을 의미한다. 이벤트 핸들러를 통하여 이벤트가 발생할 시 원하는 함수에 연결하여 실행시킬 수 있다. 기본 메서드 preventDefault() 이벤트의 기본 액션을 취소할 수 있다면 취소 stopImmediatePropagation() 같은 이벤트의 다른 리스너가 호출 방지 stopPropagation() 이벤트 플로우 중 이벤트의 확산(propagation) 방지 기본 속성 type 이벤트의 이름을 반환 view 이벤트가 발생한 윈도우 객체의 참조 반환 bubbles 특정 이벤트가 버블링 이..
인터랙티브 웹 개발 제대로 시작하기-인터랙티브 웹 개발을 위한 자바스크립트 시작하기 자바스크립트의 워밍업 자바스크립트에서 객체를 다루는 법과 DOM 스크립트에 관하여 학습한다. ※ 수업에서는 새 버전 자바스크립트(ECMA 2015)를 고려해서 var 변수를 쓰지 않고, const, let으로 변수 선언을 대신한다. let 변수: 가변할 값을 담는 용도 const 변수: constant(상수)는 가변하지 않을 값을 담는 용도 변수들은 유효범위가 다르다. 예를 들어 함수 a() 안에서 b라는 var 변수를 선언하고 함수 밖에서 b의 값을 가져오려 한다면 Uncaught ReferenceError: b is not defined 에러가 난다. 반대의 경우는 접근이 가능하다. 함수를 방으로 생각하면 쉽다. 방 안에서는 바깥의 값을 가져올 수 있지만, 방 밖에서는 안에 선언된 변수의 값을 가져올..
인터랙티브 웹 개발 제대로 시작하기-CSS Flex 'Flex' 해버렸지 뭐야! 가 아니고, 사전적 의미로 Flex란 구부리다. 힘을 주다. 근육을 수축시키다 뜻을 가진 영어로 개발에서는 Flex Box라고 하여 CSS 레이아웃을 잡을 때 필수적인 Flexible한 기능이다. Flex Box와 그리드의 가장 큰 차이점은: 그리드는 축이 X와 Y 두 방향이고, Flex는 가로나 세로의 한 방향 축을 가지고 있다. ※ 그리드는 현재 지원하는 브라우저가 적기 때문에 Flex가 바로 실무에 투입하기 적절하다. Display: flex 적용안한 경우(왼), 적용한 경우(우) 또한 flex의 기본 direction은 row이기 때문에, flex-direction: column; 으로 바꾸어 준다면 이렇게 축의 방향을 바꾸어줄 수 있다. 또한 row-reverse, ..
[한국조리사관직업전문학교] 내일배움카드 제과디저트 7주차 (초콜릿 컵케이크 만들기 + 모든 레시피 정리 Tip) 12월 11일 한조사 마지막 수업을 마치는 소감! 좋은 조원들을 만나서 시간이 지날수록 손발이 착착 맞아간다는 게 신기했다. 선생님 말씀을 잘 들으면 반은 간다. 빵은 사먹자. 그럼에도 즐거웠다. 오늘은 오전 3시간을 마지막으로 마무리를 하는 날이었기 때문에 초콜렛 컵케이크만 뚝딱 만드는데 코코아 파우더와 버터 섞으면서 나오는 고소한 초콜렛 향이 넘나 행복했어요 ๑•‿•๑ 초콜렛 컵케이크 & 화이트 커버춰 아이싱크림 (2배 분량) 초콜렛 컵케이크 재료: 버터 930g, 설탕 900g, 소금 8g, 달걀 26개, 박력분 920g, B.P. 36g, 코코아분말 120g, 초코칩 280g, 우유 160g 화이트 커버춰 아이싱크림: 생크림 200g, 화이트커버춰 200g, 차가운 생크림 380g, 코코아분말 4..
인터랙티브 웹 개발 제대로 시작하기-CSS 3D 이어서 학습해보자. 그리고 티스토리에서 코드블럭은 코드 문법 강조같은 걸 안해주나보다 라고 생각하고 검색을 해본 결과, 이미 플러그인이 존재한다는 사실을 알고, 이제야 바꿔줌 🥲 진작 찾아볼껄. 심신의 안정 후아후아 [티스토리] 코드블럭 사용법, 테마 비교, 추천 프로그래밍 개발자 블로그에서 필수로 필요한 티스토리 코드 블록 (Code Block) 사용 방법을 알아보고 8가지 테마 별 이미지를 통해 색상, 모드, 줄 간격 등을 비교해보고 가독성이 좋고 본인 취향 wondytyahng.tistory.com 2강. CSS 3D CSS 3D 1 적절히 잘 쓴다면 고급스러우면서 특이한 효과를 낼 수 있다. CSS 3를 이해하려면 element를 감싸고 있는 공간이 3차원 공간이여야만 한다. 원근감 속성인 per..
다프네 로럴 - 성인 취미 발레복 스커트 추천 등산 계절이 지나가면서 다시 발레를 시작해볼까 하다가 마침 당산역에 괜찮은 발레학원이 있길래, 바로 3개월 수강신청하고 발레복부터 쇼핑하러 가봅니다 '◡'✿ 운동은 무조건 장비가 갖춰줘야 한다구요. 요새 정말정말 애정하는 발레복 브랜드 다프네 로럴은 이렇게 《일상에서 꿈꾸는 나만의 작은 공연》이라는 슬로건을 가지고 있는 브랜드답게 베이직 라인부터 시그니처 디자인까지 또 요새는 매일매일 새로운 신상 스커트를 소개하면서 또 지름 욕구 활활🔥 태우고 있는중. 다프네 로럴 일상에서 꿈꾸는 나만의 작은 공연 daphnelaurel.kr 키가 크지도 작지도 않은 163cm이라 롱스커트도 숏스커트도 아닌 적당한 미디움 기장이 제일 잘 어울리는 데, 그래서 이번에 선택한 Winter Wonderland가 가장 맞지 않..
반응형

티스토리툴바