블로그

벌써 2025년 2월이지만.. 늦게라도 2024년 회고를 남겨본다. 회사 얼마 전 입사한지 2년, 그러니 3년 차가 되었다. 시간은 참 빠르게 지나가고 생각보다 강산은 그대로다.더 이상 연차가 차는게 달갑지가 않은 게 신입일 때는 성장에 대한 강박이 있었다면, 지금은 성과에 대한 강박이 생기는 것 같다. 그래서 초여름엔 꽤나 깊은 슬럼프를 겪기도 했고 이를 극복하려고 다음 날 일본 가는 비행기 티켓을 사서 훌쩍 떠나거나.. 일을 왕창 벌리고 바쁘게 살았다. 근데 사실 이 모든 건 내가 익숙해지고 잘하게 되면 해결될 일이란 것을 안다. 그래서 지금은 순응하며 그냥 산다. 올해는 그동안 나를 이끌어주시던 선임개발자님이 다른 프로젝트로 가셔서 모든 걸 내가 판단하고 책임져야 했다. 그래서 내가 주도적으로 행동..

1. JSX와 Stack Reconciliation1-1) JSX💡 JSX란? 자바스크립트 내부에서 표현하기 까다로웠던 xml 스타일의 트리 구문을 작성하는데 많은 도움을 주는 새로운 문법💁‍♀️ : 리액트에서 사용하는 jsx 문법의 목적은 무엇일까요?🙋🏻‍♂️ : html을 js 내부에서 표현하기 위해서가 아닐까요? 리액트를 사용하는 사람들의 생각은 모두 다르겠지만 실제 jsx 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화 하여 ECMAScript로 변환 하는 게 주요 목적이라고 합니다.📕 보통 리액트를 통해 jsx를 접하기 때문에 jsx가 리액트의 전유물이라고 오해하는 경우가 종종 있다. 이는 반은 맞고 반은 틀리다. jsx는 리액트가 등장하면서 페이스북(현 메타..

1. 프론트엔드 개발 과정의 현실 보통의 개발 프로세스는 요구 사항 및 기획 → API 설계 → API 패칭 단계로 이뤄지면서 자연스레 프론트엔드 개발 작업은 가장 마지막까지 이뤄졌습니다. 시간이 아주 널널하다면 문제가 없겠지만 각박한 현실은 그렇지 못합니다. 백엔드 개발과 프론트엔드 개발이 병렬적으로 진행되기 위해 프론트단에서는 화면 퍼블리싱을 먼저 하고 있는다던가, 더미 데이터를 만들어 먼저 화면에 뿌려본다던가 어떻게든 개발 기간을 줄이기 위해 발악해 보지만… 위험은 언제 어디서든지 도사리고 있습니다. 기획이 바뀐다든지… API 설계가 바뀐다든지…. 2. 기존의 Mocking 기존에는 저는 화면에 필요한 데이터 상태의 더미 데이터를 내부에 직접 넣어 화면을 먼저 그렸습니다. 이러한 방법은 빠른 시간 ..

Redux 깃허브를 한번 분석해보면 좋다는 말을 들어서 이번에 한번 보게 되었다. createStore.ts 파일을 읽어보며 리덕스 구조를 직접 구현해보게 된다면 상태 관리에 대해 더 잘 이해할 수 있을 것 같아 글을 남기며 정리해본다! 먼저 Redux의 컨셉인 Flux패턴에 대해 간단하게 학습해보자 왜 React는 Flux패턴을 추구하는 걸까? 여기서 조심할 점은 Redux는 자바스크립트의 라이브러리이지 React의 전유물이 아니다..! 리액트에서 사용 시 npm i react-redux로 설치하는 이유도 그것이다. 나는 React를 주로 쓰기 때문에 React의 관점에서 작성하는 글이다. 기존의 MVC패턴은 하나의 Controller 조작으로 인해 다수의 Model과 View가 복잡하게 연결되는 상황..

오늘 타입스크립트 강의를 들으면서 강사님이 타입체커와 타입 컴파일러의 차이점이 뭘까요? 라는 질문을 주셨다. 정답은 다음 주에.. 알려주신대서 타입스크립트의 문법 말고 구조가 문득 궁금해졌다.. 그동안 너무 VScode 빨간줄만 .. 의지하고 살아서 어떻게 동작하는지 잘 모르기도 했고 타입스크립트에서 어떻게 타입을 체크하는지 자세히 알아보기로 했다. 타입 체커 타입스크립트는 코드를 실행하는 부분과 타입 체커가 분리되어 있기 때문에 코드를 작성할 때 타입 에러가 발생하더라도 런타임에서는 정상 작동한다. -> 런타임에서는 타입에 접근하지 못한다. ! 여기서 질문에 대해 궁금하고 생각한 것 VSCode 같은 IDE에서 타입 오류를 잡아주는 건 컴파일 단계 전이니까.. 타입 체커는 개발 환경에서만 오류를 잡고 ..

구독 관리 서비스 구딩입니다! 홈페이지 바로가기 깃허브 바로가기 1일 차 1일 차에는 각자 준비한 아이디어를 간략하게 가져와서 발표하고 선택하는 시간을 가졌습니다. 저는 요새 주변에 식테크를 하시는 분들이 꽤 계셔서 식물 거래 플랫폼이라는 아이디어를 들고 갔는데 첫 발표 타자여서 그랬을까..? 명예의 전당 7까지 올라가는 명예를 얻게 되었어요. 하지만 저 조차도 2일 안에 개발을 완료할 수 있는 스코프가 아니라 생각해서 다른 아이디어를 택했고 식테크는 그렇게 사라졌습니다...^^ (개인 프로젝트로 진행해보고 싶어요!) 구독 관리 서비스를 택한 사람들끼리 한 팀이 되었습니다. 자기소개를 하고 본인의 강점, 약점, 목표 등을 공유하며 아이스 브레이킹을 하는 시간을 가졌어요. 7명 전원이 프론트엔드라 어떻게 ..

원티드 프리온보딩 챌린지 2주차를 듣고 정리한 내용입니다.왜 Redux를 쓰셨나요?저는 상태 관리를 위해 리덕스를 사용했습니다. 리덕스를 쓰면 리액트 내에서의 props drilling을 피할 수 있고 ... 구구절절 면접 시 들어올 질문을 대비해 기계처럼 외워놨던 대답이다. 하지만 저렇게 대답했다간 요새는 리덕스는 잘 안 쓰고...recoil이나 ContextAPI를 많이 쓰는데 그래도 리덕스를 택한 이유가 있나요? 라는 꼬리 질문이 들어올 수도 있다. 내가 부트캠프에서 배운 건 리덕스였고 그동안 진행한 3개의 프로젝트 모두 당연하게 리덕스를 사용했다. 이제 여기서 사용할 줄 아는 상태관리 라이브러리가 리덕스밖에 없어서...라는 대답은 정말 최악의 대답일 것이다(경험담)왜 리덕스는 점점 레거시 취급을..

리액트 공식문서 주요 개념 1~12장 1. JSX - React "엘리먼트(element)"를 생성한다. - JSX의 {중괄호} 안에는 유효한 모든 자바스크립트 표현식을 넣을 수 있다. - JSX 또한 표현식이다. 컴파일이 되고 난 후 자바스크립트 객체로 인식된다. - HTML 보다는 JavaScript에 가깝기 때문에 React DOM은 camelCase 프로퍼티 명명 규칙을 사용한다. - JSX는 주입 공격을 방지한다 // 주입공격 = XSS React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 이스케이프(Escape)란? 특정 문자를 원래의 기능에서 벗어나게 변환하는 행위 ex) & -> & 띄어쓰기 ->..

재귀함수란? 함수가 자신을 다시 호출하는 구조로 만들어진 함수. 반복 처리를 위해 사용하며 종료조건을 설정해 주지 않으면 무한 반복을 한다. 여기 x를 n 만큼 제곱해주는 pow()함수가 있다. 아래의 코드는 반복문을 돌면서 x를 n 만큼 곱해준다 // pow(2,3) = 8 function pow(x, n) { let reulst = 1; for (let i = 0; i < n; i++) { result += x; } return result; } 그렇다면 재귀적인 사고는 무엇일까? 작업을 단순화하고 자기 자신을 호출한다. function pow(x,n) { if(n == 1) { return x; }else{ return x * pow(x, n-1); } } 여기서 n !==1 일때 x * pow(x..

*원티드 프리온보딩 8월 챌린지 강연을 1주차를 듣고 정리한 글 입니다. 생각해보고 코드를 짰나요? - 선언형과 명령형은 뭐가 다를까? - 코드의 추상화와 구체화 - 관심사의 분리 창피하게도 그동안의 나는 코드를 짤 때 1. 기능 구현 우선 -> 2. 그다음에 리팩토링의 순서대로 진행을 했었다. 처음에 폴더 구조와 컴포넌트 분리에 대해 설계를 하더라도 중간에 수정되는 일은 빈번했고 당연히 선언형? 추상화?에 대한 고민은 해본 적도 없고 무지했다. (이래서 공부를 끝 없이 해야하나 보다) 대충 어떤 개념인지, 왜 이렇게 가야 하는지는 알겠어도 아직 제대로 이해하지 못한 영역들이 많다. 다행히 이에 대해선 너무 좋은 글과 정보가 많기 때문에 조금이라도 공부한 것을 남겨본다. 1. What과 How ? 먼저 ..