🙌잘못된 설명에 대한 지적이나 조언의 댓글을 환영합니다🙌

 

tiles란

View page로 제공하는 jsp 파일의 중복되는 요소를 페이지 조각으로 나누어 관리하도록 돕는 템플릿 구성 프레임워크

https://tiles.apache.org/framework/index.html

 

Apache Tiles - Framework - Home

 

tiles.apache.org

 

tiles의 간단 사용법

프로젝트에서 tiles를 사용하기 위해서는 pom.xml 파일에서 maven dependency를 가장 먼저 추가한다.

	<!-- tiles framework -->
	<dependency>
       <groupId>org.apache.tiles</groupId>
       <artifactId>tiles-extras</artifactId>
       <version>3.0.8</version>
     </dependency>
     <dependency>
         <groupId>org.apache.tiles</groupId>
         <artifactId>tiles-servlet</artifactId>
         <version>3.0.8</version>
     </dependency>
     <dependency>
         <groupId>org.apache.tiles</groupId>
         <artifactId>tiles-jsp</artifactId>
         <version>3.0.8</version>
     </dependency>

그 다음 Servlet-Context.xml 파일에서 tiles bean 생성이 가능하도록 viewResolver와 Configurer를 설정한다.

- viewResolver: tiles template으로 설정된 파일을 찾아서 렌더링 해주는 역할

<!-- Tiles 뷰 리졸버 -->
	<beans:bean id="tielsViewResolver"
		class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<beans:property name="viewClass"
			value="org.springframework.web.servlet.view.tiles3.TilesView" />
		<beans:property name="order" value="1" />
	</beans:bean>
	<!-- Tiles 설정 파일 -->
	<beans:bean id="tilesConfigurer"
		class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<beans:property name="definitions">
			<beans:list>
				<beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
			</beans:list>
		</beans:property>
	</beans:bean>

 

세번째로는 tiles.xml가 필요하다. 위에서 선언한대로 /WEB-INF/tiles/tiles.xml 위치에 xml파일을 추가한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC 
    "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" 
    "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <definition name="classic" template="/WEB-INF/tiles/layouts/classic.jsp">
    	<put-attribute name="TopMenu" value="/WEB-INF/tiles/components/TopMenu.jsp" />
        <put-attribute name="SideBar" value="/WEB-INF/tiles/components/NewSideBar.jsp" />
    </definition>
    <definition name="*/*" extends="classic">
        <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp" />
    </definition>
</tiles-definitions>

 

위 예제의 classic.jsp처럼 layout용 jsp 파일을 생성한다.

tiles.xml 에서 put-attribute한 name으로 template용 jsp 파일 안에 tiles:insertAttribute하면 템플릿의 코드와 insert된 코드가 함께 렌더링 되어 화면에 표시된다.

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
  <link href="css/common.css" rel="stylesheet">
  <title>project titles</title>
</head>
<body>
  <tiles:insertAttribute name="SideBar" />
  <tiles:insertAttribute name="TopMenu" />
  <tiles:insertAttribute name="content" />
</body>
</html>

 

Reference

 

'FE' 카테고리의 다른 글

[HTML] Spring boot 프로젝트에서 favicon 설정  (0) 2023.01.28
[JS] 타입은 왜 중요한가 (feat. TypeScript의 필요성)  (0) 2022.06.22
[HTML] 다양한 접근성 속성  (0) 2022.03.18
[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05

🙌잘못된 설명에 대한 지적이나 조언의 댓글을 환영합니다🙌

 

favicon이란

웹 브라우저의 탭 영역에 표시되는 홈페이지의 대표 아이콘

favicon.ico 라는 파일명과 확장자로 이미지를 변환시켜 사용한다.

 

favicon 설정을 하게 된 이유

항상 시간에 쫓기는 개발을 할수밖에 없었던 업무 특성상 기능을 붙이는 게 더 중요했기 때문에 홈페이지의 favicon 설정은 뒷전이었다. 하지만 미팅때 실제 유저들을 만나면 해당 웹페이지에 쉽게 접근하고, 구분하기 위해 아이콘을 넣어달라는 요청이 많았다. 간단한 작업이었지만 우선순위가 긴급한 안건들을 처리하고 이제야 시간이 나 프로젝트에 favicon 설정을 시도했고, 간단한 설정이었지만 프로젝트 구조에 따라 해당 파일을 넣어야하는 위치가 달라지기 때문에 시행착오를 겪었다. 구글링을 해도 spring 프로젝트에서 어디에 favicon 파일을 넣고 설정해야하는지 알려주는 글이 없어서 아쉬워서 남겨보는 글이니 누군가에게는 도움이 되길 바란다.

 

프로젝트 폴더구조

어떤 환경설정을 하는지에 따라 달라질 수 있지만, 우리는 src/main/webapp 하위에 resources 폴더가 있고 css, js, font, img 등 웹페이지에서 사용하는 코드들을 폴더별로 분리하여 관리한다. tiles도 사용중이기 때문에 웹페이지의 기본 틀이 되는 classic.jsp 파일의 head 태그 안에 link 태그를 넣어 favicon 설정을 한 뒤 src/main/webapp/resources 폴더 바로 아래에 favicon.ico 파일을 추가하여 설정을 완료했다. 

폴더구조

<link rel="shortcut icon" href="favicon.ico">

 

'FE' 카테고리의 다른 글

[Spring] tiles 간단 사용법  (0) 2023.02.06
[JS] 타입은 왜 중요한가 (feat. TypeScript의 필요성)  (0) 2022.06.22
[HTML] 다양한 접근성 속성  (0) 2022.03.18
[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05

 

본 글은 초보개발자의 입장에서 작성된 글이며, 잘못된 설명이 포함될 가능성이 있습니다.

🙌잘못된 설명에 대한 지적이나 조언의 댓글을 환영합니다🙌

 

 

https://inf.run/dzXn

매일 아침에 출근해 업무를 시작하기 전, 5-10분 동안 깃헙의 잔디를 채울 겸 JS공부를 할 겸 제주코딩베이스캠프의 JS 100제 강의에서 제공되는 문제를 푸는 중이다. 사실 아침에 해설 영상까지 볼 시간은 없어서 문제를 푼 뒤에 답안을 보고 내가 맞게 풀었는지 정도만 확인하고 있는데, 오늘 풀었던 13번 문제를 푸는 과정에서 문득 이런 의문점을 갖게 됐다.

 

제주코딩베이스캠프 Code Festival: JavaScript 100제 - 인프런 | 강의

이 강좌를 통해 문법을 보다 명확하게 이해하시고, 문제 풀이에 대한 자신감을 얻으시길 바랍니다., - 강의 소개 | 인프런...

www.inflearn.com

 

 

const a = ['수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성'];

let num = prompt('숫자를 입력하세요');

console.log(a[num-1]);

사용자로부터 입력값을 받아 해당 순서의 행성 이름을 출력하는 문제였는데, 위 코드가 이번 문제의 답안이었다. 

간단한 문제였고, 무난하게 풀 수 있었는데 내가 생각한 답안은 책에서 제공하는 답안과는 조금 달랐다.

 

const a = ['수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성'];

let num = prompt('숫자를 입력하세요');
num -= 1;

console.log(a[num]);

위 답안이 내가 생각한 방법인데, 책에서 제공하는 답안보다 코드 한 줄이 더 많은 점이 제법 거슬렸다. 

이런 코드를 작성하게 된 이유는 콘솔로 값을 찍다가 console.log(a[num+1]) 을 우연히 실행시켜봤는데 값이 undefined가 나오는 게 아닌가. 그래서 당연히 console.log(a[num-1]) 도 undefined가 나오지 않을까 해서 저렇게 num 계산을 별도로 해주는 답안을 작성하게 됐었다. 사실 책에서 제공하는 답안을 보고 의문이 들었는데, 왜 num+1했을 때는 출력이 안되고 num-1을 했을때는 값 출력이 정상적으로 되는지를 도저히 이해할 수가 없었다. 그래서 구글링도 해봤는데 도저히 어떤 키워드로 검색해야 할지 감이 잡히지 않아 같이 공부하는 동료들에게 질문을 던졌다.

 

 

9시 5분쯤부터 문제를 풀기 시작했는데, 질문한 시간은 24분ㅋㅋㅋㅋ

이렇게 질문을 하고 업무를 보고 있었는데 동료들이 다양한 답을 던져주기 시작했다.

그중 타입 때문에 이런 현상이 발생하는 게 아니냐는 이야기가 있었는데, 정말 유레카스러웠던 순간이었다. 

 

 

콘솔로 타입을 찍어보니 요상한 타입을 뱉어내는 콘솔을 확인할 수 있었다.

동료들이 해당 값의 타입을 찍어 봤을 때 동작이 이상한 것 같다고 의견을 주셔서 확인해보니 정말 이상한 타입이 나왔고, 스스로 문제를 살필 때는 도저히 생각하지 못했던 부분이었던지라 해결의 실마리를 찾은 기분이었다. 사실 JS에서는 타입을 별도로 선언해주지 않고 사용하기 때문에 암묵적 형변환에 의존해서 사용하게 되는데,  포스팅을 하려고 찾아보니 이러한 기능은 가급적이면 사용하지 않는게 좋다고 한다. 내가 겪은 의문점도 형변환 때문에 생겼다고 생각하니 사람들이 왜 가급적 쓰지 말라고 했었는지 체감할 수 있었다.  

 

더 정확하게 이야기하자면, prompt를 통해 받아온 값은 String 형태로 저장되고 있었다.

만약 prompt로 값:1을 입력받아왔다면 a[num]은 숫자 1로 암묵적 형변환이 되어 a[1]의 값인 '금성'이 출력되고,

a[num-1]도 -1을 처리하기 위해 동일한 암묵적 형변환이 발생해 a[0]에 해당하는 값인 '수성'을 출력했던 것이다.

 

그렇다면 왜 a[num+1]만 undefined가 나온 것일까? 

num+1에는 암묵적 형변환이 일어나지 않아서 해당 출력 값이 표시된 것일까?

그건 아니다. a[num+1]인 경우 JS엔진이 이를 a['1'+1] 로 인식해 a[2]가 아닌 a['11']로 처리했고 이후에 형변환이 일어나 a[11]을 출력하려고 보니 배열에 인덱스가 11인 값이 없기 때문에 undefined가 출력된 것이다. 이렇게 보니 간단한 이유인데 이 생각을 못해서 한참 문제와 씨름했던걸 떠올리니 다시 한번 사람들이 왜 타입스크립트를 쓰는지 알 것 같기도 했다🤦‍♀️

 

 

 

 

이러한 문제를 해결하기 위해서는 명시적인 형변환을 사용해주면 된다. prompt를 통해 받아온 입력 값이 String 타입이지만, 나는 해당 값을 Number로 사용할 예정이기 때문에  prompt('숫자를 입력하세요')라는 function을 Number()로 감싸 명시적인 형변환을 해주면 된다. 이렇게 명시적으로 형변환을 시켜준 뒤에는 console.log(a[num+1])을 찍어도 내가 의도한 '지구'라는 출력 값을 표시하게 된다. 

 

오늘도 이렇게 타입을 잊으면 안 되겠다는 엄청난 교훈을 얻었다..🙏

 

'FE' 카테고리의 다른 글

[Spring] tiles 간단 사용법  (0) 2023.02.06
[HTML] Spring boot 프로젝트에서 favicon 설정  (0) 2023.01.28
[HTML] 다양한 접근성 속성  (0) 2022.03.18
[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05

 

아직 완전히 이해못한 정적메서드와 인스턴스 메서드에 대한 개념은 조금 더 공부한 뒤에 수정해두어야겠다!

 

 

배열 🔥

  • 자바스크립트의 배열은 자료구조의 배열과 같나요?
    • 아니오. 일반적인 배열은 각각의 요소가 동일한 데이터 크기를 가지며 연속적으로 이어져있다는 것이 특징입니다. 때문에 인덱스를 활용하여 효율적으로 임의접근이 가능하다는 장점이 있습니다.
    • 이에 비해 자바스크립트의 배열은 각 메모리 공간이 동일한 크기를 갖지도 않고, 연속적으로 이어져있지 않아도 된다는 `희소배열`의 특성을 가지고 있습니다. 쉽게 말하자면 `배열의 동작을 흉내낸 특수한 객체`라고 말할 수 있습니다.
  • 배열의 메서드는 어떤 종류가 있나요?
    • 결과물을 반환하는 패턴에 따라 두 가지로 구분할 수 있습니다. 원본배열을 직접 변경하는 메서드와 원본배열을 바탕으로 새로운 배열을 생성해 반환하는 메서드가 그 종류입니다.
  • 고차 함수에 대해서 아나요?
    • 고차 함수란, 전달 인자로 다른 함수를 받아오거나 함수의 실행 결과가 함수로 반환되는 함수를 이야기합니다.
  • forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?
    • forEach메서드는 콜백 함수를 인자로 받아 각 요소에 해당 함수를 실행합니다. 어떠한 값도 반환하지 않는 return 값이 undefined인 메서드인 것에 비해 map의 경우 콜백 함수를 인자로 받아 각 요소에 대해서 함수를 실행한 결과 값을 반환한다는 차이점이 있습니다.

'FE' 카테고리의 다른 글

[JS] 타입은 왜 중요한가 (feat. TypeScript의 필요성)  (0) 2022.06.22
[HTML] 다양한 접근성 속성  (0) 2022.03.18
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05
[JS스터디] 변수, 데이터 타입  (0) 2022.02.19
[HTML] Ejey Publishing Study1일차 리뷰  (0) 2022.01.08

 

프로젝트 준비로 한 주 건너뛴 할 수 있다! 자바스크립트 스터디 

지난주부터 실습을 나가느라 회사일 따라가기도 벅찼지만,

꾸준한 공부는 업무를 위해서도 필요하다고 여겨 

이번주는 딥다이브 9장과 10장의 내용을 읽고 개념을 정리했다!

 

 

타입 변환과 단축 평가🔥

  • 명시적 타입 변환이 뭔가요?
    • 개발자가 의도적으로 값의 타입을 정해 변환하는 것을 말합니다.
  • 명시적 타입 변환 함수를 예를 들어볼 수 있나요?
    • var a = (10).toString();
  • 암묵적 타입 변환이 뭔가요?
    • 자바스크립트 엔진이 표현식을 평가할 때 코드의 문맥에 맞게 데이터 타입을 변환하는 것을 말합니다.
  • truthy / falsy 한 값이 뭔가요?
    • 참과 거짓으로 명확하게 나누기 어려운 불리언 타입이 아닌 값을 암묵적으로 변환해야 할 때, 자바스크립트 엔진이 참으로 평가되는 값, 거짓으로 평가되는 값으로 판단하는 것을 이야기합니다.
    • falsy 값의 예로는 false, undefined, null, 0, -0, NaN, 빈 문자열이 있으며, 이것 외의 모든 값은 truthy값을 가집니다.

 

객체 리터럴

  • 자바스크립트에서 객체란 뭘까요?
    • 객체의 상태를 나타내는 프로퍼티와 이를 참조하고 조작하는 동작인 메서드로 구성된 집합체이며, 변경 가능한 값을 말합니다. 상태와 동작을 하나의 단위로 구조화 시킬 수 있다는 장점이 있습니다.
  • 함수와 메서드의 차이점에 대해 알고 계신가요?
    • 자바스크립트의 모든 함수는 객체이기 때문에, 값으로도 취급 가능합니다. 그래서 객체 안에 함수를 프로퍼티 값으로 활용하기도 하는데요. 이처럼 객체에 묶여있는 함수를 일반적인 함수와 구분하기 위하여 메서드라고 부릅니다.
  • 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

1. 중괄호 내에 0개 이상의 프로퍼티를 정의하는 객체 리터럴 방식

let a = { name: 'jang', age: 26 } 
console.log(a); // {name: 'jang', age: 26}

2. Object 생성자 함수를 사용하는 방식

let obj = new Object();

obj.name = 'jang';  // {name: 'jang'}
obj.age = 26;       // {age: 26}

console.log(obj);   // {name: 'jang', age: 26}

3. 생성자 함수를 사용하는 방식

function Person(name, age) {
	this.name = name;
	this.age = age;
}

const hs = new Person('jang', 26);
console.log(hs);  // Person {name: 'jang', age: 26}

4. Object.create 메서드를 사용하는 방식

const hs = Object.create(null, {
	name: {value: 'jang'},
	age: {value: 26}
});

console.log(hs);  // {name: 'jang', age: 26}

5. 클래스를 사용하는 방식 (ES6 이후 등장)

// class 선언 시 대문자로 시작
// class내에서 객체를 생성하고 초기화를 하기위해 단 하나의 constructor가 꼭 필요
// constructor은 자기를 생성한 부모를 가르킨다

class Intro {
	constructor(name, age){
		this.name = name;
		this.age = age;
	}
}

// 인스턴스 생성
const hs = new Intro('jang', 26);  

console.log(hs);    // Intro {name: 'jang', age: 26}

 

 

참조

객체(Object)와 객체를 생성하는 방법.

 

객체(Object)와 객체를 생성하는 방법.

객체(Object)란?  일반적인 상황에서 객체는 실제로 존재하는 사물과 그 각각 사물의 행동을 포함하는 개념이다. 자바스크립트에서는 여덟가지 자료형이 있는데, 일곱 개는 원시타입(문자열, 숫

pstudio411.tistory.com

[TIL] JS : 객체를 생성하는 4가지 방법

 

[TIL] JS : 객체를 생성하는 4가지 방법

다른 사람들의 수준은 어떨지 모르겠지만 저는 진짜 쪼렙이고요? 엊그제 수업하는데 JS에도 클래스가 있다는 거 처음 알아서(원초적인 C언어는 절차 지향이라 전에도 객체 지향을 공부해본 적이

velog.io

코딩교육 티씨피스쿨

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

코딩교육 티씨피스쿨

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'FE' 카테고리의 다른 글

[HTML] 다양한 접근성 속성  (0) 2022.03.18
[JS스터디] 27장 배열  (0) 2022.03.12
[JS스터디] 변수, 데이터 타입  (0) 2022.02.19
[HTML] Ejey Publishing Study1일차 리뷰  (0) 2022.01.08
[HTML] Ejey Publishing Study 0일차 리뷰  (0) 2022.01.08

 

팀프로젝트 마무리로 정신없이 1월을 보냈던 것 같은데, 벌써 과정이 끝난지 한달차에 가까워지고 있었다. 

몰입했던 멋사 과정도 마치고 잠깐의 휴식시간을 가졌으니 다시 공부를 시작할 때가 됐다고 생각했다.

그렇게 "할수있다! 자바스크립트" 스터디를 다시 시작하기로 했다.

 

 

책 한권을 빠른 시간 안에 습득하기로 했던 처음 목표와는 다르게 지금은 시간이 걸려도 개념을 놓치지 말고 가자는 쪽으로 의견이 모아졌다. 그래서 앞으로는 딥다이브 책의 한 부분을 골라 같이 보고, 공부해오기로 결정했다. 더불어 단순하게 발표하고 듣는 방식보다는 실질적으로 도움을 줄 수 있는 방향으로 스터디를 진행했으면 좋겠다는 의견이 있었다. 그래서 프론트엔드 기술면접 핸드북 에 나와있는 내용을 채워나가면서 공부하게끔 정했다.

 

이번주는 변수와 데이터 타입과 관련된 질문과 답변을 정리해보았다.

 

변수 🔥

  • 변수란 무엇인가?
    • 하나의 값을 저장하기 위한 메모리 공간이며 이를 식별하기 위해 이름을 붙인 것
  • 식별자란 무엇인가요? 🔥
    • 변수의 이름, 값을 구별할 수 있도록 하는 고유한 이름
  • 변수를 선언한다는 것은 어떤 것을 의미하나요?
    • 메모리 공간을 확보하고, 변수명과 확보된 공간의 주소를 연결하여 값을 저장할 수 있게 하는 것
  • var 키워드는 뭔가요?
    • 선언과 초기화 단계가 동시에 진행되는 변수 선언 명령어
  • 호이스팅이 뭔가요? 🔥🔥
    • 선언문 등이 하위에 위치해있더라도 상위로 끌어올려진 것처럼 동작하는 JS고유의 특징
  • var 키워드의 문제점은 무엇이 있나요? 🔥
    • 함수레벨 스코프를 지원하여 의도치 않은 전역변수 선언으로 인한 문제
  • let 키워드는 var 키워드와 어떤 점이 다른가요? 🔥🔥
    • 선언단계와 초기화 단계가 분리되어서 진행
  • TDZ 🔥🔥
    • Temporal Dead Zoned의 약어, 스코프의 시작 지점부터 초기화 시작 지점까지의 구간
  • const 키워드는 어떤 특징이 있나요? 🔥
    • 재할당과 재선언이 불가능
  • 식별자 네이밍 규칙은 어떤 것들이 있나요?
    1. 특수문자를 제외한 문자, 숫자, 언더바, 달러기호를 포함할 수 있다.
    2. 숫자로 시작할 수 없다.  
    3. 예약어를 식별자로 사용할 수 없다.
  • 네이밍 컨벤션은 어떤 것들이 있나요?
    • 카멜케이스(firstName), 스네이크케이스(first_name), 파스칼케이스(FirstName), 헝가리안케이스(strFirstName)
  • 리터럴이 뭔가요?
    • 사람이 이해할 수 있는 문자나 기호를 사용해 값을 생성하는 표기법

 

데이터 타입 🔥

  • 데이터 타입의 종류는 어떤 것들이 있나요? 🔥
    • 원시 타입(숫자, 문자열, 불리언, undefined, null, 심벌), 객체 타입(객체, 함수, 배열)
  • 심벌 타입은 뭐죠?
    • 변경 불가한 원시 타입의 값, 중복되지 않는 유일무이한 값이라 객체의 유일한 프로퍼티 키를 만들기 위해 사용
  • 데이터 타입은 왜 필요할까요? 🔥
    • 값의 생성 목적, 용도가 타입에 따라 다름
    • 이에 맞게 메모리 공간의 확보나 해석하는 방법 등이 달라지기 때문에 효율적인 사용을 위해 필요
  • 정적 타이핑이 뭔가요?
    • 변수를 선언할 때 할당 가능한 데이터 타입을 사전에 선언하는 방법, 명시적 타입선언
  • 동적 타이핑이 뭔가요?
    • 변수는 선언이 아닌 할당에 의해 타입이 결정되며, 재할당에 의해 언제든 타입이 변화할 수 있다는 특징

 

'FE' 카테고리의 다른 글

[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05
[HTML] Ejey Publishing Study1일차 리뷰  (0) 2022.01.08
[HTML] Ejey Publishing Study 0일차 리뷰  (0) 2022.01.08
[CSS] flex  (2) 2021.11.09

 

  1일차 스터디는 사전에 과제를 내주시고 작성해 온 코드를 리뷰하는 식으로 진행되었다. 중간에 헷갈리는 개념이나 잘못 이해하는 개념들을 잡아주시고 새로 설명해주시는 방식으로 스터디가 이뤄졌다. 

 

시간내서 이 부분은 다시 정리해놔야징 ( •̀ ω •́ )✧

<Label> 태그의 사용

 

block 요소와 inline 요소

 

시멘틱 태그

 

empty elements

'FE' 카테고리의 다른 글

[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05
[JS스터디] 변수, 데이터 타입  (0) 2022.02.19
[HTML] Ejey Publishing Study 0일차 리뷰  (0) 2022.01.08
[CSS] flex  (2) 2021.11.09

 

  지난 12월 30일부터 제주코딩베이스캠프 은정멘토님이 주관하는 퍼블리싱 스터디를 듣게 됐다.

멋사 FE 스쿨 과정에서 HTML, CSS 비중을 크게 두고 가르쳐주시긴 했지만, 실습으로 적용해 본 경험이 적어서 어떠한 홈페이지를 스스로 제작해낼 수 있을까에 대한 두려움이 컸었다. 다른 스터디들도 있었지만, 지금 내게 가장 필요한 것은 바로 퍼블리싱 능력이라고 생각되어 본 스터디를 지원했고, 합류하게 되었다. 

 

 

  비하인드 썰을 풀자면, 우리 멘토님은 간절하고 지금 본인에게 필요한 것이 무엇인지 명확하게 아는 사람이라면 스터디를 빨리 신청했을거라는 생각을 하셨다고 했다. 그래서 스터디 모집인원을 선착순으로 마감했다고 하셨다. 감사하게도 내가 그 마지막 문을 닫고 합류할 수 있었다. 

 

한 10분만에 마감되어버린 스터디

 

 

  선발된 뒤, 멘토님은 한 명 한 명에게 직접 전화를 주셔서 상담도 해주셨다. 그 내용을 간단히 정리하자면 아래와 같다.

 

  • 목표
    • 스스로 짠 코드가 맞는지 틀린지 or 효율적인지를 구분할 수 있도록
    • HTML과 CSS 기초 개념을 다시 잡고 가기
    • 동일한 사이트를 클론하면서 스스로 고민하고 코딩하게 하기
    • 혼공하다보면 우물 안 개구리가 되기 쉬운데, 그러면 안 됨 -> 그렇게 되지 않도록 다양한 코드 참고
    • 기술 스택: HTML + SASS + jQuery(반응형) + JS(모달창 등 인터렉티브 웹 구현 용)
  • 과제 할 때,
    • 사이트 하나를 주구장창 고민하며 짜는 것이 좋다.
    • 다른 사람 코드를 보며 좋은 점은 습득하고 배워갈 것

그러면서 퍼블에는 맞고 틀리다는 개념은 없고, 다르다는 개념만 있다고 조언해주셨다. 열린 마음으로 모두의 코드를 봐주시는 분이기 때문에 더 많은 점을 배워갈 수 있을거라는 기대감이 들었다. 멘토님은 다양한 강의경험도 있으시고 17년 동안 이 분야에서 버틴 분이기 때문에 수업에서 배운 이론적인 개념들외에 다른 지식도 많이 얻어갈 수 있을 것 같다.

 

'FE' 카테고리의 다른 글

[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05
[JS스터디] 변수, 데이터 타입  (0) 2022.02.19
[HTML] Ejey Publishing Study1일차 리뷰  (0) 2022.01.08
[CSS] flex  (2) 2021.11.09

 

flex의 개념

- 컨텐츠를 정렬, 공간의 구분을 위해 사용하는 속성의 집합

- 레이아웃을 다룰 때 한 번에 하나의 행이나 열만 다룰 수 있음 (1차원 레이아웃 모델)

 

flex의 특징

- display 속성 중 하나(flex, inline-flex)

- Block 레벨요소의 성질을 가짐

- 부모의 속성으로 자식을 컨트롤, but 강제하지는 않음

- 자신의 직계인 자식에게만 영향을 줌

 

flex의 속성

  •  flex-direction: 축의 위치 설정, axis를 기준으로 왼쪽에서 오른쪽으로 기본 정렬
    • row: 가로 정렬, 기본 정렬 방향
    • row-reverse: 123순으로 flex-end 부터 정렬, 결론) 321 순으로 보이게 됨
    • column: 세로 정렬(cross axis), 위에서부터 123순
    • column-reverse: 거꾸로 된 세로 정렬 위에서부터 321순
  • justify-content: 현재 정렬 방향을 기준으로 배열의 위치 조정 및 아이템간 간격 설정
    • flex-start
    • center
    • flew-end
    • space-between
      box 사이의 간격을 일정하게 조정
    • space-around
      box 주위를 동일한 여백이 감싸는 형태, 두 box가 겹치지 않고 여백이 각자 적용
    • space-evenly
      box 사이의 여백이 인접하든 안하든 관계없이 동일

 

  • align-items: cross axis 축을 기준으로 이동
    • stretch (기본값)
    • baseline
    • center
    • flex-start
    • flex-end
  • align-content: cross axis 축의 아이템이 여러줄일 경우 사용 가능
    • center
    • flex-start
    • flex-end
  • align-self: 하나의 item만 정렬할때 사용, 부모의 속성을 덮고 item 하나에게 개별적인 속성을 container에 부여
  • flex-wrap: 자식요소를 감싸는 기능, 자식의 크기를 강제로 조절하지 않음
    • wrap
    • nowrap
    • wrap-reverse
  • flex-basis: item의 크기 특정, 자식요소에 사용, width 값에 우선적용, 값이 존재하는 경우 기존의 width, height 무시
  • flex-grow: basis 값에서 더 커져도 되는지를 지정, 자식요소에 사용
    • 0 : basis의 크기만큼만 차지
    • 1 : 모두 동일한 크기의 공간 할당
    • 2 : 특정한 하나의 자식에게만 적용, 그 자식에게만 두배의 공간 할당
  • flex-shrink : basis 값에서 더 줄어들어도 되는지를 지정
    • 1 : 기본값
    • 0 : 컨테이너의 크기가 줄어도 값은 고정
  • order: item간의 우선순위 결정, 마크업상의 변화가 아닌 단순 위치상의 변화, 값이 해당 위치를 뜻하지 X, order 값을 부여받지 못한 애들은 그냥 자리를 지키고, ordering 된 애들끼리 그 뒤에서부터 order 순으로 재배치 됨

 

Reference

 

'FE' 카테고리의 다른 글

[JS스터디] 27장 배열  (0) 2022.03.12
[JS 스터디] 9장 타입 변환과 단축 평가, 10장 객체 리터럴  (0) 2022.03.05
[JS스터디] 변수, 데이터 타입  (0) 2022.02.19
[HTML] Ejey Publishing Study1일차 리뷰  (0) 2022.01.08
[HTML] Ejey Publishing Study 0일차 리뷰  (0) 2022.01.08

+ Recent posts

티스토리툴바