본문 바로가기

분류 전체보기

 (114)
연산자 연산자의 종류 - 산술연산자 - 문자열 연결 연산자 - 할당 연산자 - 비교 연산자 - 삼항 조건 연산자 - 논리 연산자 - 타입 연산자 산술연산자 변수도 연산자의 재료로 활용 가능하다. 이항 산술 연산자 기본적인 사칙연산 + % (나머지) % (Modular 모듈러 연산) : 나머지가 몇인지를 구하는 연산자. 보통 정수끼리 사용.일반적인 이항 연산자에 활용하는 변수들은 원본의 값은 계속 보존된다. 5 % 2 => 1 8 % 3 => 2 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자값을 만든다.피연산자의 값을 변경한다 단항연산자들은 붙어있는 변수의 값 자체를 변화시킨다(!) ++ 증가 -- 감소 + 문자를 숫자로 타입 변환 해준다. ("1" -> 1) - 양수를 음수로, 음수를 양수로 반전한 값..
템플릿리터럴 ES6부터 도입된 새로운 문자열 표기법. 일반 문자열과는 다르게 '', "" 대신 ``(백 틱)을 사용한다. 일반 문자열에서는 줄 바꿈이나 공백 등을 표현하려면 (백 슬래시)를 이용한 이스케이프 시퀀스를 사용한다. ex) let template = '\n\tHome\n'; 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄 바꿈과 공백이 있는 그대로 적용된다. ex) let template = ` Home `; 표현식 삽입 일반 문자열은 문자열 연산자 + 를 통하여 연결한다. ex) let first = 'YongJun' let last = 'Choi' 'My name is' + first + ' ' + last + '.'); 템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 ..
변수 변수는 하나의 값을 저장하기 위한 수단이다. 프로그램에서 데이터를 기록해두려고할때 사용하는 공간. let userId = 1; let userName = 'Lee'; 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용 할 수 있다. let user = {id:1, name: 'Lee'}; let uesrs = [ {id:1, name: 'Lee'}, {id:2, name: 'Kim'} ]; 변수에 값을 저장하는 것을 할당(assignment)이라고 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 변수 이름을 식별자(identifier)라고도 하며, 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 값이 아니라..
캡슐화(encapsulation) 캡슐화 객체의 속성(data fields)과 행위(methods)를 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉한다. 이점 재활용이 가능하며, 코드의 중복을 피할 수 있다. 데이터를 처리하는 동작 방식을 외부에 숨길 수 있다. 요구사항이 새롭게 추가되거나 바뀌어도 변경이 전파되지 않도록 막을 수 있다. Tell, Don't Ask 객체 내부의 데이터를 꺼내와서 처리하는게 아닌, 객체에게 처리할 행위를 요청하라는 행위이다. 이러한 행위를 우리는 "객체에 메세지를 보낸다" 라고 말한다.
관심사의 분리(SoC) 관심사의 분리 (Separation of concerns) 소프트웨어 개발에서 가장 기본적인 원칙중 하나이다. 각 부문이 각자의 관심사를 갖도록 컴퓨터 프로그램을 여러 부문으로 나누는 설계 원칙. 프로그램을 관심사 별로 쪼개서 가능하면 한 번에 한 가지 문제를 해결함으로써 프로그램 개발과 유지보수 시의 복잡성을 줄일 수 있다. 원칙 프로그램을 하나의 단일블록으로 작성하지 않으며 작은 조각으로 나누어 각각의 개별작업을 할수있도록 만든다. SoC for functions 이 원칙은 복잡한 함수를 지양한다. 함수가 커지기 시작하면 함수가 너무 많은 작업을 처리하게 되고, 복잡해지기 시작한다. 작은 함수로 캡슐화하여 다른 부분에서 사용할 수 있게 만든다. SoC for modules 이 원칙은 각각 논리적 상관..
Axios delete시 body에 데이터 넣기 DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주기 export const deleteItem = async (id) => { try { const response = await api.delete(`/test`, { data: { id: id, }, }); return response.data; } catch (error) { const err = error as AxiosError; if (err.response) { alert(err.response.data.message); } } }
[React] TR Link안에 TD하나만 Link안보내기 다음과 같은 리스트에서 어느 곳을 눌러도 디테일로 보내고는 싶은데, 셀렉트를 눌렀을 때는 셀렉트가 활성화돼서 활성화, 비활성화를 골라야 하는데 셀렉트를 누르면 바로 디테일로 가버린다.. const handleDetail = (id: number) => { navigate(`${id}`); }; handleDetail(id)}> {id} {name} ... 어떻게 해야 되나 고민하다 select TD에서 이벤트를 해제시켜보기로 했다. e.stopPropagation 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다. const handleDetail = (id: number) => { navigate(`${id}`); }; const handleCancel = ( event: React.MouseEvent..
카카오톡 오픈그래프 변경하기 웹사이트의 메타데이터를 변경했음에도 카카오톡 오픈그래프에서는 변동이 없어서 알아본 결과, 카카오톡의 오픈그래프 데이터를 변경하기 위해서는 직접 사이트에 방문하여 초기화를 진행시켜줘야 한다. 카카오 개발자 사이트(https://developers.kakao.com/) 접속 카카오 계정 로그인 도구 초기화도구 OG캐시 초기화할 URL 입력 초기화 후 링크를 붙여본 결과 오픈그래프가 제대로 변경된 것을 확인할 수 있었습니다.

티스토리툴바