본문 바로가기

전체 글

디자이너, 개발자 소통 - Code Painter 이번에 처음으로 디자이너와 함께 약 2달간 프로젝트를 진행할 수 있게 되었다. 나는 이번 프로젝트에서 디자인과 전공 짬빠(?)로 개발자와 디자이너간 소통 역할을 담당하게 되었다. 나는 이 역할을 "Code Painter - CP " 라고 부르기로 했다. CP는 개발자들의 코드와 의견들을 코드를 잘 알지 못하는 제 3자에게 그림으로 그려줄 수 있을 정도로 쉽게 설명하는 사람이어야 한다고 생각한다. 나름 디자인 지식을 배운 사람이라 자만하며 소통을 진행했지만 몇 주가 지날수록 소통에 벽을 느끼며 좌절할때가 많았다. 그 시간동안 느낀 문제점은 이렇다 - 용어의 사용 : 서로의 전문용어를 이해하기가 초반에 쉽지않다 - 기대와 현실의 차이 : 기획과정에서 기술적 어려움을 이해하기에 시간이 오래걸린다 - 의도 해석.. 더보기
Masonry 레이아웃 구현하기 ( + react-responsive-masonry 라이브러리 ) 벽돌을 쌓아올린 형태의 레이아웃인 Masonry 레이아웃 작업하기 이번에 팀원들과 함께 작업한 "제주도의 나만의 스팟을 촬영하여 공유하는 사이트" 인 Picspot의 메인페이지이다. 최대한 많은 양의 사진들을 한눈에 보일 수 있게 하기 위해 Masonry 레이아웃 디자인을 채택했다. 이전 작업에서도 비슷한 작업을 한 적이 있다. 이 작업을 진행할 땐 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); grid-gap: 10px; grid-template-areas: 'a b c' 'a d d' 'e e e' 'f f f' 'g g g' 'h h h' 'i i i'; alig.. 더보기
Next.js에서 ReactQuery를 이용한 데이터 관리 및 CRUD 기능 구현 Next.js으로 작업한 프로젝트에 React-Query를 이용하여 CRUD 기능을 구현하였다. Firebase를 이용하여 데이터를 관리하였다. 먼저 이번 프로젝트에 React-Query를 사용한 이유는 이렇다 redux를 사용하면서 미들웨어를 사용하기엔 너무 무거움 서버 상태와 클라이언트 상태를 독립적으로 관리하기 위해 캐싱 기능을 활용하기 용이(사진을 이용한 서비스가 많기에 캐싱기능을 활용하기로 결정) 포스터를 게시하는 코드 //* 이미지 업로드 const [imageUpload, setImageUpload]: any = useState(null); const imgPath: string = uuidv4(); let postState: any = { title: title, content: conte.. 더보기
🍈 [TIL] 패스워드 전송 및 보관 방법 사용자 패스워드를 전송하고 보관하는 방법을 무엇인가? 유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송합니다. 평문(암호화 되기 전 메시지) 을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할 수 있지만 다이제스트로는 원본데이터를 구할 수 없어야 합니다. 이것을 단방향이라 합니다. 단방향 해시함수는 브루트포스 공격으로 쉽게 당할 수 있기 때문에 이를 보완하기 위해 입력된 다이제스트를 N번 반복해서 생성하는 것인 key stretching과 원문 패스워드에 임의의 문자열을 추가하여 해싱하는 것인 salting을 이용해 보안의 강도.. 더보기
🍈 [TIL] Semantic HTML? / Redux? 질문 1) Semantic HTML의 필요성을 예시를 통해 설명해주세요. 답변) Semantic HTML은 웹 문서를 작성할 때 HTML태그를 의미적으로 사용하여 웹 페이지의 구조와 의미를 명확하게 표현하는 방법을 말합니다. 즉, 웹 페이지의 각 부분이 무엇을 나타내는지를 의미적으로 정확하게 표현하는 것입니다. 이것은 웹피이지의 접근성, 검색엔진 최적화(SEO), 유지 보수의 용이성 등을 개선하는데 도움이 되며, 웹 페이지의 의미와 구조를 이해하기 쉽게 만들어 줍니다. 시맨틱 태그의 예시로 ,등의 태그가 있습니다. 이 태그를 사용하면 제목과 목차를 구분하고 웹 페이지의 구조를 명확하게 표현할 수 있으며, 사용자가 페이지의 구조를 이해하기 쉽게 만들어 줄 수 있습니다. 또한, 검색 엔진은 제목과 목차를 통.. 더보기
🍈 [TIL] useRef ? / Cookie의 MaxAge, Expires 질문 1) useRef가 필요한 상황을 예시를 들어 설명해주세요. 답변) useRef는 ReactHocks 중 하나로, 함수형 컴포넌트에서 DOM요소 또는 다른 값을 저장할 수 있는 객체를 생성하는 데 사용됩니다. useRef는 내용이 변경될 때 그것을 알려주지는 않지만, useRef로 생성한 객체는 컴포넌트가 랜더링될 때마다 동일한 객체를 반환하므로, 이전 값을 유지할 수 있습니다. 이는 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다. useRef가 필요한 상황으로는 1. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있습니다. 이를 통해 setTimeout, setInterval을 통해서 만들어지 id, scroll위치 값을 관리할 수 있습니다... 더보기
🍈 [TIL] require,import? / const 질문 1) require와 import의 차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? 답변) 두가지 문법 모두 javascript에서 모듈을 불러오는 방식입니다. 둘다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 지니고 있습니다. require은 NodeJS에서 사용되는 CommonJS 키워드이고, import는 ES6에서 새롭게 도입된 키워드입니다. 그러므로 import는 ES6이후의 버전에서만 사용이 가능합니다. 두가지의 대표적인 차이점으로 require은 파일에 들어있는 곳에 남아 있으며 import는 항상 맨 위로 이동되어 있습니다. 일반적으로 import는 사용자가 필요한 모듈부분만 선택하고 로드할 수 있기 때문에 더욱 선호하며.. 더보기
🍈 [TIL] This ? / 브라우저 저장소 질문 1) this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? 답변) this는 함수를 호출할때 생성되는 실행 컨텍스트 객체입니다. 현재 실행 중인 함수 내에서 this 키워드가 사용된 위치에 따라 참조하는 객체가 동적으로 결정됩니다. 즉, 함수가 호출될때 결정이되는 것입니다. this가 가리키는 대상은 어떻게 this가 호출되는지에 따라 다릅니다. 전역공간에서의 this는 전역객체를 가리키고 있습니다. 메서드로서 호출할 때 그 메서드 내부에서의 this는 호출한 주체에 대한 정보가 담겨저 있습니다. 여기서 호출한 주체란 함수명 바로 앞의 객체입니다.생성자 함수 내부에서의 this는 새로만들 구체적인 인스턴스 자신이 됩니다. 질문 2) .. 더보기

티스토리툴바