본문 바로가기
반응형
프론트엔드 개발자, 디자이너의 협업과 태도 빠르면 이번달, 다음달부터 디자이너와 협업이 시작될 것 같다. 나는 항상 디자이너와 협업을 어떻게 하는지 궁금해했다. 프론트엔드 개발자는 디자이너, 백엔드 개발자와 의사소통을 할 상황이 많다는 것을 자주 보았다. 특히 '디자이너와 협업은 어떤식으로 진행이 될까?'라는 궁금증이 컸다. 하얀 백지인 상태에서 디자이너와 협업할 상황에 직면하게 되면 우왕좌왕 할 것이 뻔하기 때문에..😵 주말을 활용해 프론트엔드 개발자는 디자이너와 어떻게 협업을 하는지, 그리고 가져야할 태도에 대해서도 알아봤다. 현업에서는 디자이너, UX 디자이너가 대략적인 프로토타입 버전을 개발팀에 전달 해준다 디자인에서는 담을 수 없는 반응형, 에러처리, 로딩상태 등은 개발팀에서 피드백을 많이 준다 적극적으로 빠진 부분이 무엇인지, 어떻게 .. 2021. 12. 11.
배포 자동화? CI/CD가 무엇일까? 회사에서 프론트엔드 개발 환경에 대해 고민하고 구축해볼 기회가 생겼다. 그러던 중에 팀원들 전체에 도움이 될 수 있는 배포 자동화, CI/CD에 대해 공부하게 되었다. 해당 개념에 대해 알아보고 이해하는 시간을 가져보자. 어쩌다 배포 자동화, CI/CD가 생기게 된 것일까? 반복되고 지루한 절차들은 자동화를 하고 싶다. 보통 배포하는 과정은 고정적이고 변경된 코드를 적용하기 위한 잦은 배포는 생각보다 시간을 많이 소비할 수 있다. 즉 개발자의 리소스가 비효율적으로 활용되기 때문에 배포 자동화 시스템이 필요하다. 배포 자동화 시스템에서의 CI/CD CI(Continuous Integration, 지속적 통합) CI/CD의 'CI'는 개발자를 위한 자동화 프로세스인 지속적 통합(Continuous Integ.. 2021. 12. 9.
'digital envelope routines' 에러 시 해결 방법(Node.js 버전 관리) React Admin을 사용해보고 싶어서 CRA로 세팅을 했는데 서버가 켜지지 않는 에러가 발생했다. 처음 있는 일이라 당황하다가 에러 키워드로 구글링해보니 금방 해결방법을 찾을 수 있었다. 알고보니 Node.js 버전을 제일 최신으로 변경한 게 문제가 되었다. (17.2.0 버전) Error message "error:0308010C:digital envelope routines::unsupported" Error message "error:0308010C:digital envelope routines::unsupported" I created the default IntelliJ IDEA React project and got this: Error: error:0308010C:digital envel.. 2021. 12. 1.
웹팩(Webpack) 이해하기 - 개발 서버 저번 글에 이어서 웹팩 개발 서버에 대해 알아보자. 웹팩 개발 서버 외에도 VS code의 Extension인 Live Server나 Node.js로도 로컬 서버를 구현할 수 있다. 이런 여러 선택지 중에서 웹팩 개발 서버를 통해 얻을 수 있는 이점은 무엇일까 생각을 해봤다. 운영 환경과 비슷하게 만들기 개발 환경에서도 운영 환경과 비슷한 환경을 만들어 주는 것이 좋다. 운영 환경과 맞춤으로써 배포 시에 잠재적 문제를 미리 확인하고, 예방할 수있다. 이런 노력은 타입스크립트를 사용하는 것과 비슷한 맥락이다. 협업에서의 이점도 있지만 타입을 지정하여 운영 환경의 문제들을 예방할 수 있다. 학습 비용 감소 처음엔 Node.js를 통해 서버를 구현하고 목업 API 작업을 했었다. Node.js를 공부하니 Ex.. 2021. 11. 22.
87번의 탈락, 9번 면접 본 후기 (feat.프론트엔드 개발자) 아..정말 긴 터널과 같은 취업 준비 기간이었다. 1년 넘게 프론트엔드 개발자 취업 준비를 하면서 그동안 느꼈던 점들, 경험들을 정리 해보려고 한다. 아니..왜 서류 합격도 안되지? 자바 백엔드 과정으로 국비지원 학원을 6개월만에 수료를 하고, 프론트 엔드 개발자가 되고 싶었다. 사실 학원을 다니기 전엔 프론트, 백엔드의 개념 없이 그냥 개발자가 되고 싶어서 들어가게 되었는데 HTML, CSS가 너무 재밌었다. 그리고 당시에 난 이클립스의 UI가 너무 싫었다. 딱딱하고 재미가 없었기 때문에 VS Code로 테마도 적용하고, 코딩도 멋있게 꾸며서 하고 싶었다. 지금와서 생각해보면 내 나름대로 코딩에 재미를 붙이기 위해 했던 행동이었던 것 같다. 그 당시엔 한마디로 비전공생, 무스펙이었던 것이다. 블로그도 .. 2021. 11. 19.
웹팩(Webpack) 이해하기 처음 리액트를 배울 때 이런 생각이 들었다. "이렇게까지 어려운 문법을 배우면서 굳이 써야하나? 내 개인 프로젝트에 쓰일 정도로 편하긴 한가?" 반은 억지로 하다보니 따라치기 수준의 학습밖에 하지 못했다. 그러다 Vanilla JS로 SPA 만들기같은 과제를 두 번이나 하게 되면서 리액트를 쓰는 이유를 알게 되었다. 아니, 좋아하게 되었다. 리액트에선 많은 것들이 추상화 되어 있었고 굉장히 편리한 도구였다. 이제는 "고작 이 문법으로 이렇게나 많은 것들을 할 수 있다니"로 생각이 바뀌게 되었다. 그렇다면 CRA에서 기본으로 깔려있는 이 웹팩도 알아볼 필요가 있다. 분명 이유가 있을 것이다. 내 평일은 물론이고 주말까지 시간을 순삭하게 만든 웹팩을 한번 살펴보자. ✏️ 웹팩을 배우면서 제가 개인적으로 느꼈.. 2021. 11. 16.
자료구조 더 알아보기 - 해시 테이블 자료구조 더 알아보기 - 배열 글에 이어서 이번엔 해시 테이블(hash table)에 대해서 알아보자. 해시 테이블은 여러 프로그래밍 언어에 내재되어 있고 자주 사용하는 자료구조이다. JS는 객체(object), Python은 딕셔너리(dictionary), Go는 맵(map) 등..많은 언어에서 사용된다. 해시 테이블은 키(key)와 값(value)으로 데이터를 매핑하여 자료를 정리한다. 예시로 사전을 떠올려보자. 찾는 단어는 키가 되고, 단어에 해당하는 설명은 값이 될 수 있다. 이런게 어떤 장점을 가져올까? 자바스크립트 코드로 배열과 해시 테이블을 비교해보자. fruits = [ { kind: '🥑', price: 10 }, { kind: '🍓', price: 8 }, { kind: '🥕', pri.. 2021. 11. 10.
반응형

티스토리툴바