배경이전에 면접, 과제 등에서 스택, 큐에 대한 질문을 받은적이 있다. 그때는 실무 경험이 없었기 때문에 막연히 이론적 지식만으로 답변을 했었떤 것 같다. 조금이지만 경험이 쌓인 지금 그 때로 돌아가서 답변해보려고 한다. 실무에서 마주한 문제js script 최적화웹에서 js를 사용하려면 script 태그를 사용해야한다. 그리고 async, defer 속성을 통해 실행 순서를 제어할 수 있다. 아래는 과거 기술면접을 준비하면서 적었던 내용이다.- DOM을 따라 반드시 순서대로 실행되어야 한다면 이 방식을 사용하면 스크립트가 로드되기 전에 함수를 실행할 수 있고, 로드된 후에는 순차적으로 실행된다. 더 생각해보기- 전역객체를 두개나 만들었다. 이게 최선일까? 하나로 줄일수는 없을까?- body에 appe..
배경과거 객체지향 강의에서 추상화, 카테고라이즈에 대해 배웠다. 그런데 나는 이런 것들을 실제로 사용하고 있는걸까? 하는 의문점들이 조금씩 들던와중에 실무에 적용할일이 생겼다. 배경 설명- Foo라는 enum이 존재한다.- enum이 자주 추가되지는 않지만 계속해서 추가되는건 확실하다.- 프론트엔드, 백엔드 모두에서 전역적으로 사용된다.- 경우에 따라 특정 enum 값만 허용되어야 한다.- input이 전체 enum인데 outpt은 특정 enum으로 필터링해야한다.- enum에 매핑되는 value가 존재하는 경우가 있다.- enum이 추가될 때마다 전체 시스템을 점검해야하므로, 많은 시간이 소요된다. 고민나는 Foo enum을 추가해야하는 요구사항을 받았다. 또한 기존과는 약간 다른 타입의 enum이였다..
배경요즘 쇼츠가 유행이다. 나도 도파인 터지는 쇼츠에 빠져있다. 그런데 사용하다보니 어떤 플랫폼은 사용성이 좋은데 어떤 플랫폼은 사용성이 좋지 않았다. 특히 내가 성능이 안좋은 스마트폰을 사용중이라서 이게 더 심하게 체감되었다. 왜 이런 차이가 발생하는걸까? 가볍게 몇개의 플랫폼의 쇼츠를 들어가서 분석해보겠다. 분석하기네이버 쇼츠예시 링크 동영상 목록 api 살펴보기- `GET ~/cards` API에 cards라는 데이터가 있다.- cards는 배열이고 length가 4다.- 단, 맨 처음에는 length가 1인 api를 호출하고 끝난 시점에 length가 4인 api를 호출한다.- 내부에는 썸네일, 동영상 등 다양한 정보가 들어있다. 왜 4개의 데이터만 불러올까?- 쇼츠는 슥슥 내리는 사용성을 가진 ..
배경리액트를 클래스형으로는 꽤 많이 구현해 보고 블로그에 글도 적었다. 언젠가 한 번쯤은 함수형을 구현해봐야지라고 생각했는데 생각보다 좀 늦었다. 너무 많은 내용을 적으면 글을 쓰는 사람도 읽는 사람도 힘들 것 같아서 조금씩 나눠서 몇차례에 거쳐 글을 써보려고 한다.첫번째 목표: 하나의 useState 만들기1-1.jsfunction useState(initialState) { let state = initialState; const setState = (nextState) => { state = nextState; render(); }; return [state, setState];}function Counter() { const [count, setCount] = useState(..
개발을 하게 되면 비동기 함수를 사용하게 되는 경우가 생긴다. 그리고 이를 효율적으로 처리하기 위한 방법을 예제와 함께 알아보자. 1. 한 개의 비동기 함수1-1. 비동기 함수 실행 여부와 다른 코드가 상관이 없는 경우일반적으로는 메인 함수의 어디에서 함수를 호출하던지 상관이 없다.물론 특이한 케이스도 존재한다. 예를들어 만약 해당 함수가 오래걸리는 함수고 함수를 실행시키는 즉시 api를 호출시키고 싶다면 맨 위에서 호출해야된다.function main1_1() { foo(); delay(300); bar();} 1-2. 하나의 비동기 함수가 실행된 이후에 실행할 코드가 있는 경우위와 달리 delay라는 함수가 실행된 이후에 bar가 실행되어야하는 경우가 있다.웹에서는 api 호출 후 해당 데이터..
배경'프론트엔드에서 테스트 코드가 중요하다 vs 중요하지 않다' 항상 나오는 말이다. 시리즈 b 스타트업에서 일하는 3년차 프론트개발자인 나의 시선은 어떨까? 정리되어 있지 않은 내면의 생각들을 정리해보고 싶어졌다. 아마 조금만 시간이 지나면 지금 나의 생각도 바뀌게 될 것이다. 생각이 바뀌기전에, 지금의 기억을 잊어버리기 전에 정리해보겠다.테스트 코드와 개발 시간최근에 유스콘이라는 곳에서 `자동차 정비사 개발자가 되다`라는 세션을 들었다. 정비를 하려면 자동차를 뜯고 고장난 곳을 고치고 다시 조립해서 테스트를 한다고 했다. 그리고 정비가 잘못되었다면 다시 뜯어야하는데 길게 걸리는 경우는 일주일동안 뜯어야하고 힘도 많이 든다고 했다. 그런데 개발자는 딸깍 하니 테스트 코드가 바로 나오니 얼마나 쉽냐는..
배경이런 저런 이유로 백엔드 공부를 시작했다. 사실 예전부터 미루고 미뤄왔던 일이기도 하다. 개발자가 왜 되었냐고 한다면 명확히 대답할 수 있지만 프론트 개발자가 왜 되었냐고 묻는다면 약간 대답하기가 애매해진다. 프론트가 싫었던 적도 지금 싫지도 않다. 다만 내가 프론트로 취업한 이유는 프론트를 더 잘하기 때문이다. 애초에 취직전까지는 풀스택으로 공부했었다. 보통 비전공자가 혼자서 풀스택으로 공부하다보면 자연스럽게 프론트를 더 많이 공부하고 잘하게 된다. 그리고 그건 나도 예외가 아니였다. 그리고 그렇게 취직한지 2년 4개월이라는 시간이 흘렀다. 쓸 얘기는 많지만 이정도에서 배경 설명은 마무리 하겠다. 중요한건 백엔드 공부를 시작했다! 공부 방법회사다니는 동안 nestjs 강의를 하나 듣고 블로그에 글..
서론 친구에게 부트캠프 강사나 멘토를 하면 어떻겠냐는 얘기를 들었다. 평소에도 교육이나 지식 공유에 관심이 있었고 그런 기회가 온다면 잡아야겠다는 생각을 예전부터 가지고 있었다. 그래서 바로 면접을 지원했고 합격해서 12월말부터 6월까지 한 기수를 담당하는 토요일 주강사로 일하게 되었다. 어느덧 절반이 넘는 시간이 지났다. 그래서 그동안 들었던 생각을 정리해보려고 한다. 본론 내가 하는 일은 크게 질문 답변, 보충수업으로 이루어진다. 수강생들은 비전공자에 완전 처음 개발하는 사람부터 전공자까지 다양하게 있는 것 같다. 나는 비전공자에 혼자서 코딩을 공부했다. 1년 먼저 코딩을 배운 친구가 처음에 길라잡이를 해주기도 했지만 대부분의 시간은 혼자서 머리를 싸매가며 공부했다. 그래서 그들의 입장이 공감된다. ..