본문 바로가기
SMALL

Develop_story

 (120)
parameter와 argument의 차이 Parameter 함수를 정의할 때 사용되는 변수 함수 혹은 메소드 정의에서 나열되는 변수 명 매개변수를 듯하며 함수와 메소드 입력 변수 명 의미 Argument 실제로 함수 혹은 메서드를 호출할 때 전달 혹은 입력되는 실제 값 전달 인자 또는 인자를 뜻하며 함수와 메소드의 입력 값 Example function factorial(n) { let resualt = 1; for(let i = 2; i
호이스팅이란? TDZ란? 호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것입니다. **var**로 선언한 변수의 경우 호이스팅 시 **undefined**로 변수를 초기화 합니다. 하지만 **let**과 **const**로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. → 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다 유효 범위 : 함수 블록 { } 안에서 유효 즉, 함수 내에서 아래 쪽에 존재하는 내용 중 필요한 값을 끌어올리는 것 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내..
웹페이지가 브라우저에 랜더링되는 과정 1. HTML, CSS, JS, 이미지, 폰트 등의 리소스를 서버에 요청하고, 응답으로 받아온다. 주소창에 URL 을 입력하게 되면 URL의 호스트 이름이 DNS를 통해 진짜 주소인 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 보내게 됩니다. 서버는 기본적으로 index.html의 응답을 주도록 설정되어 있습니다. 2. HTML 파싱과 DOM 생성, CSS 파싱과 CSSOM 생성 받아온 HTML 문서는 텍스트로만 이루어져 있기 때문에 브라우저가 이해할 수 있는 형태, 즉 DOM 구조로 파싱을 하게 됩니다. html 파일을 파싱하다 , 태그를 만나면 파싱을 멈추고 리소스 파일을 서버로 요청합니다. 가져온 CSS 파일도 html과 마찬가지로 파싱을 하게 됩니다. 3. 렌더 트리 생성 DOM과..
RESTful API, PUT, PATCH, DELETE 1. Restful API란? REST API rest api는 rest를 기반으로 만들어진 api입니다. REST : HTTP URI(Uniform Resource Identifier)를 통해 자원(resource)를 명시하고 HTTP Method(Get, Post, Delete, Patch)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것입니다. API : 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙입니다. CRUD Operation : 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능입니다. REST의 구성 요소 자원(Resource) : HTTP URI 자원에 대한 행위(Verb) : HTTP Method 자원에 대한 행위의 내용 (Represe..
redux(toolkit)를 사용하여 전역으로 music state 관리하기 1. 전역으로 관리해주는 store 생성 // redux/config/configStore const store = configureStore({ reducer: { musicPlayer: musicPlayer, isPlaying: isPlaying, }, }) export default store 2. modules 만들기 1) music을 담는 state들을 관리하는 module const musicSlice = createSlice({ name: 'musicPlayer', initialState, reducers: { setMusicPlay: (state, action) => { state.imageUrl = action.payload.imageUrl state.musicTitle = action...
Music Player Bar 1. 많은 페이지에서 사용하는 music player bar 많은 페이지에서 music player를 사용할 수 있는 컴포넌트를 만들어야 함 요구 사항: 페이지 이동을 해도 음악이 끊기지 않아야 함 2. 선택 사항 Audio-h5-player 라이브러리를 사용하여 player bar을 구현 Music Player 을 Custom하여 구현 ⇒ 이미 구현해둔 streaming을 올리는 api에서 사용하는 onTimeUpdate 이벤트가 Audio-h5-player에서 사용할 수 없고, 내가 원하는 대로 css를 사용하여 표현하기 어려워 custom하여 사용하기로 결정 3. 접근 및 구현 1. music의 총 시간과 진행되고 있는 시간 audio에서 제공하는 currentTime과 duration을 사용하여 ..
WIL - 실전 프로젝트 3주차 1. 중간 발표회 피드백 메모이제이션이 사용된 곳이 LikeCount 외에는 하나도 없습니다. 메모이제이션이 무엇이고 왜 해야 할까요? 메모이제이션은 결과를 저장하고, 저장한 것들을 다음 작업에서 재사용하는 것 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거 ⇒ 무거운 작업의 속도를 높이는 기술이다 사용 이유 리액트는 props와 state의 변화에 따라 컴포넌트를 리렌더링을 시키는데, 이 때 값이 바뀌지 않은 state들도 부모의 state가 변화하게 되면 모두 다 리렌더링이 일어나 불필요한 계산이 필요한데, 이를 메모이제이션으로 state와 props의 변경을 최소화 해 불필요한 하위 컴포넌트의 리렌더링을 최소화 하여 작업을 최적화해 속도를 높여야 하기 때문 프론트엔드 성능 최적화를 위해서 개발..
WIL - 실전 프로젝트 2주차 1. 이번주 공부를 통해 알게된 점 socket io를 통해 채팅방을 구현하고, socket io가 정확히 작동하는지 전보다 더 잘 알게 됨 채팅방에 들어왔을 때 scroll을 맨 밑으로 지정, 역방향 무한 스크롤을 구현 useRef, useEffect를 전보다 더 잘 알게 되게됨 useRef를 통해 해당 div의 좌표 값 알아내기, scrollHeight scrollTop, clientHeigh 등의 이벤트를 알게 됨 audio 조회수에 대한 custom hook을 만들면서 custom hook을 어떻게 만들고, 사용하고, type을 어떻게 지정하는지 알게 됨 2. 아쉬웠던 점 역방향 무한스크롤을 구현 하는데, 아무래도 자료도 생각보다 많이 없었고, 무한 스크롤과 비슷하지만 역방향인 점, 그리고 무한스..
LIST

티스토리툴바