분류 전체보기
-
브라우저 렌더링 과정을 설명할 수 있나요?CS지식 모음 2023. 3. 27. 20:12
프론트엔드 개발자라면 필수로 알고 있어야 하는 브라우저 렌더링 과정! 사실 지금까지의 개발은 많은 부분들이 그 기술에 대해서만 공부하고, 원리만 조금 알고서 공식문서를 보며 코드를 작성했던 것 같습니다. 브라우저에 어떻게해서 이런 화면이 나타나고 그런건 고민해본 적이 없는 것 같은데요. 취업 준비를 하다보니 이러한 지식을 필수로 알고있어야 했고 저는 프론트엔드 개발자로서 한발자국 더 성장하기 위해 CS관련 지식을 쌓고 있습니다. 그래서 거두절미 하고 현재 면접에서 브라우저 렌더링 과정을 설명할 수 있나요? 라고 질문을 받는다면, 현재까지는 "아니요" 입니다. 관련 자료를 찾아봤습니다. 그래서 브라우저 렌더링이 뭔데..? 브라우저 렌더링이란, HTML, CSS, JavaScript 등 개발자가 작성한 문서..
-
[22.03.19] TIL 기술면접 준비하기2TIL 2023. 3. 19. 20:07
Arrow Function 설명 ES6부터 도입된 새로운 함수 표현식. 자신만의 this를 가지지 않는 대신 Arrow Function 내부에서 this를 사용하면 상위 스코프의 this를 참조한다. 자신만의 this를 가지지 않아 생성자 함수로 사용할 수 없다. 단일 표현식에서 값을 반환하는 경우 중괄호를 생략 할 수 있는데 이 경우, 자동으로 해당 표현식의 값을 반환한다. == 연산자와 === 연산자의 차이 == 연산자는 값만을 비교하며 비교 시 자동 형 변환을 수행한다. 비교하는 두 값이 서로 다른 데이터 타입을 가지고 있다면 자동으로 형 변환을 하여 같은 타입으로 만든 후 비교하게 된다. === 연산자는 값과 데이터 타입까지 비교한다. 자동 형 변환이 일어나지 않기 때문에 비교하는 값이 서로 다른..
-
[22.03.18] TIL 기술면접 준비하기1TIL 2023. 3. 18. 18:14
시간 복잡도, 공간 복잡도에 대한 설명 시간 복잡도 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미 결과가 같아도 코드 작성 방법에 따라 걸리는 시간이 달라지고, 이 시간이 적게 걸리는 것이 좋은 코드이다. 공간 복잡도 작성한 코드가 얼마나 많은 메모리를 차지하는지 분석하는 방법 시간복잡도와 공간복잡도는 반비례적인 경향이 있다. 최근 컴퓨터 성능의 발달로 메모리 공간이 넘쳐나 공간 복잡도 보다는 시간 복잡도를 더 중요시 한다. 스택, 큐에 대한 설명 스택 차곡차곡 쌓아올린 형태의 자료구조 같은 구조의 자료를 정해진 방향으로만 쌓을 수 있다. top으로 정한 곳에서만 접근이 가능 나중에 들어온것이 맨 먼저 나가게 되는 후입선출 구조(LIFO, Last In First Out) 웹브라우저 뒤로가기..
-
[22.02.17] TILTIL 2023. 2. 17. 21:32
https://www.youtube.com/watch?v=pjakE0D4CeI&list=PLVsNizTWUw7FfOQedudGOz1N3bjt6iM0D&index=13 리액트쿼리가 점점 익숙해져간다. 쭉쭉 진도를 나가다가 발생한 이슈로 오늘 배운 것이다. 리액트의 생명주기. 항상 이것때문에 문제인데 계속 같은문제로 에러를 접해도 뭔가 애매~하다. 오늘은 구매자,판매자가 거래취소를 누르면 각각 cancel data가 true가 되고, 두 cancel data가 다 true가 되면 구매한 금액만큼을 구매자에게 더해주는 환불로직을 만들었다. 근데 취소버튼 onClick에 두 cancel버튼을 각각 누르면 true로 변하는 것 까진 짰는데, 구매자에게 돈이 돌아가지 않는 이슈가 발생했다. 왜그런건가 콘솔을 요리조..
-
[23.02.15] TILTIL 2023. 2. 16. 14:40
오늘 배운 것 비동기 함수는 가면 언제올지 모른다....... 나는 오늘 글쓰기 페이지에서 글 등록을 하면 데이터가 저장된 후 navigate를 통해 상세페이지로 넘어가는 로직을 짰다. const { mutate, isError, isLoading } = useMutation((newPost: postType) => axios.post('http://localhost:4000/posts', newPost) ); const [post, setPost] = useState({ id: uuidv4(), title: '', nickName, sellerUid, content: '', price: '', imgURL: [], category: '', like: [], views: 0, }); const onSub..
-
[23.02.14] TILTIL 2023. 2. 14. 22:03
에러 // Detail.tsx const { data } = useQuery(['posts'], async () => { const response = await axios.get(''); return response.data; }); 내가 쓴 글의 Data를 받아오기 위해, useQuery를 이용해 데이터를 불러왔다. 그러나 브라우저에서는 이러한 오류를 뱉었다. 해결을 위해 시도한 일 첫번째, 공식문서 읽어보기 https://tanstack.com/query/v4/docs/react/guides/query-keys 쿼리 키란? 쿼리 캐싱을 관리할 수 있는 key 라고 한다. 여러가지 설명이 나와있지만 이해하지 못했다…. 두번째, 블로그 읽어보기 https://tech.kakao.com/2022/06/1..
-
[23.02.08] TIL카테고리 없음 2023. 2. 8. 21:45
오늘 CSS 관련 이슈가 있었다. window와 mac에서 보이는 input의 길이가 달라서 UI적인 부분에서 꼬였던 것이다. 해결 방법은 container를 이용하는 것, 원래는.. const InputBox = styled.input` width: 21.5rem; height: 2.4rem; padding: 0 3rem 0 1rem; font-size: 1rem; background-color: #fafafa; border: 1.3px solid #ddd; border-radius: 8px; &::placeholder { color: #d1d1d1; } `; 스타일드 컴포넌트는 이렇게 작성되어 있었는데 아래와 같이 100%로 주니 해결되었다. const InputBox = styled.input` w..
-
[23.02.06] TIL 최종 프로젝트 시작TIL 2023. 2. 7. 09:36
최종 프로젝트 시작 드디어 최종 프로젝트가 시작됐다. 팀이 꾸려지고 스파르타 측의 지원으로 디자이너님을 한분 모시게 되었다. 디자이너님을 모시고 프로젝트 주제를 정하는 회의를 진행하게 됐는데 다양한 아이디어들을 내주셨고, 기술적으로 다양한 부분들을 접할 수 있을 것 같아 디자이너님이 내신 의견에 따르도록 했다. 사용자 측면에서 좋은 ui,ux를 만들 수 있도록 zep에 접속해있는 내내 회의를 진행했는데 정말..입에 단내가 날때까지 회의를 한 것 같다. 우리가 피그마로 대충 와이어프레임을 네모네모박스들로 너더기처럼 짜면, 디자이너님이 환골탈태 시켜주신다. 역시... 의견충돌 아무래도 최종 프로젝트이기도 하니 의견충돌이 많이 일어난다. 더 잘하고싶은 마음이 커서 더 그런 것 같다. 코드 컨벤션, 커밋 컨벤션..
-
next는 페이지 만들기도 엄청 쉽네?React/Next.js 2023. 1. 31. 11:51
이전 남긴 글에서는 next가 폴더기준으로 route설정을 하는 것 같다고 적었는데 아니였다. file로 인식을 하는거시여따!!!! 이렇게 about.js 파일을 pages 폴더 안에 만들어봤다. 코드를 적으면서, next가 / 뒤 주소를 뭘로 정할지 궁금했다. 컴포넌트 이름은 Potal로 만들고 파일을 about.js로 만들었다. 3000/about 으로 접숙했을 때 about이 잘 뜨고있다. 근데 여기서 또 궁금한게 생겼다. 저 export를 지우면? 에러가 나는거슬 볼 수 있다. export를 해주면 똑똑한 next가 알아서 import를 해서 routing을 해주는 것 같다. 오호라..좋은걸? 이런식으로 위에 abc.js도 만들어줬고 3000/abc 로 접속해도 페이지가 잘 뜨고 있다. 근데, i..