전체 글121 Cookie의 MaxAge, Expires 옵션을 설정하지 않는다면? - Session cookie : 브라우저가 닫힐 때 쿠키도 함께 삭제됨. - Parmanent cookie : 브라우저를 닫아도 쿠키가 삭제되지 않음. - Expires나 Max-Age 옵션이 지정되어있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이런 쿠키를 Session cookie라 부른다. Permanent cookie 설정 - Expires : 쿠키가 삭제되는 만료 날짜를 설정. - Max-Age : 쿠키를 유지시킬 시간을 초 단위로 설정, 0 혹은 음수로 지정하면 쿠키가 삭제됨. - 브라우저는 Max-Age가 우선 순위를 갖고, Expires 같은 경우 http 1.0만 지원하는 일부 오래된 브라우저에서 Max-Age를 읽지 못하기 때문에 사용함. 참고 : https://divheer.. 2023. 4. 4. useRef가 필요한 상황은? React의 함수형 컴포넌트에서 특정 DOM에 접근하고 싶을 때 사용하는 hook. useRef로 변수를 관리하면 그 변수가 업데이트되어도 컴포넌트가 리렌더링되지 않을 때. -> 불필요한 리렌더링 방지. - 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때. - 애니메이션을 직접적으로 실행시킬 때. - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. - 컴포넌트 내에서 변수를 관리할 때. - 속성값을 초기화(clear)할 때. 참고 : https://divheer.tistory.com/193 2023. 4. 4. TIL - 20230403 면접 공부 - require와 import의 차이점 - 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 프로그래머스 개미 군단 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(hp) { let a = Math.floor(hp / 5); let b = Math.floor((hp - a * 5) / 3); let c = hp - a * 5 - b * 3; return a + b + c; } 다른 사람의 풀이 function solution(hp) { return Math.floor(hp/5)+Math.f.. 2023. 4. 3. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 답변 배열이나 객체가 const로 선언되면 변수가 배열이나 객체가 저장된 고정된 메모리 위치를 가리킨다. 배열 또는 개체에 대한 참조는 변경할 수 없지만 배열또는 개체 내의 요소 또는 속성은 여전히 수정할 수 있다. const 예시 - push() 메서드는 배열 끝에 새 요소를 추가하는 데 사용됨. - const가 arr 변수의 재할당만 제한하고 그 내용은 제한하지 않기 때문에 허용됨. const arr = [1, 2, 3]; arr.push(4); console.log(arr); // Output: [1, 2, 3, 4] const obj = {a: 1, b: 2}; obj.c = 3; console.log(obj); // Output: {a: 1, b: 2, c: 3} 참고 : https://velo.. 2023. 4. 3. require와 import의 차이점 답변 require와 import는 외부 파일이나 라이브러리를 불러올 때 사용한다는 같은 목적을 가지고 있지만, 다른 문법구조를 가지고 있다. require는 export와 함께 사용되며 어느 지점에서나 호출 할 수 있고 동기적이다. NodeJS에서 사용되는 CommonJS의 키워드이며 import export와 함께 사용되고 파일의 시작 부분에서만 실행 할 수 있고 비동기적이다. 또한 ES6에서 새롭게 도입된 키워드로서 차이점이 있다. require은 Babel과 같은 ES6코드를 변환해주는 도구를 사용할 수 없는 상황에서 사용한다. import는 JavaScript를 사용 중이거나 ES6 모듈에 대한 액세스 권한이 있는 경우에 사용한다. 바벨이란? 바벨이란 ES6+버전의 자바스크립트, 타입스크립트, .. 2023. 4. 3. WIL - 3월 마지막 주 어느새 3월도 지나갔다. 최종 프로젝트를 마친 후 밀려오는 무기력증에 내가 해야할 모든 것들에 집중을 못했다고 생각했는데 한 달 자체를 돌아보니 끝난 프로젝트들의 해결하지 못했던 이슈 등을 수정했고 알고리즘 문제도 풀고 있으며 이력서와 면접 준비도 꾸준히 하고 있었다. 무기력증에 아무 것도 하지 않은 것 같았는데 뭐라도 하고 있었다. 앞으로도 별 생각 없이 그냥 하면 된다. 힘이 나면 힘이 나는대로 즐겁게, 그게 아니면 그냥 하면 된다. The whole life of man is but a point of time; let us enjoy it. 인간의 삶 전체는 단지 한 순간에 불과하다. 인생을 즐기자. 가보자고~_~~~~~~ KEEP - 특별한 생각 없이 하던 것들 꾸준히 하기. PROBLEM - .. 2023. 4. 2. TIL - 20230331 공부 https://k1mwnjn.tistory.com/151 https://k1mwnjn.tistory.com/152 프로그래머스 아이스 아메리카노 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(money) { return [Math.floor(money / 5500), money % 5500]; } 배열의 유사도 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr functi.. 2023. 3. 31. Session storage, Local storage, Cookie 브라우저 저장소의 차이점 Session stoarge - 브라우저가 종료되면 데이터 삭제됨. - 도메인이 같아도 브라우저나 탭이 다르면 각각의 세션스토리지가 형성되어 데이터가 공유되지 않음. (동일한 탭 / 윈도우 내에서만 접근 가능) ex) 일시적으로 데이터 저장이 필요할 때 : 일회성 로그인, 입력 폼 저장, 비로그인 장바구니 Local storage - 브라우저를 종료해도 데이터를 보관. (영구적 보관 가능) - 도메인 별로 생성되기 때문에 도메인이 같으면 데이터를 전역적으로 공유 가능. ex) 지속적인 데이터 저장이 필요할 때 : 자동 로그인 Cookie - 서버와 클라이언트 간 지속적 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소. - 서버와 통신할 때 HTTP 헤더에 포함되는 텍스트 파일. (쿠키는 매번 서버로 .. 2023. 3. 31. this가 동작하는 원리와 용법 - 함수를 호출할 때 생성되는 실행 컨텍스트 객체 (현재 실행중인 함수의 객체를 참조) - This의 값은 함수를 호출하는 방법에 의해 결정됨. - 호출한 놈(객체) === This - 함수가 호출될 때마다 This가 가리키는 개체가 동적으로 결정되는 것 === This가 그 객체에 "바인딩"된다. - bind 메서드를 사용하면 함수가 어떻게 호출되었는지와 무관하게 This를 고정할 수 있음. 일반함수 - 해당 함수를 어떻게 호출하는지에 따라 동적으로 결정됨. - 일반 함수 호출 -> Global. - 메소드 호출 -> 메서드를 호출한 주체. - 생성자 함수 호출 -> 생성자 함수의 반환 값인 인스턴스 객체. - apply/call/bind 호출 -> 해당 함수의 매개변수로 사용된 인자. - 상단 세 가.. 2023. 3. 31. TIL - 20230330 공부 실력 있는 개발자란? 문제를 정의하고 작은 비용으로 개선하는 사람? HTTP와 HTTP의 메시지 구조 CSS: position 프로그래머스 피자 나눠 먹기 (3) 머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇 판의 피자를 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. 나의 풀이 function solution(slice, n) { return Math.ceil(n/slice); } 2023. 3. 30. 이전 1 2 3 4 5 ··· 13 다음