분류 전체보기 344

24.04.23 배열, 자료의 비파괴와 파괴

배열은 여러개의 변수를 한번에 선언해 다룰 수 있는 자료형이다.let array = ['a', 'b', 'c', 'd', 'e']여기서 배열 내 요소의 번호는 인덱스로 0부터 시작한다.array[0] = 'a'array[1] = 'b'array[2] = 'c' ....이런 식으로 꺼내 쓸 수 있다. 배열 내 요소의 개수를 확인하고 싶다면 lenght속성을 사용하면 된다.> array.length5 배열 맨 뒤에 요소를 추가하고자하면 push()메소드를 사용한다.> array.push('f')array = ['a', 'b', 'c', 'd', 'e', 'f']여러개를 추가하면 순서에 맞게 추가된다. 또한 인덱스를 사용하여 추가 할 수도 있다.> array[6] = 'g'array = ['a', 'b', '..

2차 공부/TIL 2024.04.23

24.04.22 삼항 연산자, 짧은 조건문

조건부 연산자(삼항 연산자)는 아래와 같이 사용한다.불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과let a = 10a > 10 ? alert('a는 10을 초과합니다.') : alert('a는 10 이하입니다.')이런식으로 사용한다.간단하게 판단하여 참 거짓의 결과로 나뉠 때 삼항 연산자를 자주 사용했던 기억이 있다. 짧은 조건문논리합 연산자를 활용한 짧은 조건문은 다음과 같다.true || alert('참일 때 실행하지 않는다!')false || alert('참일 때 실행하지 않는다!')논리합 연산자 ||는 양변중 하나라도 true일 때 true를 뱉어내므로 1번 명령문은 true가 나오며 명령이 실행되지 않는다.2번 명령문은 양변에 true가 없으므로 alert명령이 실행된다.불 표현식 || 불..

2차 공부/TIL 2024.04.22

24.04.21 if, switch 조건문

깃허브에 txt파일로 TIL을 올렸었는데, 원하는 주제를 찾기도 힘들고, 다양한 기능을 사용하지 못하여 다시 티스토리에 올린다.if 조건문if (boolean 값이 나오는 표현식) { bool값이 참일 때 실행할 문장}위와같이 if () {} 형식으로 사용한다.if ( 1 > 2 ) { alert('참')}alert('거짓')이렇게 코드를 작성하면 1>2 표현식이 false이므로 alert('거짓')만 실행된다.물론 이렇게 당연한 식을 사용하지 않고,if (list.includes('안녕')) { alert('안녕!')}이런 판단해야하는 식을 사용한다. if는 else나 else if 를 사용하여 다른 상황을 미리 가정해 둘 수 있다.if (Month == 1) { alert('1월입니다!')} else..

2차 공부/TIL 2024.04.21

HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요

답변 block요소는 사용가능한 최대 너비를가지며 높이는 내부 컨텐츠에 맞게 지정됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한 여러개의 block요소가 있을 때 수직으로 쌓이며, 프레임을 잡을 때 사용합니다. 반면 inline요소는 너비와 높이가 내부 컨텐츠 크기만큼 설정되며 임의로 지정할 수 없습니다. padding과 margin은 좌우에만 적용가능하며 여러개의 인라인 요소가 있을 때 수평으로 쌓입니다. 보통은 text나 img관련한 요소에 사용합니다. 꼬리질문 inline-block? 인라인 블록은 인라인 요소처럼 내부컨텐츠의 크기만큼 너비와 높이가 지정되고, 사용자 정의에 따라 원하는 크기로 지정할 수 있습니다. padding, ma..

Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요

답변 전체 상태값을 하나의 store에 모아 저장합니다. store에 저장된 상태값은 불변객체입니다. 리덕스의 상태값을 변경하는 방법은 액션객체와 dispatch를 사용해야만 가능합니다. 또한 상태값은 순수함수에 의해서만 변경되어야합니다. 상태관리 도구 비교는 모르겠다.

Semantic HTML의 필요성을 예시를 들어 설명해주세요.

답변 태그의 의미에 맞춰 기계와 사람에게 정보를 전달해 줄 수 있습니다. 예를들어 h1태그는 제목, article태그는 한 덩어리의 정보라는 것을 알 수 있습니다. 회사를 홍보하려하는데 p태그 안에 회사 이름을 넣게되면 검색엔진이 약한 의미와 연관성을 가져 악영향을 끼칩니다. 또한 모든 태그를 div로 작성하면 클래스명과 아이디를 각각 주어야하는데 코드가 더러워지고 협업 시 타인이 파악하기 힘들어집니다. 꼬리질문 시멘틱 태그에 관해 몇가지만 알려주실 수 있나요? article태그는 문서에서 독립된 영역을 뜻합니다. aside태그는 사이드영역 또는 광고를 뜻합니다. footer는 꼬리말을 담당합니다. header은 머리말을 담당합니다. main태그는 주요 컨텐츠 영역으로 한페이지에 한개만 사용합니다. se..

<li>요소는 왜 <ul>요소의 자식 요소여야만 하나요?

답변 li태그는 목록의 항목을 나타내는 태그이기 때문입니다. 따라서 목록을 담는 ul태그의 자식요소여야합니다. li태그로 작성하지 않고 다른 태그로 작성하더라도 문제는 없지만, 태그의 의미에 맞게(시멘틱하게) HTML을 작성하는것이 다른 개발자가 보았을 때 쉽게 이해할 수 있기 때문에 협업의 측면상 중요합니다. 꼬리질문 다른 태그에도 들어갈 수 있나요? ol태그 안에도 li태그를 작성할 수 있습니다. ul태그는 정렬되지 않은 목록을 나타낼 때 사용하는 태그이고, ol태그는 정렬된 목록을 나타낼 때 사용하는 태그입니다. 참고자료 https://developer.mozilla.org/ko/docs/Web/HTML/Element/li - HTML: Hypertext Markup Language | MDN HT..

React의 state와 props에 대해서 설명해주세요.

답변 리액트의 stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다. props로 넘겨준 값들은 불변하며, readOnly속성을 가지고있습니다. 따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에게 요청할 수 있습니다. 꼬리질문 왜 변수가 아닌 state에 데이터를 저장하나? 변수로 저장해도 됩니다. 하지만 변수값이 바뀌었을 때 일반 변수는 리렌더링이 되지 못하지만, state에 저장된 데이터는 리렌더링이 되기 때..

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요.

답변 순수함수란 입력값에 대해 항상 동일한 출력값을 반환하는 함수로, 외부상태에 영향을 끼치는 사이드 이펙트가 없는 함수를 의미합니다. 순수함수는 입력값만을 가지고 처리하기 때문에 입력값이 변경되지 않는 한 항상 같은 결과를 반환하므로 불변성을 유지합니다. 순수함수를 제작하기 위해서는 데이터의 불변성을 유지하는 것이 중요한데, 전달인자로 참조 자료형이 전달되는 경우 객체 자체를 바꾸는 사이드이펙트가 생길 수 있어 map filter reduce메소드가 각광받게 되었습니다. 참고자료 https://gardeny.tistory.com/8 함수형 프로그래밍 - 순수함수 순수함수 순수함수란? 순수함수란 부수 효과가 없는 수학적 함수를 말한다. 조금 쉽게 풀어서 말해 보자면 동일한 인자에 대해서는 항상 동일한 값..

Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

답변 MaxAge와 Expires는 쿠키의 유효기간을 설정하는 속성입니다. 해당 속성을 지정하지 않으면 세션쿠키라 하고, 브라우저를 닫을 시 쿠키가 삭제됩니다. maxage로 설정된 숫자는 해당 숫자를 초로 환산하여 시간이 완료되었을 시 쿠키가 삭제되고, expires는 GMT포맷으로 날짜를 설정하여 해당 날짜에 쿠키가 삭제되도록합니다. 과거시간으로 설정했을 경우 즉시 삭제됩니다. 꼬리질문 참고자료 https://velog.io/@gusdnr814/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98 쿠키와 세션 😀 쿠키와 세션을 알아보자! velog.io https://studee.tistory.com/55 [Nodejs-cookie] 쿠키를 언제까지 살아있게 할까? [생..