FindNewThing FindNewThing

순수 함수- 입력이 같으면 항상 같은 출력을 반환하고, 외부 상태를 변경하지 않는 함수- 사이드이펙트가 없는 함수로,--> 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수--> 외부의 상태를 변경하지 않는 함수입니다. 사이드이펙트(부작용)란? 부작용(side effect)이라는 표현이 이름 때문에 부정적으로 들릴 수 있지만,실제로는 '필요하지만 제어되어야 하는 외부 영향'을 뜻하는 중립적인 기술 용어예: 아래는 모두 "부작용"- setState() 컴포넌트 상태 변경 (외부 변화)- console.log() 콘솔에 출력 (외부에 영향)- fetch() / axios.get() 네트워크 요청 (I/O 발생)- DOM 조작 (document.qu..

CSS-in-JS는 자바스크립트(.js)파일 안에서 css를 작성하는 방법이다. CSS-in-JS 방식을 쓰는 여러 라이브러리들이 있는데 대표적으로 styled-components이 있다. 예)const style = { backgroundColor: 'blue', color: 'white',};function Button() { return Click;} 왜 CSS-in-JS가 등장했을까?전통적인 CSS의 문제점:- 전역 스코프: 클래스명 충돌 잦음- 스타일 재사용 어려움: 모듈화, 조건부 처리 불편- JS와 CSS 분리: 컴포넌트 기반 개발 방식에 비효율적 CSS-in-JS는 이를 해결하기 위해 등장한 패러다임CSS-in-JS의 주요 특징특징 설명컴포넌트 스코프 스타일링CSS가 컴..

컴포넌트 props의 리랜더 방지개발을 하다보면 외부 라이브러리 ui를 목적에 맞게 커스터마이징을 해야할때가 있다. Wrapper Component 패턴을 이용해서 커스터마이징을 할 수 있는데, 이때 주의해야할 점이 있다. 예)render={() => } 기존에 이렇게 렌더링이 이어지는 부분을 render ={(props)=>} 으로 수정하고 const WrapperComponent = (props) => ( );이런식으로 커스텀 컴포넌트를 만든다음 대입을 한다.그러나 문제가 있다. ..

서버에 폴더를 만든다던가 설정을 수정하던가 할때 자주 쓰는 명령어가 있다. - 해당 파일 권한 확인: ls -ld /test/filefolder ls파일 또는 디렉토리의 목록을 보여주는 기본 명령어-llong format: 권한, 소유자, 크기, 수정일 등 상세 정보 출력-ddirectory: 디렉토리 자체의 정보를 보여줌 (내용 말고)- 해당 파일 권한 부여(아래 두개 실행)[특정 파일 또는 디렉토리의 소유자와 소유 그룹을 변경]sudo chown -R 부여할user:부여할user /test/filefolder sudo관리자 권한으로 실행 (권한 변경은 루트 권한 필요)chown소유자(owner) 및 그룹(group) 변경 명령어-R재귀적(recursive)으로 하위 디렉토리/파일까지 모두 변경us..

아파치를 설치하면 httpd.conf 파일에서 접근 설정을 할 수 있다. AllowOverride none Require all denied--> 위에가 아파치 기본 설정값이다.저렇게 되어있으면 외부에서 브라우저를 통해 해당 디렉토리에 파일을 첨부한다던가 접근을 할때( 웹 브라우저를 통한 HTTP 요청)403 Forbidden (You don't have permission...)에러가 발생한다.왜 이렇게 되어 있나?보안을 위해 Apache는 기본적으로 전체 파일 시스템을 접근 금지 상태로 시작한다.이후에 DocumentRoot, Alias 등 특정 경로에 대해 명시적으로 허용해야 한다.예시) Require all granted-> Require all denied루트 디렉..

배경)프론트엔드에서 파일 경로를 다룰 때는 크게 두 가지 방식이 존재한다.1. 서버가 해석하는 방식 (서버 정적 파일 제공)브라우저의 요청을 서버가 받아서, 서버의 파일 시스템에서 해당 파일을 찾아서 응답한다. -- >브라우저는 http://example.com/images/logo.png로 요청 → 서버는 /images/ 경로를 Alias 또는 static 폴더로 매핑해둠 → 서버가 실제로 /var/www/html/images/logo.png 같은 경로에서 파일 찾아서 응답어디서 처리될까?Apache/Nginx: Alias, DocumentRootExpress.js: express.static()Nest.js: ServeStaticModuleDjango: STATICFILES_DIRS 2. 프론트가 해..

프로그래머스 코테를 풀어봤는데, 허무한 실수를 발견하지 못해서 시간을 많이 소요했다. 오랜만에 풀어서 그런지 이런 세세한 것도 눈치채지 못했다. 그래서 오답을 남긴다. [문제]- 직원들은 본인들이 출근 희망 시각을 정해서 +10분까지 출근해야한다.- 7일중 주말(토,일)은 이벤트에서 제외한다.- 이벤트 시작일이 주어지면 그 시작일로 부터 7일간(토,일 제외) 지각안한 직원 수를 추출할 것이다.- 함수의 매개변수는 schedules, timelogs, startday 세가지가 주어진다.- schedules: 직원 n명이 설정한 출근 희망시간을 담은 1차원 배열- timelogs: 직원들이 일주일 동안 출근한 시각을 담은 2차원 정수 배열- startday: 이벤트를 시작한 요일을 의미하는 정수모든 시각은..

JSX 요소를 map함수 안에서반복문으로 반복 렌더링이 될 때 안에 반복되는 요소에 key의 값을 지정해야한다. 가끔 index를 key값으로 지정하는 경우가 있는데, 이러면 요소의 순서가 바뀌거나 변경이 일어났을때 key값은 그대로고 표면적인 값만 변경되어 상태가 꼬인다. key는 React가 DOM을 효율적으로 업데이트하는 데 쓰이는 기준이다.React는 리스트를 렌더링할 때 각 자식 요소에 고유한 key 값을 요구한다.그래서 key값은 고유해야 하며 보통 map함수에서 고유한 id값으로 해야한다.