본문 바로가기

분류 전체보기126

[원티드 프리온보딩 9월]3회차 회고 프리온보딩 3회차가 지나 어느덧 막바지를 향해 달려가고 있다.이번 주제는 콜백 함수 - Promise 객체 - async / await 로 이어지는 개발 흐름과 그 배경에 대한 주제로 강의가 진행되었다.   역시나 "대충은" 알고 있는 내용이었지만, 명확히 설명을 위해서는 잘 알고 있어야함을 또 깨달았다. 개발자가 아닌 사람들은 이런 이야기는 재밌어할지도 모르겠다고 생각했다. (아님)오늘의 학습내용콜백함수의 정의 및 사용법프로미스 객체가 생긴 이유, 정의프로미스 팩토리 함수JavaScript에서의 async / awaitSyntax sugarJS에서의 일급 객체란어려웠던 keyword / 활용한 질문Q. Promise 객체와 async / await 의 차이점은 무엇인가요?  A. Promise 객체는 .. 2024. 9. 16.
[원티드 프리온보딩 9월]2회차 회고 프리온보딩 2회차를 들었다.이번에는 이벤트 루프에서의 Stack과 Queue 가 주제로, 이벤트 루프에서 Stack과 Queue 가 어떻게 동작하는지 등에 대한 이야기를 나누었다. 알고 있는 개념이라고 생각했는데, 정확히 잘 모른다는 것을 새삼 또 느꼈다. 누군가에게 설명할 수 없다면 모른다는 것이 정말 맞다고 항상 느끼고 또 느끼게 되는 것 같다.오늘의 학습내용데이터의 정의메모리의 구성 요소와 종류 (Stack, Heap, Data, Code)이벤트 루프에서의 Stack이벤트 루프에서의 Queue Execution Context를 통해 알아보는 JavaScript 엔진의 동작 방식어려웠던 keyword / 활용한 질문Q. 왜 자료구조로 분리해서 데이터를 저장하는 것이 필요한가요? A. 저장하고자 하는.. 2024. 9. 8.
[원티드 프리온보딩 9월]1회차 회고 원티드에서 진행하는 프리온보딩에 신청하여 오늘 첫 회차를 진행했다.이번에는 이벤트 루프에 대한 주제로 이야기를 나눠보는데, 프론트엔드 개발자로서 잘 숙지하고 있어야 할 개념이라고 생각해 시작 전부터 매우 기대됐다.  그리고, 1회차 강의인데도 매우 유익한 시간이었다. 1회차기 때문에 기본적인 개념들을 다뤘지만, 그만큼 정확히 알고 설명할 수 있어야하기 때문에 공부가 많이 되었다.  이제 이런 너디한 조크도 만들 수 있게 됐다.오늘의 학습내용이벤트 루프의 정의동기 Synchronous 와 비동기 Asynchronous 블로킹 Blocking 과 논블로킹 Non-Blocking동기/비동기 와 블로킹/논블로킹 차이점Program, Process, Thread 의 정의병렬성 Parallelism 과 동시성 .. 2024. 9. 7.
[포트폴리오 웹페이지]프로젝트 메타인지하기, 마이그레이션 준비 취업 준비 기간동안 작성한 포트폴리오 웹페이지가 있다. 이때는 다른 프로젝트들을 이미 React로 진행했기 때문에 기본기를 다지고, 갖추고 있음을 어필하기 위해 Vanilla JS를 사용하여 웹 페이지를 만들었다. 사실은 이후에 취업하면 마이그레이션 작업을 하려고 했다. 그러나 일로 바쁘다는 핑계로 마이그레이션 작업이 많이 늦춰졌다. 어느새 경력이 1년이 되어가는 시기인지라, 언제까지 Vanilla JS로 웹페이지를 둘 수도 없으니 늦게라도 마이그레이션을 진행하기로 결심했다.프로젝트 메타인지 하기 먼저 프로젝트를 진행하기 앞서 나, 그리고 나아가 프로젝트에 대한 메타인지를 명확히 하기 위해 몇 가지 질문에 대해 스스로 대답을 작성했다.  1. 왜 하는가? 이제 정식으로 개발자가 되어 경력을 쌓아가고 .. 2024. 8. 18.
[React-Query]리액트 쿼리 기본 문법 리액트 쿼리를 왜 써야 하는지 지난 포스팅에서 언급했으니, 이제 기본 문법들을 정리해 보자. 해당 문법들에 대한 설명은 udemy에서 내돈내산한 강의 React Query / TanStack Query: React Server State Management의 내용을 기반으로 하고 있다.QueryClientProvider리액트 쿼리를 사용하기 위한 기본 공급자(Provider) 컴포넌트이다. 비슷한 예시로 ThemeProvider, RouterProvider를 생각하면 될 것 같다. 상위 컴포넌트에서 한 번 감싸서 사용하면 되고, 보통 queryClient라고 선언하는 인스턴스를 client 속성에 할당해주어야 한다. 아래와 같은 형식으로 생성한다. import { QueryClient, QueryClie.. 2024. 6. 24.
[React-Query]리액트 쿼리 Intro 최근 프로젝트들에서 계속 리액트 쿼리(React-Query)를 쓰고 있다. 리액트 쿼리를 써본 적이 없어서 처음 썼을 때 너무 어려웠고, 이후에도 필요에 따른 문법만 띄엄띄엄 대충 보고 작업을 하다보니 관련된 지식이 많이 모자라다는 생각이 자주 들었다. 이에 따라 강의를 듣고 좀 더 제대로 배울 필요가 있다는 생각이 들어 강의들을 찾아 보았다. TanStack Query 공식 문서에서도 정식 강의가 있는데, 가격이 덜덜해서 포기하고 Udemy에 올라와 있는 리액트 쿼리 강의를 선택했다. 디테일한 설명과 미리 준비되어있는 코드들로 필요한 부분들만 code-along 하면서 공부할 수 있어 쾌적하고, 재밌었다. 아직 배웠던 지식을 실무에 많이 적용해보진 않았지만, 강의를 들어면서 흥미롭게 들었던 내용들과 정.. 2024. 6. 21.