Taewon's road not taken

Regular expressions are used in programming languages to match parts of strings. You create patterns to help you do that matching.

QuantifierDescription

MetacharacterDescription

1. .test()

var str = "Hello world";

var testing = /world/;

testing.test(str); //outputs true

can add | for multiple search

let petString = "James has a pet cat.";

let petRegex = /dog|cat|bird|fish/; // Change this line

let result = petRegex.test(petString);

add i on the back to ignore upperlower case

let myString = "freeCodeCamp";

let fccRegex = /freecodecamp/i; // Change this line

let result = fccRegex.test(myString);

2. .match()

extracts the string

add g on the back for multiple results

To search or extract a pattern more than once, you can use the g flag.

let repeatRegex = /Repeat/g;

testStr.match(repeatRegex);

// Returns ["Repeat", "Repeat", "Repeat"]

The wildcard character . will match any one character. 

[] Character classes allow you to define a group of characters you wish to match by placing them inside square ([ and ]) brackets.

Inside a character set, you can define a range of characters to match using a hyphen character: -.

To create a negated character set, you place a caret character (^) after the opening bracket and before the characters you do not want to match.

For example, /[^aeiou]/gi matches all characters that are not a vowel. Note that characters like ., !, [, @, / and white space are matched - the negated vowel character set only excludes the vowel characters.

+ to look for a character one or more time

* to look for a character zero or more time

In an earlier challenge, you used the caret character (^) inside a character set to create a negated character set in the form [^thingsThatWillNotBeMatched]. Outside of a character set, the caret is used to search for patterns at the beginning of strings.

You can search the end of strings using the dollar sign character $ at the end of the regex.

The closest character class in JavaScript to match the alphabet is \w. This shortcut is equal to [A-Za-z0-9_]. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (_).

\w = a-zA-Z0-9

\W = not \w

\d = 0-9

\D = not digit

problem 1:

1) Usernames can only use alpha-numeric characters.

2) The only numbers in the username have to be at the end. There can be zero or more of them at the end.

3) Username letters can be lowercase and uppercase.

4) Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters.

let username = "JackOfAllTrades";

let userCheck = /^[a-z]([0-9]{2,}|[a-z]+\d*)$/i; // Change this line

let result = userCheck.test(username);

1. ^ - start of input
2. [a-z] - first character is a letter
3. [0-9]{2,0} - ends with two or more numbers
4. | - or
5. [a-z]+ - has one or more letters next
6. \d* - and ends with zero or more numbers
7. $ - end of input
8. i - ignore case of input

------

to match only the string "hah" with the letter a appearing at least 3 times, your regex would be /ha{3,}h/.

t{3,6} = 3 to 6 

t{3,} = 3 or more

t{3} = 3

? = zero or more

A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as (?=...) where the ... is the required part that is not matched.

On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as (?!...) where the ... is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.

remove white spaces

let regex = /^\s+|\s+$/g;

str.replace(regex, "");

var while can be called multiple times, let acts like variable from java, can be called only once if it is declared globally.

var acts as global variable all the time while let functions only in the declared block.

const is final from java. 

arrow syntax function is lamba from java.

javascript allows for default value

<script>

  document.addEventListener('DOMContentLoaded', function(){

    // Add your code below this line

    // Add your code above this line

  });

</script>

document.getElementsByClassName('')[0].textContent = 'dd';

json apis are sent in bytes, application receives it as string. in order to use it in javascript, it needs to be converted into javascript object. JSON.parse does that for us.

  document.addEventListener('DOMContentLoaded', function(){

    document.getElementById('getMessage').onclick = function(){

      // Add your code below this line

const req = new XMLHttpRequest();

req.open('GET','/json/cats.json',true);

req.send();

req.onload = function(){

  const json = JSON.parse(req.responseText);

  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);

}

another way to request externa data is through fetch method.

fetch('/json/cats.json')

   .then(response => response.json())

   .then(data => { document.getElementById('message').innerHTML = JSON.stringify(data); })

[ ] -> Square brackets represent an array
{ } -> Curly brackets represent an object
" " -> Double quotes represent a string. They are also used for key names in JSON

JavaScript provides seven different data types which are undefined, null, boolean, string, symbol, number, and object.

When JavaScript variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number". If you concatenate a string with an undefined variable, you will get a literal string of "undefined".

 camelCase =  first word in lowercase and the first letter of each subsequent word is capitalized.

 Mad Libs style ex. var ourStr = "Hello, our name is " + ourName + ", how are you?";

Zero-based indexing = programming languages start counting from number 0 not 1;

Javascript array array methods

push(), pop(), shift()(removes the first element), unshift()(adds to the beginning of an array) 

Difference between parameters and arguments : 

In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope.

Variables which are used without the var keyword are automatically created in the global scope.

== does type conversion, === is strict equality which does not automatically performs type conversion.

you access the data in objects through what are called properties.

if your object has any non-string properties, JavaScript will automatically typecast them as strings.

an example of javascript object notation aka json:

The Call Stack

Recursive functions use something called “the call stack.” When a program calls a function, that function goes on top of the call stack. This similar to a stack of books. You add things one at a time. Then, when you are ready to take something off, you always take off the top item.

Math random number range: 

Math.floor(Math.random() * (max - min + 1)) + min

Last picture explaination:

arrayRange's data type is set at line 3.

Since recursion always happens as call stack, if wanted print value is from 1 ~ 5, have to think of top book, which is the number 5. 5 gets unshift, then 4 all the way up to 1 which results 1 ~ 5 as answer. 

해당  apache server.xml에 URIEncoding="UTF-8" 를 추가하자.

    <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"  URIEncoding="UTF-8" />

이방식은 get만 적용이되니 form태그를 get방식으로 보내야한다. 

sudo mysqld_safe --skip-grant-tables

mysql -u root -p

UPDATE mysql.user SET authentication_string=null WHERE User='root';

FLUSH PRIVILEGES;

exit;

mysql -u root

ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'yourpasswd';

<div> - groups content

<section> - groups related content

<article> - groups independent, self-contained content

----

 <fieldset>

        <legend>What level ninja are you?</legend>

        <input id="newbie" type="radio" name="levels" value="newbie">

        <label for="newbie">Newbie Kitten</label><br>

        <input id="intermediate" type="radio" name="levels" value="intermediate">

        <label for="intermediate">Developing Student</label><br>

        <input id="master" type="radio" name="levels" value="master">

        <label for="master">Master</label>

      </fieldset>

display: flex;

flex-direction: row or column;

example : 

<style>

  body {

    font-family: Arial, sans-serif;

  }

  header, footer {

    display: flex;

    flex-direction: row;

  }

  header .profile-thumbnail {

    width: 50px;

    height: 50px;

    border-radius: 4px;

  }

  header .profile-name {

    display: flex;

  flex-direction: column;

    margin-left: 10px;

  }

  header .follow-btn {

    display: flex;

    margin: 0 0 0 auto;

  }

  header .follow-btn button {

    border: 0;

    border-radius: 3px;

    padding: 5px;

  }

  header h3, header h4 {

    display: flex;

    margin: 0;

  }

  #inner p {

    margin-bottom: 10px;

    font-size: 20px;

  }

  #inner hr {

    margin: 20px 0;

    border-style: solid;

    opacity: 0.1;

  }

  footer .stats {

    display: flex;

    font-size: 15px;

  }

  footer .stats strong {

    font-size: 18px;

  }

  footer .stats .likes {

    margin-left: 10px;

  }

  footer .cta {

    margin-left: auto;

  }

  footer .cta button {

    border: 0;

    background: transparent;

  }

</style>

<header>

  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">

  <div class="profile-name">

    <h3>Quincy Larson</h3>

    <h4>@ossia</h4>

  </div>

  <div class="follow-btn">

    <button>Follow</button>

  </div>

</header>

<div id="inner">

  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>

  <span class="date">1:32 PM - 12 Jan 2018</span>

  <hr>

</div>

<footer>

  <div class="stats">

    <div class="Retweets">

      <strong>107</strong> Retweets

    </div>

    <div class="likes">

      <strong>431</strong> Likes

    </div>

  </div>

  <div class="cta">

    <button class="share-btn">Share</button>

    <button class="retweet-btn">Retweet</button>

    <button class="like-btn">Like</button>

  </div>

</footer>

justify-content property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.

Activity 생명주기

존재하지 않음 -> onCreate() -> onStart -> onResume -> onPause() -> onStop() -> onDestroy -> 존재하지 않음

Problem 1 : 

If Android Emulator screen does not flip to landscape mode, check if flipping is blocked on avd manager.

allow flipscreen on avd manager.

-----------------

Basic web.xml settings you need

1. welcome file list for start up

<welcome-file-list>

<welcome-file>/</welcome-file>

</welcome-file-list>

2. for database access

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring/root-context.xml</param-value>

</context-param>

3. to read other languages beside english

<filter>

<filter-name>encodingFilter</filter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

<init-param>

<param-name>encoding</param-name>

<param-value>utf-8</param-value>

</init-param>

<init-param>

<param-name>listings</param-name>

<param-value>true</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>encodingFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

4. Setting path way from servlet-context.xml

<servlet>

<servlet-name>action</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>action</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

5. etc

<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

----------

setting path for servlet-context.xml

1. enables annotations

<annotation-driven />

<context:annotation-config/>

<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->

<resources mapping="/resources/**" location="/resources/" />

<resources mapping="/style/**" location="/style/"/>

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<beans:property name="prefix" value="/WEB-INF/jsp/" />

<beans:property name="suffix" value=".jsp" />

</beans:bean>

<context:component-scan base-package="com.test.taewon">

<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service"/>

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Repository"/>

</context:component-scan>

-----

root-context.xml

<context:property-placeholder

location="classpath:/mybatis/config/datasource.properties" />

<context:annotation-config />

<bean id="dataSource"

class="org.springframework.jdbc.datasource.DriverManagerDataSource">

<property name="driverClassName" value="${driver}" />

<property name="url" value="${url}" />

<property name="username" value="${id}" />

<property name="password" value="${pw}" />

</bean>

<bean id="sqlSessionFactoryBean"

class="org.mybatis.spring.SqlSessionFactoryBean">

<property name="dataSource" ref="dataSource" />

<property name="mapperLocations"

value="classpath:/mybatis/mappers/*Mapper.xml" />

<property name="typeAliasesPackage"

value="com.test.taewon.vo" />

</bean>

<bean id="sqlSession"

class="org.mybatis.spring.SqlSessionTemplate">

<constructor-arg index="0" ref="sqlSessionFactoryBean"></constructor-arg>

</bean>

<bean id="TransactionManager"

class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<property name="dataSource" ref="dataSource"></property>

</bean>

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

<property name="basePackage" value="com.test.taewon.mapper"></property>

</bean>

----

datasource.properties stuff:

dbname=mysql

driver=com.mysql.cj.jdbc.Driver

url=jdbc:mysql://localhost:3306/taewonboard?serverTimezone=UTC

id=

pw=