꽁꽁 얼어붙은 티스토리를 떠나 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..
썸네일 멋사 프론트엔드 스쿨 최종결산 멋사 프론트엔드 스쿨을 마치며 2022년 3월 28일부터 시작한 멋사 프론트엔드 스쿨, 길게만 느껴졌던 4개월이란 시간의 봄과 같이 지나갔다. 이 글은 멋사를 지원했을 때부터 끝난 지금까지의 발자취를 좇는 글이다. 1️⃣ 지원과 합격 처음 시작은 자소서였다. 사실 정확히 항목은 기억나지 않지만 여느 자소서와는 비슷하면서도 다른 느낌을 주었던 것 같다. 능력을 배제하고 오로지 열정만을 원했던 느낌이라고 해야 하려나,, 사실 이제 와서 다시 생각해보니까 그랬던 것이지 처음 항목들을 만났을 때는 느끼지 못했던 것 같기도 하다. 그래도 정성스레 한 글자, 한 글자 마음을 담아 작성했다. 그 마음이 전달됐는지 1차 합격 문자를 받을 수 있었다. 2차 과제는 로그인 페이지 구현과 영상 과제였다. 사실 나는 로그인 ..
썸네일 Storybook [초급자용] (타입스크립트 X, interaction X) 이 글을 쓰게 된 이유는 아직 한국어로 작성된 스토리북 자료들이 몇없고, 부담없이 가볍게 볼만한 자료는 정말 극히 드물어서입니다. 컴포넌트들의 UI를 확인하는 목적으로만 가볍게 사용하실 분들을 위해 작성해보겠습니다. (UI를 확인하는 기능만을 사용합니다.) 1. 스토리북이란 대체 뭔가? - 스토리북은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이다. - 실제 웹 어플리케이션의 환경과 별개로 독립적인 컴포넌트 단위의 개발 진행이 가능하게 해주는 도구이다. 이게 도대체 무슨 말이냐 함은 이런식으로 button 컴포넌트들에 대한 storybook 코드를 짜게 된다면 위와 같이 어플리케이션 환경과 별개인 독립적인 환경에서 컴포넌트들의 UI를 확인해볼 수 있다. 이렇게 컴포넌트 단위의 UI 개발을 도와주는 도..
썸네일 멋사 프론트엔드 스쿨 13, 14주차 회고 이번 회고는 기존 회고와는 다른 회고입니다. 그냥 색다르게 회고를 쓰고 싶어서 다르게 작성한다기보다는 현재 내 상태가 그리 좋지 않았습니다. 이 회고를 작성하면서 마음을 다잡고자 글을 작성합니다. 교육이 한달이 남은 이 시점에서, 최근의 나의 태도에 대해 돌아보게 되었습니다. 리액트 수업이 끝난 이후 시점부터 급격하게 수업 집중도가 하락했습니다. 그렇다고 다른 공부도 하지 않았던 것 같아요. 좋지 않은 것 같습니다. 집중력이 거의 바닥을 치고 있습니다. 앞으로 수업이 3번 정도가 남았고 이후는 프로젝트인데 남은 수업은 정말 열심히 듣겠습니다. 거의 반성문 수준의 글을 작성할 듯,, 프로젝트 시작과는 다르게 뭔가 열정적이지 못한 제 모습을 봤습니다,, 초반에는 '이렇게 해보고 싶다. 저렇게 해보고 싶다.'..
썸네일 멋사 프론트엔드 스쿨 12주차 회고 우선은 리액트를 본격적으로 하기 시작했다. 사실은 조금 어려웠음 내가 하는 리액트는 그냥 아무것도 아니었구나 싶었다. 컴포넌트화라는 가장 기본적인 틀조차 지키지 않았던 그 시절 코드들,, 다 뜯어 고쳐야 할 것 같다. 금요일 특강시간에 아토믹 패턴과 스토리북에 대해서 특강을 해주셨는데, 진짜 너무너무 반가웠음 ㅎㅎ 내가 공부하고 있는 것이 나오니까 수업 집중도 훨씬 잘 됐고, 질문도 궁금했던 것들을 다 물어봐서 좋았다. 금요일 이후 주말에는 사멍일냥 팀원 분들과 함께 시간을 보냈다. 처음으로 다같이 모이게 됐는데 너무 좋았다. 진짜 너무 재밌었고 행복했다. 앞으로도 계속 보고싶네요 저희 팀원들 ㅎㅎ 프로젝트 팀원분들 역시 너무나도 좋은 분들과 함께 하게 됐다. 다들 열정이 넘치시고, 뭐라도 하나 더 해보..
라이브러리 브랜드 그룹 | 공대생의 개발자 도전기

티스토리툴바