분류 전체보기 (45) 썸네일형 리스트형 [프로그래머스-전화번호 목록(해시)-효율성 탈락] 코딩테스트를 공부해보려고 하루에 하나라도 풀어보자는 생각에 프로그래머스를 시작하게 되었다..첫번째 문제는 차질없이 테스트에 통과하였고 두번째 문제인 "전화번호 목록"이라는 문제를 풀었지만 효율성에서 탈락... [문제 설명] 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solutio.. 브라우저 동작 과정 웹 성능 최적화에 대해 공부를 하려다보니 브라우저가 어떻게 동작하는지 알아야 될꺼같아 차근차근 공부해 나갑니다. [브라우저] 브라우저란 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어입니다. 우리가 인터넷에 접속하기위해 사용하는 크롬, 사파리, 엣지, 파이어폭스, 익스플로어 등이 바로 브라우저 입니다. 각 브라우저마다 해석과정이 다르기 때문에 웹표준이 존재합니다. 원래는 W3C가 담당했으나 앞으로 HTML5 & DOM 표준은 WHATWG가 담당한다고 합니다. (출저 기사: zdnet.co.kr/view/?no=20190531184644 ) [브라우저의 기본 구조] 사용자 인터페이스(User Interface) 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 .. 쿠키(CooKie) / 세션(Session) / 캐시(Cache) [쿠키,세션 사용이유] : HTTP의 비연결성과 비상태성을 보완하여 서버가 클라이언트를 식별하게 해주기 위해서 사용한다. [HTTP 비연결성,비상태성 이란?] HTTP(Hypertext Transfer Protocol)는 WWW(World Wide Web)상에서 서버/클라이언트 사이의 요청과 응답 데이터를 주고 받기 위해 사용된다. 이 HTTP 프로토콜에는 비연결성(Connectionless) , 비상태성(Stateless)이라는 특징을 가지고 있다. 비연결성(Connectionless) : 클라이언트가 요청(Request)를 서버에 보내면 , 서버는 클라이언트에게 요청에 맞는 응답(Response)를 보내고 접속을 끊는다. (HTTP1.1 버전부터는 연결을 계속 유지하며 Request에 재활용하는 기능.. 없어도 되지만 있으면 편리한 vsCode 확장프로그램 [ Auto Complete Tag ] : Auto Complete Tag는 Auto Close Tag, Auto Rename Tag 가 합쳐진 확장프로그램이다. Tag를 쓸때 시작과 동시에 자동으로 끝 Tag를 시작 Tag와 동일하게 바꿔주고 생성한다. [ Auto Import ] : import 해야되는 파일이 있을때 자동으로 인식하여 상단에 import 부분을 자동생성해준다. [ Autoprefixer ] : scss 같은 스타일 관련된 파일에서 브라우저마다 접두어가 다른 경우가있다 -webkit- : 구글 , 사파리 -moz- : 파이어폭스 -ms- : 익스플로러 (보통생략) -o- : 오페라 예를 들면 #div{ background: -webkit-linear-gradient(left ,red .. Redux Toolkit + Redux Saga 구조 만들어보기(3) - 전체 흐름 설명 내가 작성한 코드에서 검색버튼 이벤트가 발생한 후 흐름을 예를 들어서 설명을 해주겠다. 상단의 소스는 한 화면을 나타내는 소스이다. 이 화면에서 mainSearch() 이벤트가 Toolkit과 Saga를 이용하여 어떤식으로 흘러가는지 알아보자 1. [검색] 버튼을 클릭하게되면 SearchPanel의 mainSearch() 함수를 실행시킨다. 2. mainSearch()에서는 setParam() 를 실행하면서 param state값을 변경해주게 된다. 3. param값이 변경되고나면 param의 변경을 감지하고있는 useEffect(()=>{},[param])가 실행되고 slice에 정의해둔 (import { MasterStopCodeAction } from './slice') MasterStopCodeA.. Redux Toolkit + Redux Saga 구조 만들어보기(2) 설치를 했으면 구조를 만들어 보자 (설치 명령어는 이전 글에 있습니다.) [폴더 구조] 우선 디렉터리 구조를 보면 대표적으로 src/api/ src/components/ src/views/ viewName/ index.js slice.js saga.js src/store/ src/App.js src/index.js 이전에는 actions, reducers, constants 등 각 기능 별로 폴더를 나누었을 것이다. 그러나 redux-toolkit에 createSlice가 actions 와 reducer을 한 방에 만들어주면서 디렉터리 구조가 좀 더 보기 쉽게 구성이 가능해 졌다. 그리하여 views 에 한 화면당 폴더를 만들고(viewName) 그 폴더에 view파일(index.js) + slice(a.. Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치 [Redux Toolkit 이란?] 1. Redux Toolkit를 사용하는 이유 Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식적으로 제공하는 개발도구 입니다. Toolkit 없이 Redux를 사용시 문제점 "Redux 저장소 구성이 너무 복잡합니다." "Redux가 유용한 일을하도록하려면 많은 패키지를 추가해야합니다." "Redux에는 너무 많은 상용구 코드가 필요합니다." Ex) --------------------------------------------------------------------------------------------------------------- 1개의 액션 생성을 하기위해선 [액션타입 정의 > 액션함수 생성 -> 리듀서 정의].. Prettier (코드 자동 정렬) 설정 [사용 이유] Prettier를 사용하게 되면 코드를 정해진 방식대로 자동으로 정렬을 시켜주어 가독성을 높일 뿐만 아니라 팀원들과 같은 조건에서 정렬이 되므로 소스 충돌도 줄이게 됩니다 [설치] Extention에서 prettier를 검색하여 설치해준다 [설정 방법] 1. File(파일) > Preferences(기본 설정) > Setting(설정) 으로 이동 (= 화면 왼쪽 하단 톱니바퀴 클릭, 단축키 Ctrl + , 이용 ) 2. User(사용자) > TextEditor(텍스트 편집기) > Formatting(서식) - Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 - Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 -.. 이전 1 2 3 4 5 6 다음
