내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 자바스크립트의 제어문(control) 중 하나인 조건문(Condition)에 알아볼게요. 들어가기 앞서서 제어문에 대해 간단히 알아본다면. 자바스크립트 제어문은 "프로그램의 흐름(실행 순서)을 제어하는 문장들"을 말해요. 자바스크립트의 조건문(Condition) 조건문은 특정 조건의 참(true) 또는 거짓(false) 여부에 따라 실행할 코드를 결정할 때 사용해요. 즉, 프로그램의 흐름(제어)을 바꾸는 역할을 하고, 주로 비교 연산자(>, 나 논리 연산자(&&, ||, !)가 사용이 돼요. 이 연산자의 결과는 항상 불리언(boolean) 값으로 평가해요. 1. if, else if, else 문 if문은 조건식이 참일 때 코드 블록을 실행하고, else if문은 앞의 조건이 ..

안녕하세요. 오늘은 CSS의 선택자(Selectors)에 알아볼게요. CSS Selectors 스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용이 가능하기 때문에 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 기능이에요. 선택자의 종류 전체 선택자 (universal selector) 전체 선택자는 스타일을 문서의 모든 요소에 적용할 때 사용해요. 주로 하위 요소에 스타일을 한꺼번에 적용할 때 사용하고, 별표(*)를 사용해요. /*기본형*/* { 속성: 값; ... }+) 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이 여백을 두는 속성은 마진(margin) / 패딩(padding) 이 있어요.* { margin: 0;} 타입 선..

안녕하세요. 오늘은 CSS에 대해 알아볼게요. CSSCSS는 Cascading Style Sheets로 단어 하나하나 뜻을 알아보면 Cascading: "위에서 아래로 흐르는", "상속 또는 종속하는" Style: HTML 문서의 겉모습(디자인)을 결정짓는 것 -> HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 등 종속된 스타일 형식이에요. CSS Style 형식 /* 기본형 */선택자 { 속성1: 속성값1; 속성2: 속성값2 }스타일 규칙으로는 속성과 값이 하나의 쌍으로 이루어졌어요. 세미콜론(;)으로 구분하여 스타일 규칙을 여러 개 지정이 가능해요. 선택자는 스타일을 어느 태그에 적용할 것인지 지정, 중괄호{} 사이에 스타일 정보를 입력해요. p { text-align..

안녕하세요. 오늘은 HTML의 요소(Element)에 대해 알아볼게요. HTML Element HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모델(DOM)로 파싱 되어 구조화돼요. HTML 요소의 구조그림과 같이 HTML의 요소는 여는 태그, 닫는 태그, 내용을 통틀어 요소로 통합이 돼요. 즉 시작 태그에서 끝 태그까지의 모든 것이 요소라고 보면 됩니다. 여는 태그(Opening tag)는 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작이 돼요. 닫는 태그(Closing tag)는 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그(opening tag)와 동일한 형태로 닫는 태그는 반드시..

안녕하세요. 오늘은 HTML에 알아볼게요. HTML이란? HTML은 HyperText Markup Language의 약어로 웹 페이지를 만들기 위한 표준 마크업 언어예요. ( ※ 주의 ※ HTML은 프로그래밍 언어가 아니에요! ) HyperText는 문서를 서로 '연결'해 주는 링크를 의미하고, Markup은 문서나 데이터의 텍스트 내에 특정 태그나 코드를 삽입하여 그 형식이나 구조, 스타일을 웹 브라우저에 지정하는 방식을 의미해요. 일반문서와 웹 문서의 차이 일반문서(엑셀, 워드 등) 내용 입력 프로그램 = 입력 내용 확인 프로그램 웹 문서 내용 입력 프로그램 ≠ 입력 내용 확인 프로그램웹 편집기(web editor)에서 마크업(Markup) 형식으로 작성>> 웹 브라우저(web browse..

안녕하세요. 오늘은 비주얼 스튜디오 코드(Visual Studio Code)에 간단히 알아볼게요. 비주얼 스튜디오 코드(Visual Studio Code) 자바는 인텔리제이, 파이선은 파이참같이 코드를 활용할 수 있는 대표적인 프로그램이 있는데요. 비주얼 스튜디오 코드는 모든 코드를 작성하고 테스트할 수 있는 코드 편집기로, "개발자들 사이에 매우 인기가 높은 코드 편집기" 에요. VSC는 코드 편집기이지, 특정 언어나 분야에 제한된 도구가 아니기 때문에 프론드엔드, 백엔드 상관없이 모두 사용이 가능해요. 그럼 VSC를 다운로드와 환경설정까지 알아볼까요? 우선 인터넷 브라우저에 vsc 검색 다운로드 진행하시면 돼요. 다운로드가 완료되었다면 VSC 설정창에서 적용하면 좋은 리스트를 소개할게요. 설정창 활..

안녕하세요. 오늘은 코딩 공부하면서 "좋은 설계를 하는 기준이 뭘까?" 라는 생각을 하다가 작성해요. 좋은 설계를 통해 코드의 일관성과 유지보수가 쉬워지는 효과 RESTful API에 대해 알아볼까 해요. RESTful API REST의 제약 조건을 준수하는 API로 URI에 명사를 사용하고 (행위 HTTP 메서드로 표현) 계층 구조를 URI로 표현하면서 대소문자, 언더바(_) 사용 규칙을 준수해요. 그리고 HTTP 상태코드로 결과를 명확하게 전달해요. ※ REST 란? ※ REpresentaion Status TransFer의 약자로 자원(Resource)을 URI로 식별하고, HTTP 메서드를 이용해 해당 자원에 대한 정의하는 아키텍처 스타일이에요. 자원의 표현은 JSON, XML 등이 있고..

안녕하세요. 오늘은 제가 코딩 연습하다가 하나의 어노테이션 때문에 고생을 했는데요. 이 친구를 소개해볼까 해요. @ Transactional Transactional은 트랜잭션 제어용 어노테이션으로 DB 작업을 하나의 단위로 묶어 처리하는데요. 중간에 오류 나면 롤백(rollback), 문제없으면 커핏(commit)을 해줘요. 그런데 왜 고생을 했으냐고 한다면 이 어노테이션 뒤에 (readOnly = true) 적용 시 읽기 전용 트랜잭션 생성으로 읽기만 가능하고 수정이 불가능하게 돼요. 만약 어노테이션이 적용 후 수정하게 될 경우에 오류가 발생하게 됩니다. // 예제 코드@Transactional(readOnly = true)public void someMethod() { stockRep..

안녕하세요. 오늘은 스프링 시큐리티를 다루는데 가장 기본이자 중요한 시작점인 Filter, Provider, Config에 알아볼게요. 1. Filter (필터) 필터의 역할은 HTTP 요청을 가로채서 인증/인가 처리 흐름을 시작하는 친구예요. 스프링 시큐리티는 서블링 필터 체인을 기반으로 작동해요. 이 필터 체인 중 일부가 스프링 시큐리티의 필터들이고, 요청이 들어오면 가장 먼저 여기를 통과하게 돼요. 필터의 작동 순서는 HTTP 요청 → 여러 시큐리티 필터 → 인증 여부 판단 일제 인증 로직은 필터가 AuthenticationManager에게 위임을 하게 돼요.// 예시 필터UsernamePasswordAuthenticationFilter: 로그인 요청에서 사용자명/비밀번호를 처리BasicAu..

안녕하세요. 오늘은 JWT에 대해 알아볼게요. JWT이란? JWT(JSON Web Token)으로 "JSON" 객체를 이용하여 인증 정보를 안전하게 "전달"하는 토큰 기반 인증 방식으로 서버가 클라이언트(사용자)에게 발급하는 디지털 서명이 된 토큰이에요. 사용자의 인증 상태를 유지하고 서버에 전달 가능해요. JWT와 인증/인가의 관계 인증(로그인) 시 서버는 사용자 정보를 기반으로 JWT 발급이 되고 이후 사용자는 요청마다 JWT를 서버에 전달하여 인증받아요. 인가는 JWT의 사용자 권한 정보(ROLE, AUTHORITY 등)가 포함될 수 있고, 서버는 JWT를 해석해서 해당 사용자가 어떤 API나 리소스에 접근할 수 있는지 판단해요. JWT 인증 과정 첫 번째 사용자가 로그인 시 서버는 JWT ..