전체 글

SEO(Search Engine Optimization, 검색 엔진 최적화)

SEO(Search Engine Optimization, 검색 엔진 최적화) 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 상위에 노출될 수 있게끔 만드는 작업 On-Page SEO : 웹 사이트 내부에서 진행할 수 있는 SEO, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법 Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없습니다. 1. 요소 요소의 자식 요소로 작성 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어짐 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아짐 같은 키..

리턴 값이 있는 함수의 경우 꼭 예외 처리하기!

문제 객체와 키를 입력받아 키에 해당하는 값이 배열인 경우, 100 보다 작은 요소들만 갖는 배열을 리턴해야 합니다. 입력 인자 1 : obj 임의의 속성을 갖는 객체 인자 2 : property string 타입의 키 출력 배열을 리턴해야 합니다. 주의 사항 반복문(for, while) 사용은 금지됩니다. 대소 비교는 number 타입에만 적용합니다. 주어진 키에 해당하는 값이 배열이고, 100 미만인 요소가 있는 경우에만 해당 요소를 갖는 배열을 리턴해야 합니다. 그 외의 경우, 빈 배열을 리턴해야 합니다. 주어진 보조 함수(lessThan100)를 사용해야 합니다. 입출력 예시 const obj = { key: [1000, 20, 50, 500], }; let output = getElementsL..

프로그래밍에서의 공백 제거 Case

우리는 프로그래밍을 할 때, 단어의 공백(Space)을 제거하여 문자열로 표현한다. 왜냐하면 공백은 프로그래밍에서 특별한 목적을 가진 키워드로 사용하기 때문이다. 공백을 제거하는 방법에는 4가지가 있다. Camel Case (카멜 케이스) 낙타의 쌍봉처럼 문자열의 첫 문자를 제외하고 단어의 첫 글자마다 대문자로 표현하는 방식. 많은 프로그래밍 언어에서 컨벤션으로 사용된다. thisIsMyComputer Pascal case (파스칼 케이스) 카멜 케이스와 비슷하지만, 파스칼 케이스는 첫 문자도 대문자로 표현한다. ThisIsMyComputer Kebab Case (케밥 케이스) 모두 소문자로 표현하며 단어와 단어 사이를 대시(-)를 이용하여 구분. 스프링의 yml파일이나 url주소에서 사용된다. this..

React 상태 관리 Redux

React에서 상태를 변경해 주기 위해서는 최상위 컴포넌트에서 상태변경 함수를 Prop로 상태변경이 일어날 컴포넌트까지 전달 해 주어야 합니다. 컴포넌트가 2-3개 일땐 괜찮습니다. 하지만 2-30개 라면 ? 코드의 가독성이 나빠질 수 밖에 없습니다. 이를 해결 하기 위해 Redux 로 상태를 관리할 수 있습니다. Redux는 전역상태를 관리할 수 있는 저장소인 Store 를 제공합니다. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따..

CSS Component Storybook

왜 CSS 컴포넌트가 필요한가? 다음과 같은 상황을 겪어본 적이 있을 것이다!! class, id 이름을 짓느라 고민한 적이 있다. CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다. CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다. 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다. 위와 같은 문제를 해결하기 위해 컴포넌트화가 필요했다. CSS 컴포넌트화를 위한 노력 함께 프로젝트를 진행하며 CSS 를 작성하는 데에도 일관된 패턴이 필요해 졌다. CSS 작업을 효율적으로 하기위해 구조화 된 CSS 가 필요했고, SASS Syntactically Awesome Style Sheets 가 등장했다. 이는 자바스크립트처럼 color,margin, width 등의 값들을 변수로..

스터디 토이프로젝트를 마무리 하며..

11/16일 스터디에서 진행한 토이프로젝트가 데드라인 23일까지 단 하루가 남았다. 11/16 회의를 통해 첫 토이 프로젝트의 주제를 '스터디소개' 정했다. zep에서 각자 가져온 레퍼런스들을 발표하고, pigma의 pigjam을 통해 다 함께 회의를 하며 각 페이지에 들어갈 콘텐츠와 컨셉 등을 정했다. 메인팀 / 멤버소개팀 / 프로젝트소개 팀 으로 나누었고, 나는 프로젝트소개 팀을 맡았다. 회의내용을 토대로 pigma 디자인 툴을 이용해 와이어프레임을 만들었다. 와이어 프레임을 토대로 html과 css를 하드코딩하여 틀을 만들었다. 하드코딩을 하며 가장신경 쓴 부분은 class name 이었다. 다른 팀들과 페이지를 나눠서 하기때문에 merge 했을 때, 충돌이 나지 않게 하기 위해 클래스 명 앞에 p..