개발하는 동그리

Container (사용할 수 있는 속성 값) display : flex; flex-direction : (default)row, row-reverse, column, column-reverse frex-wrap : (default)nowrap, wrap (reverse 사용가능) ---> 화면에 꽉 차면 다음줄로 넘기는 여부 flex-flow : column wrap; justify-content : flex-start, flex-end, flex-center, space-around, space-evenly, space-between Item (지정할 수 있는 속성 값) order : 1; --> item의 순서 변경 가능 flex-grow : (default) 0; flex-shrink : (def..

CSS 는 무엇인가? CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. CSS 가 필요한 이유? HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점은 유지보수 관점에서도 유리하고 스타일만 모아두었기 때문에 웹페이지를 경량화 할 수 있다. Ctrl + Shift + C 를 누르면 화면에 구현된 코드위치를 찾아 볼 수 있다. 혹은 궁금한 부분에서 스크롤 오른쪽 클릭하여 검사! 혹은 F12 를 눌러서 개발자 도구를 확인 하면 구조를 파악하기 수월하다. CSS 용어 정리 font-size : 24px ( 절대 단위 : px, pt ) ( 상대 단위 : %, em, rem, ch, vw, vh 등 ) * 상대 단위인 rem 이..

내용 HTML CSS Javascript 주요 기능 web site 뼈대 구성 (Structure) html 스타일 구성 기능 구현 (상호 작용) HTML은 위에 보이는 코드처럼 Structure를 구성하는 단계이다. 주로 제목과 내용 그리고 구성을 짜게 된다. 해당 문서가 HTML 문서임을 알리는 지시어 문서 전체의 틀을 구성하는 시작태그 문서의 메타데이터를 선언 문서의 제목으로, 브라우저를 실행했을 때 탭에 보여짐 문서의 내용을 담는 곳 ~ 숫자가 작을수록 큰 제목으로 표시된다. ex) 크게할 수 있음. 블록 태그로, 한줄을 독점할 때 사용함. 인라인 태그로 블록속에 삽입되어 블록의 일부로 사용되며, 컨텐츠의 크기만큼 공간을 차지함. unordered list, ordered list, 리스트 내의 ..

Plugins 가 무엇인가!? -> 인텔리제이를 좀 더 효율적으로 사용하기 위한 장치들이다. 예를 들면 Tag 에 색상을 입혀서 가시적으로 구분하기 쉽게 만들고, 버튼 혹은 기능을 사용할 때 해당 기능의 단축키를 안내해주는 기능이다. 적절하게 사용하면 편하고 유용하게 유틸을 사용할 수 있다. Plugins 설치는!? -> File -> Settings -> Plugins -> Type / to see options에 원하는 플러그인을 검색해서 install 하고 재부팅하면 자동으로 적용된다. ( 이미지 참조 ) Plugins을 지우고 싶으면!? -> 만약 내가 설치한 프로그램을 적용하고 싶지 않다면, File -> Settings -> Plugins에서

Web Client & Web Server 란? Web Client & Web Server는 2-Tier Architecture라고도 불린다. 예를 들어 쇼핑몰 앱을 이용하여 물건을 구매하고자 한다. 인터넷 연결 없이 쇼핑을 진행할 수 있을까!? 불가능하다!! 왜냐하면 서버와 상호작용이 있어야 실시간 물건의 유무를 알 수 있고 결제를 할 수 있다. 만약 Client 앱 안에 모든 서버의 정보를 담아둔다고 가정하면 실시간으로 변하는 상품에 변화에 따라 업데이트가 요구되기 때문에 많은 불편함을 호소하게 될 것이다. (물론 결제도 불가능) 따라서 위와 같은 구조를 가지게 되는데, 이를 Web Client & Web Server 혹은 2-Tier Architecture라고 부르는 것이다. Client Serve..

JDK ( Java Development Kit)는 Java 플랫폼 프로그래밍에 사용되는 소프트웨어 개발 환경이다. 제임스 고슬링은 썬 마이크로시스템즈에 입사해서 프로그래밍 언어 oak를 개발하고 이후 웹에서 활용할 수 있도록 발전시켜 java를 탄생시켰다. 선 마이크로 시스템즈가 경영이 힘들어졌을 때 자바 판권을 오라클이 사서 유로 시스템으로 바꿔버렸다. 수많은 개발자들은 무료로 사용하면 좋겠다는 오픈소스 마인드였기 때문에 Open Jdk 가 생겨나게 된 것이다. 실제로 오픈소스화 행보는 커뮤니티의 기여 수준을 높일 수 있었고, 자바 플랫폼이 탄력 받을 수 있는 이유라고 한다.

우리가 쓰는 Window (Microsoft) vs Linux를 비교하면 쉽게 이해할 것 같다. Window (microsoft) 리눅스 (linux) 상호 방식 GUI (Graphical User Interface ) 지향 CLI ( command-line interface) 지향 디렉토리 구조 드라이브 개념으로 디스크 구분 ( c:/ ) 루트 "/" 밑에 모든 파일이 있음 가격 유료 무료 신뢰성 독점이기 때문에 취약점이 많음 오픈소스 이므로 안정적 실시간 처리 마우스 중심, 다중 프로그램에 적합 커맨드 라인, 다중프로그램 불편 우리가 보편적으로 사용하는 window 운영체제는 마우스와 그래픽으로 구성되어 마우스를 이용하여 드래그, 클릭 등 간단한 동작을 통해 사용할 수 있도록 되어있다. 또 대중적으로..

Pseudo-code 란? 직역하자면 (가짜의) 코드라는 뜻이다. Pseudo-code는 설계하기 전에 앞서 설계도를 작성하는 것이라고 생각하면 쉬울 듯하다. 내가 원하는 목적에 맞게 구조를 설계하고 만든 설계도에 지침삼아 작업하면 더 효율적이라는 뜻이다. Pseudo-code 없이 코딩할 때에 비해서 결과물의 오류가 발생할 확률이 크게 감소한다고 한다.

온라인 클라우드 에디터를 이용하면 코드를 공유해야 할때 전체가 아닌 이슈가 있는 코드만 따로 공유할 수 있다고 한다. 아래 4개의 사이트가 있는데 하나씩 알아보려고 한다. https://codesandbox.io/ https://codepen.io/ http://jsbin.com http://sqlfiddle.com CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io CodePen An online code editor, lear..

코드 스니핏 이란?1. 코드 스니핏(Code Snippet)은 글 중간에 삽입되는 짧은 코드 조각을 의미합니다. 이는 특정 기능, 문법, 알고리즘 등의 설명을 직관적으로 전달하기 위해 사용되며, 독자가 코드 흐름을 빠르게 이해할 수 있도록 돕는 도구입니다.* 개발 지식을 텍스트로만 설명하는 것보다, 코드 스니핏이 함께 있을 때 이해도가 2배 이상 높아진다는 연구도 있습니다2. 또는 IDE(개발 도구)에서 "자동완성용 코드 템플릿"을 코드 스니핏이라고도 부릅니다.* 미리 정의된 코드 틀을 간단한 명령어로 빠르게 입력이 가능하고, 오타 방지, 코드 작성 속도 향상, 일관된 스타일 유지 등의 장점이 있습니다. 1. [문서/블로그/강의] "예제 코드 조각" 개발 블로그 또는 개발 문서에서 쉽게 볼 수 있는 ..