꽁꽁 얼어붙은 티스토리를 떠나 Velog로 이주합니다. https://velog.io/@alstjr5949/posts alstjr5949 (Minseok) / 작성글 - velog velog.io 놀러들 오시오 ~.~ 글들은 잘 엄선해서 옮기도록 하겠습니다.
썸네일 프론트엔드 개발 설계하는 방법 이번 글은 문득 회사 실제 스프린트를 겪으면서 맡은 스프린트에 대해 설계를 해보고 있는데 과연 프론트엔드 개발에서 설계하는 방법을 chatGPT한테 물어보면 뭐라고 대답해 줄까?라는 궁금증에서 시작된 글이고 chatGPT의 답변을 참고해서 쓰는 글입니다요. 프론트엔드 개발을 설계하기 위해서는 다음과 같은 단계를 거칠 수 있습니다. 요구사항 분석 프로젝트의 목적과 요구사항을 이해합니다. 사용자의 요구사항과 기대하는 기능을 파악합니다. 디자인 단계 UI/UX 디자인을 수행합니다. 디자인 시안을 작성하고 필요한 요소들을 정의합니다. 기술 스택 선택 개발에 사용할 기술 스택을 선택합니다. 프로젝트의 목적, 요구사항, 개발 환경 등을 고려하여 선택합니다. 아키텍처 설계 시스템 아키텍처를 설계합니다. 컴포넌트 구조..
썸네일 Git의 서브모듈(submodule)이란? 서브모듈(submodule) 회사에서 개발을 진행하면서 만났던 생소했던 단어,, 서브모듈 서브모듈이 도대체 뭘까? 궁금해하면서 나중에 공부해야지 한 게 어느덧 한 달..ㅎ 이제야 정리합니다 서브모듈 가즈아~ 1. 서브모듈이란? 우선 이 서브모듈이란 게 뭔지부터 알아볼까요. 서브모듈은 여러 개의 Git Repository를 하나의 repository로 관리할 수 있도록 하는 기능인데요. 이렇게 들으면 이게 무슨 얘기인지 긴가민가 할 수 있습니다. 예시를 들어볼까요? 흔히들 회사에서 공통적으로 많이 사용되는 레포는 1. 디자인 시스템 2. 코어 코드(ex. 지도 관련 코드) 등등이 있을 거라 생각합니다. 지도 관련 코드라고 얘기한 것은 제가 다니는 회사는 거의 모든 제품에 지도 관련 코드가 들어가다 보니 레..
썸네일 JavaScript 배열 메소드로 차집합, 교집합, 합집합 구현하기 JavaScript에서 배열끼리 차집합, 교집합, 합집합 구현해 보기 (feat. filter, includes) 🚀 내가 이 글을 작성하는 것은 근래 코드를 짜면서 많이 찾아보고 사용했던 내용이라 따로 정리해 놓기 위함이다. 다음과 같은 두 배열이 있다고 해보자. const arr1 = [1, 3, 4, 6, 7]; const arr2 = [1, 2, 4, 9, 10]; about:blank의 콘솔에서 해보시길 바랍니다. 주로 사용하는 배열 메서드는 filter와 includes 입니다. filter filter는 콜백을 매개변수로 받습니다. 내부 콜백의 매개변수로는 배열 내부의 각각의 value들을 나타내는 element, 현재 처리하는 element의 index, filter를 호출한 배열을 담은 ..
썸네일 state와 ref의 차이점 state와 ref의 차이점 제목 그대로 state와 ref의 차이점에 대해서 정리해보려고 한다. 코드 수정 중에 왜 ref를 state로 바꿔서 사용했는가?라는 질문을 받아서 정리해 보는 글이다. 가볍게 내가 보기 위해서 react에서 state와 ref의 차이는 우선 정의는 state는 '컴포넌트 내에서 관리되는 데이터 객체' ref는 'DOM에 이름을 달아주는 것으로, DOM에 직접 접근하고 싶을 때 사용' 인데, 그냥 useRef(false) 이렇게도 사용가능 보통 질문의 의도는 state는 리렌더링이 필요한, 즉 변경 시 렌더링이 되어야 하는 값을 다룰 때 사용하고 ref는 리렌더링을 발생시키지 않아도 되는 값을 다룰 때 사용합니다. 여기서 문제 ref는 왜 리렌더링이 안될까요?? ref가 리렌..
썸네일 eval을 아시나요? 문자열로 돼있는 계산식이나 부호가 문자열인 경우에 계산은 어떻게 하는지 고민해본 경험이 있을 수 있다. 예시를 들어보자면 아래와 같은 경우가 있다. const stringFormula = '1 + 3'; 이것을 계산하기 위해서는 간단히 eval(stringFormula); 를 해주면 결과가 나오게 된다. 저는 split 해주고 map 돌려주고 별 짓을 다하다가 쉬운 방법이 있을 것 같아서 찾아보고 적용했습니다^^,,
썸네일 깃(Git)과 깃허브(GitHub)의 차이점은 뭘까? 깃 vs 깃허브 1. Git Git은 소스코드 및 파일의 변경내역을 저장하는 분산 버전 관리 시스템입니다. Git은 로컬 저장소(내 컴퓨터)와 원격 저장소(서버 컴퓨터)로 나뉩니다. 내 컴퓨터에서 작성한 프로젝트를 원격 저장소에 저장해두고 필요할 때 가져올 수 있게 해줍니다. 이 때 코드만 가져오는 것이 변경 내역까지 모두 가져오기 때문에 Git이 버전 관리 도구라고 불립니다. 이렇게 코드의 원본이나 변경 내역을 저장하는 기능을 하는 툴을 형상 관리 툴이라고 부릅니다. 2. GitHub 위의 설명한 Git을 클라우드 환경에서 사용할 수 있게 제공하는 공간이 GitHub입니다. Git을 관리해주는 웹 호스팅 서비스인것입니다. GitHub이 단순히 저장소 역할만 하는 것은 아닙니다. GitHub 가장 거대한..
썸네일 호이스팅, 스코프 체인 그리고 실행컨텍스트 실행컨텍스트를 통해 배우는 호이스팅, 스코프 체인, 클로저 1. 실행컨텍스트 실행컨텍스트를 통해 배우는 것이니까 실행컨텍스트가 무엇인지부터 알아야겠죠? 먼저 실행컨텍스트의 정의를 알아보면 코드를 실행하는데 필요한 환경을 제공하는 객체입니다. 사실 언제나 늘 그렇듯 정의만 들어서는 잘모르겠는게 당연합니다. 실행컨텍스트는 보다 효율적인 식별자 결정을 하기 위해 사용하는데요. 식별자 결정? 역시 생소한 언어입니다. 실행컨텍스트의 생성시가와 삭제되는 시기에 대해 알아보면서 시작해보겠습니다. 자바스크립트 코드를 실행시키면 자바스크립트 엔진은 콜 스택이라는 통에 전역 실행컨텍스트를 담습니다. 이 실행 컨텍스트 내부에는 Record와 Outer가 담겨있습니다. 사실 정확한 명칭으로는 Environment Record..
썸네일 Storybook [초급자용] (타입스크립트 X, interaction X) 이 글을 쓰게 된 이유는 아직 한국어로 작성된 스토리북 자료들이 몇없고, 부담없이 가볍게 볼만한 자료는 정말 극히 드물어서입니다. 컴포넌트들의 UI를 확인하는 목적으로만 가볍게 사용하실 분들을 위해 작성해보겠습니다. (UI를 확인하는 기능만을 사용합니다.) 1. 스토리북이란 대체 뭔가? - 스토리북은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이다. - 실제 웹 어플리케이션의 환경과 별개로 독립적인 컴포넌트 단위의 개발 진행이 가능하게 해주는 도구이다. 이게 도대체 무슨 말이냐 함은 이런식으로 button 컴포넌트들에 대한 storybook 코드를 짜게 된다면 위와 같이 어플리케이션 환경과 별개인 독립적인 환경에서 컴포넌트들의 UI를 확인해볼 수 있다. 이렇게 컴포넌트 단위의 UI 개발을 도와주는 도..
썸네일 한 박자 느린 박치 이벤트 keydown에 대하여 이 문제를 발견하게 된 것은 구글 폰트 사이트와 같이 인풋에서 타이핑을 치면 각 폰트 박스에 타이핑 치는 값이 출력되는 것을 만들어보고 싶었다. 만들어본 결과물이다. 처음에 만들때는 그저 인풋 값에 keydown 이벤트를 주고 리덕스(vanilla js에서 redux 사용해보기 연습 중이었음)를 사용해 값을 바꿔주면 될 것이라 생각했다. 하지만 동작은 내 기대와는 전혀 다르게 작동했다. 아니 뭔데요..저 6까지 쳤잖아요.. 근데 왜 5까지 밖에 안 나오냐고요;; 그래서 도대체 뭐가 문제인지 해결 방법을 찾던 중 setTimeout을 준다면 해결이 된다는 글을 봤다. setTimeout을 주니까 그제서야 박자를 맞추는 keydown 이벤트 후,,, 이 말고도 keydown 이벤트가 아닌 input 이벤트로..
썸네일 React v18에선 이제 안써요!!"ReactDOM.render is no longer supported in React 18" 현재 기준 리액트는 Version 18.1.0이 공개돼 있다. CRA(create-react-app)로 React 프로젝트를 생성하면 18.1.0 버전이 다운로드하여진다. 하지만 버전이 달라지면 항상 이전 버전에서 더 이상 사용하지 않는 것들이 발생하게 되는데, 18.0.0 버전부터 ReactDOM.render을 사용하지 않는다는 에러가 나온다. 사실 아직 나는 한 번도 보지 못했는데, 동기분의 에러 메시지를 통해 처음 알게 되었다. 17 버전 이하를 사용하다 18 버전으로 버전업을 한다고 했을 때 만날 수 있는 에러라고 생각해서 정리를 하려고 마음을 먹었다. ReactDOM.render는 index.js 파일에서 찾아볼 수 있는데, 우리가 흔히 보던 React의 index.js 내부 내용이다.(조금 간..
썸네일 순수 함수와 비순수 함수 🚀 순수 함수? 비순수 함수? 함수라면 그냥 함수인 거지 순수 함수는 뭐고 비순수 함수는 뭐일까? 순수 함수와 비순수 함수에 대해 얘기하기 이전에 함수형 프로그래밍에 대해 얘기해보려고 한다. 자바스크립트는 주로 객체지향 프로그래밍과 함수형 프로그래밍으로 나뉘는데 객체가 기본이 되는 프로그래밍을 객체지향 프로그래밍이라고 하고, 함수형 프로그래밍은 말 그대로 함수가 기본이 되는 프로그래밍을 의미한다. 왜 갑자기 함수형 프로그래밍 이야기가 나왔느냐!? 궁금할 수 있다. 함수형 프로그래밍을 사용하는 이유가 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 사용하기 때문이다. 그래서 순수 함수는 뭐고 부수효과는 뭔데? 바로 알아보자 순수 함수 & 비순수 함수(feat. ..
라이브러리 브랜드 그룹 | 공대생의 개발자 도전기

티스토리툴바