위어드섹터 공식 블로그

보통 개발자라면 전문적으로 배우지 않아도 소프트웨어에 대한 기초개념과 지식을 자연스럽게 습득하게 됩니다. 그러나 디자이너에겐 생소한 단어와 정의가 많습니다. 오늘은 소프트웨어 회사에서 일하는 디자이너를 위한, 사실은 기본적으로 알고 있으면 좋은 소프트웨어 기초지식을 소개하고자합니다. I 하드웨어와 소프트웨어는 무엇인가? 하드웨어 : 손으로 만질 수 있는 형태가 있는 장치 소프트웨어 : 손으로 만질 수는 없지만 하드웨어를 움직이게 하는 명령어들의 모임 초기 소프트웨어는 하드웨어를 효과적으로 사용하기 위한 수단이었습니다. 그러나 기술의 발전으로 현재 소프트웨어는 우리 생활에 없어서는 안 될 정도로 큰 부분을 차지하고 있습니다. 효율성을 높이기 위해서라도 소프트웨어의 발전은 필연적인 과정이었다고 생각합니다. ..

프로젝트를 진행하면서 버튼에 마우스를 올리면, 최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다. 무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :) 1. 시도했던 방법 처음에 저는 아래와 같이 스타일을 주었습니다. a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다. b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다 자연스럽게 이동되도록 transition 효과도 주었습니다:) 이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover ..

리액트 네이티브 기반의 프로젝트를 진행하던 중, 버튼을 화면의 제일 하단으로 배치하고 나머지 영역은 콘텐츠로 채우는 디자인을 퍼블리싱하게 되었습니다. , 태그를 최상단에 작성했을때, 이 태그와 최하단 버튼에 아래와 같이 flex : 1 을 주면 원하는 대로 스타일이 적용되었습니다. test: { flex:1, } 그런데, 태그를 최상단에 작성 후, 위와 같이 스타일을 주었으나 적용되지 않았습니다. 알고나면 쉬운 해결 방법이지만 무엇이 문제인지 모를 때는 답답한 상황입니다..! 이번 글에는 태그를 최상단에 작성했을 때, 최하단으로 버튼을 정렬하는 방법을 공유하려 합니다. 먼저, 제가 디자인 받은 시안은 아래와 같습니다. 텍스트 콘텐츠 영역이 태그로 되어있습니다. [ 시도했던 해결 방안 ] 위 문제를 겪고 ..

이번 게시물은 JavaScript의 반복문을 이용해 삼각형을 구현 하려고 합니다. 단순해 보이면서 어려운 과정이지만 반복문의 기초와 구조를 이해함과 동시에 로직 구현에 있어 많은 동기부여를 받았고, 입사 후 첫 과제이기에 풀이 과정을 기록하려고 합니다. 구현 조건으로는 input 박스 안에 숫자를 넣고 버튼을 클릭하면 입력 숫자에 맞게 삼각형이 생성되어야 합니다. 반복문을 사용해서 구현했고, 반복문은 어떤 명령을 반복적으로 실행해야 할 때 사용되는 언어입니다. 아래 예시를 통해 확인을 해보도록 하겠습니다. for 문은 아래와 같은 순서로 진행됩니다. 가장 먼저 초기화 식인 let i = 0 이 실행되며 한 번만 실행됩니다. 초기화식이 종료되면 조건식이 실행되고 i = 0이므로 평가 결과는 true 입니다..

진행 중인 프로젝트에서 펼쳐보기 버튼을 누르면 상세보기가 되고 생략 버튼을 누르면 생략이 되는 버튼을 컴포넌트가 추가될 때 자동으로 생성되는 것을 목표로 구현해보았습니다. 처음 시도에서는 컴포넌트를 보여주는 것을 관리하는 state를 각각 만들어서 독립적으로 관리하려고 했습니다. 하지만 그렇게 되면, 추가 버튼을 눌러서 컴포넌트를 새로 만들면 새롭게 변수를 만들어야 하는데, 변수를 자동 생성하는 게 쉽지 않았고 변수가 많아짐에 따라 코드의 가독성이 저하되고 유지 보수하는데 어려움이 있는 문제가 발생하였습니다. 이후, 컴포넌트를 보여주는 Boolean 값들을 가지는 배열을 state로 만들었습니다. 그렇게 함으로써 새롭게 컴포넌트를 만들 때, 배열에 값을 push를 해서 관리하기 용이하도록 하였습니다. 이..

GA를 처음 공부할 때 가장 먼저 배운건 세션의 개념입니다. 먼저 세션(session)이란 단어를 사전에 찾아보면 ‘기간’, ‘시간’이라는 뜻을 갖고 있습니다. 1. GA에서 세션은 뭐야?? : 사이트에 들어온 사용자가 접속한 시점부터 이탈까지 상호작용한 시간을 말합니다. 예를들면 사용자A가 페이지를 이것 저것 클릭해 보거나, 물건을 사거나 등등 다양한 활동을 하는데 이 사이트를 닫기 전까지의 기간을 하나의 세션으로 보게 됩니다. 사용자가 페이지에 들어와서 행동이 없을 때 -> 세션 X 사용자가 페이지에 들어와서 행동이 있을 때 -> 세션 O 2. 그럼 방문수랑 뭐가 다를까요? GA문서에 따르면 이 둘의 차이는 다음과 같이 나와있습니다. : 방문수는 세션의 첫 번째 페이지뷰 또는 화면 조회와 함께 누적되..

AJax(JQuery api)를 서버와 통신할 때 사용해보긴 했지만, 그 원리 및 통신의 과정을 몰랐습니다. 그래서 이 부분을 더 공부해보려고 AJax를 Vanilla JS로 구현해보았습니다. MDN 문서로 ajax와 관련된 문서를 찾아보니 아래의 과정을 거치는 것을 알게 되었습니다. 첫째로, XMLHttpRequest 라는 web api를 이용하여 통신의 위한 객체를 만듭니다. 둘째로, 클라이언트에서 아래의 a,b,c를 고려하여 서버에 요청을 보냅니다. a. 어떤 서버(도메인)와 연결하는가?, b. 어떤 http method를 이용하는가? (ex. GET, POST etc) c. 브라우저에서 서버에서 받을 문서를 해석할 준비를 할 수 있게끔 어떤 문서의 타입을 요구하는가? 출처: https://deve..