코딩 일기장

javascript map exercise example1 friends = ["dal", "mark", "lynn", "japan guy"] friends.map(current => { console.log(current); return 0 }) output : 각 element가 console에 찍히고, [0,0,0,0]이 리턴됨 example2 friends = ["dal", "mark", "lynn", "japan guy"] friends.map(function(friend){ return friend+" heart"; }) 각 item에 function을 적용하고 array를 반환함 example3 import React from 'react'; function Food({ name , pict..

** 노마드코더님의 강의를 보고 작성하였습니다! ** 리액트 자바스크립트 기반이므로 프레임워크가 사라진다고 해도 자바스크립트 고수가 될 수 있음 패키지 종류 많고 문서 잘 정리되어 있고 빠르고 점점 더 많은 사람들이 사용하고 있음 대부분의 큰 회사들이 사용함 멋진 자바스크립트 개발자로 만들어줌 처음 시작 node js 설치 npm 설치 npx 설치 "create-react-app 프로젝트이름" 리액트 동작 원리 자바스크립트와 함께 HTML안에 들어갈 element들을 생성하고, html에 밀어넣음! import App from './App'; ReactDOM.render(, document.getElementById('root')); // App.js에서 반환한 element를 id root를 가진 애한..

css로 포스트잇 모양처럼 한 쪽 모서리가 접힌 모양을 만드는 방법입니다. 각 네모가 postit class를 가진 div 입니다. postit class에 before 효과를 줘서 모서리가 잘린 효과를 주었습니다. before에 border-top color를 white나 투명한 색으로 바꿔주면 모서리가 잘린 느낌을 줄 수 있습니다. 꼭 postit에 position: relative 속성을 추가해야지 before effect가 postit class에 적용 된다는 점 참고해주세요! hover effect는 .posit:hover:before 라고 해야 적용됩니다! 1. 백준 2097번 2. 백준 10020번 .postit { border: 1px solid #0000004d; display: bloc..

javascript 코드 // jquery code $("#all_item_check").change(function(){ if($("input[id=all_item_check]:checkbox").is(":checked") == false){ $("input[name=days]:checkbox").prop("checked", false); }else{ $("input[name=days]:checkbox").prop("checked", true); } }); $("input:checkbox[name='days']").click(function(){ if($(this).is(":checked") == false){ $("input:checkbox[id='all_item_check']").prop("chec..

[container에 사용하는 속성들] display: flex justify-content : 중심축(row, column)에서의 위치를 조정해주는 속성 center flex-start flex-end space-around : 모든 아이템들이 같은 간격으로 배치 space-between: 첫 아이템과 마지막 아이템의 align-items : 수직축을 중심으로 위치를 조정해주는 속성 flex-start flex-end center baseline: 각 item들의 text가 같은 위치에 오도록 배치 stretch (default) flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬 row-reverse: 요소들을 텍스트의 반대 방향으로 정렬 column: 요소들을 위에서 아래로 ..

문제 상담원으로 일하고 있는 백준이는 퇴사를 하려고 한다. 오늘부터 N+1일째 되는 날 퇴사를 하기 위해서, 남은 N일 동안 최대한 많은 상담을 하려고 한다. 백준이는 비서에게 최대한 많은 상담을 잡으라고 부탁을 했고, 비서는 하루에 하나씩 서로 다른 사람의 상담을 잡아놓았다. 각각의 상담은 상담을 완료하는데 걸리는 기간 Ti와 상담을 했을 때 받을 수 있는 금액 Pi로 이루어져 있다. N = 7인 경우에 다음과 같은 상담 일정표를 보자. 1일 2일 3일 4일 5일 6일 7일 Ti 3 5 1 1 2 4 2 Pi 10 20 10 20 15 40 200 1일에 잡혀있는 상담은 총 3일이 걸리며, 상담했을 때 받을 수 있는 금액은 10이다. 5일에 잡혀있는 상담은 총 2일이 걸리며, 받을 수 있는 금액은 15..

JSTL (JSP Standard Tag Library) JSTL Core Tag Tag 과 유사한 역할 문자열 출력 ... Tag jsp include와 유사한 역할 // exam1.jsp 네이버 바로가기 다음 바로가기 Tag jsp:setProperty action tag와 유사한 태그 Tag c:set으로 설정한 변수의 값을 없앨 수 있다 c:remove 하기 전 income 값: c:remove 한 후 income 값: Tag error handling에 사용 Throwable exceptions을 일으킴 The type of exception is: ${catchtheException} There is an exception: ${catchtheException.message} Tag 조건문 o..

1. JDK 버전 8 이상 설치하기 jdk 홈페이지에 들어가서 jdk zip파일을 다운받는다. 자신이 임의로 설정한 경로에 압축을 해제한다. 아래의 maven설치하는 과정처럼 자신이 압축해제한 경로를 환경변수에 등록한다. 아래 부분 참고! 그리고 난 후 cmd에서 "java -version"을 친다. 아래와 같은 결과가 나오면 성공적으로 jdk 설치가 완료된 것이다. 2. Tomcat 8.5 버전 설치하기 톰캣 홈페이지에 들어간다. http://tomcat.apache.org Apache Tomcat® - Welcome! The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Jav..

jQuery로 element에 click과 같은 이벤트를 걸고 싶을 때가 있다. 하지만 동적으로 생성된 element에는 click 이벤트가 걸리지 않음을 알 수 있다. 이럴때는 단순히 click() 이벤트를 거는 것이 아니라 .on() event를 걸어주자! 그럼 성공적으로 클릭 이벤트를 넣을 수 있을 것이다 // click event 안걸림 $('.newbtn').click(function(){ var id = $(this).attr("id"); alert("선택한 버튼을 삭제하겠습니다. : "+id); $('#'+id).remove(); }) // 성공적으로 .newbtn 클래스를 가진 element에 클릭 이벤트를 걸 수 있음 $(document).on("click", ".newbtn", func..

AJAX 전체 페이지의 reloading없이 서버와의 데이터 교환을 통해 웹 페이지의 데이터를 업데이트 할 수 있는 방법 AJAX load() Method load() $(selector).load(URL, data, callback) ; URL : 우리가 로드하고자 하는 url data: 우리가 request를 통해 보내고자 하는 key/value 세트 callback: load() method가 완료된 후 실행될 function 특정 selector만 load할 수도 있음 아래 예시에서는 h2라는 id를 가진 element만 로드함 $(document).ready(function(){ $('#ajax1').click(function() { $('#div1').load("ajaxex1.txt"); })..