JAN's History

동적언어 자바스크립트자바스크립트는 동적타입이 있는 동적 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다는 점이 다른 언어와의 가장 큰 차이점인데요. (필자는 이것 때문에 많이 헷갈렸음.. 자바랑 너무 달라)let foo = 42; // foo는 이제 숫자입니다foo = "bar"; // foo는 이제 문자열입니다foo = true; // foo는 이제 불리언입니다public class Main { public static void main(String[] args) { // 숫자형 변수 int fooInt = 42; // 문자열 변수 String fooStrin..

(자바만 공부하다가 자바스크립트도 공부해보려고 하는데 헷갈리는 점이 너무 많아서 .. 아예 정리하면서 처음부터 다시 공부해보기로 결심 !!)변수는 프로그래밍에서 데이터를 저장하고 관리하는 데 중요한 역할을 합니다. 자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다. 각 키워드는 선언된 변수의 특성과 사용 방식을 결정하며, 적절한 변수를 선택하여 사용하는 것이 중요합니다. 이번 섹션에서는 자바스크립트의 변수 선언 방식과 각 키워드의 차이점에 대해 자세히 알아보겠습니다.그리고 '호이스팅(Hoisting)' 이라는 개념이 나올텐데, 모르시는 분들을 위해 미리 정의하고 넘어가겠습니다.  호이스팅(Hoisting) 자바스크립트에서 변수나 함수의 선언이 코드의 실행 컨텍스트..

HTML을 작성하다 보면 비슷해 보이지만 용도가 다른 태그들로 인해 다소 혼란스러울 수 있는데요. 이번 포스트에서는 자주 헷갈리는 태그들을 비교하고 그 차이점을 짚어보도록 하겠습니다!!1. 태그 vs 태그 vs 태그이 세 태그는 웹 페이지에서 자주 사용되며 각각 고유한 특성과 용도가 있어 헷갈리기 쉬운데요. 태그 태그는 블록 요소로, 하나의 문단을 나타냅니다. 텍스트를 그룹화하여 문단을 형성하고, 항상 새로운 줄에서 시작합니다This is a paragraph of text.디폴트 스타일: 각 태그는 위아래에 여백이 있어, 문단 간에 공간을 만듭니다. 이는 읽기 편한 구조를 제공하는 데 도움이 됩니다.사용 상황: 문장이나 텍스트 블록을 정의할 때 사용하며, 문서의 텍스트 구조를 논리적으로 구성할..

HTML에서 비슷하게 보이지만 사용 목적이 다른 태그들이 생각보다 많습니다.. 아무래도 주니어 개발자는 이런 부분이 헷가릴텐데 이 글에서는 그런 태그들을 비교하여, 각 태그의 특징과 사용해야 할 상황을 명확히 정리해보겠습니다! 그리고 먼저 시맨틱 태그와 비시맨틱 태그를 구분하고, 각각의 태그를 언제, 왜 사용해야 하는지 다뤄보겠습니다.1. 시맨틱 태그란?시맨틱(Semantic) 태그는 HTML 문서에서 구조와 의미를 명확히 전달하는 태그를 말합니다. 모든 태그가 div로 작성된 html을 상상해보면 왜 시맨틱 태그가 필요한 지를 알 수 있을텐데요. 사진처럼 div로 감싸진 태그보다, html 태그의 의미와 쓰임새를 활용해 사용하는 것이 훨씬 좋은 코드입니다. Header Sidebar Main C..

1. 태그와 폼 요소들 태그는 사용자 입력을 받기 위한 양식을 정의하는 요소입니다. 입력된 데이터는 서버로 전송할 수 있으며, 다양한 폼 요소들을 포함할 수 있습니다.주요 폼 요소들:: 다양한 타입의 입력을 받는 요소입니다. type 속성을 사용하여 텍스트, 비밀번호, 체크박스, 라디오 버튼 등을 정의할 수 있습니다.: 여러 줄의 텍스트를 입력받기 위한 요소입니다.Enter your message here...와 : 드롭다운 리스트를 생성합니다. Volvo Saab: 버튼을 생성하며, 사용자 상호작용을 처리합니다.Submit⭐ 중요: 폼 태그와 요소들을 올바르게 활용하면 사용자와의 상호작용을 효과적으로 처리할 수 있습니다. method와 action 속성을 적절히 설정하여 데이터가 안전하게 ..

1. CSS 작성 방법CSS는 주로 세 가지 방법으로 작성할 수 있습니다.1.1 인라인 스타일(In-line Style)HTML 요소 내에서 style 속성을 사용하여 직접 스타일을 지정하는 방법입니다. 주로 간단한 스타일 적용에 사용됩니다.This is a red paragraph.⭐중요: 인라인 스타일은 유지보수가 어렵고, 스타일의 재사용이 불가능하므로 큰 프로젝트에서는 권장되지 않습니다.1.2 내부 스타일 시트(Internal Style Sheet)HTML 문서의 1.3 외부 스타일 시트(External Style Sheet)가장 선호되는 방법으로, 별도의 .css 파일을 만들어 HTML 문서와 연결하는 방식입니다. HTML 문서 내 태그를 통해 연결합니다./* styles.css */p { ..

최근 프론트엔드쪽으로 인턴을 하고 있어서 HTML,CSS,JavaScript 부분을 차근차근 공부해볼 생각이다..!!1. HTML 태그 이해하기: Start Tag와 End Tag1.1 Void 요소Void 요소는 종료 태그(End Tag)가 필요 없는 요소입니다. 이들은 보통 단일 태그로 사용되며, 자체적으로 내용을 포함하지 않습니다. 예를 들어 (줄바꿈) 또는 (이미지 삽입) 태그가 있습니다.⭐ 중요: Void 요소는 자체 종료 태그가 없기 때문에 닫는 슬래시( / )를 사용하지 않는 것이 일반적입니다. 예를 들어 와 같은 형태는 XHTML에서는 사용되었으나, 최신 HTML에서는 사용하지 않습니다.1.2 Content와 ElementContent는 태그 사이에 있는 실제 콘텐츠(텍스트, 이미지 등)입..

상황Spring WebFlux의 WebClient를 사용하여 OpenAI API에 요청을 보내는 과정에서 응답 데이터가 기본적으로 허용된 메모리 버퍼 크기(256KB)를 초과하여 DataBufferLimitException: Exceeded limit on max bytes to buffer : 262144 오류가 발생했습니다.위 에러는 Spring WebFlux의 WebClient가 데이터를 한 번에 메모리에 로드하려다 발생한 문제라고 해서 처음에는 maxInMemorySize를 크게 수정했는데, 또 같은 에러가 반복되어 아래와 같은 방법으로 해결했습니다.org.springframework.core.io.buffer.DataBufferLimitException: Exceeded limit on max ..