전체 글 64

try catch finally 는 항상 비동기를 기다리지 않는다

개요JavaScript의 try...catch...finally 구문을 사용할 때, finally 블록이 항상 비동기 코드가 끝날 때 실행된다고 착각하는 경우가 많다. 하지만 finally 블록은 try가 종료되면 즉시 실행되며, 내부의 비동기 코드가 완료되길 기다리지 않는다. 이를 이해하지 못하면 로딩 상태 관리나 비동기 작업의 순서를 제어하는 데에서 문제가 발생할 수 있다.문제 상황아래의 슈도코드를 살펴보자. 이 코드는 네트워크 요청을 수행한 후, 데이터를 다운로드하는 동안 로딩 상태를 표시하려는 의도로 작성되었다.function downloadFile() { setLoading(true); // 로딩 시작 try { fetchDataFromServer() // 비동기 요청 .the..

github repo를 github 패키지 저장소에 연결하여 npm 패키지 publish 하기 ~ 패키지 다운받아서 레포의 파일들 받기

이 글은 https://docs.github.com/ko/packages/working-with-a-github-packages-registry/working-with-the-npm-registry 를 번역한 글입니다 npm 레지스트리 작업 - GitHub Docs Authenticating to GitHub Packages You need an access token to publish, install, and delete private, internal, and public packages. You can use a personal access token (classic) to authenticate to GitHub Packages or the GitHub API. When you create a ..

카테고리 없음 2023.02.03

cypress란[docs 번역]

Architecture 대부분의 테스팅 툴은 브라우저 바깥에서 실행되고, 네트워크를 거쳐서 리모트 명령어를 실행한다. Cypress는 application에서 돌아가는것처럼 실행된다. Cypress뒤에는 노드서버 process 가 있다. Cypress 와 node process 는 끊임없이 통신하고, 싱크를맞춘다. 프론트와 백에 접근권한을 갖고있어 리얼타임으로 어플리케이션에 응답을 줄 수 있다. 또한 플라이에서 웹 트래픽을 읽고 바꾸면서 네트워크 레이어에서 운영될 수 있다. 이것은 브라우저 안과 밖에서 모든걸 수정할 수 있게 할 뿐만 아니라, 브라우저를 자동화하는 능력을 방해하는 코드까지 바꿀 수 있도록 한다. Cypress는 궁극적으로 위에서 아래로 모든 자동화 프로세스를 조종한다. 이것은 브라우저의 ..

카테고리 없음 2023.01.20

아임웹 2차 면접(컬쳐핏) 인터뷰 후기

지난 1차면접에 통과하고, 아임웹 본사에 몇일 안지나서 2차면접을 봤습니다. 대표님과의 1:1로 컬쳐핏 1차면접과 마찬가지로 편안한 분위기에서 진행되었습니다. 아임웹이 하고 있는 일, 최근 알토스벤처스로부터 투자유치 투자를 받은 이후 능력있는 ux 디자이너 , 전략가, 구글출신 CTO 분들을 영입하셔서 능력있으신 분들과 협업하게 되면 좋을 것 같다는 생각이 들었습니다. 대표님께서 11년간 회사를 운영하면서 겪었던 이야기를 들으며 회사에 대한 애정을 알 수 있었습니다. 어쩌다가 개발을 하였는가? 저는 대학교를 생명공학 관련 학과를 나왔고 흥미가 있어서 들어갔었지만 결국 저와 진로가 맞지 않았고, 항상 진로에 대한 고민을 하면서 학교를 다녔던 경험을 말씀드렸습니다. 제가 고민했던 진로 중 창업도 있었다고 ..

취준 2022.06.07

아임웹 웹퍼블리셔 1차면접 후기

아임웹은 연희동에 있는, 웹 빌더 서비스를 하는 회사입니다. 우선 아임웹 건물 탐사를 했습니다. 피플팀에 계시는 이지영님께서 답사를 해주셨는데, 건물이 이쁘면서도 복잡했습니다. 답사 후 면접이 진행되었습니다. 개발팀장님께서 편하게 면접을 리드해주셔서 굉장히 편하게 봤던 것 같습니다. 답사 후에는 진행했던 과제에 대해 먼저 얘기를 하였습니다. 제가 과제를 하면서 어떻게 문제를 풀어나갔는지, 그리고 궁금했던 것들에 대해 여쭤보았습니다 그리고 나서 제 코드에 대한 피드백을 받았습니다. 피드백 중에 버튼은 button태그를 쓰면, 접근성 측면에서 좋겠다는 말씀을 하셨는데, 웹 접근성에 대한 고민을 좀 더 해야겠다는 생각이 들었습니다. 개발 툴은 어떤 걸 쓰는지에 대한 질문을 받았는데, 여기서 개발자 도구에서 s..

취준 2022.05.25

host, host 환경의 의미

인터넷에서 호스트는, 인터넷을 통해 다른 컴퓨터들과 쌍방향 통신이 가능한 컴퓨터를 말한다. 호스트는 특정한 호스트번호를 갖는데, 이는 네트웍 번호와 합해져서, 고유의 IP 주소를 이루게된다. 인터넷 서비스 제공업체를 통한 PPP 사용자의 경우에는, 접속되어있는 동안에만 고유한 IP 주소를 갖게되며, 그 시간동안은 해당 사용자의 컴퓨터도 하나의 호스트가 되는 것이다. 이러한 맥락에서 보면, 호스트란 네트웍의 하나의 노드라고 볼 수도 있다. IBM이나 기타 다른 메인프레임 컴퓨터 환경에서, 호스트란 하나의 메인프레임 컴퓨터를 말한다 (요즘은 이런 컴퓨터를 '대형 서버'라고 부른다).이 상황에서 메인프레임은 단말기가 부착되어 있으며, 메인프레임은 이 단말기에게 서비스를 제공하는 호스트가 된다 (여기서 호스트는..

개발공부 2022.05.21

dependencies 와 devDependencies 차이

dependencies 는 일반적인 npm install 라이브러리명을 통해서, devDependencies 는 npm install 라이브러리명 --save-dev 혹은 npm install 라이브러리명 -D 로 설치 dependencies 에는 애플리케이션 동작과 연관된, devDependencies 에는 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브러리를 설치하면 된다. dependencies 에 설치된 라이브러리는 배포할 때 포함되지만 devDependencies 에 설치된 라이브러리는 개발할 때 필요한 라이브러리기 때문에 배포할 때 포함되지 않는다. 이렇게 잘 구분을 해서 설치해줘야 빌드시간도 줄이고, 배포할 때 불필요한 라이브러리를 포함시키지 않아도 된다.

개발공부 2022.05.21

핫 리로딩 기능을 위해 react hot loader와 webpack dev-server의 hot옵션 둘다 사용해야할까

https://www.npmjs.com/package/react-hot-loader react-hot-loader Tweak React components in real time.. Latest version: 4.13.0, last published: 2 years ago. Start using react-hot-loader in your project by running `npm i react-hot-loader`. There are 2717 other projects in the npm registry using react-hot-loader. www.npmjs.com react-hot-loader npm 사이트에 들어가면, 아래 4개를 사용중이라면, react hot loader를 사용하지말고 사..

[프로그래머스] 게임 맵 최단거리 - BFS

문제 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은 갈 수 없습니다. 아래 예시는 캐릭터가 상대 팀 진영으로 가는 두 가지 방법을 나타내고 있습니다. 첫 번째 방법은 11개의 ..