본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클166

디프만 준비해보기 (두둥-탁) 보호되어 있는 글 입니다. 2023. 10. 19.
배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 공유하고 싶다면? 목차 · 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 · Ngrok 란? · Ngrok 설치해보기 · Ngrok 실행해보기 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 사이드 프로젝트를 진행하고 있을 때였다. 퍼블리셔가 따로 없었기 때문에 퍼블리싱 업무도 도맡아 디자이너와 함께 상의해 Zepling과 Figam 툴을 사용하여 협업을 진행하였다. 매 회의때마다 `제 이번 프론트엔드 개발은 이렇게 진행을 했구요, 이렇게 UI를 구현해보았어요` 라고 말을 해도 팀원들은 끄덕끄덕, PPT로 간신히 캡쳐한 시각적인 자료가 없었기 때문에 배포를 하기 전까지는 디자이너가 자유롭게 서비스에 들어와 구현된 화면을 같이 공유해 볼 수 없다는 것이 정말 불편했.. 2023. 10. 16.
아이패드의 분기처리, 그러니까 브라우저에서 아이패드인걸 어떻게 구분해요? 목차 · 왜 이 글을 쓰게 되었을까요? · 아이폰과 아이패드 구분 방법 · 레퍼런스 왜 이 글을 쓰게 되었을까요? 회사 업무를 진행하면서 다양한 환경에서 에디터가 사용되어야하기 때문에, 크로스 브라우징 환경을 워낙 많이 다루게 되었다. 심지어 IE까지 지원을 하기 때문에 크로스 브라우징 환경에서의 적응은 더더욱 중요해졌다. 이슈 중 에디터의 내용이 사파리의 모바일 환경에서 이미지 하이라이트가 되었을 때 하이라이트가 에디터 밖으로 노출되는 현상이 일어났고, 이에 따른 예외처리가 필요했다. 아이폰의 경우는 모바일에 따른 UserAgent 값이 출력이 잘 되지만 아이패드의 경우는 데스크톱으로 값이 출력되는 것을 확인했다. 그렇다고, 데스크톱에 관련 CSS를 적용한다고 하면 해당 이슈를 수정한다고 해도 다른 브.. 2023. 9. 2.
대체 Yarn을 왜 사용해요? 목차 · Yarn이 무엇이길래 많이 사용해요? · Npm과 Yarn의 차이 · Yarn 설치 방법 · 레퍼런스 Yarn이 무엇이길래 많이 사용해요? Yarn은 2016년 페이스북에서 개발한 패키지 관리자이다. React와 같은 프로젝트를 진행하며 겪은 어려움을 해결하기 위해 개발이 되었고, Npm과 같은 기능을 수행하나 Npm 레지스트리와 호환하면서 속도나 안정성 측면에서 Npm보다 향상이 되었다. Npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행하는 특징이 있는데, 이 특징은 편리하지만 안정성을 위협할 수 있다. 이에 따라 보안 시스템에 몇가지 취약성이 발생하기도 하며 나중에는 이러한 부분들이 커져 심각한 문제가 발생할 수 있다. Yarn은 yarn.lock 또는 packge.json 파일에 .. 2023. 8. 28.
3개월 안에 토스 코어에서 사용하는 모든 기술 스택 찍먹하기 목차 · 토스라는 흥미로운 조직 · 토스 코어 챕터의 모든 기술 스택 토스라는 흥미로운 조직 대학 생활을 진행하면서, 프로젝트 기획 및 개발을 진행하면서 가장 큰 레퍼런스로 참고했던 곳이 `토스`라는 서비스였다. 토스를 통해 간접적으로 UX에 관련된 부분을 많이 배우기도 하였고, 토스에서 진행하는 NEXT 챌린지를 통해 스스로 많이 돌아보는 시간을 가질 수 있었다. 토스에서는 자체적으로 만드는 서비스가 많기 때문에, 토스라는 조직은 내가 너무나도 흥미로운 조직이면서 동시에 내가 발전을 위해서라면 목표성으로 잡고 가야하는 목표치의 일부분 중 하나였다. 우연치 않게 회사를 입사하면서 스스로의 커리어를 정리하기 위해 링크드인에 가입을 하게 되었는데, 토스 테크 HR을 담당하시는 분과 네트워킹을 하게 되었다. .. 2023. 8. 27.
정든 멋쟁이사자처럼을 떠나며 목차· 멋쟁이사자처럼을 어떻게 시작하게되었나면요· 일반 교육생 신분이었던 내가 학교 대표가 되기 까지· 나에게 멋쟁이사자처럼이란멋쟁이사자처럼을 어떻게 시작하게되었나면요 나는 고등학교 때 컴퓨터를 너무 많이 좋아하던 학생이었다. 고등학교 때 컴퓨터 동아리를 만들어 친구들과 함께 조그마한 웹 사이트를 만들기도 하고, 생활기록부에 컴퓨터 이야기가 많던 그런 학생이었다. 운이 좋게 고등학교를 졸업하고 집 주변 대학교에 입학을 하면서 사람들과의 네트워킹을 좋아하고, 새로운 배움에 대해 즐거움을 느끼는 것이 행복했기에 우연히 신입생의 용기로 `멋쟁이사자처럼` 이라는 웹 테크 동아리에 무작정 지원을 하게 되었다. 한달이라는 시간 동안 자기소개서를 쓰고, 면접에서는 실제로 회사에서 쓸법한 자기소개서라는 말을 들을 정도.. 2023. 8. 20.
Node OpenSSL 3.0 문제를 겪어보셨나요? 목차 · 회사 업무 중 처음 보는 에러를 마주하다. · OpenSSL.. Hash.. 이게 도대체 뭐에요? · OpenSSL이 뭐에요? · OpenSSL 문제를 겪었을 때 회사 업무 중 처음 보는 에러를 마주하다. 회사 업무에서는 주로 바닐라 자바스크립트를 이용해 개발을 진행하지만, 평소 사이드 프로젝트에서는 신기술을 사용하는 것이 너무 재밌어 리액트 경험을 살려 리액트 관련 업무를 진행하게 되었다. 아무래도 현재 매출액의 코어 부분을 담당하는 부분의 일부분을 담당하니 비록 최신 코드는 아니지만, 클래스 컴포넌트로 이루어진 코드를 받게 되었다. 클래스 컴포넌트에서 함수형 컴포넌트로 변환 과정을 진행하고, 보통 현직 프로젝트에서는 CRA를 통한 프로젝트 생성보다는 Webpack을 이용해 번들 사이즈를 줄이.. 2023. 7. 17.
RESTful하다, REST하다? 목차 · REST란? · REST 구성요소 · REST의 특징 · REST에서 가장 중요한 중심 규칙 2가지 · REST의 장점 · REST의 단점 · REST API는 무엇일까? · REST API의 설계 원칙 · RESTful이란? REST란? · REpresentational State Transfer의 약자 · 자원을 정의하고 자원에 대한 주소를 지정하는 네트워크 아키텍처의 모음 · 자원(Resource)의 표현(Representation)에 의한 상태 전달 REST 구성요소 Resource(자원) - URI · 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. · 자원을 구별하는 ID는 HTTP URI이다. · Client는 URI를 이용해서 자원을 지정하고, 해당 자원의.. 2023. 3. 29.
웹 접근성을 왜 지켜야해요? 목차 · 웹 접근성은 무엇일까 · 웹 표준과 웹 접근성의 차이는 무엇일까 · 웹 표준을 지킨 웹은 아래와 같은 장점을 가진다. · 웹 접근성 가이드 · 대체 텍스트 · 그 외에 준수해야할 것이 있을까? 웹 접근성은 무엇일까 모든 사람들에게 평등하고 공평한 웹의 이용을 위해 웹 접근성이라는 것이 만들어졌다. 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들 (장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위해 스크린 리더기, 마우스 스틱 등 보조 기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 웹 접근성이 좋게 해야한다. 웹 표준과 웹 접근성의 차이는 무엇일까 우리가 흔히 알고있는 웹 표준이라는 정의는 누군가가 어떤 브라우저 및 기기를 통해서 웹에 접속했을 때 동일시한 내용을 전달받아야.. 2023. 3. 29.
반응형

티스토리툴바