본문 바로가기

👨‍💻📱✍️🎢314

스물여섯, 스물여덟 - 2년차 FE개발자의 이직 후기 1편 📌 나의 첫번째 회사를 떠나며.. 2022년 5월부로 작년 3월부터 몸담은 저의 첫 회사를 떠나게 되었습니다. 인생 첫 이직이기도 하고 이번 기회에 지금까지 일하면서 든 생각들을 정리하며 되짚어보고자 회고성 글을 쓰게 되었어요. 현재 다니고 있는 회사에서 커리어와 주니어로서 어떤 것들을 배울 수 있었는지, 마지막으로 현재 다니던 회사를 떠나 다른 회사로의 이직을 결심한 계기들을 공유하려고 합니다. 📌 부스트 캠프 2020 웹 풀스택 과정 2020년 7월부터 네이버 커넥트재단에서 진행한 부스트캠프 에 웹 풀스택 과정으로 참여했어요. 이를 통해 양질의 커리큘럼으로 웹 개발의 A-Z 를 단계적으로 학습할 수 있었고 그 덕분에 주니어 웹 프론트엔드 개발자 라는 꿈에 한 발짝 더 다가설 수 있었어요. 덤으로 이 .. 2022. 4. 25.
React 제어 컴포넌트 vs 비제어 컴포넌트 📌 비제어 컴포넌트 (uncontrolled component) 비제어 컴포넌트 에서 폼 데이터는 DOM 자체에 저장됩니다. 만약 해당 폼 데이터를 읽어오고 싶다면 ref 를 이용해서 값을 PULL 해와서 사용합니다. import React, { useRef } from 'react' const UnControlledComponent = () => { const inputRef = useRef(null) const handleClick = () => { /** input 값으로 특정 로직을 수행합니다. */ console.log(inputRef.current.value) } return ( 확인 ) } export default UnControlledComponent 📌 제어 컴포넌트 (controlle.. 2022. 4. 10.
[JavaScript] Array.sort 는 안정성을 보장할까? JavaScript 의 sort 함수는 안정 정렬일까? 📌 안정 정렬이란? 안정 정렬(stable sort) 은 동일한 키 값에 대해 입력 순서를 보장하는 정렬 알고리즘입니다. 그 반대인 불안정 정렬(unstable sort) 은 정렬 후 입력 순서를 보장해주지 않습니다. 대표적인 안정 정렬 알고리즘은 다음과 같이 3가지가 있습니다. 1️⃣ 버블 정렬 (Bubble Sort) 2️⃣ 삽입 정렬 (Insertion Sort) 3️⃣ 병합 정렬 (Merge Sort) 그 외 퀵 정렬 과 선택 정렬 은 불안정 정렬 의 대표적인 알고리즘입니다. 📌 JavaScript 의 sort 함수 JavaScript 의 sort 함수는 안정 정렬일까? JavaScript 의 sort 함수는 그렇다면 안정 정렬 일까요? Ch.. 2022. 3. 9.
LeetCode 733 - Flood Fill (Easy) 💡 문제 LeetCode - 733번 🎯 풀이 과정 BFS 를 이용해서 도달 가능한 모든 지점을 확인하는 문제입니다. 여기서 visit 이라는 2차원 배열을 유지하며 중복 방문을 검사함과 동시에 도달 가능한 위치를 기록합니다. 👨‍💻 코드 /** * @param {number[][]} image * @param {number} sr * @param {number} sc * @param {number} newColor * @return {number[][]} */ var floodFill = function (image, sr, sc, newColor) { const dr = [0, 0, 1, -1] const dc = [1, -1, 0, 0] const [ROW, COL] = [image.length, .. 2022. 3. 7.
[Vue.js] 반응형 시스템의 내부 동작 방식 살펴보기 💡 본 포스트는 Vue 2.x 를 기준으로 작성되었습니다. Vue의 반응형 시스템은 어떻게 동작할까? 이전 포스트에서 제가 사이드 프로젝트를 진행하며 실제 마주했던 이슈와 함께 Vue 의 반응형 시스템에 대해서 간단하게 알아봤다면 이번 포스트에서는 내부 동작에 대해 좀 더 깊이 있는 내용들을 알아보려고 합니다. 📌 Vue 는 어떻게 상태 변화를 감지할까? 다음은 data 를 화면에 보여주는 간단한 Vue 컴포넌트 예시입니다. {{ name }} 여기서 name 값이 변경되면 이 값이 화면에 그대로 반영됩니다. Vue 내부적으로는 이 과정이 어떻게 진행되는 것일까요? 다음은 Vue 공식 문서에 소개되어있는 반응형의 동작 원리에 대한 그림입니다. data 속성의 할당 방식 Vue 는 data 로 JavaSc.. 2022. 3. 7.
[TypeScript] js.map 파일은 무엇일까? TypeScript 컴파일 시 생성되는 js.map 파일 📌 js.map 파일? 타입스크립트로 작성된 파일을 실행시키기 위해서는 먼저 tsc 로 컴파일을 해야하는데 이때 tsconfig.json 에 source-map 설정을 했다면 js.map 이라는 파일도 함께 생성됩니다. 먼저 tsconfig.json 에 다음과 같이 source map 설정을 합니다. "compilerOptions": { "sourceMap": true, }, 그리고 다음과 같은 타입스크립트 예시 코드를 작성합니다. interface Animal { name: string; } function callAnimal(animal: Animal) { console.log(animal); } const animal: Animal = { n.. 2022. 3. 7.

티스토리툴바