몽땅뚝딱 개발자

◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나이다. - CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다. - CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있다. - 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다. ◽ SCSS(Sassy CSS)란? - Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다. - {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다. ◽ CSS로 컴파일하는 도구 - Webpack: 모듈 번들러 - Gulp: 빌드 자동화 도..

◽ 렌더링이란 렌더링이란 HTML, CSS, JavaScript 등을 브라우저에서 출력하는 과정이다. ◽ 렌더린 엔진의 종류 렌더링 엔진은 브라우저마다 다르다. 크롬은 블링크(Blink)를 사파리는 웹킷(Webkit)을 파이어폭스는 게코엔진(Gecko)을 사용한다. ◽ 렌더링 과정 1. HTML과 CSS를 Object Model로 만든다. 여기서 HTML을 파싱하여 DOM(Document Object Model)으로 만들며, 파싱 중 CSS파일을 만나면 CSSOM(CSS Object Model)을 만든다. 2. DOM + CSSOM을 사용하여 Renter Tree를 구성한다. 3. Render Tree를 사용하여 각 노드들의 정확한 위치와 크기를 계산하여 레이아웃을 구성한다. 4. 계산이 완료되면 요소들..

◽ 선택자(Selector)란? 스타일에서 중괄호({ })가 나오기 전의 부분 모두가 선택자이다. HTML 안의 특정한 element를 적어준다. ◽ 선택자(Selector)의 종류 - 전체 선택자(Universal Seletor): * /* CSS */ * { background-color: black; } - 태그 선택자(Type Selector): p, div, ul 등의 태그의 이름으로 작성 /* CSS */ p { background-color: black; } div { background-color: black; } - 클래스 선택자(Class Selector): 태그에 클래스를 직접 지정한 경우로 앞에 .을 붙여 작성 /* CSS */ .className { margin: 0; } - ID..

◽ null과 undefined의 차이 - undefined 변수를 선언하고, 값을 할당하지 않은 상태이다. 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당된다. let a; - null 변수를 선언하고, 빈 값을 할당한 상태이다. 어떤 값이 의도적으로 비어있음을 표현한다. let a = null; ◽ 검출하는 방법 - typeOf의 사용 typeof null // "object" => null은 객체로 취급된다. typeof undefined // "undefined" - 비교연산자: 동등연산자(==)와 일치연산자(===)의 사용 // ==는 자료형이 다른 경우 강제 형변환을 하여 비교 // ===는 엄격한 비교로 값 뿐만 아니라 자료형까지 비교 null === und..

예전 프로젝트에서 배포하기 전에 직렬화를 사용해야한다고해서 명확히 무엇인지 모르고 사용했었다. 당시에는 어플리케이션을 사용하는 동안 계속 그 객체를 사용해야하기 때문이라고 들었다. '왜 객체를 계속 사용하기 위해서 직렬화를 해야하지?'하는 생각이 들었지만.. 이후로는 너무 바빠서 제쳐두었다. 이제서야 정리해본다. (😭) ◽ 직렬화(Serialize)란? 직렬화에서 직렬이란 단어는 직렬/병렬할 때의 그 직렬이며, 영어로는 Serial이다. 직렬화, 역직렬화를 모두 포괄하여 직렬화라고 한다. 직렬화의 정의는 이렇다. - 어떤 환경의 데이터 구조를 다른 환경에 전송/저장하기 위하여 바이트(Byte) 포맷으로 변환하는 과정이다. - 반대의 개념인 역직렬화는 바이트 포맷으로부터 데이터 구조를 추출하는 것이다. -..

내가 정의해 본 REST API는 단순하게 말해서 'HTTP를 활용하여 CRUD를 실행하는 API'이다. 지금껏 REST API라고 생각하며 코드를 완성해왔지만 'REST API가 뭔가요?'라고 물었을 때 잘 대답하지 못할 것 같았다. 다시 한 번 정리를 해보는 시간을 가져본다. ◽ API(Application Programming Interface)란? 인터페이스는 어떤 장치끼리 정보를 교환하기위한 수단이나 방법이다. 응용프로그램 프로그래밍 인터페이스, 말 그대로 프로그램을 위한 인터페이스이다. 즉, API는 클라이언트나 서버같은 다른 프로그램끼리 데이터를 주고받는 방법, 규격이라고 정의내릴 수 있다. ◽ REST API란? REST API는 일종의 아키텍쳐이며, 웹을 위한 네트워크 기반 아키텍쳐라 할..

Spring Boot에서 같지만 여러개의 instance를 실행하는 경우 port를 매번 바꿔주는 수고로움 없이 설정하는 2가지 방법이 있다. 1. Edit Configurations에서 VM Option에서 port 설정하기 // -D는 새로 옵션을 추가하는 명령어 // 해당 어플리케이션 실행 시 실행할 포트 정해 VM Option에 입력한다. -Dserver.port=8082 2. 랜덤 port 사용하기 어플리케이션 실행 시 port가 무작위의 숫자로 정해진다. server.port=0 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ @RequestParam URL 형태 :: http://test.com?index=1&code=0 // URL에서 "index"라는 이름의 파라미터를 받아온다. @RequestMapping("read") public String getIndex(@RequestParam("index") int idx) { // ... } // URL에 key값이 없는 경우(BadRequest 발생)를 대비하여 defaultValue를 지정해줘야 한다. @RequestMapping("read") public String getIndex( @RequestParam(value="index", required=false, defaultValue="") int idx) { // ... } // 파라미터가 많은데 DTO가 없거나..

REST API의 HTTP methods는 GET, POST, DELETE, PUT 등 많은 종류가 있다. 예전 프로젝트에서는 이들의 차이점을 모른 채 GET, POST만 사용했었다. 잠시 잊고 있던 찰나, 오늘 유튜브 알고리즘에 유튜버 노마드 코더님의 영상이 추천됐다. 그리고 워스트 케이스에 내가 있어 충격을 받았고 다른 강의를 듣기 전에 미리 정리하고자 한다. 나는 지금까지 API를 구성하며, 이런식으로 이름 지었다. - getUserInfo: 유저의 정보를 가져오는 API - selectLessonInfo: 현재 레슨정보를 가져오는 API - setUserInfo: 유저의 정보를 수정하는 API - updateCoaching: 코칭 정보를 수정하는 API 그 당시엔 이런 네이밍이 직관적이라 생각했다..

◽ 경로 관련 cd $HOME ◽ txt 관련 :q 그만두기 :q! 저장하지 않고 종료 :wq 작성 후 종료 :wq! 강제 작성 후 종료 (읽기 권한만 있어도 작성가능) :x 쓰기 및 종료 :exit 쓰기 및 종료 :qa 모두 종료 :cq 저장하지 않고 종료 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.