[class: PM Camp@Fast Campus#5] 개발 #3 – 직접 개발해 볼까? (my note is WIP)

3주차

5. 23 토

개발 #3 – 직접 개발해 볼까?

간단한 웹 서비스를 개발하면서 개발 개념 이해하기 PHP, HTML, CSS, JavaScript, MySQL의 기초 익히기 Bootstrap을 사용한 간단한 웹 서비스를 GitHub에 저장하기. 주의! 개발 과정을 이해하기 위한 간단한 예제를 만듭니다. 실제  서비스 개발과 거리가 있습니다.

1. Understanding development concept via developing a simple web service [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. Permission: e.g. d (directory) r (read) w (write) x (execute) r- (<-group) xr (<-others other than owner and group) -x
1. c.f. 4 (read), 2 (write), 1 (execute)): e.g. chmod 644 file_name
2. Process
1. usage check: for Windows, use taskmgr on Prompt; for Mac, monitor on Spotlight
2. description: “In computing, a process is an instance of a computer program that is being executed. It contains the program code and its current activity. Depending on the operating system (OS), a process may be made up of multiple threads of execution that execute instructions concurrently.” <source: Wikipedia>
3. Thread
1. description: “In computer science, a thread of execution is the smallest sequence of programmed instructions that can be managed independently by a scheduler, which is typically a part of the operating system. The implementation of threads and processes differs between operating systems, but in most cases a thread is a component of a process. Multiple threads can exist within the same process and share resources such as memory, while different processes do not share these resources. In particular, the threads of a process share its instructions (executable code) and its context (the values of its variables at any given moment)” <source: Wikipedia>
2. c.f. in installing PHP, try thread safe for safer processing (?) instead of non thread safe
4. PHP
1. description: PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. <source: PHP.net>
2. installing PHP
1. on Windows
1. flow: unzip downloaded PHP installation file -> change the folder name to php -> move the folder on C: -> property information? -> select PATH -> add “;C:\php” -> on cmd, type php
2. check: on cmd, type %appdata% -> see if npm folder exists, otherwise create one
2. on Mac
1. no need to install
2. c.f. type php -v for version info
5. Bracket
1. powerful usecase: using extract feature (e.g. example)
6. Git
1. need to update both server (i.e. web) and client program (i.e. GitHub)
1. server: Pull Request -> Merge -> etc.
2. client program: select Sync
2. c.f. GitBook to create a story on Git environment by using powerful history management system
7. package manager: npm and bower under JavaScript environment
1. install bower: type sudo npm install bower -g -> install bower
2. c.g. programming language containing package manager (e.g. Go)
8. Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web <source: Bootstrap>
1. Bootstrap component: link
2. Bootstrap theme: e.g. {wrap}bootstrap, Bootstrap Watch
9. PHP server setup: php -S (<-server) 127.0.0.1:8000 . (<- folder)
1. port number (c.f. link)
1. my computer: 8000
2. http: 80
3. https: 443
4. ssh: 22
2. c.f. port forwarding concept: e.g. 8000 -> 8000, 8001
10. webpage execution order: server side (e.g. PHP, .net, Java) -> client side (e.g. JavaScript)
11. progressive enhancement: add JavaScript codes after building basic features (e.g. add JavaScript’s accordion UI after filling in detail information on each row e.g. link)
12. graceful degradation: e.g. in 60 fps game, provide 10 fps at minimum
1. c.f. 16 fps for human eyes to see continuous movement on screen (c.f. 30 fps for animation)
13. language support
1. utf-8: unicode
1. 4 bytes per each character (e.g. English uses 1 byte, Korean uses 3 bytes)
2. c.f. Korean
1. 조합형 (~11,500 ea) vs. 완성형 (~5,000 ea)
2. 완성형 (cp (code page) 949, euc-kr)
14. minification:
1. .min file: removed space file (<- suggest at your company to implement this method)
15. grid: e.g. dividing page by 12 columns (c.f. 24 columns)
16. RDBMS (relational database management system): e.g. SQL
1. method: get (e.g. search query), post (e.g. signup info)
2. SQL: “SQL (Structured Query Language) is a special-purpose programming language designed for managing data held in a relational database management system (RDBMS), or for stream processing in a relational data stream management system (RDSMS).” <source: Wikipedia> enabling CRUD (create, read, update, delete)
3. password: use sha1 method instead of md5
17. issue: don’t trust clients because they can be manipulated
1. recommendation: consider implementing server verification process not to be manipulated by client (e.g. browser): e.g. for promotional event, implement server verification process
18. hacking via SQL injection method: e.g. type ‘’ OR true OR ‘’ on ID entry box

2. personal takeaway
1. Q. How to know whether a web service has plaintext for password (aka no password encryption)?
2. A: check whether you could retrieve password via finding password feature