썸네일 프론트엔드 개발자에게 코딩테스트 공부가 필요할까? 저는 개발자가 되어야겠다고 결심했던 날부터 지금까지 알고리즘, 자료구조 공부에 최선을 다하지 않았습니다 요즘은 부트캠프, 국비수업에서 코딩테스트까지 알려주고 관리해 준다고 들었습니다만, 저는 개발을 독학한 사람이기에 그런 케어는 받아보질 못했죠. 또한 그 당시 코딩테스트 실력은 실무를 하는데에 전혀 도움되지 않는다는 글도 많았습니다. 저는 그 당시 굳이 필요하지 않다는 말에 자기합리화를 하며 코딩테스트에는 소홀히 하고, 클론 코딩에 집중했었습니다. 지금부터 3년 전에는 프론트엔드, 백엔드 가릴 거 없이 정석으로 코테를 푸는 면접이 많이 포함되기 시작하던 때였습니다. 지금은 트렌드가 많이 바뀌어서 정석 그 자체 고테보다는 실무형 테스트, 과제로 많이 내주는 편이죠. 쨌든 저는 운이 좋게도 기술면접은 있었지..
썸네일 코딩테스트용 Web IDE 구축 회고 | Web IDE 구축하기 - 3 완벽하진 않지만, 한 스프린트를 마쳤다는 느낌으로 현시점에 대해 정리를 하고 갈까 합니다 해당 내용 플젝 readme로도 작성된 내용입니다 프로젝트 동기 및 목표 클라이언트는 React, 서버는 Express.js, 컴파일 환경은 Docker를 활용했습니다. 프로그램 동작 방식은 다음과 같습니다. 유저는 원하는 프로그래밍 언어를 고른 뒤, 해당 문제에 맞는 코드를 작성합니다. 유저가 [코드 실행] 및 [제출하기] 버튼을 누르면 작성한 코드는 Socket 통신 서버에 전송됩니다. 유저가 작성한 코드는 back/compile 디렉터리에 해당 언어에 맞는 파일로 만듭니다. 해당 언어에 맞는 Dockerfile을 실행시켜 유저의 코드 파일을 복사해 Docker 내 임시파일로 저장하고, 이미지 생성, 컨테이너를 ..
썸네일 Docker로 각 컨테이너마다 Java, C++, Python, Node.js 언어 실행시키기 | Web IDE 구축하기 - 2 Java, C++, Python 언어가 설치되지 않은 환경에서 어떻게 실행시킬까? 저번 글에는 Javascript 코드를 isolated-vm 가상머신 환경에서 실행시키는 작업을 했습니다 이제 그다음 스텝인 Python, Java, C++ 언어를 받아서 실행시켜야 하는데 어떻게 해야 할까요? 여기서 제가 한 가지 놓친 점이, JS를 뺀 나머지 언어들을 실행시키기 위해선 내 로컬에 해당 언어가 깔려있어야 된다는 것입니다 이 부분을 몰랐던 건 아닌데... 왜 JS 작업할 때 놓치고 있었던 걸까요...?😥 그래서 제 노트북에 모든 언어를 설치해야 하나? 싶었는데, 가뜩이나 똥컴인 노트북에 너무 부담이 되더라고요 (어차피 용량 때문에 깔지도 못했을 듯) 그래서 Docker를 사용하게 되었습니다 Docker 또한..
썸네일 Remix.js V2 살펴보기 | Map Service 구축하기 - 1 전회사에서 사내 어드민 프로젝트로 Remix.js + React-query 환경에 작업을 했었습니다 그때 처음 알게 된 Remix.js는 좀 독특하다고 느껴졌었는데요 이번에 토이 프로젝트로 Remix.js로 풀스택 개발을 해보자고 결심했습니다 근데 웬걸... 버전 2가 나왔더라고요? 또한 Remix.js를 온전히 써보려고 하니 생각보다 제가 Remix.js 생태계 자체를 잘 이해한 건 아니구나 라는 생각이 들었습니다 이번 글에서는 Remix.js를 써보면서 신기하다고 생각했던 점을 쭈욱 써볼까 합니다 파일 시스템 규칙 Remix.js는 React Router 위에 구축이 되었다고 합니다 그래서 React Router 가 기본으로 내장되어있고, 우린 Nested Routes를 구성할 수 있습니다 V1에서는..
썸네일 Javascript 코드를 서버에서 안전하게 실행시키는 방법 (feat. isolated-vm) | Web IDE 구축하기 - 1 사용자에게 받은 코드를 서버단에서 어떻게 실행시켜야 할까? 제가 이번에 개발하려는 Web IDE는 React + Node.js 환경으로 구축하려고 합니다 가장 먼저 Javascript 환경인 만큼, Javascript 코드를 클라이언트에게 받아서 서버에 어떻게 실행시켜야 할까요? eval() 함수 또는 new Function이 가장 먼저 떠오를 수 있을 겁니다 하지만 이 함수들은 절대로 사용합니다 보안상의 큰 문제를 야기시키기 때문입니다 그럼 어떻게 안전한 환경에서 코드를 실행시킬 수 있을까요? 개인적으론 그다음에 떠오른 생각이 좋~은 인터프리터가 있지 않을까? 였는데요ㅋㅎ... 당연 없습니다... 허허 일단 가장 먼저 가상환경(가상머신)에서 코드를 실행시켜야 합니다 그리고 안전성이 보장된 샌드박스 환경..
썸네일 기획은 상상력에서 나오는걸까? (해당 게시물은 지극히 주관적임을 참고 부탁드립니다) 기획은 없던걸 만들어 내는 거니까 다 상상으로 만드는 거예요 IT 업계에 종사하시는 분들은 위 문장에 대해 어떻게 생각하시나요? 일단 위에 문장은 제가 실제로 회사생활 하면서 들었던 말입니다 만약 제가 첫회사에서 저 말을 들었더 라면 "맞지 맞지" 라며 고개를 끄덕였을 수도 있습니다 그땐 사내에 기획자가 없었고, 이미 모든 건 정해진 내용으로 외주가 들어오는 거라서 무조건 만들라면 만들어야 하는 구조였거든요 근데 회사를 옮기고 실제로 기획자, 디자이너와 대면해서 일해보니 상당히 신선한 충격이었습니다 갑자기 그 기능에 버튼을 추가하려는 이유가 뭐죠? 데이터적으로 근거가 명확하지 않으면 불필요한 추가인 겁니다 위 문장은 제가 입사 후 처음으로 참여했던 스..
썸네일 📝 2022~2023년 회고 2022~2023 회사 2022년 2월쯤 제가 SI 회사를 퇴사하고 운이 좋게 거의 바로 2022년 3월 멋쟁이사차럼 프로덕트팀에 합류하게 되었습니다 처음 느껴보는 수평적인, 활발한 분위기에 한동안은 주말에도 출근하고 싶다라는 생각이 들 정도로 행복했었답니다 물론 회사란게 이런 기분이 오래가긴 힘들지만요 ㅎㅎ 테킷이라는 IT 코딩 교육 프로덕트의 프론트엔드 개발자로서 다양한 업무를 경험해 보았습니다 사내 어드민 개발 KDT 사업을 시작함과 동시에 KDT 지원서를 받을 어드민 개발에 들어가게 되었습니다 지원서는 1차, 2차, 3차로 나뉘고 각 스텝마다 input form이 다른 게 특징이었습니다 그리고 지원현황에 따라 form 수정이 잦을 수 있어 확장성 있게 개발을 해야 했습니다 이 당시 데드라인이 굉장..
썸네일 React Query 사용기 안녕하세요! 오늘은 제가 실무에서 쓰고 있는 react-query에 대해 글을 써볼까 합니다 지금 실무에서 쓰고는 있지만 늘 같은 형태로만 쓰고 있고, 아무것도 모른 상태에서 다른 동료가 작성한 코드를 토대로만 공부(?) 했기 때문에 모자른 부분이 굉장히 많아서... 공부 겸 내용 정리를 해보려고 합니다 블로그 글 중에 react-query에 대해 잘 정리해주신 분이 계셔서 링크 남깁니다 https://maxkim-j.github.io/posts/react-query-preview React-Query 살펴보기 React의 Server State 관리 라이브러리 React Query를 살펴봅니다. maxkim-j.github.io 1. react-query와 redux 차이점 사실 저는 redux만 알고..
썸네일 React Hook Form | 내가 실무에서 쓰는 법 안녕하세요. 오늘은 정말! 유용한 라이브러리 React Hook Form에 관해 기본적인 내용들을 정리해보려고 합니다 이젠.. 이거 없으면 개발하기 정말 귀찮을 정도로... 너무 유용한 라이브러리입니다 거의 리액트 개발에선 필수가 아닐까 싶을정도! 공홈 자체에서도 한국어를 지원해주고 있지만 필드가 많아지거나 하면 복잡해지는게 꽤나 있더라고요 그래서 제가 실무에서 써먹던 방법도 담아볼까합니다 공홈의 있는 모든 내용들을 다루진 않고 제가 실무에서 썼던 API 위주로 설명하겠습니다 1. React Hook Form 이란? 폼, 양식을 만들때 사용하는 라이브러리 해당 라이브러를 사용하지 않더라면? import React, { useState } from 'react'; const InputSample = () ..
썸네일 React | Hook 정리 + 18 버전 새로운 Hook 안녕하세요. 오랜만에 블로그에 글을 써보네요! 제가 개인 노션에서 계속 써왔던 내용들을 차근차근 블로그로 옮겨볼까 합니다. 그 중 예~전에 열심히 정리했던 react hook에 관한 내용부터 쓰려고해요 근데 저도 글을 정리하면서 검색해보니.. 새로운 hook들이 나왔더라고요! 저도 맨날 쓰던것만 쓰다보니 새로운 hook을 알아본다거나 쓸 일은 없었는데, 이 참에 저도 새로운 hook을 알아보고 기회가 될때마다 써보려고 합니다 혹시 내용이 틀리다면 댓글 부탁드립니다 (전에 써둔 내용이라 틀린 부분도 있을 듯 해요🙄) 1. 앞서 알고있어야 할 것들 1-1. 리액트가 마운트 시에 하는 작업들 props로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청(REST API 등) 라이브러리 사용 (D3, V..
썸네일 react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) 불과 몇 달전만 해도 문제없이 잘 쓰고 있었던 react-router-dom 리액트 공부를 다시 시작하면서 router 파트를 복습삼아 진행했는데 분명 그대로! 평소에 썼던거처럼 작성했는데 에러가 뜨는거다! 보니까 그 사이에 v6으로 업데이트 되었던 것... 생각보다 너무나도 많은게 달라져서 기록해보려고 합니다 1. Switch -> Routes 네이밍 변경 여러개를 감싸는 부모 컴포넌트 네이밍이 변경됨 Switch란? 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜줌 (아무것도 일치하지 않으면 Not Found 페이지를 구현할 수 있었다) // v5 // v6 2. exact 옵션 삭제 기존에 루트 ('/') 페이지 같은 경우 모든 페이지들이 다 불러오는 현상이 있었는데..
썸네일 React 아키텍쳐, 디자인 시스템, 파일 구조에 대한 고찰 반년일기 사이드 프로젝트를 진행하면서 리액트에 대한 한계점에 매일 매일 도달했다. 무엇보다 퍼블리싱과 기능 구현을 동시에 진행하려는 욕심에, 대충 짜놓았던 디렉토리 구조가 무너지는 느낌, 가뜩이나 어수선한 프로젝트가 더 어수선해지는 기분이었다. 그때 현 회사 사수가 디자인 시스템에 대해 꼭 공부 할 필요가 있다고해서 무작정 코드부터 작성하려는 급한 마음을 잠시 내려놓고, 아키텍쳐, 디자인 시스템을 기반으로 리액트 디렉토리 구조를 어떻게 하면 좋을지에 대해 공부를 해보려고한다 1. 현재 상태 아래 이미지는 현재 플젝 리액트 디렉토리 구조다 가장 크게 client, db, doc, server로 나눈 상태고 나는 client를 담당하고 있다 client의 핵심 상위 폴더는 assets, components,..
라이브러리 브랜드 그룹 | Hi, Kyung-a log

티스토리툴바