전체 글 (163) 썸네일형 리스트형 [WIL] 이노베이션 캠프 4주차 회고록(라이프사이클, react-hook) LifeCycle? 컴포넌트가 웹 페이지에 나타났다가 사라지는 과정을 나타냄. 가상DOM 메모리 상에서 돌아가는 가짜 DOM. 기존 DOM과 어떤 행동 후 새로 그린 가상 DOM을 비교해서 바뀐 부분만 갈아 끼워줌. -> 돔 업데이트 처리가 간결함. 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라진다. 생성은 처음으로 컴포넌트를 불러오는 단계. 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. 아래의 경우에 해당함. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.) .. [WIL] 이노베이션 캠프 3주차 회고록(DOM, 서버리스) 문서 객체 모델 (DOM) DOM(Documnet Object Model) DOM(Documnet Object Model)은 웹페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 컨텐츠 및 구조, 그리고 스타일을 읽고 조작할 할 수 있도록 API를 제공한다. DOM은 tree형식의 자료 구조를 가지고 있다. tree자료 구조란 하나의 root노드에서 시작이 되어서 아래로 퍼져나가는 형태의 자료 구조이다. 위쪽의 node를 부모(parent) 노드, 아랫쪽 node를 자식(child)라고 한다. root node는 가장 위쪽의 parent가 없는 node가 된다. 그리고 children이 없는 node를 leaf node라고 한다. 👉 Node 란 ? Tree 구조에서 root 노드를 포함.. [WIL] 이노베이션 캠프 2주차 회고록(ES5, ES6 차이) ES ? ECMAScript의 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화한 것. ES5와 ES6의 차이 변수 선언 ES5 - var 재할당과 재선언에 굉장히 자유롭고 호이스팅에 문제가 있다. 호이스팅이란? 코드가 실행되기 전에 변수선언/함수선언이 해당 유효범위의 최상단으로 끌어 올려진 것과 같은 현상 ES6 - 호이스팅 문제를 해결하기 위해 const와 let이 추가되었다. 화살표 함수 ES6부터 등장한 함수 선언법 let function = () => {} 템플릿 리터럴 백틱으로 문자열 포맷팅을 할 수 있음. ES6부터 등장함. 클래스 ES6부터 class 키워드 사용 가능. 모듈 ES5 이전에는 각 기능별로 JS파일을 나누.. [Programmers/JS] 소수 찾기 https://school.programmers.co.kr/learn/courses/30/lessons/12921 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 에라토스테네스의 체를 그대로 구현해야 하는 문제. (아래 링크 참조) (https://ko.wikipedia.org/wiki/%EC%97%90%EB%9D%BC%ED%86%A0%EC%8A%A4%ED%85%8C%EB%84%A4%EC%8A%A4%EC%9D%98_%EC%B2%B4) 자기 자신(n)도 포함해야 하므로 index를 맞춰주기 위해 n+1의 boolean 배열을 선언해 주고, 값.. [Programmers/JS] 약수의 개수와 덧셈 https://school.programmers.co.kr/learn/courses/30/lessons/77884 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 left에서 right까지의 수를 약수의 개수가 홀수, 짝수이냐에 따라서 answer에 연산을 하는 문제. 첫번째 반복문에서는 i가 left에서 right까지 순회할 수 있도록 설정한다. count 변수는 약수의 갯수를 셀 목적으로 선언하였고, 두 번째 반복문에서 i가 j에 대해서 나누어 떨어질 때 약수이므로 count를 1씩 더해준다. 두 번째 반복문이 끝나면 count의 홀,짝.. [Programmers/JS] 나누어 떨어지는 배열 https://school.programmers.co.kr/learn/courses/30/lessons/12910 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 배열 전체를 순회하면서 나누어 떨어지는 수만 answer 배열에 넣고, 만약 answer 배열의 길이가 0이라면 -1을 넣고 return 한다. 길이가 1 이상이라면 정렬을 이용해 오름차순 정렬을 진행하고 return 한다. 2. 제출 코드 function solution(arr, divisor) { let answer = [] for(let i = 0; i < arr.length.. [Programmers/JS] 문자열 내 마음대로 정렬하기 https://school.programmers.co.kr/learn/courses/30/lessons/12915?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 strings배열에 sort함수를 적용하여 정렬을 시켜줌. n번째 인덱스의 값이 같다면 사전 순으로 정렬해야 하기 때문에 a[n] === b[n] 조건을 만들어 매개변수 a,b를 비교하는 조건문을 하나 추가하였다. compareFunction의 반환값에 따라 어떻게 정렬될까? compareFunction이 a, b 두 개의 값을 매개변수로 받을 .. [WIL] 이노베이션 캠프 1주차 회고록(서버 인증, API) 서버 인증 인증이 필요한 이유 인증은 프론트엔드의 관점에서 봤을 때 사용자의 로그인, 회원가입과 같은 사용자의 도입부분을 가리킨다. 반면 서버 관점에서 봤을 때는 모든 API요청에 대해 사용자를 확인하는 작업이다. 사용자A와 사용자B가 앱을 사용한다고 가정합니다. 두 사용자는 기본적으로 정보가 다르고 보유하고 있는 컨텐츠도 다르다. 따라서 서버에서는 A,B가 요청을 보냈을 대 누구의 요청인지 정확히 알아야 한다. 만일 그렇지 못한다면, 자신의 정보가 타인에게 유출되는 최악의 상황이 발생할 것이다. 그렇기 때문에 Front-end 에서는 자신이 누구인지를 알만한 단서를 서버에 보내야 하며, 서버는 그 단서를 파악해 각 요청에 맞는 데이터를 뿌려주어야 한다. HTTP 요청 현재 모바일이나 웹 서비스에서 가장.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 21 다음
