본문 바로가기

JS7

URI 인코딩 및 디코딩 관련 js 메서드 내용 웹 개발시 url 과 관련된 내용을 다루는 상황이 빈번하게 나오지만 url 관련해서 몰랐던 내용이 있어 정리하려 한다. 웹페이지 구현 시 페이지 이동 및 라우팅 관련된 기능을 사용한다면 url 주소를 부분적으로라도 입력해서 사용하는 경우가 일반적인데 만약 주소 일부분에 한글과 같은 인코딩이 필요한 문자가 들어간다면 문제가 될 수 있다. 자동으로 인코딩 및 디코딩 되는 경우 또는 애초에 인코딩 및 디코딩 필요치 않은 문자를 사용한다면 상관없겠지만 문제를 예방하는 차원에서 명확히 처리해주는 js 메서드가 존재했다. 기본 개념 인코딩 : 인코딩은 정보를 다른 형식이나 표현으로 변환하는 과정(웹에서는 주로 문자를 특정 형식의 코드로 변경하는 것을 의미) 디코딩 : 디코딩은 인코딩된 정보를 다시 원래의 형태.. 2023. 6. 7.
js 코딩 테스트 : [ 신고 결과 받기 ] 문제 : 신고 결과 받기 LV.1 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만, 동일한 유저에 대한 신고 횟수는 1회로 처리됩니다. k번 이상 신고된 유저는 게시판 이용이 정지되며, 해당 유저를 신고한 모든 유저에게 정지 사실을 메일로 발송합니다. 유저가 신고한 모든 내용을 취합하여 마지막에 한꺼번에 게시판 이용 정지를 시키면서 정지 메일을 발송합니다. 다음은 전체 유저 목록이 ["muzi", "frodo", "apeac.. 2023. 2. 17.
js 코딩테스트 : [ 개인정보 수집 유효기간 ] 문제 : 개인정보 수집 유효기간 LV.1 문제 설명 고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤 약관으로 수집됐는지 알고 있습니다. 수집된 개인정보는 유효기간 전까지만 보관 가능하며, 유효기간이 지났다면 반드시 파기해야 합니다. 예를 들어, A라는 약관의 유효기간이 12 달이고, 2021년 1월 5일에 수집된 개인정보가 A약관으로 수집되었다면 해당 개인정보는 2022년 1월 4일까지 보관 가능하며 2022년 1월 5일부터 파기해야 할 개인정보입니다. 당신은 오늘 날짜로 파기해야 할 개인정보 번호들을 구하려 합니다. 모든 달은 28일까지 있다고 가정합니다. .. 2023. 2. 15.
웹팩과 번들러 웹팩의 이해 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다. 모듈(module) : 재사용 가능한 코드조각 번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다, 웹팩을 사용하는 이유 웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다. 각 기능에 대한 스크립트를 포함해서 사용 모든 프로젝.. 2022. 4. 12.
promise 와 async & await callback 함수를 정리 할 때 비동기 처리에 관한 내용도 알아보았고 더 나아가 비동기 작업을 조금 더 깔끔하게 처리하는 promise 대해 알아보려한다. promise 는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 표시하려고 할 때 사용한다. promise 는 3가지 상태 중 하나를 가지고 있다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. promise 를 생성하고 연산이 성공적으로 완료하면(fulfilled) then 안에 있는 callback 함수 실행되고 연산이 실패하면(rejected) catch 안에 있는 callback 함수가 실행된다. 또한 .. 2022. 3. 2.
callback 함수 어떤 개념을 배울 때 이 개념이 무엇인지 왜 필요한지 어떻게 사용하는지 정리되지 않는다면 제대로 이해하기는 힘들다. 나에게는 callback 함수가 그러했다. callback 함수가 무엇인지는 대충은 알았고 어떻게 사용하는지 또한 알고 있었지만 정확히 무엇인지 왜 필요한지는 알지 못 했다. 이번 기회에 pormise 를 공부하기 이전에 callback 함수도 확실히 정리하고 가려한다. 콜백함수 다른 함수에 인자로 전달되는 함수를 콜백 (callback) 함수 라고 한다. 좀 더 자세히 보면 다른 코드 (함수 또는 메서드) 에게 인자로 넘겨주면서 제어권도 함께 위임하고, callback 함수를 위임받은 코드는 내부 로직에 의해 callback 함수를 적절한 시점에 실행한다. JS 에서 함수는 1급 객체 이.. 2022. 2. 24.
전개연산자 (Spread Opertor) 리액트 공부중 코드중에 처음 보는 녀석을 발견했다. function reducer(state, action) { return { ...state, [action.name]:action.value } } ...state 이렇게 생긴 이 녀석의 이름은 전개 연산자 스프레드 연산자로도 불리는 듯하다. 그나마도 쉽게 이해되는 설명은 이것이었다 '스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.' 쉽게 말하면 spread 의 뜻처럼 배열, 문자열, 객체 등을 펼쳐서 쓴다는 의미다. 그러나 완벽히 이해가 되지 않고 왜 쓰는지, 어떻게 활용이 되는지는 찾아볼 필요가 있었다. 왜 사용하는가? 일단 불변성의 중요성을 알.. 2022. 2. 13.