본문 바로가기

전체 글54

[원티드 프리온보딩 프론트엔드 인턴십] 숏에세이 1. 지원하고 싶은 참가기업 프리온보딩 프론트엔드 인턴십에 있는 참가기업에는 코넥티브, 주식회사 마이페어, 사회적협동조합 빠띠, 타라티.피.에스, 주식회사 루빗, 주식회사 아테크넷, 에이블런, 라이크어로컬, 주식회사 애드엑스 플러스, 주식회사 스위치원이 있는데 여기에 있는 참가기업 말고도 다른 곳도 지원할 수 있으면 지원하고 싶다. 그리고 또 백엔드 업무를 접할 수 있는 참가기업도 지원하고 싶다. 프론트엔드 일을 하다가 백엔드 일을 시키면 백엔드 일도 하고 싶다. 2. 프리온보딩 인턴십에서 본인이 얻고 싶은 것 지금 까지 프로젝트는 백엔드까지 구현하거나, 백엔드와의 협업 밖에 없었는데 프론트엔드 사람들끼리 협업을 하여 생각을 나누고 함께 코드를 고민을 하고 싶다. 그리고 실무에서는 아키텍처를 어떻게 나누.. 2023. 2. 5.
자바스크립트 힙(javascript heap) 야! 너 좀 힙한데?(이것만 보면 힙 가능) 자바스크립트로 코딩 테스트 문제를 풀면 우선순위 큐를 사용할 시간이 오게 된다. 하지만 아쉽게도 자바스크립트는 직접 코드를 작성해야 한다. 🥲 우선순위 큐를 알아보기 전에 우선순위 큐는 힙으로 되어있다. 그렇기 떄문에 근본인 힙을 알아야 한다. 힙부터 알아보자. 힙이란? 트리 구조의 일종으로 이진 트리와 비슷해 보이지만 다르며, 최대 이진 힙, 최소 이진 힙이 있다. 힙이랑 이진 힙이랑 같다고 보명 된다. 😀 힙은 이것만 알면 된다능~ 최대 이진 힙 기준 1. 트리의 루트는 최대 값이다. 2. 자식 노드는 항상 부모노드보다 작다. 3. 자식 노드는 순서가 없다. -> 이진트리랑 핵심 차이이다. 4. 최대 2개의 자식노드를 가질 수 있다. 이것만 알면 끝이다. 아래 사진은 이진트리와 최대 이진 힙의 차이다.. 2023. 1. 30.
useEffect vs useLayoutEffect 렌더링 비밀 유출?!?! 프론트엔드를 하겠다고 마음 먹기 전, useEffect는 그냥 컴포넌트가 마운특라 되면 호출되는 아이라는 것만 알고 있었다. 맞는 말이긴 한데 렌더링 과정의 비밀을 알아버렸다. 비밀은 어그로입니다 죄송합니다. 결론부터 말하면은 호출되는 순서 차이다. 아래 공식문서 사진을 보면 파란줄 표시한 곳에 답이 나와있다. "렌더링이 완료된 후에 수행 될 것입니다." 프로젝트 하면서 그냥 당연하게 여겼던 것이 이것 때문이었다. 아래 예시 코드를 보면 그냥 컴포넌트가 마운트 되면 useEffect를 이용해서 데이터를 받아 오고 출력하는 과정이다. export default function Test() { const [data, setData] = useState(null); useEffect(() => { fetch(.. 2023. 1. 27.
JavaScript 조합 구현하기 어짜피 또 까먹을 미래의 나에게. 이걸 보러 왔다면, 또 까먹었구나. 일단 코드부터 보자 function combinations(arr, selectNumber) { const result = []; if (selectNumber === 1) return arr.map((el) => [el]); arr.forEach((fixed, index, origin) => { const rest = origin.slice(index + 1); const cms = combinations(rest, selectNumber - 1); const attached = cms.map((el) => [fixed, ...el]); result.push(...attached); }); return result; } 오랜만에 봐서.. 2023. 1. 26.