Monday, October 19, 2015

[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


    1. 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

No comments:

Post a Comment